syt
1 year ago
parent
d93c0ae2bc
commit
0ac6795c35
@ -1,418 +0,0 @@ |
||||
<template> |
||||
<view class="intimate"> |
||||
<view class="intimate-navbar"> |
||||
<u-navbar title="贴心服务" :border-bottom="false" :background="background"></u-navbar> |
||||
</view> |
||||
<view class="intimate-hd"> |
||||
<image src="@/static/home/phone.jpg"></image> |
||||
<view class="a">大白兔维修<u-icon style="margin-left: 10rpx;" name="arrow-right"></u-icon></view> |
||||
<view class="b">上门服务 细心周到</view> |
||||
</view> |
||||
<scroll-view scroll-x class="intimate-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="intimate-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> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import img from "@/static/news/refund-bg1.png" |
||||
export default { |
||||
data() { |
||||
return { |
||||
background: { |
||||
background: 'transparent', |
||||
backgroundSize: '100%', |
||||
}, |
||||
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> |
||||
.intimate{ |
||||
background: url(@/static/news/refund-bg1.png) center top no-repeat; |
||||
background-size: 100% auto; |
||||
&-hd{ |
||||
width: 686rpx; |
||||
height: 170rpx; |
||||
background: rgba(255,255,255,0.86); |
||||
border-radius: 12rpx; |
||||
margin: 0 auto; |
||||
padding-top: 40rpx; |
||||
box-sizing: border-box; |
||||
margin-top: 30rpx; |
||||
position: relative; |
||||
image{ |
||||
position: absolute; |
||||
width: 162rpx; |
||||
height: 162rpx; |
||||
border-radius: 162rpx; |
||||
left: 18rpx; |
||||
top: -20rpx; |
||||
} |
||||
.a{ |
||||
font-size: 32rpx; |
||||
color: #212121; |
||||
margin-left: 220rpx; |
||||
} |
||||
.b{ |
||||
margin-left: 220rpx; |
||||
font-size: 28rpx; |
||||
color: #646464; |
||||
margin-top: 10rpx; |
||||
} |
||||
} |
||||
&-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> |
||||
@ -0,0 +1,190 @@ |
||||
<template> |
||||
<view class="presale"> |
||||
<view class="presale-hd"> |
||||
<view class="rule" @click="openPage()"></view> |
||||
</view> |
||||
<view class="presale-bd"> |
||||
<view class="tab"> |
||||
<u-tabs :list="list" :is-scroll="true" :show-bar="false" active-color="#FFFFFF" bg-color="rgba(255,255,255,0)" inactive-color="rgba(255,255,255,0.62)" v-model="current"></u-tabs> |
||||
</view> |
||||
<view class="title"> |
||||
<image src="@/static/news/newPresale-1.png"></image> |
||||
正在进行中 |
||||
<image src="@/static/news/newPresale-1.png"></image> |
||||
</view> |
||||
<view class="list"> |
||||
<view class="item" v-for="i in 10" :key="i"> |
||||
<image class="pic" src="@/static/home/phone.jpg"></image> |
||||
<view class="info"> |
||||
<view class="t">一加Ace 2pro超值砍价手机全网通双卡双待</view> |
||||
<view class="d"><u-count-down :timestamp="timestamp" format="HH:mm:ss"></u-count-down><text>后失效</text></view> |
||||
<view class="p"> |
||||
<image src="@/static/news/newPresale-2.png"></image> |
||||
<view class="s">预约价¥4189</view> |
||||
<view class="n">去预约</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import img from "@/static/news/newPeople-bg.png" |
||||
export default { |
||||
data() { |
||||
return { |
||||
timestamp: 24*3600*1000, |
||||
current: 0, |
||||
list: [{ |
||||
name: '精选好物' |
||||
}, { |
||||
name: '吹风机' |
||||
}, { |
||||
name: '空调' |
||||
}, { |
||||
name: '手机' |
||||
}, { |
||||
name: '洗衣机' |
||||
}, { |
||||
name: '冰箱' |
||||
}, { |
||||
name: '彩电' |
||||
}], |
||||
} |
||||
}, |
||||
methods: { |
||||
openPage() { |
||||
uni.navigateTo({ |
||||
url: "/pages/activity/presaleRule" |
||||
}) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.presale{ |
||||
background: #ff7b79 url(@/static/news/newPresale-bg.jpg) center top no-repeat; |
||||
background-size: 100% auto; |
||||
overflow: hidden; |
||||
min-height: 100vh; |
||||
&-hd{ |
||||
position: relative; |
||||
height: 380rpx; |
||||
.rule{ |
||||
width: 100rpx; |
||||
height: 60rpx; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 74rpx; |
||||
z-index: 2; |
||||
} |
||||
} |
||||
&-bd{ |
||||
width: 678rpx; |
||||
margin: 0 auto; |
||||
padding-bottom: 30rpx; |
||||
margin-top: 20rpx; |
||||
.title{ |
||||
width: 100%; |
||||
border-radius: 12rpx 12rpx 0 0; |
||||
height: 78rpx; |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
border: 2px solid #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
image{ |
||||
width: 32rpx; |
||||
height: 13rpx; |
||||
margin: 0 20rpx; |
||||
} |
||||
} |
||||
.list{ |
||||
background-color: #fff; |
||||
border-radius: 0 0 12rpx 12rpx; |
||||
overflow: hidden; |
||||
.item{ |
||||
padding: 45rpx 45rpx; |
||||
overflow: hidden; |
||||
border-top: 1px solid #F1F1F1; |
||||
&:first-child{ |
||||
border-top-color: #fff; |
||||
} |
||||
display: flex; |
||||
image{ |
||||
width: 220rpx; |
||||
height: 220rpx; |
||||
margin-right: 10rpx; |
||||
} |
||||
.info{ |
||||
flex: 1; |
||||
max-width: 400rpx; |
||||
.t{ |
||||
height: 80rpx; |
||||
line-height: 40rpx; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #626262; |
||||
word-break: break-all; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
} |
||||
.d{ |
||||
display: flex; |
||||
align-items: center; |
||||
height: 60rpx; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #F94021; |
||||
text{ |
||||
color: #9E9E9E; |
||||
margin-left: 10rpx; |
||||
} |
||||
} |
||||
.p{ |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
position: relative; |
||||
image{ |
||||
width: 396rpx; |
||||
height: 88rpx; |
||||
} |
||||
.s{ |
||||
width: 240rpx; |
||||
line-height: 88rpx; |
||||
position: absolute; |
||||
text-align: center; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 2; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #FF584D; |
||||
} |
||||
.n{ |
||||
width: 150rpx; |
||||
line-height: 88rpx; |
||||
text-align: center; |
||||
position: absolute; |
||||
right: 0; |
||||
top: 0; |
||||
z-index: 2; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,36 @@ |
||||
<template> |
||||
<view class="presale"> |
||||
<view class="title">预售规则：</view> |
||||
<view class="p">1、选择心仪的商品，邀请好友一起砍价，每次砍价金额以页面显示为准，参与好友越多商品到手价越低。</view> |
||||
<view class="p">2、砍价商品会设置可砍金额，在规定时间内砍到可砍金额后即可按对应金额优惠下单。选择下单购买后该笔砍价订单不再支持继续砍价。</view> |
||||
<view class="p">3、发起砍价后，需要在指定时间内完成砍价 (以页面显示为准)，未完成最终砍价可按已砍金额进行下单购买，砍价进行中也可按已砍金额进行下单购买</view> |
||||
<view class="p">4、砍价结束后，需要在指定时间内完成下单 (以页面显示为准)，未在指定时间内完成下单所造成的砍价优惠无法使用，平台不再额外补发。</view> |
||||
<view class="p">5、每个新用户 (注册24小时内的用户) 可帮好友完成一次砍价，如出现用户ID不同，但存在下列情形的: 包括但不限于微信账户、收货人姓名、详细地址、联系方式、支付信息、IP地址、设备号等信息的任意一项或数项相同或重叠的，均将被认定为同一用户。 同一设备仅支持一个账号登录进行该活动。</view> |
||||
<view class="p"> |
||||
6、如小当严选发现用户存在弄虚作假、作弊、套现、洗钱、赌博等违规行为 (包括并不仅限于恶意刷单、非正常手段砍成，使用非法工具分享、下载、安装、注册、登录多个账号及其他不正当手段) 侵害小当严选利益的，小当严选有权对用户进行异常标记，小当严选将取消用户的活动资格并有权不发放奖励、撤销剩余奖励、收回用户可领取的奖励，追讨已发放的奖励，并保留追究该用户责任的权利。 |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.presale{ |
||||
height: 100vh; |
||||
background-color: #fff; |
||||
padding: 0 40rpx; |
||||
overflow-y: auto; |
||||
.title{ |
||||
padding: 40rpx 0; |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
color: #000000; |
||||
} |
||||
.p{ |
||||
font-size: 26rpx; |
||||
line-height: 46rpx; |
||||
color: #212121; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,194 @@ |
||||
<template> |
||||
<view class="recycling"> |
||||
<view class="recycling-navbar"> |
||||
<u-navbar title="上门回收" :border-bottom="false" :background="isScroll?background:background1"></u-navbar> |
||||
</view> |
||||
<view class="recycling-hd"></view> |
||||
<view class="recycling-notice"> |
||||
<image src="@/static/news/icon-volume.png"></image> |
||||
<view class="notice"> |
||||
<u-notice-bar mode="horizontal" :volume-icon="false" bg-color="#fff" color="#212121" :list="list"></u-notice-bar> |
||||
</view> |
||||
</view> |
||||
<view class="recycling-bd"> |
||||
<view class="tab"> |
||||
<view class="item" :class="tabIndex==0?'item-on':''" @click="tabItem(0)"> |
||||
<image v-if="tabIndex==0" src="@/static/news/icon-recycling-01-on.png"></image> |
||||
<image v-else src="@/static/news/icon-recycling-01.png"></image> |
||||
家电回收 |
||||
</view> |
||||
<view class="item" :class="tabIndex==1?'item-on':''" @click="tabItem(1)"> |
||||
<image v-if="tabIndex==1" src="@/static/news/icon-recycling-02-on.png"></image> |
||||
<image v-else src="@/static/news/icon-recycling-02.png"></image> |
||||
手机回收 |
||||
</view> |
||||
<view class="item" :class="tabIndex==2?'item-on':''" @click="tabItem(2)"> |
||||
<image v-if="tabIndex==2" src="@/static/news/icon-recycling-03-on.png"></image> |
||||
<image v-else src="@/static/news/icon-recycling-03.png"></image> |
||||
电脑回收 |
||||
</view> |
||||
<view class="item" :class="tabIndex==3?'item-on':''" @click="tabItem(3)"> |
||||
<image v-if="tabIndex==3" src="@/static/news/icon-recycling-04-on.png"></image> |
||||
<image v-else src="@/static/news/icon-recycling-04.png"></image> |
||||
平板回收 |
||||
</view> |
||||
</view> |
||||
<view class="list"> |
||||
<view class="item" v-for="i in 10" :key="i"> |
||||
<image src="@/static/home/phone.jpg"></image> |
||||
<view class="info"> |
||||
<view class="title">苹果手机上门回收</view> |
||||
<view class="desc">专业上门回收</view> |
||||
<view class="price"> |
||||
<view class="btn"></view> |
||||
<view class="num">已售400+ 好评87%</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import img from "@/static/news/recycling-bg.png" |
||||
export default { |
||||
data() { |
||||
return { |
||||
isScroll: true, |
||||
tabIndex: 0, |
||||
background: { |
||||
background: 'transparent', |
||||
}, |
||||
background1: { |
||||
background: '#fff', |
||||
}, |
||||
list: ['寒雨连江夜入吴', |
||||
'平明送客楚山孤', |
||||
'洛阳亲友如相问', |
||||
'一片冰心在玉壶'], |
||||
} |
||||
}, |
||||
onPageScroll(e){ |
||||
if(e.scrollTop <= 44){ |
||||
this.isScroll = true; |
||||
}else{ |
||||
this.isScroll = false; |
||||
} |
||||
}, |
||||
methods: { |
||||
tabItem(index){ |
||||
this.tabIndex = index; |
||||
}, |
||||
tabItem1(index){ |
||||
this.tabIndex1 = index; |
||||
}, |
||||
tabFilter(index){ |
||||
this.filterIndex = index; |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.recycling{ |
||||
background: url(@/static/news/recycling-bg.png) center top no-repeat; |
||||
background-size: 100% auto; |
||||
&-hd{ |
||||
height: 340rpx; |
||||
} |
||||
&-notice{ |
||||
background-color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 0 30rpx; |
||||
image{ |
||||
width: 50rpx; |
||||
height: 50rpx; |
||||
display: block; |
||||
} |
||||
.notice{ |
||||
width: 500rpx; |
||||
flex: 1; |
||||
} |
||||
} |
||||
&-bd{ |
||||
padding: 30rpx 0 30rpx 36rpx; |
||||
overflow: hidden; |
||||
background-color: #fff; |
||||
.tab{ |
||||
width: 100%; |
||||
.item{ |
||||
width: 25%; |
||||
float: left; |
||||
text-align: center; |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #4F4F4F; |
||||
position: relative; |
||||
padding-bottom: 30rpx; |
||||
image{ |
||||
width: 60rpx; |
||||
height: 60rpx; |
||||
display: block; |
||||
margin: 0 auto; |
||||
margin-bottom: 12rpx; |
||||
} |
||||
&-on{ |
||||
color: #FF4949; |
||||
&::after{ |
||||
content: ""; |
||||
width: 50rpx; |
||||
height: 6rpx; |
||||
background: #FF4949; |
||||
border-radius: 6rpx; |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 10rpx; |
||||
z-index: 1; |
||||
margin-left: -25rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.list{ |
||||
width: 100%; |
||||
overflow: hidden; |
||||
.item{ |
||||
padding: 28rpx 0; |
||||
overflow: hidden; |
||||
display: flex; |
||||
border-top: 1px solid #F2F2F2; |
||||
&:first-child{ |
||||
border-top-color: #fff; |
||||
} |
||||
image{ |
||||
width: 234rpx; |
||||
height: 222rpx; |
||||
border-radius: 12rpx; |
||||
margin-right: 20rpx; |
||||
} |
||||
.info{ |
||||
max-width: 500rpx; |
||||
white-space: nowrap; |
||||
.title{ |
||||
overflow: hidden; |
||||
font-size: 28rpx; |
||||
text-overflow: ellipsis; |
||||
font-weight: 600; |
||||
color: #2C2C2C; |
||||
} |
||||
.desc{ |
||||
overflow: hidden; |
||||
font-size: 28rpx; |
||||
text-overflow: ellipsis; |
||||
margin-top: 10rpx; |
||||
color: #888888; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 281 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 86 KiB |
Loading…
Reference in new issue