shuxiaoquan
1 year ago
parent
0a3ca8a90a
commit
7abe30c0d8
@ -0,0 +1,99 @@ |
||||
<template> |
||||
<view class="member"> |
||||
<view class="title"> |
||||
邀请记录 |
||||
</view> |
||||
<view class="tab"> |
||||
<view class="tabList"> |
||||
<view v-for="(item,index) in tabList" :key="index" class="tabItem"> |
||||
<view class="name" :style="{'color':item.value==chosed?'#FF4C4B':'#7A7A7A'}"> |
||||
{{item.name}} |
||||
</view> |
||||
<view class="line" v-if="item.value==chosed"> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
chosed:'0', |
||||
tabList:[ |
||||
{ |
||||
name:'待完成', |
||||
value:'0' |
||||
},{ |
||||
name:'已完成', |
||||
value:'1' |
||||
},{ |
||||
name:'已完成', |
||||
value:'2' |
||||
} |
||||
] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.member{ |
||||
width: 100%; |
||||
height: 1296rpx; |
||||
background: url('../../static/member/merBack.png') 100% no-repeat; |
||||
background-size: 100% 100%; |
||||
padding-top: 120rpx; |
||||
position:relative; |
||||
} |
||||
.title{ |
||||
width: 128rpx; |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #424242; |
||||
line-height: 44rpx; |
||||
left: 0; |
||||
right: 0; |
||||
margin: auto; |
||||
} |
||||
.tab{ |
||||
width: 682rpx; |
||||
height: 692rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 10rpx 10rpx 10rpx 10rpx; |
||||
opacity: 1; |
||||
margin: 48rpx 0 0 42rpx; |
||||
padding-top: 20rpx; |
||||
.tabList{ |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
.tabItem{ |
||||
.name{ |
||||
width: 96rpx; |
||||
height: 60rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
line-height: 44rpx; |
||||
} |
||||
|
||||
.line{ |
||||
width: 48rpx; |
||||
height: 6rpx; |
||||
background: #FF4C4B; |
||||
border-radius: 56rpx 56rpx 56rpx 56rpx; |
||||
opacity: 1; |
||||
margin-top: 10rpx; |
||||
margin-left: 24rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,425 @@ |
||||
<template> |
||||
<view class="goods"> |
||||
<u-navbar> |
||||
<view class="slot-wrap"> |
||||
<u-search placeholder="iPhone 15" :show-action="false" v-model="keyword"></u-search> |
||||
</view> |
||||
</u-navbar> |
||||
<view class="goods-hd"> |
||||
<u-swiper :list="list" mode="none" height="400"></u-swiper> |
||||
</view> |
||||
<scroll-view scroll-x class="goods-menu"> |
||||
<view class="item" @click="tabItem1(i)" v-for="i in 10" :key="i" :class="tabIndex1==i?'item-on':''"> |
||||
<image src="@/static/home/phone.jpg"></image> |
||||
<view class="p">手机</view> |
||||
</view> |
||||
</scroll-view> |
||||
<view class="goods-bd"> |
||||
<scroll-view scroll-y class="a"> |
||||
<view class="item" @click="tabItem(0)" :class="tabIndex==0?'item-on':''">全部商品</view> |
||||
<view class="item" @click="tabItem(1)" :class="tabIndex==1?'item-on':''">TCL</view> |
||||
<view class="item" @click="tabItem(2)" :class="tabIndex==2?'item-on':''">创维</view> |
||||
<view class="item" @click="tabItem(3)" :class="tabIndex==3?'item-on':''">海尔</view> |
||||
<view class="item" @click="tabItem(4)" :class="tabIndex==4?'item-on':''">长虹</view> |
||||
<view class="item" @click="tabItem(5)" :class="tabIndex==5?'item-on':''">小米</view> |
||||
<view class="item" @click="tabItem(6)" :class="tabIndex==6?'item-on':''">东芝</view> |
||||
<view class="item" @click="tabItem(7)" :class="tabIndex==7?'item-on':''">华为</view> |
||||
<view class="item" @click="tabItem(8)" :class="tabIndex==8?'item-on':''">雷鸟</view> |
||||
</scroll-view> |
||||
<view class="b"> |
||||
<view class="t"> |
||||
<view class="item" @click="tabFilter(0)" :class="filterIndex==0?'item-on':''">价格</view> |
||||
<view class="item" @click="tabFilter(1)" :class="filterIndex==1?'item-on':''">折扣</view> |
||||
<view class="item" @click="tabFilter(2)" :class="filterIndex==2?'item-on':''">销量</view> |
||||
<view class="item" @click="tabFilter(3)" :class="filterIndex==3?'item-on':''">综合</view> |
||||
</view> |
||||
<scroll-view scroll-y class="l"> |
||||
<view class="item" v-for="i in 10" :key="i" @click="tabFilter(0)"> |
||||
<image src="@/static/home/phone.jpg"></image> |
||||
<view class="title"> |
||||
<text>自营</text>iphone13 绿色 128GB |
||||
</view> |
||||
<view class="price"> |
||||
<view class="n">￥<text>7595</text>到手价</view> |
||||
<view class="o">￥7595</view> |
||||
</view> |
||||
<view class="desc"> |
||||
200+条评论 99%好评率 |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
</view> |
||||
</view> |
||||
<!-- --> |
||||
<u-popup v-model="isShow" width="548rpx" mode="center" :custom-style="backgroundBg"> |
||||
<view class="goods-share"> |
||||
<view class="l"> |
||||
<view class="a"> |
||||
<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image> |
||||
</view> |
||||
<view class="b"> |
||||
<view class="item" v-for="i in 2" :key="i"> |
||||
<image src="@/static/home/phone.jpg"></image> |
||||
<view class="title"> |
||||
<text>自营</text>iphone13 绿色 128GB |
||||
</view> |
||||
<view class="price"> |
||||
<view class="n">￥<text>7595</text></view> |
||||
</view> |
||||
<view class="desc"> |
||||
200+条评论 99%好评率 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="c"> |
||||
<image src="https://cdn.uviewui.com/uview/swiper/1.jpg"></image> |
||||
</view> |
||||
</view> |
||||
<view class="btn">保存到相册</view> |
||||
</view> |
||||
</u-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
backgroundBg: { |
||||
"background": "transparent", |
||||
"overflow": "auto" |
||||
}, |
||||
isShow: true, |
||||
tabIndex1: 1, |
||||
tabIndex: 0, |
||||
filterIndex: 0, |
||||
keyword: "", |
||||
list: [{ |
||||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg', |
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东' |
||||
}, |
||||
{ |
||||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg', |
||||
title: '身无彩凤双飞翼，心有灵犀一点通' |
||||
}, |
||||
{ |
||||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg', |
||||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳' |
||||
} |
||||
], |
||||
} |
||||
}, |
||||
methods: { |
||||
tabItem(index){ |
||||
this.tabIndex = index; |
||||
}, |
||||
tabItem1(index){ |
||||
this.tabIndex1 = index; |
||||
}, |
||||
tabFilter(index){ |
||||
this.filterIndex = index; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.goods{ |
||||
.slot-wrap{ |
||||
width: 400rpx; |
||||
margin-left: 60rpx; |
||||
} |
||||
&-hd{ |
||||
width: 100%; |
||||
height: 400rpx; |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
&-menu{ |
||||
height: 180rpx; |
||||
white-space: nowrap; |
||||
margin-top: 30rpx; |
||||
padding: 0 20rpx; |
||||
.item{ |
||||
width: 150rpx; |
||||
height: 180rpx; |
||||
background: #FFFFFF; |
||||
display: inline-block; |
||||
padding: 16rpx; |
||||
box-sizing: border-box; |
||||
border: 1px solid #FFFFFF; |
||||
text-align: center; |
||||
margin-left: 12rpx; |
||||
border-radius: 8rpx; |
||||
image{ |
||||
width: 112rpx; |
||||
height: 112rpx; |
||||
} |
||||
.p{ |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #3F3F3F; |
||||
} |
||||
&-on{ |
||||
border: 1px solid #F21A1C; |
||||
} |
||||
} |
||||
} |
||||
&-bd{ |
||||
padding: 30rpx 0 0; |
||||
display: flex; |
||||
height: calc(100vh - 700rpx); |
||||
box-sizing: border-box; |
||||
overflow: hidden; |
||||
.a{ |
||||
width: 150rpx; |
||||
height: 100%; |
||||
.item{ |
||||
padding: 20rpx 35rpx; |
||||
border-left: 3px solid #FFFFFF; |
||||
line-height: 50rpx; |
||||
text-align: center; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #3F3F3F; |
||||
box-sizing: border-box; |
||||
&-on{ |
||||
background-color: #FFFFFF; |
||||
border-left-color: #F34A40; |
||||
} |
||||
} |
||||
} |
||||
.b{ |
||||
width: 600rpx; |
||||
height: 100%; |
||||
background-color: #FFFFFF; |
||||
.t{ |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #3F3F3F; |
||||
line-height: 100rpx; |
||||
.item{ |
||||
flex: 1; |
||||
text-align: center; |
||||
&-on{ |
||||
color: #F34A40; |
||||
} |
||||
} |
||||
} |
||||
.l{ |
||||
height: calc(100% - 120rpx); |
||||
box-sizing: border-box; |
||||
overflow: hidden; |
||||
.item{ |
||||
width: 270rpx; |
||||
height: 389rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 7rpx; |
||||
opacity: 1; |
||||
border: 1px solid #ECECEC; |
||||
padding: 10rpx 15rpx; |
||||
box-sizing: border-box; |
||||
float: left; |
||||
margin-left: 20rpx; |
||||
margin-bottom: 20rpx; |
||||
image{ |
||||
width: 230rpx; |
||||
height: 230rpx; |
||||
display: block; |
||||
margin: 0 auto; |
||||
} |
||||
.title{ |
||||
padding: 10rpx 0; |
||||
line-height: 40rpx; |
||||
font-size: 20rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #1E1E1E; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text{ |
||||
background-color: #F34A40; |
||||
font-size: 20rpx; |
||||
padding: 0 10rpx; |
||||
height: 40rpx; |
||||
line-height: 40rpx; |
||||
text-align: center; |
||||
border-radius: 4rpx; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
margin-right: 5rpx; |
||||
display: inline-block; |
||||
} |
||||
} |
||||
.price{ |
||||
display: flex; |
||||
align-items: center; |
||||
white-space: nowrap; |
||||
.n{ |
||||
display: flex; |
||||
align-items: baseline; |
||||
font-size: 11px; |
||||
font-weight: 500; |
||||
color: #F21A1C; |
||||
text{ |
||||
font-size: 29rpx; |
||||
} |
||||
} |
||||
.o{ |
||||
font-size: 12px; |
||||
color: #949494; |
||||
text-decoration: line-through; |
||||
} |
||||
} |
||||
.desc{ |
||||
font-size: 10px; |
||||
font-weight: 400; |
||||
color: #949494; |
||||
white-space: nowrap; |
||||
margin-top: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&-share{ |
||||
width: 548rpx; |
||||
height: 810rpx; |
||||
overflow: hidden; |
||||
.l{ |
||||
width: 548rpx; |
||||
background: #FFFFFF; |
||||
margin: 0 auto; |
||||
overflow: hidden; |
||||
position: relative; |
||||
.a{ |
||||
width: 490rpx; |
||||
height: 243rpx; |
||||
margin: 0 auto; |
||||
padding-top: 24rpx; |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.b{ |
||||
padding: 20rpx 20rpx; |
||||
overflow: hidden; |
||||
.item{ |
||||
width: 220rpx; |
||||
height: 369rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 7rpx; |
||||
opacity: 1; |
||||
border: 1px solid #ECECEC; |
||||
padding: 10rpx 0; |
||||
box-sizing: border-box; |
||||
float: left; |
||||
margin-left: 20rpx; |
||||
margin-bottom: 10rpx; |
||||
image{ |
||||
width: 180rpx; |
||||
height: 180rpx; |
||||
display: block; |
||||
margin: 0 auto; |
||||
} |
||||
.title{ |
||||
padding: 10rpx 0; |
||||
line-height: 40rpx; |
||||
font-size: 20rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #1E1E1E; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text{ |
||||
background-color: #F34A40; |
||||
font-size: 20rpx; |
||||
padding: 0 10rpx; |
||||
height: 40rpx; |
||||
line-height: 40rpx; |
||||
text-align: center; |
||||
border-radius: 4rpx; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
margin-right: 5rpx; |
||||
display: inline-block; |
||||
} |
||||
} |
||||
.price{ |
||||
display: flex; |
||||
align-items: center; |
||||
white-space: nowrap; |
||||
padding: 0 5rpx; |
||||
.n{ |
||||
display: flex; |
||||
align-items: baseline; |
||||
font-size: 11px; |
||||
font-weight: 500; |
||||
color: #F21A1C; |
||||
text{ |
||||
font-size: 29rpx; |
||||
} |
||||
} |
||||
.o{ |
||||
font-size: 12px; |
||||
color: #949494; |
||||
text-decoration: line-through; |
||||
} |
||||
} |
||||
.desc{ |
||||
padding: 0 5rpx; |
||||
font-size: 10px; |
||||
font-weight: 400; |
||||
color: #949494; |
||||
white-space: nowrap; |
||||
margin-top: 10rpx;overflow: hidden; |
||||
} |
||||
} |
||||
|
||||
} |
||||
.c{ |
||||
background-color: #F1F1F1; |
||||
height: 150rpx; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
image{ |
||||
width: 140rpx; |
||||
height: 122rpx; |
||||
margin-right: 30rpx; |
||||
} |
||||
} |
||||
} |
||||
.btn{ |
||||
width: 640rpx; |
||||
line-height: 80rpx; |
||||
text-align: center; |
||||
background: #F34A40; |
||||
position: fixed; |
||||
left: 50%; |
||||
margin-left: -320rpx; |
||||
top: 50%; |
||||
z-index: 2; |
||||
border-radius: 8rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 600; |
||||
color: #FFFFFF; |
||||
margin-top: 450rpx; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
<style> |
||||
.goods .uni-scroll-view .uni-scroll-view{ |
||||
overflow: auto!important; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
Loading…
Reference in new issue