首页
This commit is contained in:
魏啾
15879
common/js/city.json
Normal file
15879
common/js/city.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -6,6 +6,12 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/index/uindexlist",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "选择城市"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/login/login",
|
"path": "pages/login/login",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
75
pages/index/components/advertisement.vue
Normal file
75
pages/index/components/advertisement.vue
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<view class="onecontent flex-between">
|
||||||
|
<view class="onecontentleft">
|
||||||
|
现有<text>0元无门槛</text>抵价券 正在出售
|
||||||
|
</view>
|
||||||
|
<view class="onecontentright flex-start">
|
||||||
|
<view class="onecontentrightimage flex-start">
|
||||||
|
<u-swiper class="onecontentrightswiper" circular style="width: 100%;" nextMargin="50" :list="list1"
|
||||||
|
height='28'></u-swiper>
|
||||||
|
</view>
|
||||||
|
<view class="onecontentrighttext">购买了10面值优惠券</view>
|
||||||
|
</view>
|
||||||
|
<!-- 小内切圆 -->
|
||||||
|
<view class="after"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.onecontent {
|
||||||
|
position: relative;
|
||||||
|
margin-top: -30rpx;
|
||||||
|
padding: 14rpx 28rpx 44rpx 28rpx;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(92deg, #FCECAA 0%, #fff 100%);
|
||||||
|
border-radius: 40rpx 0rpx 0rpx 0rpx;
|
||||||
|
|
||||||
|
.onecontentleft {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #FC851E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.onecontentright {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
.onecontentrightimage {
|
||||||
|
width: 90rpx;
|
||||||
|
|
||||||
|
.onecontentrightswiper {
|
||||||
|
border: 50%;
|
||||||
|
width: 28rpx;
|
||||||
|
height: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.after {
|
||||||
|
position: absolute;
|
||||||
|
top: -40rpx;
|
||||||
|
right: 0;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
line-height: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
42
pages/index/components/diamond.vue
Normal file
42
pages/index/components/diamond.vue
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<view class="towcontent flex-between">
|
||||||
|
<view class="towcontent_item flex-colum" v-for="(item,index) in 5" :key="index">
|
||||||
|
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
||||||
|
<text>扫码点餐</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.towcontent {
|
||||||
|
position: relative;
|
||||||
|
margin-top: -32rpx;
|
||||||
|
padding: 32rpx 40rpx;
|
||||||
|
width: 100%;
|
||||||
|
background: #F9F9F9;
|
||||||
|
border-radius: 48rpx 48rpx 0rpx 0rpx;
|
||||||
|
|
||||||
|
.towcontent_item {
|
||||||
|
image {
|
||||||
|
width: 92rpx;
|
||||||
|
height: 92rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
margin-top: 16rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
259
pages/index/components/productlist.vue
Normal file
259
pages/index/components/productlist.vue
Normal file
@@ -0,0 +1,259 @@
|
|||||||
|
<template>
|
||||||
|
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
||||||
|
<view class="fivecontent">
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
|
<view class="fivecontent" :style="isFixedTop?`margin-top:${HeighT.heightBar}px`:''">
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-PLUS -->
|
||||||
|
<view class="fivecontent" :class="{statusbarmargin:isFixedTop}">
|
||||||
|
<!-- #endif -->
|
||||||
|
<view class="fivecontent_item" v-for="(item,index) in 12" :key="index">
|
||||||
|
<view class="fivecontent_item_nav flex-start">
|
||||||
|
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
||||||
|
<view class="fivecontent_item_nav_left">
|
||||||
|
<view class="fivecontent_item_nav_lefttop flex-between">
|
||||||
|
<view>
|
||||||
|
幸运咖啡（荣民时代广场店）
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
龙首.151m
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="fivecontent_item_nav_leftlang flex-start">
|
||||||
|
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
<text>人气连锁品牌</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="fivecontent_item_box">
|
||||||
|
<view class="fivecontent_item_boxitem flex-between">
|
||||||
|
<image src="@/static/avatar.png" mode=""></image>
|
||||||
|
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
||||||
|
<view class="fivecontent_item_boxitemleftone flex-between">
|
||||||
|
<view>全场饮品任选</view>
|
||||||
|
<text>已抢15789份</text>
|
||||||
|
</view>
|
||||||
|
<view class="fivecontent_item_boxitemlefttow flex-start">
|
||||||
|
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
<text>人气连锁品牌</text>
|
||||||
|
</view>
|
||||||
|
<view class="indexboxitemleftthere flex-colum-start">
|
||||||
|
<view class="indexboxitemleftthereabsolute">
|
||||||
|
马上抢
|
||||||
|
</view>
|
||||||
|
<view class="indexboxitemlefttheretext flex-start">
|
||||||
|
<view class="indexboxitemlefttheretextone">
|
||||||
|
<text>¥</text>
|
||||||
|
<text>1444</text>
|
||||||
|
</view>
|
||||||
|
<view class="indexboxitemlefttheretexttow">
|
||||||
|
¥111
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="indexboxitemleftthere_countdown flex-between">
|
||||||
|
<text class="indexboxitemleftthere_countdowntext">共省4元</text>
|
||||||
|
<view class="indexboxitemleftthere_countdowntexts">
|
||||||
|
<uni-countdown :show-day="false" :day="1" :hour="1" :minute="12"
|
||||||
|
:second="40" color="#FFFFFF" border-color="#00B26A"
|
||||||
|
splitorColor="#FFFFFF" :font-size="8"></uni-countdown>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.fivecontent {
|
||||||
|
padding: 0 28rpx;
|
||||||
|
|
||||||
|
.fivecontent_item {
|
||||||
|
margin-top: 32rpx;
|
||||||
|
padding: 24rpx 32rpx;
|
||||||
|
width: 100%;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||||
|
|
||||||
|
.fivecontent_item_nav {
|
||||||
|
image {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fivecontent_item_nav_left {
|
||||||
|
flex: auto;
|
||||||
|
margin-left: 12rpx;
|
||||||
|
|
||||||
|
.fivecontent_item_nav_lefttop {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fivecontent_item_nav_leftlang {
|
||||||
|
margin-top: 8rpx;
|
||||||
|
width: max-content;
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
background: #FFF9E1;
|
||||||
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
margin-left: 6rpx;
|
||||||
|
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16rpx;
|
||||||
|
color: #F9A511;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 10.82rpx;
|
||||||
|
height: 14.06rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fivecontent_item_box {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
border-top: 2rpx solid #E5E5E5;
|
||||||
|
padding-top: 14rpx;
|
||||||
|
|
||||||
|
.fivecontent_item_boxitem {
|
||||||
|
image {
|
||||||
|
width: 192rpx;
|
||||||
|
height: 192rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fivecontent_item_boxitemleft {
|
||||||
|
margin-left: 24rpx;
|
||||||
|
flex: auto;
|
||||||
|
|
||||||
|
.fivecontent_item_boxitemleftone {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
view {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fivecontent_item_boxitemlefttow {
|
||||||
|
margin-top: 8rpx;
|
||||||
|
width: max-content;
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
background: #FFF9E1;
|
||||||
|
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
margin-left: 6rpx;
|
||||||
|
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16rpx;
|
||||||
|
color: #F9A511;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 10.82rpx;
|
||||||
|
height: 14.06rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexboxitemleftthere {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
padding-left: 16rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.indexboxitemleftthereabsolute {
|
||||||
|
position: absolute;
|
||||||
|
top: 14rpx;
|
||||||
|
right: 12rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexboxitemlefttheretext {
|
||||||
|
.indexboxitemlefttheretextone {
|
||||||
|
text {
|
||||||
|
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #FF5053;
|
||||||
|
}
|
||||||
|
|
||||||
|
text:nth-child(2) {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 34rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
text:nth-child(1) {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexboxitemlefttheretexttow {
|
||||||
|
margin-left: 12rpx;
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #999999;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexboxitemleftthere_countdown {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.indexboxitemleftthere_countdowntext {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indexboxitemleftthere_countdowntexts {
|
||||||
|
font-family: Roboto, Roboto;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
64
pages/index/components/swiper.vue
Normal file
64
pages/index/components/swiper.vue
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<view class="viewswiper">
|
||||||
|
<u-swiper :list="list1" @change="e => current = e.current" indicatorStyle="right: 20px" height='484'>
|
||||||
|
<view slot="indicator" class="indicator">
|
||||||
|
<view class="indicator__dot" v-for="(item, index) in list1" :key="index"
|
||||||
|
:class="[index === current && 'indicator__dot--active']"
|
||||||
|
:style="[index === current && {'width':16+'px'}]">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-swiper>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current: 0,
|
||||||
|
list1: [
|
||||||
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||||
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||||
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.viewswiper {
|
||||||
|
.indicator {
|
||||||
|
margin-bottom: 46rpx;
|
||||||
|
@include flex(row);
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&__dot {
|
||||||
|
height: 6px;
|
||||||
|
width: 6px;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.35);
|
||||||
|
margin: 0 5px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator-num {
|
||||||
|
padding: 2px 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.35);
|
||||||
|
border-radius: 100px;
|
||||||
|
width: 35px;
|
||||||
|
@include flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
163
pages/index/components/todaylist.vue
Normal file
163
pages/index/components/todaylist.vue
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
<template>
|
||||||
|
<view class="therecontent flex-between">
|
||||||
|
<view class="therecontent_box_item" v-for="item in 2" :key="item">
|
||||||
|
<view class="therecontent_box_imge flex-between" :style="item&&item">
|
||||||
|
<view class="therecontent_box_imge_text">
|
||||||
|
今日上新
|
||||||
|
</view>
|
||||||
|
<view class="therecontent_box_imge_right flex-start">
|
||||||
|
<view>
|
||||||
|
10点更新
|
||||||
|
</view>
|
||||||
|
<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="therecontent_box_itembox">
|
||||||
|
<view class="therecontent_box_itembox_item flex-between" v-for="item in 2" :key="item">
|
||||||
|
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
||||||
|
<view class="therecontent_box_itembox_itemview">
|
||||||
|
<view class="therecontent_box_itembox_itemviewone">
|
||||||
|
书亦烧仙草新品书亦烧仙草新品亦烧仙草新品
|
||||||
|
</view>
|
||||||
|
<view class="therecontent_box_itembox_itemviewtow flex-start">
|
||||||
|
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/xia.png"
|
||||||
|
mode="widthFix"></image>
|
||||||
|
<view>
|
||||||
|
8折
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="therecontent_box_itembox_itemviewthere flex-start">
|
||||||
|
<text>￥15.00</text>
|
||||||
|
<text>￥18.00</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.therecontent {
|
||||||
|
padding: 0 28rpx;
|
||||||
|
background: #F9F9F9;
|
||||||
|
|
||||||
|
.therecontent_box_item {
|
||||||
|
width: 336rpx;
|
||||||
|
border-radius: 18rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
|
||||||
|
.therecontent_box_itembox {
|
||||||
|
padding: 10rpx 18rpx 24rpx 24rpx;
|
||||||
|
|
||||||
|
.therecontent_box_itembox_item {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 114rpx;
|
||||||
|
height: 136rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.therecontent_box_itembox_itemview {
|
||||||
|
margin-left: 12rpx;
|
||||||
|
|
||||||
|
.therecontent_box_itembox_itemviewone {
|
||||||
|
width: 168rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.therecontent_box_itembox_itemviewtow {
|
||||||
|
margin-top: 8rpx;
|
||||||
|
width: 60rpx;
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
border: 2rpx solid #FF7127;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 9.74rpx;
|
||||||
|
height: 13.51rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
view {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16rpx;
|
||||||
|
color: #FF7127;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.therecontent_box_itembox_itemviewthere {
|
||||||
|
margin-top: 4rpx;
|
||||||
|
|
||||||
|
text:nth-child(1) {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FF7127;
|
||||||
|
}
|
||||||
|
|
||||||
|
text:nth-child(2) {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16rpx;
|
||||||
|
color: #999999;
|
||||||
|
text-decoration-line: line-through;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.therecontent_box_itembox_item:nth-child(1) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.therecontent_box_imge {
|
||||||
|
padding: 24rpx 16rpx 6rpx 24rpx;
|
||||||
|
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/towcontent_box1.png) no-repeat;
|
||||||
|
width: 100%;
|
||||||
|
height: 70rpx;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
.therecontent_box_imge_text {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.therecontent_box_imge_right {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.therecontent_box_imge:nth-child(2) {
|
||||||
|
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/towcontent_box2.png) no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -2,189 +2,85 @@
|
|||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 导航栏 -->
|
<!-- 导航栏 -->
|
||||||
<view class="navbar" :class="{active:opacity}">
|
<view class="navbar" :class="{active:opacity}">
|
||||||
|
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
||||||
<view class="status-bar"></view>
|
<view class="status-bar"></view>
|
||||||
|
|
||||||
<!-- #ifdef APP-PLUS -->
|
|
||||||
<view class="navbar_tow flex-between">
|
|
||||||
<!-- #endif -->
|
|
||||||
<!-- #ifndef APP-PLUS -->
|
|
||||||
<view class="navbar_tow flex-between"
|
<view class="navbar_tow flex-between"
|
||||||
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- 盒子2 返回标题搜索框 -->
|
<!-- #ifdef APP-PLUS -->
|
||||||
<view class="flex-between">
|
<view class="status-bar"></view>
|
||||||
<view class="navbar_tow_one flex-start">
|
<view class="navbar_tow flex-between">
|
||||||
<text>美味抢先点</text>
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
|
<view class="navbar_tow flex-between"
|
||||||
|
:style="{'height':HeighT.customBar+'px','marginTop':HeighT.heightBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- 标题搜索框 -->
|
||||||
|
<view class="flex-between">
|
||||||
|
<view class="navbar_tow_one flex-start" @click="uindexlist">
|
||||||
|
<text>美味抢先点</text>
|
||||||
|
<text>西安</text>
|
||||||
|
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
||||||
|
size="16"></u-icon>
|
||||||
|
</view>
|
||||||
|
<view class="navbar_tow_tow">
|
||||||
|
<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 吸顶 -->
|
||||||
|
<view v-if="isFixedTop" class="fourcontent flex-between" style="padding: 28rpx 0 28rpx 28rpx">
|
||||||
|
<view class="fourcontent_item flex-start" v-for="(item,index) in 10" :key="index">
|
||||||
<text>西安</text>
|
<text>西安</text>
|
||||||
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333"
|
||||||
size="16"></u-icon>
|
size="16"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
<view class="navbar_tow_tow">
|
|
||||||
<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<!-- 以上都是导航栏处理 -->
|
||||||
<!-- 轮播图 -->
|
|
||||||
<view class="viewswiper">
|
|
||||||
<u-swiper :list="list1" @change="e => current = e.current" indicatorStyle="right: 20px" height='484'>
|
|
||||||
<view slot="indicator" class="indicator">
|
|
||||||
<view class="indicator__dot" v-for="(item, index) in list1" :key="index"
|
|
||||||
:class="[index === current && 'indicator__dot--active']"
|
|
||||||
:style="[index === current && {'width':16+'px'}]">
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</u-swiper>
|
|
||||||
</view>
|
|
||||||
<!-- 广告 -->
|
|
||||||
<view class="onecontent flex-between">
|
|
||||||
<view class="onecontentleft">
|
|
||||||
现有<text>0元无门槛</text>抵价券 正在出售
|
|
||||||
</view>
|
|
||||||
<view class="onecontentright flex-start">
|
|
||||||
<view class="onecontentrightimage flex-start">
|
|
||||||
<u-swiper class="onecontentrightswiper" circular style="width: 100%;" nextMargin="50"
|
|
||||||
:list="list1" height='28'></u-swiper>
|
|
||||||
</view>
|
|
||||||
<view class="onecontentrighttext">购买了10面值优惠券</view>
|
|
||||||
</view>
|
|
||||||
<!-- 小内切圆 -->
|
|
||||||
<view class="after"></view>
|
|
||||||
</view>
|
|
||||||
<!-- 金刚区 -->
|
|
||||||
<view class="towcontent flex-between">
|
|
||||||
<view class="towcontent_item flex-colum" v-for="(item,index) in 5" :key="index">
|
|
||||||
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
|
||||||
<text>扫码点餐</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 今日上线 -->
|
|
||||||
<view class="therecontent flex-between">
|
|
||||||
<view class="therecontent_box_item" v-for="item in 2" :key="item">
|
|
||||||
<view class="therecontent_box_imge flex-between" :style="item&&item">
|
|
||||||
<view class="therecontent_box_imge_text">
|
|
||||||
今日上新
|
|
||||||
</view>
|
|
||||||
<view class="therecontent_box_imge_right flex-start">
|
|
||||||
<view>
|
|
||||||
10点更新
|
|
||||||
</view>
|
|
||||||
<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="therecontent_box_itembox">
|
|
||||||
<view class="therecontent_box_itembox_item flex-between" v-for="item in 2" :key="item">
|
|
||||||
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
|
||||||
<view class="therecontent_box_itembox_itemview">
|
|
||||||
<view class="therecontent_box_itembox_itemviewone">
|
|
||||||
书亦烧仙草新品书亦烧仙草新品亦烧仙草新品
|
|
||||||
</view>
|
|
||||||
<view class="therecontent_box_itembox_itemviewtow flex-start">
|
|
||||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/xia.png"
|
|
||||||
mode="widthFix"></image>
|
|
||||||
<view>
|
|
||||||
8折
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="therecontent_box_itembox_itemviewthere flex-start">
|
|
||||||
<text>￥15.00</text>
|
|
||||||
<text>￥18.00</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 类目 -->
|
|
||||||
<view class="fourcontent flex-between">
|
|
||||||
<view class="fourcontent_item flex-start" v-for="(item,index) in 10" :key="index">
|
|
||||||
<text>西安</text>
|
|
||||||
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" size="16"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 产品 -->
|
|
||||||
<view class="fivecontent">
|
|
||||||
<view class="fivecontent_item" v-for="(item,index) in 12" :key="index">
|
|
||||||
<view class="fivecontent_item_nav flex-start">
|
|
||||||
<image src="@/static/avatar.png" mode="aspectFill"></image>
|
|
||||||
<view class="fivecontent_item_nav_left">
|
|
||||||
<view class="fivecontent_item_nav_lefttop flex-between">
|
|
||||||
<view>
|
|
||||||
幸运咖啡（荣民时代广场店）
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
龙首.151m
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="fivecontent_item_nav_leftlang flex-start">
|
|
||||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
|
|
||||||
mode="aspectFill"></image>
|
|
||||||
<text>人气连锁品牌</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="fivecontent_item_box">
|
|
||||||
<view class="fivecontent_item_boxitem flex-between">
|
|
||||||
<image src="@/static/avatar.png" mode=""></image>
|
|
||||||
<view class="fivecontent_item_boxitemleft flex-colum-start">
|
|
||||||
<view class="fivecontent_item_boxitemleftone flex-between">
|
|
||||||
<view>全场饮品任选</view>
|
|
||||||
<text>已抢15789份</text>
|
|
||||||
</view>
|
|
||||||
<view class="fivecontent_item_boxitemlefttow flex-start">
|
|
||||||
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/hong_h.png"
|
|
||||||
mode="aspectFill"></image>
|
|
||||||
<text>人气连锁品牌</text>
|
|
||||||
</view>
|
|
||||||
<view class="indexboxitemleftthere flex-colum-start">
|
|
||||||
<view class="indexboxitemleftthereabsolute">
|
|
||||||
马上抢
|
|
||||||
</view>
|
|
||||||
<view class="indexboxitemlefttheretext flex-start">
|
|
||||||
<view class="indexboxitemlefttheretextone">
|
|
||||||
<text>¥</text>
|
|
||||||
<text>1444</text>
|
|
||||||
</view>
|
|
||||||
<view class="indexboxitemlefttheretexttow">
|
|
||||||
¥111
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
<!-- 轮播图 -->
|
||||||
<view class="indexboxitemleftthere_countdown flex-between">
|
<swipers></swipers>
|
||||||
<text class="indexboxitemleftthere_countdowntext">共省4元</text>
|
<!-- 广告 -->
|
||||||
<!-- <view class="indexboxitemleftthere_countdowntexts">
|
<advertisement></advertisement>
|
||||||
已失效
|
<!-- 金刚区 -->
|
||||||
</view> -->
|
<diamond></diamond>
|
||||||
<!-- <view v-else class="indexboxitemleftthere_countdowntexts">
|
<!-- 今日上线 -->
|
||||||
<uni-countdown @timeup="updateCity" :day="item.end_times.d"
|
<todaylist></todaylist>
|
||||||
:hour="item.end_times.h" :minute="item.end_times.m"
|
<!-- 类目 -->
|
||||||
:second="item.end_times.s" :indexs='index'></uni-countdown>
|
<view class="fourcontent flex-between" @click="viewHistory">
|
||||||
</view> -->
|
<view class="fourcontent_item flex-start" v-for="(item,index) in 10" :key="index">
|
||||||
<view class="indexboxitemleftthere_countdowntexts">
|
<text>西安</text>
|
||||||
<uni-countdown :show-day="false" :day="1" :hour="1" :minute="12"
|
<u-icon style="margin-left: 8rpx;" name="arrow-down-fill" color="#333333" size="16"></u-icon>
|
||||||
:second="40" color="#FFFFFF" border-color="#00B26A"
|
|
||||||
splitorColor="#FFFFFF" :font-size="8"></uni-countdown>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 产品 -->
|
||||||
|
<productlist></productlist>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import swipers from './components/swiper.vue'
|
||||||
|
import diamond from './components/diamond.vue'
|
||||||
|
import todaylist from './components/todaylist.vue'
|
||||||
|
import productlist from './components/productlist.vue'
|
||||||
|
import advertisement from './components/advertisement.vue'
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
swipers,
|
||||||
|
diamond,
|
||||||
|
todaylist,
|
||||||
|
productlist,
|
||||||
|
advertisement
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
Backgroundtow: 'none',
|
isFixedTop: false, //吸顶是否显示
|
||||||
|
Topdistance: 3000, //吸顶初始距离
|
||||||
keyword: '',
|
keyword: '',
|
||||||
current: 0,
|
current: 0,
|
||||||
opacity: 0,
|
opacity: false,
|
||||||
list1: [
|
list1: [
|
||||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||||
@@ -194,26 +90,49 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
onPageScroll(e) {
|
onPageScroll(e) {
|
||||||
if (e.scrollTop <= 44) {
|
if (e.scrollTop <= 44) { //搜索导航栏
|
||||||
this.opacity = false
|
this.opacity = false
|
||||||
} else {
|
} else {
|
||||||
this.opacity = true
|
this.opacity = true
|
||||||
}
|
}
|
||||||
|
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
||||||
|
this.isFixedTop = true
|
||||||
|
} else {
|
||||||
|
this.isFixedTop = false
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
HeighT() {
|
HeighT() { //手机类型的尺寸
|
||||||
return this.$store.getters.is_BarHeight
|
return this.$store.getters.is_BarHeight
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.GetTop()
|
||||||
|
}, 1000)
|
||||||
},
|
},
|
||||||
onShow() {},
|
onShow() {},
|
||||||
methods: {
|
methods: {
|
||||||
|
uindexlist() {
|
||||||
|
uni.pro.navigateTo('index/uindexlist')
|
||||||
|
},
|
||||||
updateCity(data) {
|
updateCity(data) {
|
||||||
this.list[data].end_times = 0;
|
this.list[data].end_times = 0;
|
||||||
this.$forceUpdate();
|
this.$forceUpdate();
|
||||||
},
|
},
|
||||||
|
GetTop() {
|
||||||
|
//获取元素距离顶部的距离
|
||||||
|
this.$u.getRect('.fourcontent').then(res => {
|
||||||
|
this.Topdistance = res.top - this.HeighT.heightBar
|
||||||
|
})
|
||||||
|
},
|
||||||
|
viewHistory() {
|
||||||
|
//移动高度=滚动高度 + 距离上面的位置 - 导航条 - 状态栏高度
|
||||||
|
uni.pageScrollTo({
|
||||||
|
scrollTop: this.Topdistance + 1,
|
||||||
|
duration: 300
|
||||||
|
});
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
@@ -225,24 +144,35 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background:rgba(249,249,249,1);
|
background: rgba(249, 249, 249, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-bar {
|
.status-bar {
|
||||||
// #ifdef APP-PLUS
|
// #ifdef APP-PLUS
|
||||||
height: calc(var(--status-bar-height) / 2);
|
height: calc(var(--status-bar-height) / 2);
|
||||||
// #endif
|
// #endif
|
||||||
// #ifndef APP-PLUS
|
// #ifdef MP-WEIXIN
|
||||||
height: var(--status-bar-height);
|
height: var(--status-bar-height);
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
.statusbarmargin {
|
||||||
|
margin-top: calc(var(--status-bar-height) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
.navbar {
|
.navbar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
||||||
.navbar_tow {
|
.navbar_tow {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -299,228 +229,6 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.viewswiper {
|
|
||||||
.indicator {
|
|
||||||
margin-bottom: 46rpx;
|
|
||||||
@include flex(row);
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&__dot {
|
|
||||||
height: 6px;
|
|
||||||
width: 6px;
|
|
||||||
border-radius: 100px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.35);
|
|
||||||
margin: 0 5px;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
|
|
||||||
&--active {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.indicator-num {
|
|
||||||
padding: 2px 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0.35);
|
|
||||||
border-radius: 100px;
|
|
||||||
width: 35px;
|
|
||||||
@include flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&__text {
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.onecontent {
|
|
||||||
position: relative;
|
|
||||||
margin-top: -30rpx;
|
|
||||||
padding: 14rpx 28rpx 44rpx 28rpx;
|
|
||||||
width: 100%;
|
|
||||||
background: linear-gradient(92deg, #FCECAA 0%, #fff 100%);
|
|
||||||
border-radius: 40rpx 0rpx 0rpx 0rpx;
|
|
||||||
|
|
||||||
.onecontentleft {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
text {
|
|
||||||
color: #FC851E;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.onecontentright {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #333333;
|
|
||||||
|
|
||||||
.onecontentrightimage {
|
|
||||||
width: 90rpx;
|
|
||||||
|
|
||||||
.onecontentrightswiper {
|
|
||||||
border: 50%;
|
|
||||||
width: 28rpx;
|
|
||||||
height: 28rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.after {
|
|
||||||
position: absolute;
|
|
||||||
top: -40rpx;
|
|
||||||
right: 0;
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
line-height: 40rpx;
|
|
||||||
text-align: center;
|
|
||||||
background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #fff 40rpx);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.towcontent {
|
|
||||||
position: relative;
|
|
||||||
margin-top: -32rpx;
|
|
||||||
padding: 32rpx 40rpx;
|
|
||||||
width: 100%;
|
|
||||||
background: #F9F9F9;
|
|
||||||
border-radius: 48rpx 48rpx 0rpx 0rpx;
|
|
||||||
|
|
||||||
.towcontent_item {
|
|
||||||
image {
|
|
||||||
width: 92rpx;
|
|
||||||
height: 92rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
margin-top: 16rpx;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.therecontent {
|
|
||||||
padding: 0 28rpx;
|
|
||||||
background: #F9F9F9;
|
|
||||||
|
|
||||||
.therecontent_box_item {
|
|
||||||
width: 336rpx;
|
|
||||||
border-radius: 18rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
|
|
||||||
.therecontent_box_itembox {
|
|
||||||
padding: 10rpx 18rpx 24rpx 24rpx;
|
|
||||||
|
|
||||||
.therecontent_box_itembox_item {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 114rpx;
|
|
||||||
height: 136rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.therecontent_box_itembox_itemview {
|
|
||||||
margin-left: 12rpx;
|
|
||||||
|
|
||||||
.therecontent_box_itembox_itemviewone {
|
|
||||||
width: 168rpx;
|
|
||||||
height: 68rpx;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #333333;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.therecontent_box_itembox_itemviewtow {
|
|
||||||
margin-top: 8rpx;
|
|
||||||
width: 60rpx;
|
|
||||||
padding: 4rpx 10rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 4rpx;
|
|
||||||
border: 2rpx solid #FF7127;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 9.74rpx;
|
|
||||||
height: 13.51rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 16rpx;
|
|
||||||
color: #FF7127;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.therecontent_box_itembox_itemviewthere {
|
|
||||||
margin-top: 4rpx;
|
|
||||||
|
|
||||||
text:nth-child(1) {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #FF7127;
|
|
||||||
}
|
|
||||||
|
|
||||||
text:nth-child(2) {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16rpx;
|
|
||||||
color: #999999;
|
|
||||||
text-decoration-line: line-through;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.therecontent_box_itembox_item:nth-child(1) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.therecontent_box_imge {
|
|
||||||
padding: 24rpx 16rpx 6rpx 24rpx;
|
|
||||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/towcontent_box1.png) no-repeat;
|
|
||||||
width: 100%;
|
|
||||||
height: 70rpx;
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
.therecontent_box_imge_text {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.therecontent_box_imge_right {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.therecontent_box_imge:nth-child(2) {
|
|
||||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/towcontent_box2.png) no-repeat;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fourcontent {
|
.fourcontent {
|
||||||
padding: 32rpx 0 0 28rpx;
|
padding: 32rpx 0 0 28rpx;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
@@ -543,185 +251,5 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fivecontent {
|
|
||||||
padding: 0 28rpx;
|
|
||||||
|
|
||||||
.fivecontent_item {
|
|
||||||
margin-top: 32rpx;
|
|
||||||
padding: 24rpx 32rpx;
|
|
||||||
width: 100%;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
||||||
|
|
||||||
.fivecontent_item_nav {
|
|
||||||
image {
|
|
||||||
width: 60rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fivecontent_item_nav_left {
|
|
||||||
flex: auto;
|
|
||||||
margin-left: 12rpx;
|
|
||||||
|
|
||||||
.fivecontent_item_nav_lefttop {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fivecontent_item_nav_leftlang {
|
|
||||||
margin-top: 8rpx;
|
|
||||||
width: max-content;
|
|
||||||
padding: 4rpx 10rpx;
|
|
||||||
background: #FFF9E1;
|
|
||||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
||||||
|
|
||||||
text {
|
|
||||||
margin-left: 6rpx;
|
|
||||||
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16rpx;
|
|
||||||
color: #F9A511;
|
|
||||||
}
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 10.82rpx;
|
|
||||||
height: 14.06rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fivecontent_item_box {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
border-top: 2rpx solid #E5E5E5;
|
|
||||||
padding-top: 14rpx;
|
|
||||||
|
|
||||||
.fivecontent_item_boxitem {
|
|
||||||
image {
|
|
||||||
width: 192rpx;
|
|
||||||
height: 192rpx;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fivecontent_item_boxitemleft {
|
|
||||||
margin-left: 24rpx;
|
|
||||||
flex: auto;
|
|
||||||
|
|
||||||
.fivecontent_item_boxitemleftone {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fivecontent_item_boxitemlefttow {
|
|
||||||
margin-top: 8rpx;
|
|
||||||
width: max-content;
|
|
||||||
padding: 4rpx 10rpx;
|
|
||||||
background: #FFF9E1;
|
|
||||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
||||||
|
|
||||||
text {
|
|
||||||
margin-left: 6rpx;
|
|
||||||
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 16rpx;
|
|
||||||
color: #F9A511;
|
|
||||||
}
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 10.82rpx;
|
|
||||||
height: 14.06rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.indexboxitemleftthere {
|
|
||||||
position: relative;
|
|
||||||
margin-top: 30rpx;
|
|
||||||
padding-left: 16rpx;
|
|
||||||
width: 100%;
|
|
||||||
height: 88rpx;
|
|
||||||
background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/qinggou.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
|
|
||||||
.indexboxitemleftthereabsolute {
|
|
||||||
position: absolute;
|
|
||||||
top: 14rpx;
|
|
||||||
right: 12rpx;
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indexboxitemlefttheretext {
|
|
||||||
.indexboxitemlefttheretextone {
|
|
||||||
text {
|
|
||||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #FF5053;
|
|
||||||
}
|
|
||||||
|
|
||||||
text:nth-child(2) {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 34rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
text:nth-child(1) {
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.indexboxitemlefttheretexttow {
|
|
||||||
margin-left: 12rpx;
|
|
||||||
font-size: 20rpx;
|
|
||||||
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
||||||
font-weight: normal;
|
|
||||||
color: #999999;
|
|
||||||
text-decoration: line-through;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.indexboxitemleftthere_countdown {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.indexboxitemleftthere_countdowntext {
|
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indexboxitemleftthere_countdowntexts {
|
|
||||||
font-family: Roboto, Roboto;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #333333;
|
|
||||||
margin-left: 16rpx;
|
|
||||||
font-size: 22rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
89
pages/index/uindexlist.vue
Normal file
89
pages/index/uindexlist.vue
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content">
|
||||||
|
<view class="container">
|
||||||
|
<!-- 建议放在外层 -->
|
||||||
|
<view class="contentnav">
|
||||||
|
当前城市
|
||||||
|
</view>
|
||||||
|
<!-- 不建议放在层层嵌套的view中，除非您清楚知道自己为什么需要这么做 -->
|
||||||
|
</view>
|
||||||
|
<u-index-list class="container" :index-list="indexList" style="height: 100%;" @select='clickSelect'
|
||||||
|
:scrollTop="scrollTop">
|
||||||
|
<view v-for="(item, index) in itemArr" :key="index" style="height: 100%;">
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<u-index-anchor :id="item.id" :index="item.id" :text="indexList[index]"></u-index-anchor>
|
||||||
|
<!-- #endif -->
|
||||||
|
<u-index-item style="height: 100%;">
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<u-index-anchor :id="item.id" :index="item.id" :text="indexList[index]"></u-index-anchor>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- <view class="list-cell">
|
||||||
|
{{item.cities}}
|
||||||
|
</view> -->
|
||||||
|
<view class="list-cell" v-for="(cell,index1) in item.cities" :key="index1">
|
||||||
|
{{cell.name}}
|
||||||
|
</view>
|
||||||
|
</u-index-item>
|
||||||
|
</view>
|
||||||
|
</u-index-list>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import city from '@/common/js/city.json'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
scrollTop: 0,
|
||||||
|
indexList: city.alphabet,
|
||||||
|
itemArr: city.cityList
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clickSelect(e) {
|
||||||
|
//从当前位置到达目标位置
|
||||||
|
console.log(">>>当前节点", e, this.scrollTop)
|
||||||
|
try {
|
||||||
|
uni.createSelectorQuery().select('#' + e).boundingClientRect((data) => {
|
||||||
|
console.log(">>data", data)
|
||||||
|
//目标位置的节点：类或者id
|
||||||
|
uni.createSelectorQuery().select('.container').boundingClientRect((res) => {
|
||||||
|
console.log(data, res)
|
||||||
|
console.log(">>res.top", res.top)
|
||||||
|
//最外层盒子的节点：类或者id
|
||||||
|
this.$nextTick(() => {
|
||||||
|
uni.pageScrollTo({
|
||||||
|
scrollTop: data.top - res.top,
|
||||||
|
// selector: '#' + e,
|
||||||
|
duration: 100 //app端这个必须设置成0
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
} catch (e) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/* 使用>>>来穿透组件边界 */
|
||||||
|
.content {
|
||||||
|
.list-cell {
|
||||||
|
display: flex;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #323233;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 24px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,20 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="u-index-list">
|
<view class="u-index-list">
|
||||||
<!-- #ifdef APP-NVUE -->
|
<!-- #ifdef APP-NVUE -->
|
||||||
<list
|
<list :scrollTop="scrollTop" enable-back-to-top :offset-accuracy="1" :style="{
|
||||||
:scrollTop="scrollTop"
|
|
||||||
enable-back-to-top
|
|
||||||
:offset-accuracy="1"
|
|
||||||
:style="{
|
|
||||||
maxHeight: $u.addUnit(scrollViewHeight)
|
maxHeight: $u.addUnit(scrollViewHeight)
|
||||||
}"
|
}" @scroll="scrollHandler" ref="uList">
|
||||||
@scroll="scrollHandler"
|
<cell v-if="$slots.header" ref="header">
|
||||||
ref="uList"
|
|
||||||
>
|
|
||||||
<cell
|
|
||||||
v-if="$slots.header"
|
|
||||||
ref="header"
|
|
||||||
>
|
|
||||||
<slot name="header" />
|
<slot name="header" />
|
||||||
</cell>
|
</cell>
|
||||||
<slot />
|
<slot />
|
||||||
@@ -24,17 +14,9 @@
|
|||||||
</list>
|
</list>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- #ifndef APP-NVUE -->
|
<!-- #ifndef APP-NVUE -->
|
||||||
<scroll-view
|
<scroll-view :scrollTop="scrollTop" :scrollIntoView="scrollIntoView" :offset-accuracy="1" :style="{
|
||||||
:scrollTop="scrollTop"
|
|
||||||
:scrollIntoView="scrollIntoView"
|
|
||||||
:offset-accuracy="1"
|
|
||||||
:style="{
|
|
||||||
maxHeight: $u.addUnit(scrollViewHeight)
|
maxHeight: $u.addUnit(scrollViewHeight)
|
||||||
}"
|
}" scroll-y @scroll="scrollHandler" ref="uList">
|
||||||
scroll-y
|
|
||||||
@scroll="scrollHandler"
|
|
||||||
ref="uList"
|
|
||||||
>
|
|
||||||
<view v-if="$slots.header">
|
<view v-if="$slots.header">
|
||||||
<slot name="header" />
|
<slot name="header" />
|
||||||
</view>
|
</view>
|
||||||
@@ -44,47 +26,26 @@
|
|||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<view
|
<view class="u-index-list__letter" ref="u-index-list__letter"
|
||||||
class="u-index-list__letter"
|
:style="{ top: $u.addUnit(letterInfo.top || 100) }" @touchstart="touchStart"
|
||||||
ref="u-index-list__letter"
|
@touchmove.stop.prevent="touchMove" @touchend.stop.prevent="touchEnd" @touchcancel.stop.prevent="touchEnd">
|
||||||
:style="{ top: $u.addUnit(letterInfo.top || 100) }"
|
<view class="u-index-list__letter__item" v-for="(item, index) in uIndexList" :key="index" :style="{
|
||||||
@touchstart="touchStart"
|
|
||||||
@touchmove.stop.prevent="touchMove"
|
|
||||||
@touchend.stop.prevent="touchEnd"
|
|
||||||
@touchcancel.stop.prevent="touchEnd"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
class="u-index-list__letter__item"
|
|
||||||
v-for="(item, index) in uIndexList"
|
|
||||||
:key="index"
|
|
||||||
:style="{
|
|
||||||
backgroundColor: activeIndex === index ? activeColor : 'transparent'
|
backgroundColor: activeIndex === index ? activeColor : 'transparent'
|
||||||
}"
|
}">
|
||||||
>
|
<text class="u-index-list__letter__item__index"
|
||||||
<text
|
:style="{color: activeIndex === index ? '#fff' : inactiveColor}">{{ item }}</text>
|
||||||
class="u-index-list__letter__item__index"
|
|
||||||
:style="{color: activeIndex === index ? '#fff' : inactiveColor}"
|
|
||||||
>{{ item }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-transition
|
<u-transition mode="fade" :show="touching" :customStyle="{
|
||||||
mode="fade"
|
|
||||||
:show="touching"
|
|
||||||
:customStyle="{
|
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
right: '50px',
|
right: '50px',
|
||||||
top: $u.addUnit(indicatorTop),
|
top: $u.addUnit(indicatorTop),
|
||||||
zIndex: 2
|
zIndex: 2
|
||||||
}"
|
}">
|
||||||
>
|
<view class="u-index-list__indicator" :class="['u-index-list__indicator--show']" :style="{
|
||||||
<view
|
|
||||||
class="u-index-list__indicator"
|
|
||||||
:class="['u-index-list__indicator--show']"
|
|
||||||
:style="{
|
|
||||||
height: $u.addUnit(indicatorHeight),
|
height: $u.addUnit(indicatorHeight),
|
||||||
width: $u.addUnit(indicatorHeight)
|
width: $u.addUnit(indicatorHeight)
|
||||||
}"
|
}">
|
||||||
>
|
|
||||||
<text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
|
<text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
|
||||||
</view>
|
</view>
|
||||||
</u-transition>
|
</u-transition>
|
||||||
@@ -114,7 +75,7 @@
|
|||||||
* @property {Array} indexList 索引字符列表，数组形式
|
* @property {Array} indexList 索引字符列表，数组形式
|
||||||
* @property {Boolean} sticky 是否开启锚点自动吸顶 ( 默认 true )
|
* @property {Boolean} sticky 是否开启锚点自动吸顶 ( 默认 true )
|
||||||
* @property {String | Number} customNavHeight 自定义导航栏的高度 ( 默认 0 )
|
* @property {String | Number} customNavHeight 自定义导航栏的高度 ( 默认 0 )
|
||||||
* */
|
* */
|
||||||
export default {
|
export default {
|
||||||
name: 'u-index-list',
|
name: 'u-index-list',
|
||||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||||
@@ -189,7 +150,8 @@
|
|||||||
// 设置列表的高度为整个屏幕的高度
|
// 设置列表的高度为整个屏幕的高度
|
||||||
//减去this.customNavHeight，并将this.scrollViewHeight设置为maxHeight
|
//减去this.customNavHeight，并将this.scrollViewHeight设置为maxHeight
|
||||||
//解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时，还能滚动
|
//解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时，还能滚动
|
||||||
this.scrollViewHeight = this.sys.windowHeight - this.customNavHeight
|
this.scrollViewHeight = (this.sys.windowHeight - this.customNavHeight) * 2
|
||||||
|
// console.log(uni.$u.addUnit(this.scrollViewHeight), this.sys.windowHeight, this.customNavHeight)
|
||||||
},
|
},
|
||||||
// 索引列表被触摸
|
// 索引列表被触摸
|
||||||
touchStart(e) {
|
touchStart(e) {
|
||||||
@@ -368,7 +330,7 @@
|
|||||||
1].height) {
|
1].height) {
|
||||||
this.activeIndex = -1
|
this.activeIndex = -1
|
||||||
break
|
break
|
||||||
} else if (!nextItem) {
|
} else if (!nextItem) {
|
||||||
// 当不存在下一个item时，意味着历遍到了最后一个
|
// 当不存在下一个item时，意味着历遍到了最后一个
|
||||||
this.activeIndex = len - 1
|
this.activeIndex = len - 1
|
||||||
break
|
break
|
||||||
@@ -437,4 +399,4 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user