refactor(home): 优化首页组件文案和样式

- 更新 LaunchIntro、ModelCard、Models、Operating 和 Scene 组件的文案
-调整部分组件的样式,如图片宽度、标题间距等- 优化 Scene 组件中场景按钮的样式和布局
This commit is contained in:
du.meimei
2025-05-29 15:02:53 +08:00
parent c72cd93e03
commit dca7b445fd
6 changed files with 23 additions and 11 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 382 KiB

View File

@@ -1,7 +1,7 @@
<template>
<div class="mt--20 text-center intro-container">
<p class="fw-bold fs-24 title">7.5亿+真实消费者资源打通客户端调研链路赋能原生场景敏捷洞察</p>
<img src="@/assets/img/home/intro.png" alt="" style="width: 60%">
<p class="fw-bold fs-24 title">直连消费者多触点打通原生场景</p>
<img src="@/assets/img/home/intro.png" alt="" style="width: 75%">
</div>
</template>
<script setup>

View File

@@ -11,7 +11,7 @@
<div
class="view-link"
@click="$emit('open')">
<span>{{ getText(index) }}</span>
<span>{{ getText(model,index) }}</span>
<img v-if="hoverIndex === index && index !== 2" src="@/assets/img/home/tob.png" alt="">
<img v-else src="@/assets/img/home/tow.png" alt="">
</div>
@@ -30,9 +30,9 @@ defineProps({
type: Number,
}
})
const getText = (index) => {
const getText = (model,index) => {
if (hoverIndex.value === index) {
return index === 2 ? "敬请期待" : "去查看";
return model.sort === 103 ? "敬请期待" : "去查看";
}
return "去查看";
}

View File

@@ -1,7 +1,7 @@
<template>
<div class="models-container">
<p class="fw-bold fs-24 text-center">
搭载多元专业分析模型深度解析数据内涵为洞察提供科学依据
搭载专业分析模型深度科学洞察
</p>
<div class="flex model" style="justify-content: center">
@@ -48,6 +48,7 @@ const handleCreateModule = async (item) => {
item.hasTitle = true
item.title+='问卷'
createRef.value.createNormalSurvey(item)
item.title = item.title.replace('问卷', '')
}
}
}

View File

@@ -2,7 +2,7 @@
<div class="operating-container">
<div class="top">
<p class="fw-bold fs-24 title">简单4步轻松完成你的调研</p>
<p class="desc">创建编辑投放分析让洞察更简单</p>
<!-- <p class="desc">创建编辑投放分析让洞察更简单</p>-->
</div>
<div style="height: 80%">
<div class="swiper-container" ref="swiperContainer">

View File

@@ -2,7 +2,7 @@
<div class="scene-container ">
<div class="flex">
<p></p>
<p class="fw-bold fs-24 align--center scene-title">从场景出发满足你的各类调研需求</p>
<p class="fw-bold fs-24 align--center scene-title" >从场景出发满足你的各类调研需求</p>
<p class="more" @click="toModels">更多模板></p>
</div>
@@ -27,9 +27,12 @@
</a-button>
<div v-else>
<a-button class="custom-button toCreate"
:class="{'createG':[0,1,2].includes(index)}" type="text">
:class="{'createG':[0,1,2].includes(index),
'create-normal':[11,13,15,16,17].includes(scene.code)}" type="text">
<span>去创建</span>
<img src="@/assets/img/home/tob.png" alt="" v-if="[0,1,2].includes(index)"/>
<!-- 'normal':[11,13,15,16,17].includes(scene.code)-->
<img src="@/assets/img/home/tob.png" alt=""
v-if="[0,1,2].includes(index) || [11,13,15,16,17].includes(scene.code)"/>
<img src="@/assets/img/home/tog.png" alt="" v-else/>
</a-button>
</div>
@@ -199,7 +202,8 @@ p{
text-align: center;
}
.scene-title{
margin: 32px 0 26px 0;
margin: 32px 0 26px 4vw;
}
.more{
color: #70B937;
@@ -248,6 +252,10 @@ p{
background-image: url("../../../assets/img/home/sceneBg.png");
background-size: 100% 100%;
}
.normal{
color:#ccc;
border: 1px solid red!important;
}
.createBtn{
background-image: url("../../../assets/img/home/createbtn.png");
background-size: 100% 100%;
@@ -267,6 +275,9 @@ p{
.createG{
color: #5562FB!important;
}
.create-normal{
color: #3171f3!important;
}
:deep(.ant-btn > span) {
font-size: 11px;
}