dev
zhouzhenyuan
1 year ago
parent
b8a76e2d9a
commit
b43595509b
@ -0,0 +1,318 @@ |
||||
<template> |
||||
<view class="seckill"> |
||||
<view > |
||||
<u-navbar title="限时秒杀" back-icon-color="#fff" :border-bottom="false" title-color="#fff" :background="background"></u-navbar> |
||||
</view> |
||||
<view class="title"> |
||||
<image src="/static/seckill/topHeader.png" mode="" class="bgImg"></image> |
||||
<view class="limitTitle"> |
||||
<image src="/static/seckill/limit.png" mode="" class="img"></image> |
||||
</view> |
||||
<view class="time"> |
||||
<view class="timeItem" v-for="(item,index) in 4" :key="index"> |
||||
<view class="num"> |
||||
10:00 |
||||
</view> |
||||
<view class="desc"> |
||||
疯抢中 |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class="main"> |
||||
<view class="over"> |
||||
<view class="info"> |
||||
距秒杀结束还剩 |
||||
</view> |
||||
<view class="hou com"> |
||||
08 |
||||
</view>: |
||||
<view class="min com"> |
||||
50 |
||||
</view>: |
||||
<view class="sec com"> |
||||
12 |
||||
</view> |
||||
</view> |
||||
<view class="goodsList"> |
||||
<view class="goodItem" v-for="(item,index) in 3" :key="index"> |
||||
<view class="itemImg"> |
||||
<image src="/static/newGoods/goods.png" mode="" class="goodsImg"></image> |
||||
</view> |
||||
<view class="goodsInfo"> |
||||
<view class="name"> |
||||
Apple iphone 15(A3092) |
||||
</view> |
||||
<view class="sellNum"> |
||||
爆卖76件 |
||||
</view> |
||||
<view class="info"> |
||||
<view class="price"> |
||||
¥1849 |
||||
</view> |
||||
<view class="delPrice"> |
||||
<view class="delText"> |
||||
直降32元 |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="update"> |
||||
即将调整 |
||||
</view> |
||||
</view> |
||||
<view class="line"> |
||||
<image src="/static/seckill/line.png" mode=""></image> |
||||
</view> |
||||
<view class="btn"> |
||||
<view class="killPrice"> |
||||
秒杀价￥1149 |
||||
</view> |
||||
<view class="buyNow"> |
||||
立即抢 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import img from "@/static/seckill/topHeader.png" |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
background: { |
||||
background: 'url('+ img+') center top no-repeat', |
||||
backgroundSize: '100% auto', |
||||
}, |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.seckill{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.title{ |
||||
width: 100%; |
||||
height: 180rpx; |
||||
position: relative; |
||||
.bgImg{ |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: -1; |
||||
} |
||||
.limitTitle{ |
||||
display: flex; |
||||
justify-content: center; |
||||
z-index: 20; |
||||
.img{ |
||||
margin-top: 20rpx; |
||||
width: 302rpx; |
||||
height: 82rpx; |
||||
z-index: 20; |
||||
} |
||||
} |
||||
.time{ |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
justify-content: space-around; |
||||
z-index: 30; |
||||
.timeItem{ |
||||
.num{ |
||||
width: 102rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
line-height: 33rpx; |
||||
text-shadow: 0px 0px 11px #FB3A22; |
||||
text-align: center; |
||||
} |
||||
.desc{ |
||||
width: 102rpx; |
||||
height: 36rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 62rpx 62rpx 62rpx 62rpx; |
||||
opacity: 1; |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FB3D27; |
||||
line-height: 36rpx; |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.main{ |
||||
width: 100%; |
||||
height: 100%; |
||||
background: #F4F6FA; |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
opacity: 1; |
||||
padding-top:34rpx ; |
||||
.over{ |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #3C3C3C; |
||||
.info{ |
||||
line-height: 40rpx; |
||||
margin-right: 18rpx; |
||||
} |
||||
.com{ |
||||
width: 54rpx; |
||||
height: 48rpx; |
||||
background: #252525; |
||||
border-radius: 4rpx 4rpx 4rpx 4rpx; |
||||
opacity: 1; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
line-height: 48rpx; |
||||
text-align: center; |
||||
} |
||||
.hou{ |
||||
margin-right: 4rpx; |
||||
} |
||||
.min{ |
||||
margin: 0 4rpx; |
||||
} |
||||
.sec{ |
||||
margin-left: 4rpx; |
||||
} |
||||
} |
||||
} |
||||
.goodsList{ |
||||
margin-top: 22rpx; |
||||
.goodItem{ |
||||
margin-left: 34rpx; |
||||
width: 686rpx; |
||||
height: 342rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 8rpx 8rpx 8rpx 8rpx; |
||||
opacity: 1; |
||||
display: flex; |
||||
padding: 48rpx 32rpx 36rpx 6rpx; |
||||
margin-bottom: 26rpx; |
||||
.itemImg{ |
||||
width: 258rpx; |
||||
height: 258rpx; |
||||
border-radius: 0rpx 0rpx 0rpx 0rpx; |
||||
opacity: 1; |
||||
.goodsImg{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.goodsInfo{ |
||||
.name{ |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #0E0E0E; |
||||
line-height: 44rpx; |
||||
} |
||||
.sellNum{ |
||||
height: 44rpx; |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #A9A9A9; |
||||
line-height: 44rpx; |
||||
margin-bottom: 8rpx; |
||||
} |
||||
.info{ |
||||
display: flex; |
||||
.price{ |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #979797; |
||||
line-height: 40rpx; |
||||
} |
||||
.delPrice{ |
||||
width: 132rpx; |
||||
height: 48rpx; |
||||
font-size: 20rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FB402B; |
||||
line-height: 23rpx; |
||||
background-image: url('../../static/seckill/bottom.png'); |
||||
background-size: 100% 100%; |
||||
margin:0 12rpx 0 14rpx; |
||||
.delText{ |
||||
width: 132rpx; |
||||
text-align: center; |
||||
margin-top: 4rpx; |
||||
} |
||||
} |
||||
.update{ |
||||
width: 112rpx; |
||||
height: 40rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #979797; |
||||
line-height: 40rpx; |
||||
} |
||||
} |
||||
.line{ |
||||
width: 302rpx; |
||||
height: 30rpx; |
||||
margin-left:22rpx; |
||||
image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.btn{ |
||||
margin-top: 14rpx; |
||||
width: 390rpx; |
||||
height: 70rpx; |
||||
border-radius: 96rpx 96rpx 96rpx 96rpx; |
||||
opacity: 1; |
||||
text-align: center; |
||||
line-height: 70rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
background-image: url('../../static/seckill/btnBg.png'); |
||||
background-size: 100% 100%; |
||||
.killPrice{ |
||||
font-size: 24rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FF423D; |
||||
margin-left: 26rpx; |
||||
} |
||||
.buyNow{ |
||||
width: 84rpx; |
||||
font-size: 28rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
margin-right: 34rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 30 KiB |
Loading…
Reference in new issue