feat：接口联调
This commit is contained in:
+146
-151
@@ -106,6 +106,20 @@ const advantages = [
|
||||
}
|
||||
]
|
||||
|
||||
const introSequenceIcons = {
|
||||
'human-content': '/images/advantages/intro-human-content.png',
|
||||
'media-network': '/images/advantages/intro-media-network.png',
|
||||
'closed-loop': '/images/advantages/intro-closed-loop.png',
|
||||
'custom-service': '/images/advantages/intro-custom-service.png'
|
||||
}
|
||||
|
||||
const capabilityImages = {
|
||||
'human-content': '/images/advantages/capability-human-content.png',
|
||||
'media-network': '/images/advantages/capability-media-network.png',
|
||||
'closed-loop': '/images/advantages/capability-closed-loop.png',
|
||||
'custom-service': '/images/advantages/capability-custom-service.png'
|
||||
}
|
||||
|
||||
const comparisonRows = [
|
||||
['核心目标', '抢排名、买点击', '蹭热度、抓眼球', '让品牌在 AI 推荐中被选中'],
|
||||
['内容逻辑', '迎合搜索规则', '什么火就写什么', '真实可信，适配 AI 搜索与用户决策'],
|
||||
@@ -120,14 +134,14 @@ const valueAddedServices = [
|
||||
title: '创始人 / 企业 IP 打造',
|
||||
text: '结合品牌调性与创始人特质，搭建差异化人设定位、内容脚本体系与长期更新规划，形成高辨识度的专属 IP。',
|
||||
items: ['人设定位', '选题与脚本', '内容生产', '长期运营'],
|
||||
image: '/images/lanhu/slices/home-group96-image22@2x.png'
|
||||
image: '/images/advantages/founder-ip-visual.png'
|
||||
},
|
||||
{
|
||||
number: '02',
|
||||
title: '短视频与直播获客',
|
||||
text: '从短视频批量产出到直播间常态化运营，配置主播、运营、投流与中控团队，覆盖拍摄、剪辑、投放和转化。',
|
||||
items: ['短视频生产', '直播运营', '投流优化', '成交承接'],
|
||||
image: '/images/lanhu/slices/home-group97-image23@2x.png'
|
||||
image: '/images/advantages/short-video-live-visual.png'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -239,10 +253,19 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
</p>
|
||||
</header>
|
||||
<div class="intro-sequence">
|
||||
<article v-for="advantage in advantages" :key="`intro-${advantage.id}`">
|
||||
<article
|
||||
v-for="advantage in advantages"
|
||||
:key="`intro-${advantage.id}`"
|
||||
:class="`intro-card--${advantage.id}`"
|
||||
>
|
||||
<span>{{ advantage.number }}</span
|
||||
><strong>{{ advantage.short }}</strong>
|
||||
<p>{{ advantage.metric }}</p>
|
||||
<img
|
||||
class="intro-sequence-icon"
|
||||
:src="introSequenceIcons[advantage.id]"
|
||||
:alt="`${advantage.short}图标`"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
@@ -293,20 +316,10 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
<span>{{ advantage.short }}能力模型</span><small>YUNTU CAPABILITY MAP</small>
|
||||
</header>
|
||||
<div class="capability-map">
|
||||
<div class="capability-center">
|
||||
<small>{{ advantage.number }}</small
|
||||
><strong>{{ advantage.short }}</strong>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, itemIndex) in advantage.visual"
|
||||
:key="item"
|
||||
class="capability-node"
|
||||
:class="`capability-node-${itemIndex + 1}`"
|
||||
>
|
||||
<span>0{{ itemIndex + 1 }}</span
|
||||
><strong>{{ item }}</strong>
|
||||
</div>
|
||||
<i v-for="line in 4" :key="line" :class="`capability-line line-${line}`"></i>
|
||||
<img
|
||||
:src="capabilityImages[advantage.id]"
|
||||
:alt="`${advantage.short}核心能力图`"
|
||||
/>
|
||||
</div>
|
||||
<div class="capability-metric">
|
||||
<strong>{{ advantage.metric }}</strong
|
||||
@@ -777,8 +790,10 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
gap: 14px;
|
||||
}
|
||||
.intro-sequence article {
|
||||
position: relative;
|
||||
min-height: 165px;
|
||||
padding: 26px;
|
||||
overflow: hidden;
|
||||
padding: 26px 118px 26px 26px;
|
||||
border-radius: 14px 5px 14px 5px;
|
||||
background: #f2f7fd;
|
||||
transition: 0.24s;
|
||||
@@ -799,12 +814,58 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
font-size: 17px;
|
||||
}
|
||||
.intro-sequence p {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 7px 0 0;
|
||||
color: #277fec;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.intro-sequence span,
|
||||
.intro-sequence strong {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.intro-sequence-icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 12px;
|
||||
z-index: 1;
|
||||
width: 108px;
|
||||
max-height: 128px;
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
filter: drop-shadow(0 18px 26px rgba(40, 126, 235, 0.18));
|
||||
transition: transform 0.24s;
|
||||
}
|
||||
.intro-sequence article:hover .intro-sequence-icon {
|
||||
transform: translate3d(0, -4px, 0) scale(1.03);
|
||||
}
|
||||
.intro-card--human-content .intro-sequence-icon {
|
||||
right: 22px;
|
||||
bottom: 24px;
|
||||
width: 66px;
|
||||
max-height: 86px;
|
||||
}
|
||||
.intro-card--media-network .intro-sequence-icon {
|
||||
right: 16px;
|
||||
bottom: 18px;
|
||||
width: 106px;
|
||||
max-height: 112px;
|
||||
}
|
||||
.intro-card--closed-loop .intro-sequence-icon {
|
||||
right: 12px;
|
||||
bottom: 41x;
|
||||
width: 100px;
|
||||
max-height: 128px;
|
||||
}
|
||||
.intro-card--custom-service .intro-sequence-icon {
|
||||
right: 2px;
|
||||
bottom: -4px;
|
||||
width: 130px;
|
||||
max-height: 132px;
|
||||
}
|
||||
.advantage-story {
|
||||
scroll-margin-top: 80px;
|
||||
padding: 116px 0 132px;
|
||||
@@ -919,20 +980,25 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.story-action {
|
||||
display: inline-flex;
|
||||
min-width: 164px;
|
||||
min-height: 46px;
|
||||
margin-top: 24px;
|
||||
padding: 0 0 5px;
|
||||
border-bottom: 1px solid #8eb9e9;
|
||||
color: #247be8;
|
||||
background: transparent;
|
||||
padding: 0 26px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 9px;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.story-action b {
|
||||
margin-left: 8px;
|
||||
transition: margin 0.2s;
|
||||
.story-action :deep(.app-icon) {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.story-action:hover b {
|
||||
margin-left: 13px;
|
||||
.story-action:hover :deep(.app-icon) {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
.advantage-story-visual {
|
||||
position: relative;
|
||||
@@ -978,110 +1044,14 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
position: absolute;
|
||||
top: 52%;
|
||||
left: 50%;
|
||||
width: 410px;
|
||||
height: 360px;
|
||||
width: min(88%, 460px);
|
||||
height: 400px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.capability-map::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
content: '';
|
||||
border: 1px dashed rgba(55, 137, 232, 0.34);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.capability-center {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 142px;
|
||||
height: 142px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
justify-items: center;
|
||||
border: 11px solid rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg, #3185ee, #50bce7);
|
||||
box-shadow: 0 22px 42px rgba(36, 123, 225, 0.28);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.capability-center small {
|
||||
font-size: 9px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.capability-center strong {
|
||||
margin-top: 5px;
|
||||
font-size: 17px;
|
||||
}
|
||||
.capability-node {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
min-width: 110px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.92);
|
||||
border-radius: 7px;
|
||||
color: #4e7198;
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
box-shadow: 0 12px 25px rgba(54, 113, 185, 0.11);
|
||||
text-align: center;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.capability-node span {
|
||||
display: block;
|
||||
color: #91a9c3;
|
||||
font-size: 8px;
|
||||
}
|
||||
.capability-node strong {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.capability-node-1 {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.capability-node-2 {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.capability-node-3 {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.capability-node-4 {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.capability-line {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 135px;
|
||||
background: linear-gradient(#5aa1ed, transparent);
|
||||
transform-origin: top;
|
||||
}
|
||||
.line-1 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.line-2 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.line-3 {
|
||||
transform: rotate(0);
|
||||
}
|
||||
.line-4 {
|
||||
transform: rotate(-90deg);
|
||||
.capability-map img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.capability-metric {
|
||||
position: absolute;
|
||||
@@ -1140,7 +1110,7 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
font-size: 11px;
|
||||
}
|
||||
.comparison-table-wrap thead th:last-child {
|
||||
color: #fff;
|
||||
color: #fff !important;
|
||||
background: #3187ee;
|
||||
}
|
||||
.comparison-table-wrap thead span {
|
||||
@@ -1193,17 +1163,26 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
}
|
||||
.value-added-image {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
background: #e5f1ff;
|
||||
background:
|
||||
radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.86) 0, rgba(255, 255, 255, 0) 31%),
|
||||
radial-gradient(circle at 72% 32%, rgba(96, 207, 255, 0.36) 0, rgba(96, 207, 255, 0) 34%),
|
||||
linear-gradient(135deg, #edf7ff 0%, #d8efff 48%, #f2edff 100%);
|
||||
}
|
||||
.value-added-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(108%, 560px);
|
||||
height: min(92%, 370px);
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 24px 34px rgba(34, 122, 229, 0.18));
|
||||
}
|
||||
.value-added-image > span {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
display: grid;
|
||||
@@ -1327,10 +1306,13 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
url('/images/lanhu/slices/home-group105-image31@2x.png') center / cover no-repeat;
|
||||
}
|
||||
.advantages-cta-content {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
padding: 75px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.advantages-cta-content > p {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: #237df0;
|
||||
font-size: 12px;
|
||||
@@ -1442,6 +1424,31 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
}
|
||||
.intro-sequence article {
|
||||
min-height: 140px;
|
||||
padding-right: 118px;
|
||||
}
|
||||
.intro-sequence-icon {
|
||||
right: 14px;
|
||||
bottom: 10px;
|
||||
width: 96px;
|
||||
max-height: 106px;
|
||||
}
|
||||
.intro-card--human-content .intro-sequence-icon {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 68px;
|
||||
}
|
||||
.intro-card--media-network .intro-sequence-icon {
|
||||
right: 14px;
|
||||
bottom: 16px;
|
||||
width: 94px;
|
||||
max-height: 100px;
|
||||
}
|
||||
.intro-card--closed-loop .intro-sequence-icon,
|
||||
.intro-card--custom-service .intro-sequence-icon {
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 108px;
|
||||
max-height: 112px;
|
||||
}
|
||||
.advantage-story-copy h2 {
|
||||
font-size: 31px;
|
||||
@@ -1450,25 +1457,9 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
min-height: 430px;
|
||||
}
|
||||
.capability-map {
|
||||
width: 310px;
|
||||
width: min(92%, 320px);
|
||||
height: 280px;
|
||||
}
|
||||
.capability-map::before {
|
||||
width: 205px;
|
||||
height: 205px;
|
||||
}
|
||||
.capability-center {
|
||||
width: 105px;
|
||||
height: 105px;
|
||||
border-width: 8px;
|
||||
}
|
||||
.capability-node {
|
||||
min-width: 83px;
|
||||
padding: 9px;
|
||||
}
|
||||
.capability-line {
|
||||
height: 100px;
|
||||
}
|
||||
.capability-metric {
|
||||
right: 18px;
|
||||
bottom: 17px;
|
||||
@@ -1486,6 +1477,10 @@ onBeforeUnmount(() => animationContext?.revert())
|
||||
.value-added-image {
|
||||
min-height: 260px;
|
||||
}
|
||||
.value-added-image img {
|
||||
width: min(112%, 430px);
|
||||
height: 230px;
|
||||
}
|
||||
.value-added-copy {
|
||||
padding: 32px 23px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user