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.
68 lines
1.3 KiB
68 lines
1.3 KiB
3 years ago
|
<!--
|
||
|
|
* @Author: ch
|
||
|
|
* @Date: 2022-03-21 18:08:07
|
||
|
|
* @LastEditors: ch
|
||
|
|
* @LastEditTime: 2022-03-21 18:28:55
|
||
|
|
* @Description: file content
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="banner"></view>
|
||
|
|
<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="list"></view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
page{
|
||
|
|
background: #F53739;
|
||
|
|
}
|
||
|
|
.banner{
|
||
|
|
height: 678rpx;
|
||
|
|
}
|
||
|
|
.tab{
|
||
|
|
height:120rpx;
|
||
|
|
margin: 0 18rpx;
|
||
|
|
background: linear-gradient(180deg, #FDDBAE 0%, #FEC793 25%, #FFB378 97%, #FFB378 100%);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
&--item{
|
||
|
|
font-size: 24rpx;
|
||
|
|
line-height: 45rpx;
|
||
|
|
color: #EF6817;
|
||
|
|
&__active{
|
||
|
|
color: #F53739;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&--time{
|
||
|
|
display: block;
|
||
|
|
font-size: 32rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list{
|
||
|
|
margin: 0 20rpx;
|
||
|
|
padding: 30rpx;
|
||
|
|
}
|
||
|
|
</style>
|