You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
325 lines
6.5 KiB
325 lines
6.5 KiB
<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" @click="goodsDetail(item)">
|
|
<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',
|
|
},
|
|
}
|
|
},
|
|
methods:{
|
|
goodsDetail(item){
|
|
uni.navigateTo({
|
|
url:'/pages/goods/detail'
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</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> |