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

View File

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

View File

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

View File

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

View File

@@ -2,7 +2,7 @@
<div class="scene-container "> <div class="scene-container ">
<div class="flex"> <div class="flex">
<p></p> <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> <p class="more" @click="toModels">更多模板></p>
</div> </div>
@@ -27,9 +27,12 @@
</a-button> </a-button>
<div v-else> <div v-else>
<a-button class="custom-button toCreate" <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> <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/> <img src="@/assets/img/home/tog.png" alt="" v-else/>
</a-button> </a-button>
</div> </div>
@@ -199,7 +202,8 @@ p{
text-align: center; text-align: center;
} }
.scene-title{ .scene-title{
margin: 32px 0 26px 0; margin: 32px 0 26px 4vw;
} }
.more{ .more{
color: #70B937; color: #70B937;
@@ -248,6 +252,10 @@ p{
background-image: url("../../../assets/img/home/sceneBg.png"); background-image: url("../../../assets/img/home/sceneBg.png");
background-size: 100% 100%; background-size: 100% 100%;
} }
.normal{
color:#ccc;
border: 1px solid red!important;
}
.createBtn{ .createBtn{
background-image: url("../../../assets/img/home/createbtn.png"); background-image: url("../../../assets/img/home/createbtn.png");
background-size: 100% 100%; background-size: 100% 100%;
@@ -267,6 +275,9 @@ p{
.createG{ .createG{
color: #5562FB!important; color: #5562FB!important;
} }
.create-normal{
color: #3171f3!important;
}
:deep(.ant-btn > span) { :deep(.ant-btn > span) {
font-size: 11px; font-size: 11px;
} }