|
|
|
|
@ -1,9 +1,9 @@ |
|
|
|
|
<template> |
|
|
|
|
<BaseContainer :fixedNav="false"> |
|
|
|
|
<view class="indexNew"> |
|
|
|
|
<view class="TaberList" |
|
|
|
|
:style="{ background: `linear-gradient(180deg, rgb(${color_one}) 0%, #FFF 100%)` }"> |
|
|
|
|
<view class="flex header"> |
|
|
|
|
<view class="TaberList" :style="{ background: `linear-gradient(180deg, rgb(${color_one}) 0%, #FFF 100%)` }"> |
|
|
|
|
<view class="header" :style="{background: scrollTop > 10 ? '#f5f5f5' : 'transparent'}"> |
|
|
|
|
<view class="flex"> |
|
|
|
|
<view class="position header-info"> |
|
|
|
|
<image src="@/static/images/position.png" mode="aspectfill"></image> |
|
|
|
|
<text>南京</text> |
|
|
|
|
@ -18,6 +18,7 @@ |
|
|
|
|
<image src="@/static/images/notice.png" mode="aspectfill"></image> |
|
|
|
|
<text class="notice-num">6</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view v-if="bannerList.length" class="carousel"> |
|
|
|
|
<swiper id="swiper1" class="swiper-container" indicator-dots circular autoplay @change="getChangeImage"> |
|
|
|
|
@ -37,7 +38,7 @@ |
|
|
|
|
<!-- #ifndef MP-TOUTIAO --> |
|
|
|
|
<view class="col-8"></view> |
|
|
|
|
<!-- #endif --> |
|
|
|
|
<view class="acea-row"> |
|
|
|
|
<view class="acea-row nav-list"> |
|
|
|
|
<view class="item" :key="index" v-for="(item, index) in navList" @click="getNavHrefTaber(item, 1)"> |
|
|
|
|
<view class="pictrue"> |
|
|
|
|
<image :src="item.icon" mode="aspectFit"/> |
|
|
|
|
@ -598,6 +599,7 @@ export default { |
|
|
|
|
ICP: {}, |
|
|
|
|
specialList: [], |
|
|
|
|
goodsList: [], |
|
|
|
|
scrollTop: 0, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
onShow() { |
|
|
|
|
@ -635,6 +637,10 @@ export default { |
|
|
|
|
}); |
|
|
|
|
//#endif |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
onPageScroll(e) { |
|
|
|
|
this.scrollTop = e.scrollTop; |
|
|
|
|
}, |
|
|
|
|
// 分享朋友 |
|
|
|
|
onShareAppMessage() { |
|
|
|
|
return {}; |
|
|
|
|
@ -866,17 +872,69 @@ page { |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.indexNew .TaberList .header { |
|
|
|
|
/* #ifndef MP-TOUTIAO */ |
|
|
|
|
padding-top: calc(14rpx + var(--safe-top)) !important; |
|
|
|
|
/* #endif */ |
|
|
|
|
z-index: 99; |
|
|
|
|
/* #ifdef MP-WEIXIN */ |
|
|
|
|
width: 75%; |
|
|
|
|
/* #endif */ |
|
|
|
|
/* #ifndef MP-WEIXIN */ |
|
|
|
|
width: 100%; |
|
|
|
|
/* #endif */ |
|
|
|
|
.indexNew { |
|
|
|
|
background: #f6f6f6; |
|
|
|
|
} |
|
|
|
|
.indexNew .TaberList { |
|
|
|
|
padding-top: calc(102rpx + var(--safe-top)) !important; |
|
|
|
|
.header { |
|
|
|
|
padding-top: var(--safe-top) !important; |
|
|
|
|
z-index: 99; |
|
|
|
|
width: 100%; |
|
|
|
|
height: calc(102rpx + var(--safe-top)); |
|
|
|
|
padding-right: 35rpx; |
|
|
|
|
padding-left: 24rpx; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
>view { |
|
|
|
|
/* #ifdef MP-WEIXIN */ |
|
|
|
|
width: 75%; |
|
|
|
|
/* #endif */ |
|
|
|
|
/* #ifndef MP-WEIXIN */ |
|
|
|
|
width: 100%; |
|
|
|
|
/* #endif */ |
|
|
|
|
align-items: center; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
.header-info { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
position: relative; |
|
|
|
|
&:last-child { |
|
|
|
|
margin-left: 5rpx; |
|
|
|
|
} |
|
|
|
|
image { |
|
|
|
|
width: 44rpx; |
|
|
|
|
height: 44rpx; |
|
|
|
|
} |
|
|
|
|
text { |
|
|
|
|
width: 70rpx; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
color: #333; |
|
|
|
|
&:not(.notice-num) { |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
margin-left: 0 4rpx; |
|
|
|
|
} |
|
|
|
|
&.notice-num { |
|
|
|
|
position: absolute; |
|
|
|
|
width: 22rpx; |
|
|
|
|
height: 22rpx; |
|
|
|
|
top: -3rpx; |
|
|
|
|
right: -1rpx; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 18rpx; |
|
|
|
|
font-weight: bold; |
|
|
|
|
background: #FE4944; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
line-height: 22rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -1009,11 +1067,6 @@ page { |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.thematic-details, |
|
|
|
|
.nav { |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.indexNew { |
|
|
|
|
padding-bottom: var(--tab-bar-height); |
|
|
|
|
} |
|
|
|
|
@ -1099,51 +1152,6 @@ page { |
|
|
|
|
height: 70rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.indexNew .header { |
|
|
|
|
height: calc(109rpx + var(--safe-top)); |
|
|
|
|
padding-top: calc(20rpx + var(--safe-top)); |
|
|
|
|
padding-right: 35rpx; |
|
|
|
|
padding-left: 24rpx; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
.indexNew .header .header-info { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
position: relative; |
|
|
|
|
&:last-child { |
|
|
|
|
margin-left: 5rpx; |
|
|
|
|
} |
|
|
|
|
image { |
|
|
|
|
width: 44rpx; |
|
|
|
|
height: 44rpx; |
|
|
|
|
} |
|
|
|
|
text { |
|
|
|
|
width: 70rpx; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
color: #333; |
|
|
|
|
&:not(.notice-num) { |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
margin-left: 0 4rpx; |
|
|
|
|
} |
|
|
|
|
&.notice-num { |
|
|
|
|
position: absolute; |
|
|
|
|
width: 22rpx; |
|
|
|
|
height: 22rpx; |
|
|
|
|
top: -3rpx; |
|
|
|
|
right: -1rpx; |
|
|
|
|
color: #fff; |
|
|
|
|
font-size: 18rpx; |
|
|
|
|
font-weight: bold; |
|
|
|
|
background: #FE4944; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
line-height: 22rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.indexNew .header .search { |
|
|
|
|
/* #ifdef MP-WEIXIN */ |
|
|
|
|
// height: 60rpx !important; |
|
|
|
|
@ -1155,7 +1163,7 @@ page { |
|
|
|
|
flex: 1; |
|
|
|
|
height: 58rpx; |
|
|
|
|
border-radius: 40rpx; |
|
|
|
|
background-color: #f5f5f5; |
|
|
|
|
background-color: #fff; |
|
|
|
|
font-size: 26rpx; |
|
|
|
|
color: #aaa; |
|
|
|
|
} |
|
|
|
|
@ -1242,22 +1250,30 @@ swiper { |
|
|
|
|
opacity: 0.8; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.nav .nav-list { |
|
|
|
|
width: 690rpx; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
background: #fff; |
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
padding: 15rpx 16rpx 0; |
|
|
|
|
} |
|
|
|
|
.indexNew .nav .item { |
|
|
|
|
flex: 0 0 20%; |
|
|
|
|
min-width: 0; |
|
|
|
|
padding-top: 14rpx; |
|
|
|
|
padding-bottom: 14rpx; |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
line-height: 30rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
color: #666666; |
|
|
|
|
word-break: break-all; |
|
|
|
|
margin-right: 52rpx; |
|
|
|
|
margin-bottom: 32rpx; |
|
|
|
|
&:nth-child(4n) { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.indexNew .nav .item .pictrue { |
|
|
|
|
width: 112rpx; |
|
|
|
|
height: 112rpx; |
|
|
|
|
margin: 0 auto 14rpx; |
|
|
|
|
width: 124rpx; |
|
|
|
|
height: 124rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.indexNew .nav .item .pictrue image { |
|
|
|
|
|
wangdong
11 months ago