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.
196 lines
4.2 KiB
196 lines
4.2 KiB
<!--
|
|
* @Author: ch
|
|
* @Date: 2022-03-21 18:08:07
|
|
* @LastEditors: ch
|
|
* @LastEditTime: 2022-03-26 18:01:12
|
|
* @Description: file content
|
|
-->
|
|
<template>
|
|
<view>
|
|
<image class="banner" src="@/static/sekill/banner.png"/>
|
|
<view class="tab">
|
|
<view class="tab--item">
|
|
<text class="tab--time">16:00</text>
|
|
<text>已开抢</text>
|
|
</view>
|
|
<view class="tab--item tab--item__active">
|
|
<text class="tab--time">18:00</text>
|
|
<text>已结束</text>
|
|
</view>
|
|
<view class="tab--item">
|
|
<text class="tab--time">20:00</text>
|
|
<text>即将开抢</text>
|
|
</view>
|
|
<view class="tab--item">
|
|
<text class="tab--time">20:00</text>
|
|
<text>即将开抢</text>
|
|
</view>
|
|
<view class="tab--item">
|
|
<text class="tab--time">20:00</text>
|
|
<text>即将开抢</text>
|
|
</view>
|
|
</view>
|
|
<view class="goods">
|
|
<view class="goodsItem" v-for="item in 3" :key="item">
|
|
<image class="goodsItem--image" src="@/static/testImg/2.png"/>
|
|
<view class="goodsItem--con">
|
|
<text>马士兵教育马士兵教育</text>
|
|
<view class="goodsItem--progBox">
|
|
<u-line-progress class="goodsItem--prog" :percentage="30" :showText="false" height="11rpx" activeColor="#FE0A16" inactiveColor="#FF8E8F" />
|
|
<text>仅剩0件</text>
|
|
</view>
|
|
<view class="goodsItem--operation">
|
|
<view>
|
|
<view class="goodsItem--price">￥9.9</view>
|
|
<text class="goodsItem--orgPrice">￥19.00</text>
|
|
</view>
|
|
<button v-if="item % 2 == 0" class="goodsItem--btn">立即抢购</button>
|
|
<button v-else class="goodsItem--btn goodsItem--btn__disable">已售罄</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
page{
|
|
background: #F53739;
|
|
}
|
|
.banner{
|
|
height: 678rpx;
|
|
width: 750rpx;
|
|
}
|
|
.tab{
|
|
height:120rpx;
|
|
margin: 20rpx 18rpx 0;
|
|
background: linear-gradient(180deg, #FDDBAE 0%, #FEC793 25%, #FFB378 97%, #FFB378 100%);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 0 30rpx;
|
|
&::after,&::before{
|
|
display: block;
|
|
content: '';
|
|
width: 24rpx;
|
|
height: 164rpx;
|
|
background: url('@/static/sekill/jz.png') no-repeat;
|
|
transform: rotate(180deg);
|
|
background-size: 24rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: -22rpx;
|
|
}
|
|
&::before{
|
|
left: 0;
|
|
transform: rotate(0deg);
|
|
}
|
|
&--item{
|
|
font-size: 24rpx;
|
|
line-height: 45rpx;
|
|
color: #EF6817;
|
|
&__active{
|
|
color: #F53739;
|
|
}
|
|
}
|
|
&--time{
|
|
display: block;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
.goods{
|
|
min-height: calc(100vh - 826rpx);
|
|
overflow: hidden;
|
|
margin: 0 20rpx;
|
|
padding: 10rpx 30rpx 0;
|
|
background: #DF1F21;
|
|
box-shadow: 0 10rpx 20rpx rgba($color: #000000, $alpha: .1) inset;
|
|
}
|
|
.goodsItem{
|
|
width: 650rpx;
|
|
height: 258rpx;
|
|
margin: 30rpx auto;
|
|
border-radius: 12rpx;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(181deg, #FFF1D5 0%, #FBE0BB 21%, #F7CFA1 88%, #F7CFA1 100%);
|
|
&--image{
|
|
width: 190rpx;
|
|
height: 190rpx;
|
|
background: #F0EEE6;
|
|
border-radius: 12rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
&--con{
|
|
width: 378rpx;
|
|
padding-top: 10rpx;
|
|
}
|
|
&--progBox{
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
font-size: 22rpx;
|
|
color: #F31F07;
|
|
}
|
|
&--prog{
|
|
width: 167rpx;
|
|
margin-right: 20rpx;
|
|
flex: initial;
|
|
}
|
|
&--operation{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 24rpx;
|
|
align-items: flex-end;
|
|
}
|
|
&--price{
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
color: #F31F07;
|
|
font-weight: bold;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
&::before{
|
|
display: block;
|
|
content: '秒';
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
border-radius: 6rpx;
|
|
background: #FE0A16;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
&--orgPrice{
|
|
font-size: 24rpx;
|
|
color: #BE4903;
|
|
text-decoration: line-through;
|
|
}
|
|
&--btn{
|
|
width: 166rpx;
|
|
height: 62rpx;
|
|
line-height: 62rpx;
|
|
background: url('@/static/sekill/btn.png');
|
|
background-size: 166rpx;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
padding: 0;
|
|
border: none;
|
|
margin: 0;
|
|
color: #791704;
|
|
&::after{
|
|
display: none;
|
|
}
|
|
&__disable{
|
|
background: url('@/static/sekill/btn2.png');
|
|
background-size: 166rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |