refactor(home): 优化首页组件文案和样式
- 更新 LaunchIntro、ModelCard、Models、Operating 和 Scene 组件的文案 -调整部分组件的样式,如图片宽度、标题间距等- 优化 Scene 组件中场景按钮的样式和布局
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 382 KiB |
@@ -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>
|
||||||
|
|||||||
@@ -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 "去查看";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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('问卷', '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user