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.
shop-app/pages/sekill/index.vue

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>