refactor(home): 重构首页组件
- 更新了首页的样式和布局 - 优化了代码结构，提高了可读性和可维护性 - 调整了生态系统服务的展示方式 - 移除了不必要的注释代码 -统一了样式单位，使用px代替其他单位
This commit is contained in:
陈昱达
BIN
src/assets/images/sunful/home-banner.png
Normal file
BIN
src/assets/images/sunful/home-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/assets/images/sunful/lu.png
Normal file
BIN
src/assets/images/sunful/lu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -3,7 +3,8 @@ import config from '@/config'
|
||||
|
||||
export default function getUrl(url, domainType = 'admin') {
|
||||
let domain = process.env.VUE_APP_ADMIN || ''
|
||||
return domain + url
|
||||
// return domain + url
|
||||
return 'https://ecotest.happyinsurance.com.cn:4443/api/' + url
|
||||
}
|
||||
|
||||
export function getParamsFromUrl(url) {
|
||||
|
||||
@@ -1,512 +1,529 @@
|
||||
<script>
|
||||
import { Image as VanImage, Icon, Dialog } from 'vant';
|
||||
import Swiper from './components/swiper/swiper.vue';
|
||||
import { Image as VanImage, Icon, Dialog } from 'vant'
|
||||
import Swiper from './components/swiper/swiper.vue'
|
||||
import { getEcosystem } from '@/assets/js/utils/ecosystem'
|
||||
import { fetchUserInfo } from '@/api/user/token'
|
||||
import { getParamsFromUrl } from '@/assets/js/utils/get-url'
|
||||
|
||||
export default {
|
||||
name: "home",
|
||||
components: {
|
||||
VanImage,
|
||||
VanIcon: Icon,
|
||||
SwiperBanner: Swiper
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bannerList: [
|
||||
{
|
||||
imgUrl: require("./img/swiper-image.svg")
|
||||
},
|
||||
{
|
||||
imgUrl: require("./img/swiper-image.svg")
|
||||
}
|
||||
],
|
||||
name: "",
|
||||
sex: "",
|
||||
type: "",
|
||||
permission: {
|
||||
goNext: true
|
||||
},
|
||||
titleSrc: require("@/assets/images/logo.png"),
|
||||
bannerSrc: "http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u44.svg",
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!Number(this.type)) return "欢迎使用幸福人寿生态系统！"
|
||||
return `亲爱的${this.name}${Number(this.sex) === 1 ? '女士' :
|
||||
Number(this.sex) === 0 ? '先生' : ''}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goEcosystem(ecosystem, swe) {
|
||||
this.permission.goNext && this.$router.push({
|
||||
name: 'service',
|
||||
params: {
|
||||
ecosystem: getEcosystem(ecosystem)
|
||||
},
|
||||
query: {
|
||||
swe: swe
|
||||
}
|
||||
})
|
||||
name: 'home',
|
||||
components: {
|
||||
VanImage,
|
||||
VanIcon: Icon,
|
||||
SwiperBanner: Swiper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bannerList: [
|
||||
{
|
||||
imgUrl: require('./img/swiper-image.svg'),
|
||||
},
|
||||
showErrorDialog(msg) {
|
||||
Dialog({
|
||||
message: msg,
|
||||
}).then(() => {
|
||||
this.$router.go(-1)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
const params = getParamsFromUrl(globalThis.location.href)
|
||||
const token = params.get('token')
|
||||
const stoken = globalThis.sessionStorage.getItem('token')
|
||||
if (token || stoken) {
|
||||
globalThis.sessionStorage.setItem('token', token || stoken)
|
||||
fetchUserInfo().then(res => {
|
||||
const { content } = res.content
|
||||
this.name = content.name
|
||||
this.sex = Number(content.sex)
|
||||
this.type = Number(content.type)
|
||||
}).catch(() => {
|
||||
this.showErrorDialog("您的登录已过期，请退出重试")
|
||||
})
|
||||
}
|
||||
else this.showErrorDialog("页面访问有误，请重试")
|
||||
{
|
||||
imgUrl: require('./img/swiper-image.svg'),
|
||||
},
|
||||
],
|
||||
name: '',
|
||||
sex: '',
|
||||
type: '',
|
||||
permission: {
|
||||
goNext: true,
|
||||
},
|
||||
titleSrc: require('@/assets/images/logo.png'),
|
||||
bannerSrc: 'http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u44.svg',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!Number(this.type)) return '亲爱的客户'
|
||||
return `亲爱的${this.name}${Number(this.sex) === 1 ? '女士' : Number(this.sex) === 0 ? '先生' : ''}`
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
goEcosystem(ecosystem, swe) {
|
||||
this.permission.goNext &&
|
||||
this.$router.push({
|
||||
name: 'service',
|
||||
params: {
|
||||
ecosystem: getEcosystem(ecosystem),
|
||||
},
|
||||
query: {
|
||||
swe: swe,
|
||||
},
|
||||
})
|
||||
},
|
||||
showErrorDialog(msg) {
|
||||
Dialog({
|
||||
message: msg,
|
||||
}).then(() => {
|
||||
this.$router.go(-1)
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const params = getParamsFromUrl(globalThis.location.href)
|
||||
const token = params.get('token')
|
||||
const stoken = globalThis.sessionStorage.getItem('token')
|
||||
if (token || stoken) {
|
||||
globalThis.sessionStorage.setItem('token', token || stoken)
|
||||
fetchUserInfo()
|
||||
.then((res) => {
|
||||
const { content } = res.content
|
||||
this.name = content.name
|
||||
this.sex = Number(content.sex)
|
||||
this.type = Number(content.type)
|
||||
})
|
||||
.catch(() => {
|
||||
this.showErrorDialog('您的登录已过期，请退出重试')
|
||||
})
|
||||
} else this.showErrorDialog('页面访问有误，请重试')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="home-container">
|
||||
<div class="nav">
|
||||
<!-- <img src="../../assets/images/sunful/sunful-bg.svg" alt=""> -->
|
||||
<!-- 标题提示语部分 -->
|
||||
<section class="title">
|
||||
<!-- <img width="78px" :src="titleSrc" /> -->
|
||||
<h2> <span>您好~</span>{{ title }}</h2>
|
||||
</section>
|
||||
</div>
|
||||
<section class="home-container">
|
||||
<div class="nav">
|
||||
<img src="../../assets/images/sunful/home-banner.png" alt="" />
|
||||
<img src="../../assets/images/sunful/lu.png" alt="" class="lu" />
|
||||
<!-- 标题提示语部分 -->
|
||||
<section class="title">
|
||||
<!-- <img width="78px" :src="titleSrc" /> -->
|
||||
<h2><span>您好~</span>{{ title }}</h2>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div>
|
||||
<!-- 服务提示语部分 -->
|
||||
<!-- <section class="tips"> -->
|
||||
<!-- 消息提醒图标 -->
|
||||
<!-- <img :src="require('@/assets/images/sunful/msg.svg')" /> -->
|
||||
<!-- <p>服务项目及费用仅供参考，具体以供应商实际提供为准。</p> -->
|
||||
<!-- <button>点击了解</button> -->
|
||||
<!-- </section> -->
|
||||
<div class="content">
|
||||
<div>
|
||||
<!-- 服务提示语部分 -->
|
||||
<!-- <section class="tips"> -->
|
||||
<!-- 消息提醒图标 -->
|
||||
<!-- <img :src="require('@/assets/images/sunful/msg.svg')" /> -->
|
||||
<!-- <p>服务项目及费用仅供参考，具体以供应商实际提供为准。</p> -->
|
||||
<!-- <button>点击了解</button> -->
|
||||
<!-- </section> -->
|
||||
|
||||
<!-- 服务提示语部分 -->
|
||||
<section class="tips">
|
||||
<van-icon name="info-o" />
|
||||
<div class="text">服务项目及费用仅供参考，具体以供应商实际提供为准。</div>
|
||||
</section>
|
||||
<!-- banner图 -->
|
||||
<img src="@/assets/images/sunful/banner.webp" alt="">
|
||||
<!-- 服务提示语部分 -->
|
||||
<!-- <section class="tips">-->
|
||||
<!-- <van-icon name="info-o" />-->
|
||||
<!-- <div class="text">服务项目及费用仅供参考，具体以供应商实际提供为准。</div>-->
|
||||
<!-- </section>-->
|
||||
<!-- banner图 -->
|
||||
<img src="@/assets/images/sunful/banner.webp" alt="" style="width: 100%" />
|
||||
|
||||
<!-- 生态系统部分 -->
|
||||
<section class="ecosystem">
|
||||
<div>
|
||||
<h3>
|
||||
<img :src="require('@/assets/images/sunful/sunful-eco.svg')" alt="生态服务">
|
||||
<div>生态服务</div>
|
||||
</h3>
|
||||
<!-- 生态系统部分 -->
|
||||
<section class="ecosystem">
|
||||
<div>
|
||||
<h3>
|
||||
<img :src="require('@/assets/images/sunful/sunful-eco.svg')" alt="生态服务" />
|
||||
<div>生态服务</div>
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="flex service-row">
|
||||
<div class="service-item old">
|
||||
<div>
|
||||
<h4>养老服务</h4>
|
||||
<p>暖心相伴</p>
|
||||
<p>颐养天年</p>
|
||||
</div>
|
||||
<button class="go-btn" @click="goEcosystem(28)">去看看</button>
|
||||
</div>
|
||||
<div class="service-item life">
|
||||
<div>
|
||||
<!-- <h4>生活娱乐</h4>-->
|
||||
<h4>健康管理</h4>
|
||||
<p>专业保障</p>
|
||||
<p>健康无忧</p>
|
||||
<!-- <p>丰富体验</p>-->
|
||||
<!-- <p>乐享时光</p>-->
|
||||
</div>
|
||||
<button class="go-btn" @click="goEcosystem(1,true)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='ecosy-container pt10 flex'>
|
||||
<div class='health'>
|
||||
<div class='health-box'>
|
||||
<h4 class='mt85'>子女教育</h4>
|
||||
<p>智慧规划，全程守护
|
||||
</p>
|
||||
<button class="go-btn" @click="goEcosystem(38)">去看看</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class='text-left'>
|
||||
<div class='children text-left'>
|
||||
<div class="box text-left">
|
||||
<h4>财富管理</h4>
|
||||
<p>稳健增值，从容人生</p>
|
||||
<button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class='wealth mt10'>
|
||||
<div class='box'>
|
||||
<h4>生活娱乐</h4>
|
||||
<p>丰富体验，乐享时光</p>
|
||||
<button class="go-btn-v" @click="goEcosystem(55)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
<div class="flex service-row">
|
||||
<div class="service-item old">
|
||||
<div>
|
||||
<h4>养老服务</h4>
|
||||
<p>暖心相伴</p>
|
||||
<p>颐养天年</p>
|
||||
</div>
|
||||
<button class="go-btn" @click="goEcosystem(28)">去看看</button>
|
||||
</div>
|
||||
<div class="service-item life">
|
||||
<div>
|
||||
<!-- <h4>生活娱乐</h4>-->
|
||||
<h4>健康管理</h4>
|
||||
<p>专业保障</p>
|
||||
<p>健康无忧</p>
|
||||
<!-- <p>丰富体验</p>-->
|
||||
<!-- <p>乐享时光</p>-->
|
||||
</div>
|
||||
<button class="go-btn" @click="goEcosystem(1, true)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="ecosy-container pt10 flex">
|
||||
<div class="health">
|
||||
<div class="health-box">
|
||||
<h4 class="mt85">子女教育</h4>
|
||||
<p>智慧规划，全程守护</p>
|
||||
<button class="go-btn" @click="goEcosystem(38)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<div class="children text-left">
|
||||
<div class="box text-left">
|
||||
<h4>财富管理</h4>
|
||||
<p>稳健增值，从容人生</p>
|
||||
<button class="go-btn-v" @click="goEcosystem(48)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wealth mt10">
|
||||
<div class="box">
|
||||
<h4>生活娱乐</h4>
|
||||
<p>丰富体验，乐享时光</p>
|
||||
<button class="go-btn-v" @click="goEcosystem(55)">去看看</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$inset-padding: 17px;
|
||||
$bg-color: #f5f5f5;
|
||||
|
||||
|
||||
.home-container {
|
||||
position: relative;
|
||||
|
||||
.nav {
|
||||
position: relative;
|
||||
|
||||
.nav {
|
||||
position: relative;
|
||||
z-index: 1; // 最底层
|
||||
background-image: url("../../assets/images/sunful/sunful-bg.png");
|
||||
background-size: 100%;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
padding: $inset-padding;
|
||||
|
||||
h2 {
|
||||
margin: 52px 0 60px 7px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
z-index: 1; // 最底层
|
||||
//background-image: url('../../assets/images/sunful/home-banner.png');
|
||||
//background-size: 100%;
|
||||
//background-position: center top;
|
||||
//background-repeat: no-repeat;
|
||||
//
|
||||
//padding: $inset-padding;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: $bg-color;
|
||||
position: absolute;
|
||||
top: 132px;
|
||||
left: 0;
|
||||
z-index: 3; // 最顶层
|
||||
.lu {
|
||||
width: 99px;
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
top: 42px;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
|
||||
top: 86px;
|
||||
left: 15px;
|
||||
h2 {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 17px;
|
||||
width: 210px;
|
||||
color: #000000;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: $bg-color;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 15px 0;
|
||||
margin-top: -10px;
|
||||
|
||||
background: linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 100%);
|
||||
border-radius: 13px;
|
||||
outline: 2px solid #ffffff;
|
||||
border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
|
||||
//position: absolute;
|
||||
//top: 132px;
|
||||
//left: 0;
|
||||
//z-index: 3; // 最顶层
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 0 20px 0;
|
||||
width: 100vw;
|
||||
border-radius: 12px;
|
||||
padding: 0 0 20px 0;
|
||||
width: 100vw;
|
||||
border-radius: 12px;
|
||||
|
||||
&>div {
|
||||
position: relative;
|
||||
top: -19px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
& > div {
|
||||
position: relative;
|
||||
//top: -19px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 0 0 10px 0;
|
||||
border-radius: 11px;
|
||||
padding: 13px 11px 15px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
margin: 0 0 10px 0;
|
||||
border-radius: 11px;
|
||||
padding: 13px 11px 15px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
|
||||
&+img {
|
||||
width: 100%;
|
||||
}
|
||||
& + img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&>img {
|
||||
width: 51px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
& > img {
|
||||
width: 51px;
|
||||
height: 14px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&>p {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #6B6B6B;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
& > p {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #6b6b6b;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&>button {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 6px 9px;
|
||||
height: 26px;
|
||||
width: 58px;
|
||||
border-radius: 6px;
|
||||
& > button {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 6px 9px;
|
||||
height: 26px;
|
||||
width: 58px;
|
||||
border-radius: 6px;
|
||||
|
||||
background-image: url("../../assets/images/sunful/bt-bg.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../../assets/images/sunful/bt-bg.svg');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(142, 80, 33, 1);
|
||||
font-size: 10px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 14px;
|
||||
}
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(142, 80, 33, 1);
|
||||
font-size: 10px;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 3%;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #6B6B6B;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
.text {
|
||||
margin-left: 3%;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #6b6b6b;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ecosystem {
|
||||
margin: 14px 0;
|
||||
margin: 14px 0;
|
||||
|
||||
h3 {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
h3 {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #CA2736;
|
||||
color: #fff;
|
||||
border-radius: 13px;
|
||||
border: none;
|
||||
padding: 5px 8px;
|
||||
//margin-bottom: 19px;
|
||||
button {
|
||||
background-color: #ca2736;
|
||||
color: #fff;
|
||||
border-radius: 13px;
|
||||
border: none;
|
||||
padding: 5px 8px;
|
||||
//margin-bottom: 19px;
|
||||
|
||||
font-family: PingFangSC;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
font-family: PingFangSC;
|
||||
font-size: 11px;
|
||||
color: #ffffff;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
h4 {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
//margin-top: 10px;
|
||||
//margin-bottom: 19px;
|
||||
p {
|
||||
//margin-top: 10px;
|
||||
//margin-bottom: 19px;
|
||||
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #A1A1A1;
|
||||
line-height: 10px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #a1a1a1;
|
||||
line-height: 10px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
align-items: stretch;
|
||||
//gap: 10px 5px;
|
||||
grid-template-areas:
|
||||
"a a a b b b b b"
|
||||
"a a a c c c c c"
|
||||
"d d d d e e e e";
|
||||
display: grid;
|
||||
align-items: stretch;
|
||||
//gap: 10px 5px;
|
||||
grid-template-areas:
|
||||
'a a a b b b b b'
|
||||
'a a a c c c c c'
|
||||
'd d d d e e e e';
|
||||
|
||||
//.service-item {
|
||||
// &:nth-of-type(1) {
|
||||
// grid-area: a;
|
||||
// }
|
||||
//
|
||||
// &:nth-of-type(2) {
|
||||
// grid-area: b;
|
||||
// }
|
||||
//
|
||||
// &:nth-of-type(3) {
|
||||
// grid-area: c;
|
||||
// }
|
||||
//
|
||||
// &:nth-of-type(4) {
|
||||
// grid-area: d;
|
||||
// }
|
||||
//
|
||||
// &:nth-of-type(5) {
|
||||
// grid-area: e;
|
||||
// }
|
||||
//}
|
||||
//.service-item {
|
||||
// &:nth-of-type(1) {
|
||||
// grid-area: a;
|
||||
// }
|
||||
//
|
||||
// &:nth-of-type(2) {
|
||||
// grid-area: b;
|
||||
// }
|
||||
//
|
||||
// &:nth-of-type(3) {
|
||||
// grid-area: c;
|
||||
// }
|
||||
//
|
||||
// &:nth-of-type(4) {
|
||||
// grid-area: d;
|
||||
// }
|
||||
//
|
||||
// &:nth-of-type(5) {
|
||||
// grid-area: e;
|
||||
// }
|
||||
//}
|
||||
}
|
||||
|
||||
.health {
|
||||
// border-radius: 15px;
|
||||
// border-right: 2px solid #fce4e4;
|
||||
// // border-bottom: 2px solid #fce4e4;
|
||||
.health {
|
||||
// border-radius: 15px;
|
||||
// border-right: 2px solid #fce4e4;
|
||||
// // border-bottom: 2px solid #fce4e4;
|
||||
|
||||
background-image: url("../../assets/images/sunful/book.svg");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
|
||||
//padding: 86px 0 0 11px;
|
||||
width:133px;
|
||||
margin-right: 10px;
|
||||
margin-left: 1px;
|
||||
background-image: url('../../assets/images/sunful/book.svg');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
|
||||
//padding: 86px 0 0 11px;
|
||||
width: 133px;
|
||||
margin-right: 10px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
.health-box{
|
||||
.health-box {
|
||||
margin-top: 85px;
|
||||
margin-left: 18px;
|
||||
|
||||
p{
|
||||
p {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.children,
|
||||
.wealth {
|
||||
background-image: url("../../assets/images/sunful/hat.webp");
|
||||
background-size:contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
background-image: url('../../assets/images/sunful/hat.webp');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
//padding: 18px 0 0 77px;
|
||||
width: 211px;
|
||||
min-height: 85px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: flex-start;
|
||||
//padding: 18px 0 0 77px;
|
||||
width: 211px;
|
||||
min-height: 85px;
|
||||
|
||||
|
||||
.box{
|
||||
.box {
|
||||
margin-top: 17px;
|
||||
margin-left: 76px;
|
||||
p{
|
||||
margin: 7px 0 7px 0 ;
|
||||
p {
|
||||
margin: 7px 0 7px 0;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
text-align: left;
|
||||
}
|
||||
h4 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
p {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #D8AF70;
|
||||
background: transparent;
|
||||
border: 1px solid #D8AF70;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
button {
|
||||
color: #d8af70;
|
||||
background: transparent;
|
||||
border: 1px solid #d8af70;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.wealth {
|
||||
//transform: translateY(-18px);
|
||||
//transform: translateY(-18px);
|
||||
|
||||
background-image: url("../../assets/images/sunful/treasure.webp");
|
||||
background-image: url('../../assets/images/sunful/treasure.webp');
|
||||
|
||||
p {}
|
||||
p {
|
||||
}
|
||||
|
||||
button {}
|
||||
button {
|
||||
}
|
||||
}
|
||||
|
||||
.old,
|
||||
.life {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left top;
|
||||
|
||||
padding: 21px 0 24px 15px;
|
||||
width: 175px;
|
||||
padding: 21px 0 24px 15px;
|
||||
width: 175px;
|
||||
//min-height: 157px;
|
||||
//padding-bottom: 20px;
|
||||
|
||||
p {
|
||||
//margin-bottom: 46px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
p {
|
||||
//margin-bottom: 46px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 30px;
|
||||
}
|
||||
button {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.old {
|
||||
background-image: url("../../assets/images/sunful/old.webp");
|
||||
background-image: url('../../assets/images/sunful/old.webp');
|
||||
|
||||
button {
|
||||
background-color: #D8AF70;
|
||||
}
|
||||
button {
|
||||
background-color: #d8af70;
|
||||
}
|
||||
}
|
||||
|
||||
.life {
|
||||
background-image: url("../../assets/images/sunful/card.webp");
|
||||
background-image: url('../../assets/images/sunful/card.webp');
|
||||
|
||||
p {}
|
||||
p {
|
||||
}
|
||||
|
||||
button {}
|
||||
button {
|
||||
}
|
||||
}
|
||||
|
||||
.flex {
|
||||
&.flex-column {
|
||||
flex-flow: column nowrap;
|
||||
width: 65%;
|
||||
gap: 4vw;
|
||||
}
|
||||
&.flex-column {
|
||||
flex-flow: column nowrap;
|
||||
width: 65%;
|
||||
gap: 4vw;
|
||||
}
|
||||
|
||||
&.service-row {
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.service-row {
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,580 +1,212 @@
|
||||
<template>
|
||||
<div id="selectPreservation">
|
||||
<img :src="require('@/assets/images/sunful/page-banner.png')" alt="">
|
||||
<div class="tlf" style="position: relative; z-index: 1;">
|
||||
<div style="padding: 13px 12px">
|
||||
<van-search v-model="searchParams" placeholder="输入服务名称" show-action @clear="handleClear"
|
||||
background="rgba(255, 255, 255, .67)">
|
||||
<template #action>
|
||||
<div style="display: flex; align-items: center;;">
|
||||
<div class="line"></div>
|
||||
<div slot="action" @click="onSearch('0')" class="reddish">搜索</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-search>
|
||||
</div>
|
||||
</div>
|
||||
<div class="commodity">
|
||||
<!-- 左侧导航内容 -->
|
||||
<div class="leftNav">
|
||||
<ul>
|
||||
<li v-for="(item, index) in shopList" :key="index" :class="{ typeStyle: index === currentIndex }"
|
||||
@click="onClickNav(index)">
|
||||
<span class="leftTit">
|
||||
{{ singleWordMenu ? ` ${item.menuName[0]} ` : item.menuName }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 右侧商品内容 -->
|
||||
<div class="rightContent">
|
||||
<ul ref="shopContent">
|
||||
<li class="eventList" v-for="(item, index) in shopList" :key="index">
|
||||
<div class="rightTtitle">
|
||||
{{ item.menuName }}
|
||||
</div>
|
||||
<ul>
|
||||
<li class="gather" v-for="(subItem, index) in item.children" :key="index"
|
||||
@click="goList(item, subItem)">
|
||||
<img :src="subItem.img" />
|
||||
<div class="distance">
|
||||
<div class="shopName text-center">{{ subItem.menuName }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<div style="height: 1px"></div>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="selectPreservation">
|
||||
<div class="title">
|
||||
{{ title }}
|
||||
</div>
|
||||
|
||||
<div class="commodity">
|
||||
<ul ref="shopContent">
|
||||
<li class="eventList" v-for="(item, index) in shopList" :key="index">
|
||||
<div class="list-title">
|
||||
{{ item.menuName }}
|
||||
</div>
|
||||
<ul>
|
||||
<li class="gather" v-for="(subItem, index) in item.children" :key="index" @click="goList(item, subItem)">
|
||||
<img :src="subItem.img" />
|
||||
<div class="distance">
|
||||
<div class="shopName text-center">{{ subItem.menuName }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<div style="height: 1px"></div>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popup, Search } from 'vant'
|
||||
import BScroll from 'better-scroll'
|
||||
import { shopList } from '@/views/service/js/mock/shop-list'
|
||||
import { fetchServiceList } from "@/api/service-list"
|
||||
import { fetchServiceList } from '@/api/service-list'
|
||||
import { getEcosystemByValue } from '@/assets/js/utils/ecosystem'
|
||||
import { ecosystem } from './js/status'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Popup.name]: Popup,
|
||||
[Search.name]: Search,
|
||||
},
|
||||
props: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
singleWordMenu: this.$route.query.swe,
|
||||
shopList: [],
|
||||
searchParams: '',
|
||||
imgUrls: {
|
||||
// 无数据
|
||||
noData: 'http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/健康管理/u102.png',
|
||||
},
|
||||
userInfo: {},
|
||||
InterUrl: '',
|
||||
serviceType: '',
|
||||
scrollY: 0, // 右侧滑动的时候距离顶部的值
|
||||
rightSide: [], // 所有右侧分类li的top组成的数组 (列表第一次显示后就不再变化)
|
||||
//模拟的商品数据
|
||||
isclick: false,
|
||||
selectId: '',
|
||||
}
|
||||
},
|
||||
//计算属性
|
||||
computed: {
|
||||
// 计算出当前分类的下标
|
||||
currentIndex() {
|
||||
const { scrollY, rightSide } = this //拿到每次滑动的值以及每一个分类的下标值
|
||||
// console.log(scrollY, rightSide)
|
||||
if (this.isclick) {
|
||||
return this.selectId
|
||||
}
|
||||
// console.log('滚动的值及每一个分类的下标值...', this)
|
||||
//findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
|
||||
//获取数组rightSide中每一个下标值并筛选条件返回第一个元素索引位置
|
||||
const index = rightSide.findIndex((top, index) => {
|
||||
// scrollY>=当前top && scrollY<下一个top
|
||||
// console.log(scrollY, top, rightSide[index + 1], scrollY >= top, scrollY < rightSide[index + 1], '------')
|
||||
|
||||
return scrollY >= top && scrollY < rightSide[index + 1]
|
||||
})
|
||||
// console.log(index, 'index')
|
||||
|
||||
// 返回结果
|
||||
return index
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
// 获取 list 内容
|
||||
fetchServiceList({ menuCode: getEcosystemByValue(this.$route.params.ecosystem) }).then(res => {
|
||||
this.shopList = this.setDeepPath(res.content.content[0].children)
|
||||
// 在数据加载完成后，等待DOM更新后再初始化滚动
|
||||
this.$nextTick(() => {
|
||||
this.initializeRoll()
|
||||
this.initializeOwn()
|
||||
})
|
||||
})
|
||||
// 进入保全项清空一下相关保存的信息
|
||||
window.sessionStorage.removeItem('paymentDTO') // 删除暂存的银行信息
|
||||
window.sessionStorage.removeItem('temporaryDetail') // 删除补发保单暂存的数据/追加投资暂存数据
|
||||
window.sessionStorage.removeItem('bussInfoVO') // 删除电子发票暂存的列表信息(电子发票申请接口需要)
|
||||
window.sessionStorage.removeItem('selectedTab')
|
||||
if (this.$route.query.shareUrlId) {
|
||||
sessionStorage.setItem('shareUrlId', this.$route.query.shareUrlId)
|
||||
}
|
||||
if (localStorage.token) {
|
||||
this.getUser()
|
||||
}
|
||||
this.getInterUrl()
|
||||
},
|
||||
mounted() {
|
||||
//页面激活时触发
|
||||
// this.$mm.pages.current.rect()
|
||||
//this.getUser()
|
||||
//this.getInterUrl()
|
||||
// 滚动初始化已移到数据加载完成后执行
|
||||
},
|
||||
|
||||
methods: {
|
||||
setDeepPath(list){
|
||||
return list.map(item=>{
|
||||
if(item.children && item.children.length>0){
|
||||
this.setDeepPath(item.children)
|
||||
return {
|
||||
...item,
|
||||
children: this.setDeepPath(item.children),
|
||||
}
|
||||
}else {
|
||||
return {
|
||||
...item,
|
||||
img: this.getImgPath(item.img),
|
||||
pic: this.getImgPath(item.pic),
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getImgPath(imgPath){
|
||||
let path = location.origin
|
||||
if(path.indexOf('localhost')!==-1){
|
||||
path = 'https://ecotest.happyinsurance.com.cn:4443/'
|
||||
}
|
||||
return path + '/weixin/icons/'+imgPath
|
||||
components: {
|
||||
[Popup.name]: Popup,
|
||||
[Search.name]: Search,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
singleWordMenu: this.$route.query.swe,
|
||||
shopList: [],
|
||||
title: '',
|
||||
searchParams: '',
|
||||
imgUrls: {
|
||||
// 无数据
|
||||
noData: 'http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/健康管理/u102.png',
|
||||
},
|
||||
userInfo: {},
|
||||
InterUrl: '',
|
||||
serviceType: '',
|
||||
scrollY: 0, // 右侧滑动的时候距离顶部的值
|
||||
rightSide: [], // 所有右侧分类li的top组成的数组 (列表第一次显示后就不再变化)
|
||||
//模拟的商品数据
|
||||
isclick: false,
|
||||
selectId: '',
|
||||
}
|
||||
},
|
||||
//计算属性
|
||||
computed: {
|
||||
// 计算出当前分类的下标
|
||||
currentIndex() {
|
||||
const { scrollY, rightSide } = this //拿到每次滑动的值以及每一个分类的下标值
|
||||
// console.log(scrollY, rightSide)
|
||||
if (this.isclick) {
|
||||
return this.selectId
|
||||
}
|
||||
// console.log('滚动的值及每一个分类的下标值...', this)
|
||||
//findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
|
||||
//获取数组rightSide中每一个下标值并筛选条件返回第一个元素索引位置
|
||||
const index = rightSide.findIndex((top, index) => {
|
||||
// scrollY>=当前top && scrollY<下一个top
|
||||
// console.log(scrollY, top, rightSide[index + 1], scrollY >= top, scrollY < rightSide[index + 1], '------')
|
||||
|
||||
onSearch(type) {
|
||||
if ((type == '0' || type == '1') && !this.searchParams) {
|
||||
this.handleClear() // 修正方法名为handleClear
|
||||
return
|
||||
}
|
||||
return scrollY >= top && scrollY < rightSide[index + 1]
|
||||
})
|
||||
// console.log(index, 'index')
|
||||
|
||||
// 遍历所有菜单项
|
||||
for (let i = 0; i < this.shopList.length; i++) {
|
||||
const item = this.shopList[i]
|
||||
// 确保item.children存在
|
||||
if (!item.children || !Array.isArray(item.children)) {
|
||||
continue
|
||||
}
|
||||
|
||||
// 遍历子菜单
|
||||
for (let j = 0; j < item.children.length; j++) {
|
||||
const ele = item.children[j]
|
||||
|
||||
// 搜索关键字
|
||||
if (type == '0' || type == '1') {
|
||||
// 使用menuName代替text，确保menuName存在
|
||||
if (ele.menuName && ele.menuName.includes(this.searchParams)) {
|
||||
this.onClickNav(i) // 使用当前索引i，而不是item.id
|
||||
console.log('找到匹配项：', ele.menuName)
|
||||
return // 找到匹配后立即返回，停止搜索
|
||||
}
|
||||
}
|
||||
// 按类型搜索
|
||||
else if (type == '2' && this.serviceType) {
|
||||
console.log('按类型搜索:', ele.type, this.serviceType)
|
||||
|
||||
if (ele.type == this.serviceType) {
|
||||
this.onClickNav(i) // 使用当前索引i
|
||||
console.log('找到匹配类型：', ele.type)
|
||||
return // 找到匹配后立即返回，停止搜索
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 如果没有找到匹配项
|
||||
console.log('没有找到匹配项')
|
||||
},
|
||||
handleClear() {
|
||||
// 清除搜索并返回到第一个分类
|
||||
this.searchParams = ''
|
||||
this.onClickNav(0) // 直接使用0，不需要Number转换
|
||||
},
|
||||
getUser() {
|
||||
|
||||
},
|
||||
// 获取智能客服跳转地址
|
||||
getInterUrl() {
|
||||
},
|
||||
goList(item, subItem) {
|
||||
// 注册进
|
||||
ecosystem.active = subItem
|
||||
ecosystem.services = item
|
||||
console.warn(this.$route);
|
||||
this.$router.push({
|
||||
name: 'service-info',
|
||||
params: {
|
||||
ecosystem: this.$route.params.ecosystem,
|
||||
position: item.children.findIndex(item => item.id == subItem.id) + 1
|
||||
}
|
||||
})
|
||||
},
|
||||
// 初始化滚动
|
||||
initializeRoll() {
|
||||
// 检查DOM元素是否存在
|
||||
const leftNavEl = document.querySelector('.leftNav')
|
||||
const rightContentEl = document.querySelector('.rightContent')
|
||||
|
||||
if (!leftNavEl || !rightContentEl) {
|
||||
console.error('滚动容器元素未找到')
|
||||
return
|
||||
}
|
||||
|
||||
// 销毁已存在的实例以防止重复创建
|
||||
if (this.leftScroll) {
|
||||
this.leftScroll.destroy()
|
||||
}
|
||||
if (this.foodsScroll) {
|
||||
this.foodsScroll.destroy()
|
||||
}
|
||||
|
||||
// new一个类的实例，前提必须确保父元素和子元素的内容已经正确渲染了，不然不会生效
|
||||
this.leftScroll = new BScroll('.leftNav', {
|
||||
click: true,
|
||||
scrollY: true,
|
||||
mouseWheel: true
|
||||
})
|
||||
|
||||
// 组件实例上挂属性
|
||||
this.foodsScroll = new BScroll('.rightContent', {
|
||||
scrollY: true,
|
||||
probeType: 3, // 因为惯性滑动不会触发
|
||||
click: true,
|
||||
mouseWheel: true
|
||||
})
|
||||
|
||||
// 给右侧列表绑定scroll监听
|
||||
this.foodsScroll.on('scroll', ({ x, y }) => {
|
||||
this.scrollY = Math.abs(y)
|
||||
})
|
||||
// 给右侧列表绑定scroll结束的监听
|
||||
this.foodsScroll.on('scrollEnd', ({ x, y }) => {
|
||||
// console.log('操作结束的下标值' + x, y)
|
||||
// this.scrollY = Math.abs(y)
|
||||
this.isclick = false
|
||||
})
|
||||
},
|
||||
// 初始化rightSide
|
||||
initializeOwn() {
|
||||
// 检查DOM元素是否存在
|
||||
if (!this.$refs.shopContent) {
|
||||
console.error('shopContent ref is not found')
|
||||
return
|
||||
}
|
||||
|
||||
// 初始化rightSide
|
||||
const rightSide = []
|
||||
let top = 0
|
||||
rightSide.push(top)
|
||||
// 找到所有分类下的li
|
||||
const lis = this.$refs.shopContent.getElementsByClassName('eventList') //获取dom元素lii（eventList），对其进行操作
|
||||
|
||||
// 检查是否找到元素
|
||||
if (!lis || lis.length === 0) {
|
||||
console.error('No eventList elements found')
|
||||
return
|
||||
}
|
||||
|
||||
// slice() 方法返回一个新的数组对象
|
||||
Array.prototype.slice.call(lis).forEach((li) => {
|
||||
top += li.clientHeight //相当于top = top + li.clientHeight
|
||||
rightSide.push(top)
|
||||
})
|
||||
|
||||
//更新数据
|
||||
this.rightSide = rightSide
|
||||
// console.log('每一个分类的下标' + rightSide)
|
||||
},
|
||||
//左侧点击事件
|
||||
onClickNav(index) {
|
||||
console.log(index)
|
||||
//拿到目标位置的scrollY，点击左侧导航，右侧列表滑动到对应的位置
|
||||
const scrollY = this.rightSide[index]
|
||||
// 点击的分类成为当前分类，索引当前选中的导航标题
|
||||
// console.log(scrollY, 'scrollY')
|
||||
this.isclick = true
|
||||
this.selectId = index
|
||||
this.scrollY = scrollY
|
||||
// 平滑滑动右侧列表
|
||||
this.foodsScroll.scrollTo(0, -scrollY, 1000)
|
||||
},
|
||||
// 返回结果
|
||||
return index
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前移除滚动事件监听器
|
||||
window.removeEventListener('scroll', this.onScroll)
|
||||
},
|
||||
created() {
|
||||
// 获取 list 内容
|
||||
fetchServiceList({ menuCode: getEcosystemByValue(this.$route.params.ecosystem) }).then((res) => {
|
||||
this.shopList = this.setDeepPath(res.content.content[0].children)
|
||||
this.title = res.content.content[0].remark
|
||||
// 在数据加载完成后，等待DOM更新后再初始化滚动
|
||||
this.$nextTick(() => {})
|
||||
})
|
||||
if (this.$route.query.shareUrlId) {
|
||||
sessionStorage.setItem('shareUrlId', this.$route.query.shareUrlId)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//页面激活时触发
|
||||
// this.$mm.pages.current.rect()
|
||||
//this.getUser()
|
||||
//this.getInterUrl()
|
||||
// 滚动初始化已移到数据加载完成后执行
|
||||
},
|
||||
|
||||
methods: {
|
||||
setDeepPath(list) {
|
||||
return list.map((item) => {
|
||||
if (item.children && item.children.length > 0) {
|
||||
this.setDeepPath(item.children)
|
||||
return {
|
||||
...item,
|
||||
children: this.setDeepPath(item.children),
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
img: this.getImgPath(item.img),
|
||||
pic: this.getImgPath(item.pic),
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getImgPath(imgPath) {
|
||||
let path = location.origin
|
||||
if (path.indexOf('localhost') !== -1) {
|
||||
path = 'https://ecotest.happyinsurance.com.cn:4443/'
|
||||
}
|
||||
return path + '/weixin/icons/' + imgPath
|
||||
},
|
||||
goList(item, subItem) {
|
||||
// 注册进
|
||||
ecosystem.active = subItem
|
||||
ecosystem.services = item
|
||||
console.warn(this.$route)
|
||||
this.$router.push({
|
||||
name: 'service-info',
|
||||
params: {
|
||||
ecosystem: this.$route.params.ecosystem,
|
||||
position: item.children.findIndex((item) => item.id == subItem.id) + 1,
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
beforeDestroy() {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#selectPreservation {
|
||||
// display: relative;
|
||||
width: 100%;
|
||||
|
||||
&>img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// position: relative;
|
||||
.vanP {
|
||||
width: 300px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 15px;
|
||||
border-radius: 10px;
|
||||
|
||||
.smsTit {
|
||||
height: 25px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #f65c38;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.smsCont {
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
color: #2e2e30;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-top: 32px;
|
||||
justify-content: center;
|
||||
|
||||
.sub {
|
||||
padding: 7px 45px;
|
||||
color: #fff;
|
||||
background-color: #f65c38;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.service_img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tlf {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
z-index: 5;
|
||||
|
||||
.van-search {
|
||||
padding: 0 12px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.van-search__content {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.van-search__action {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 14px;
|
||||
border: 1px solid #FF7D19;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.reddish {
|
||||
line-height: 18px;
|
||||
padding: 0px 10px;
|
||||
font-family: PingFangTC, PingFangTC;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #CA2736;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.commodity {
|
||||
/* 最大的盒子样式 */
|
||||
margin-top: 58px;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
// background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leftNav {
|
||||
border-radius: 0px 17px 8px 8px;
|
||||
overflow: hidden;
|
||||
/* 左侧大盒子的整体样式 */
|
||||
width: 93px;
|
||||
background: rgb(248, 248, 248);
|
||||
}
|
||||
|
||||
.typeStyle {
|
||||
/* 左侧导航选中的样式 */
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #CA2736;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.typeStyle::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #CA2736;
|
||||
border-radius: 0px 2px 2px 0px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.leftTit {
|
||||
/* 左侧导航标题默认样式 */
|
||||
padding: 9px 16px;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typeFontSize {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.rightContent {
|
||||
border-radius: 0px 17px 8px 8px;
|
||||
background: transparent;
|
||||
/* 右侧大盒子的整体样式 */
|
||||
flex: 1;
|
||||
|
||||
ul li:last-child {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.rightTtitle {
|
||||
/* 右侧标题样式 */
|
||||
padding: 29px 0 0px 10px;
|
||||
margin: 0;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
.title {
|
||||
font-size: 20px;
|
||||
padding: 30px 20px 40px 20px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #333333;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
.gather {
|
||||
/* 右侧每一个商品的样式 */
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
// margin: 16px;
|
||||
align-items: center;
|
||||
display: inline-block;
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.distance {
|
||||
/* 右侧图片与描述间距 */
|
||||
// padding-left: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.gather img {
|
||||
/* 右侧图片样式 */
|
||||
width: 24px;
|
||||
height: 25px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
/* 点击左侧导航右侧内容与左边对齐 */
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.shopName {
|
||||
/* 右侧商品标题字体大小 */
|
||||
padding-top: 8px;
|
||||
font-family: PingFangSC;
|
||||
font-size: 13px;
|
||||
color: #000000;
|
||||
line-height: 15px;
|
||||
width: 60px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
|
||||
.saleGood {
|
||||
/* 右侧月售好评样式 */
|
||||
font-size: 10px;
|
||||
color: rgb(147, 153, 159);
|
||||
padding: 4px 0px;
|
||||
}
|
||||
|
||||
.saleGood span:first-child {
|
||||
/* 月售样式 */
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.price {
|
||||
/* 价格样式 */
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: rgb(255, 94, 121);
|
||||
background: #bd1c2d;
|
||||
}
|
||||
.commodity {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
margin-top: -10px;
|
||||
padding-top: 30px;
|
||||
background-image: url('../../assets/images/sunful/page-banner.png');
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
.eventList {
|
||||
padding-bottom: 20px;
|
||||
margin: 0 15px;
|
||||
.list-title {
|
||||
color: #000;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
//margin: 10px 10px;
|
||||
margin-top: 5x;
|
||||
padding: 0 10px 0 10px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 80%;
|
||||
top: 10%;
|
||||
width: 4px;
|
||||
background: #bd1c2d;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding-top: 10px;
|
||||
gap: 15px 10px;
|
||||
.gather {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img {
|
||||
padding: 12px;
|
||||
background: linear-gradient(180deg, #fbf1f2 0%, #ffffff 100%);
|
||||
border-radius: 50%;
|
||||
width: 24px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
.distance {
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user