hz/ebiz-sunful-eco-h5-weixin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(home): 重构首页组件

Browse Source 
- 更新了首页的样式和布局
- 优化了代码结构，提高了可读性和可维护性
- 调整了生态系统服务的展示方式
- 移除了不必要的注释代码
-统一了样式单位，使用px代替其他单位
This commit is contained in:
陈昱达
2025-07-16 16:53:42 +08:00
parent cf6f801df8
commit fadc108880
5 changed files with 608 additions and 958 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/sunful/home-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/images/sunful/lu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

3
src/assets/js/utils/get-url.js
View File

@@ -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) {

241
src/views/home/home.vue
View File

@@ -1,54 +1,54 @@
<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",
name: 'home',
components: {
VanImage,
VanIcon: Icon,
SwiperBanner: Swiper
SwiperBanner: Swiper,
},
data() {
return {
bannerList: [
{
imgUrl: require("./img/swiper-image.svg")
imgUrl: require('./img/swiper-image.svg'),
},
{
imgUrl: require("./img/swiper-image.svg")
}
],
name: "",
sex: "",
type: "",
permission: {
goNext: true
imgUrl: require('./img/swiper-image.svg'),
},
titleSrc: require("@/assets/images/logo.png"),
bannerSrc: "http://ncc.ebiz-digits.com:39527/gsc/IHRHN5/7b/04/63/7b0463aa135f4a1f922b5171bcec1d14/images/主页/u44.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 ? '先生' : ''}`
}
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({
this.permission.goNext &&
this.$router.push({
name: 'service',
params: {
ecosystem: getEcosystem(ecosystem)
ecosystem: getEcosystem(ecosystem),
},
query: {
swe: swe
}
swe: swe,
},
})
},
showErrorDialog(msg) {
@@ -57,37 +57,38 @@ export default {
}).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 => {
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("页面访问有误，请重试")
}
.catch(() => {
this.showErrorDialog('您的登录已过期，请退出重试')
})
} else this.showErrorDialog('页面访问有误，请重试')
},
}
</script>
<template>
<section class="home-container">
<div class="nav">
<!-- <img src="../../assets/images/sunful/sunful-bg.svg" alt=""> -->
<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>
<h2><span>您好~</span>{{ title }}</h2>
</section>
</div>
@@ -102,22 +103,21 @@ export default {
<!-- </section> -->
<!-- 服务提示语部分 -->
<section class="tips">
<van-icon name="info-o" />
<div class="text">服务项目及费用仅供参考，具体以供应商实际提供为准。</div>
</section>
<!-- <section class="tips">-->
<!-- <van-icon name="info-o" />-->
<!-- <div class="text">服务项目及费用仅供参考，具体以供应商实际提供为准。</div>-->
<!-- </section>-->
<!-- banner图 -->
<img src="@/assets/images/sunful/banner.webp" alt="">
<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="生态服务">
<img :src="require('@/assets/images/sunful/sunful-eco.svg')" alt="生态服务" />
<div>生态服务</div>
</h3>
<div class="flex service-row">
<div class="service-item old">
<div>
@@ -129,37 +129,35 @@ export default {
</div>
<div class="service-item life">
<div>
<!-- <h4>生活娱乐</h4>-->
<!-- <h4>生活娱乐</h4>-->
<h4>健康管理</h4>
<p>专业保障</p>
<p>健康无忧</p>
<!-- <p>丰富体验</p>-->
<!-- <p>乐享时光</p>-->
<!-- <p>丰富体验</p>-->
<!-- <p>乐享时光</p>-->
</div>
<button class="go-btn" @click="goEcosystem(1,true)">去看看</button>
<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>
<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="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'>
<div class="wealth mt10">
<div class="box">
<h4>生活娱乐</h4>
<p>丰富体验，乐享时光</p>
<button class="go-btn-v" @click="goEcosystem(55)">去看看</button>
@@ -167,11 +165,7 @@ export default {
</div>
</div>
</div>
</div>
</section>
</div>
</div>
@@ -182,38 +176,61 @@ export default {
$inset-padding: 17px;
$bg-color: #f5f5f5;
.home-container {
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;
//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%;
}
padding: $inset-padding;
.lu {
width: 99px;
position: absolute;
right: 26px;
top: 42px;
}
.title {
position: absolute;
top: 86px;
left: 15px;
h2 {
margin: 52px 0 60px 7px;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 16px;
font-weight: 500;
font-size: 17px;
width: 210px;
color: #000000;
line-height: 14px;
line-height: 24px;
text-align: left;
font-style: normal;
}
}
}
.content {
background-color: $bg-color;
position: absolute;
top: 132px;
left: 0;
z-index: 3; // 最顶层
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; // 最顶层
}
}
@@ -222,9 +239,9 @@ $bg-color: #f5f5f5;
width: 100vw;
border-radius: 12px;
&>div {
& > div {
position: relative;
top: -19px;
//top: -19px;
padding: 0 10px;
}
}
@@ -238,21 +255,21 @@ $bg-color: #f5f5f5;
justify-content: center;
background: #fff;
&+img {
& + img {
width: 100%;
}
&>img {
& > img {
width: 51px;
height: 14px;
margin-right: 3px;
}
&>p {
& > p {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 11px;
color: #6B6B6B;
color: #6b6b6b;
line-height: 16px;
text-align: left;
font-style: normal;
@@ -262,7 +279,7 @@ $bg-color: #f5f5f5;
white-space: nowrap;
}
&>button {
& > button {
outline: none;
border: none;
padding: 6px 9px;
@@ -270,7 +287,7 @@ $bg-color: #f5f5f5;
width: 58px;
border-radius: 6px;
background-image: url("../../assets/images/sunful/bt-bg.svg");
background-image: url('../../assets/images/sunful/bt-bg.svg');
background-size: contain;
background-repeat: no-repeat;
@@ -289,7 +306,7 @@ $bg-color: #f5f5f5;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 11px;
color: #6B6B6B;
color: #6b6b6b;
line-height: 16px;
text-align: left;
font-style: normal;
@@ -310,7 +327,7 @@ $bg-color: #f5f5f5;
}
button {
background-color: #CA2736;
background-color: #ca2736;
color: #fff;
border-radius: 13px;
border: none;
@@ -319,7 +336,7 @@ $bg-color: #f5f5f5;
font-family: PingFangSC;
font-size: 11px;
color: #FFFFFF;
color: #ffffff;
line-height: 16px;
text-align: left;
font-style: normal;
@@ -342,7 +359,7 @@ $bg-color: #f5f5f5;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 11px;
color: #A1A1A1;
color: #a1a1a1;
line-height: 10px;
text-align: left;
font-style: normal;
@@ -354,9 +371,9 @@ $bg-color: #f5f5f5;
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";
'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) {
@@ -381,35 +398,34 @@ $bg-color: #f5f5f5;
//}
}
.health {
.health {
// border-radius: 15px;
// border-right: 2px solid #fce4e4;
// // border-bottom: 2px solid #fce4e4;
background-image: url("../../assets/images/sunful/book.svg");
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;
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-image: url('../../assets/images/sunful/hat.webp');
background-size: contain;
background-repeat: no-repeat;
background-position: left top;
@@ -420,12 +436,11 @@ $bg-color: #f5f5f5;
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;
}
}
@@ -439,9 +454,9 @@ $bg-color: #f5f5f5;
}
button {
color: #D8AF70;
color: #d8af70;
background: transparent;
border: 1px solid #D8AF70;
border: 1px solid #d8af70;
padding: 1px 4px;
}
}
@@ -449,11 +464,13 @@ $bg-color: #f5f5f5;
.wealth {
//transform: translateY(-18px);
background-image: url("../../assets/images/sunful/treasure.webp");
background-image: url('../../assets/images/sunful/treasure.webp');
p {}
p {
}
button {}
button {
}
}
.old,
@@ -478,19 +495,21 @@ $bg-color: #f5f5f5;
}
.old {
background-image: url("../../assets/images/sunful/old.webp");
background-image: url('../../assets/images/sunful/old.webp');
button {
background-color: #D8AF70;
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 {
@@ -507,6 +526,4 @@ $bg-color: #f5f5f5;
align-items: center;
}
}
</style>

520
src/views/service/service-t.vue
View File

@@ -1,41 +1,16 @@
<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 class="title">
{{ title }}
</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">
<div class="list-title">
{{ item.menuName }}
</div>
<ul>
<li class="gather" v-for="(subItem, index) in item.children" :key="index"
@click="goList(item, subItem)">
<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>
@@ -47,15 +22,13 @@
</ul>
</div>
</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'
@@ -64,12 +37,12 @@ export default {
[Popup.name]: Popup,
[Search.name]: Search,
},
props: {
},
props: {},
data() {
return {
singleWordMenu: this.$route.query.swe,
shopList: [],
title: '',
searchParams: '',
imgUrls: {
// 无数据
@@ -110,28 +83,16 @@ export default {
},
},
created() {
// 获取 list 内容
fetchServiceList({ menuCode: getEcosystemByValue(this.$route.params.ecosystem) }).then(res => {
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(() => {
this.initializeRoll()
this.initializeOwn()
this.$nextTick(() => {})
})
})
// 进入保全项清空一下相关保存的信息
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() {
//页面激活时触发
@@ -142,15 +103,15 @@ export default {
},
methods: {
setDeepPath(list){
return list.map(item=>{
if(item.children && item.children.length>0){
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 {
} else {
return {
...item,
img: this.getImgPath(item.img),
@@ -160,421 +121,92 @@ export default {
})
},
getImgPath(imgPath){
getImgPath(imgPath) {
let path = location.origin
if(path.indexOf('localhost')!==-1){
if (path.indexOf('localhost') !== -1) {
path = 'https://ecotest.happyinsurance.com.cn:4443/'
}
return path + '/weixin/icons/'+imgPath
},
onSearch(type) {
if ((type == '0' || type == '1') && !this.searchParams) {
this.handleClear() // 修正方法名为handleClear
return
}
// 遍历所有菜单项
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() {
return path + '/weixin/icons/' + imgPath
},
goList(item, subItem) {
// 注册进
ecosystem.active = subItem
ecosystem.services = item
console.warn(this.$route);
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
}
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)
},
},
beforeDestroy() {
// 组件销毁前移除滚动事件监听器
window.removeEventListener('scroll', this.onScroll)
},
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;
.title {
font-size: 20px;
padding: 30px 20px 40px 20px;
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;
font-weight: 600;
font-size: 15px;
color: #333333;
line-height: 32px;
text-align: left;
font-style: normal;
}
.gather {
/* 右侧每一个商品的样式 */
margin-top: 18px;
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;
// margin: 16px;
flex-direction: column;
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 {
/* 右侧图片样式 */
img {
padding: 12px;
background: linear-gradient(180deg, #fbf1f2 0%, #ffffff 100%);
border-radius: 50%;
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);
margin-bottom: 7px;
}
.distance {
font-size: 12px;
color: #000;
}
}
}
}
}
}
</style>