首页
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"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/uindexlist",
|
||||
"style": {
|
||||
"navigationBarTitleText": "选择城市"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/login",
|
||||
"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="navbar" :class="{active:opacity}">
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="navbar_tow flex-between">
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<view class="navbar_tow flex-between"
|
||||
:style="{'height':HeighT.customBar+'px','padding-right':HeighT.custwidth + 'px'}">
|
||||
<!-- #endif -->
|
||||
<!-- 盒子2 返回标题搜索框 -->
|
||||
<view class="flex-between">
|
||||
<view class="navbar_tow_one flex-start">
|
||||
<text>美味抢先点</text>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="status-bar"></view>
|
||||
<view class="navbar_tow flex-between">
|
||||
<!-- #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>
|
||||
<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>
|
||||
<!-- 轮播图 -->
|
||||
<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">
|
||||
<text class="indexboxitemleftthere_countdowntext">共省4元</text>
|
||||
<!-- <view class="indexboxitemleftthere_countdowntexts">
|
||||
已失效
|
||||
</view> -->
|
||||
<!-- <view v-else class="indexboxitemleftthere_countdowntexts">
|
||||
<uni-countdown @timeup="updateCity" :day="item.end_times.d"
|
||||
:hour="item.end_times.h" :minute="item.end_times.m"
|
||||
:second="item.end_times.s" :indexs='index'></uni-countdown>
|
||||
</view> -->
|
||||
<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>
|
||||
<!-- 轮播图 -->
|
||||
<swipers></swipers>
|
||||
<!-- 广告 -->
|
||||
<advertisement></advertisement>
|
||||
<!-- 金刚区 -->
|
||||
<diamond></diamond>
|
||||
<!-- 今日上线 -->
|
||||
<todaylist></todaylist>
|
||||
<!-- 类目 -->
|
||||
<view class="fourcontent flex-between" @click="viewHistory">
|
||||
<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>
|
||||
|
||||
<!-- 产品 -->
|
||||
<productlist></productlist>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
components: {
|
||||
swipers,
|
||||
diamond,
|
||||
todaylist,
|
||||
productlist,
|
||||
advertisement
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Backgroundtow: 'none',
|
||||
isFixedTop: false, //吸顶是否显示
|
||||
Topdistance: 3000, //吸顶初始距离
|
||||
keyword: '',
|
||||
current: 0,
|
||||
opacity: 0,
|
||||
opacity: false,
|
||||
list1: [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
@@ -194,26 +90,49 @@
|
||||
},
|
||||
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop <= 44) {
|
||||
if (e.scrollTop <= 44) { //搜索导航栏
|
||||
this.opacity = false
|
||||
} else {
|
||||
this.opacity = true
|
||||
}
|
||||
if (e.scrollTop >= this.Topdistance) { //类别导航栏
|
||||
this.isFixedTop = true
|
||||
} else {
|
||||
this.isFixedTop = false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
HeighT() {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
setTimeout(() => {
|
||||
this.GetTop()
|
||||
}, 1000)
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
uindexlist() {
|
||||
uni.pro.navigateTo('index/uindexlist')
|
||||
},
|
||||
updateCity(data) {
|
||||
this.list[data].end_times = 0;
|
||||
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 {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
.active {
|
||||
background:rgba(249,249,249,1);
|
||||
background: rgba(249, 249, 249, 1);
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
// #ifdef APP-PLUS
|
||||
height: calc(var(--status-bar-height) / 2);
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
// #ifdef MP-WEIXIN
|
||||
height: var(--status-bar-height);
|
||||
// #endif
|
||||
}
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
.statusbarmargin {
|
||||
margin-top: calc(var(--status-bar-height) / 2);
|
||||
}
|
||||
|
||||
// #endif
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
|
||||
.navbar_tow {
|
||||
width: 100%;
|
||||
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 {
|
||||
padding: 32rpx 0 0 28rpx;
|
||||
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>
|
||||
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>
|
||||
<view class="u-index-list">
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<list
|
||||
:scrollTop="scrollTop"
|
||||
enable-back-to-top
|
||||
:offset-accuracy="1"
|
||||
:style="{
|
||||
<list :scrollTop="scrollTop" enable-back-to-top :offset-accuracy="1" :style="{
|
||||
maxHeight: $u.addUnit(scrollViewHeight)
|
||||
}"
|
||||
@scroll="scrollHandler"
|
||||
ref="uList"
|
||||
>
|
||||
<cell
|
||||
v-if="$slots.header"
|
||||
ref="header"
|
||||
>
|
||||
}" @scroll="scrollHandler" ref="uList">
|
||||
<cell v-if="$slots.header" ref="header">
|
||||
<slot name="header" />
|
||||
</cell>
|
||||
<slot />
|
||||
@@ -24,17 +14,9 @@
|
||||
</list>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<scroll-view
|
||||
:scrollTop="scrollTop"
|
||||
:scrollIntoView="scrollIntoView"
|
||||
:offset-accuracy="1"
|
||||
:style="{
|
||||
<scroll-view :scrollTop="scrollTop" :scrollIntoView="scrollIntoView" :offset-accuracy="1" :style="{
|
||||
maxHeight: $u.addUnit(scrollViewHeight)
|
||||
}"
|
||||
scroll-y
|
||||
@scroll="scrollHandler"
|
||||
ref="uList"
|
||||
>
|
||||
}" scroll-y @scroll="scrollHandler" ref="uList">
|
||||
<view v-if="$slots.header">
|
||||
<slot name="header" />
|
||||
</view>
|
||||
@@ -44,47 +26,26 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
<view
|
||||
class="u-index-list__letter"
|
||||
ref="u-index-list__letter"
|
||||
:style="{ top: $u.addUnit(letterInfo.top || 100) }"
|
||||
@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="{
|
||||
<view class="u-index-list__letter" ref="u-index-list__letter"
|
||||
:style="{ top: $u.addUnit(letterInfo.top || 100) }" @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'
|
||||
}"
|
||||
>
|
||||
<text
|
||||
class="u-index-list__letter__item__index"
|
||||
:style="{color: activeIndex === index ? '#fff' : inactiveColor}"
|
||||
>{{ item }}</text>
|
||||
}">
|
||||
<text class="u-index-list__letter__item__index"
|
||||
:style="{color: activeIndex === index ? '#fff' : inactiveColor}">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-transition
|
||||
mode="fade"
|
||||
:show="touching"
|
||||
:customStyle="{
|
||||
<u-transition mode="fade" :show="touching" :customStyle="{
|
||||
position: 'fixed',
|
||||
right: '50px',
|
||||
top: $u.addUnit(indicatorTop),
|
||||
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),
|
||||
width: $u.addUnit(indicatorHeight)
|
||||
}"
|
||||
>
|
||||
}">
|
||||
<text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
|
||||
</view>
|
||||
</u-transition>
|
||||
@@ -114,7 +75,7 @@
|
||||
* @property {Array} indexList 索引字符列表，数组形式
|
||||
* @property {Boolean} sticky 是否开启锚点自动吸顶 ( 默认 true )
|
||||
* @property {String | Number} customNavHeight 自定义导航栏的高度 ( 默认 0 )
|
||||
* */
|
||||
* */
|
||||
export default {
|
||||
name: 'u-index-list',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
@@ -189,7 +150,8 @@
|
||||
// 设置列表的高度为整个屏幕的高度
|
||||
//减去this.customNavHeight，并将this.scrollViewHeight设置为maxHeight
|
||||
//解决当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) {
|
||||
@@ -368,7 +330,7 @@
|
||||
1].height) {
|
||||
this.activeIndex = -1
|
||||
break
|
||||
} else if (!nextItem) {
|
||||
} else if (!nextItem) {
|
||||
// 当不存在下一个item时，意味着历遍到了最后一个
|
||||
this.activeIndex = len - 1
|
||||
break
|
||||
@@ -437,4 +399,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user