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.
238 lines
5.4 KiB
238 lines
5.4 KiB
<template>
|
|
<view class="content">
|
|
<view class="ctab">
|
|
<u-tabs :list="list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
|
|
</view>
|
|
<view class="com">
|
|
<view class="list">
|
|
<view class="left">
|
|
<image src="../../static/tu.png" mode=""></image>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
|
|
<view class="tips">
|
|
<view class="u-line-progress">
|
|
<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
|
|
</view>
|
|
<text class="progress">已抢25%</text>
|
|
<text class="bought">2.4万人已购买</text>
|
|
</view>
|
|
<view class="price">
|
|
<text>￥</text><text>19</text>.<text>90</text>
|
|
<text>￥39.00</text>
|
|
<button>立即抢购</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view class="left">
|
|
<image src="../../static/tu.png" mode=""></image>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
|
|
<view class="tips">
|
|
<view class="u-line-progress">
|
|
<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
|
|
</view>
|
|
<text class="progress">已抢25%</text>
|
|
<text class="bought">2.4万人已购买</text>
|
|
</view>
|
|
<view class="price">
|
|
<text>￥</text><text>19</text>.<text>90</text>
|
|
<text>￥39.00</text>
|
|
<button>立即抢购</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view class="left">
|
|
<image src="../../static/tu.png" mode=""></image>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
|
|
<view class="tips">
|
|
<view class="u-line-progress">
|
|
<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
|
|
</view>
|
|
<text class="progress">已抢25%</text>
|
|
<text class="bought">2.4万人已购买</text>
|
|
</view>
|
|
<view class="price">
|
|
<text>￥</text><text>19</text>.<text>90</text>
|
|
<text>￥39.00</text>
|
|
<button>立即抢购</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [{
|
|
name: '推荐'
|
|
}, {
|
|
name: '每日必抢'
|
|
}, {
|
|
name: '生活用品'
|
|
},{
|
|
name: '家政服务'
|
|
},{
|
|
name: '美食部落'
|
|
},{
|
|
name: '奶茶夏日'
|
|
},{
|
|
name: '奶茶夏日'
|
|
}],
|
|
current: 0
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
methods: {
|
|
change(index) {
|
|
this.current = index;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo {
|
|
height: 200rpx;
|
|
width: 200rpx;
|
|
margin-top: 100rpx;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
.text-area {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: $u-content-color;
|
|
}
|
|
|
|
.button-demo {
|
|
margin-top: 80rpx;
|
|
}
|
|
|
|
.link-demo {
|
|
margin-top: 80rpx;
|
|
}
|
|
.ctab{
|
|
width: 100%;
|
|
margin: 20rpx 0 0rpx 0rpx;
|
|
padding: 0 22rpx;
|
|
}
|
|
.com{
|
|
width: 100%;
|
|
overflow: hidden;
|
|
.list{
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
margin: 20rpx 32rpx;
|
|
background-color: #FFFFFF;
|
|
box-shadow:0 0 10px 5px #e5e5e5;
|
|
.left{
|
|
overflow: hidden;
|
|
float: left;
|
|
image{
|
|
width: 204rpx;
|
|
height: 204rpx;
|
|
margin: 20rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.right{
|
|
overflow: hidden;
|
|
.title{
|
|
margin: 18rpx 20rpx 0 0;
|
|
overflow: hidden;
|
|
color: #222222;
|
|
font-size: 32rpx;
|
|
height: 80rpx;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.tips{
|
|
margin: 16rpx 0;
|
|
overflow: hidden;
|
|
.u-line-progress{
|
|
width: 112rpx;
|
|
overflow: hidden;float: left;
|
|
margin-right:20rpx ;
|
|
}
|
|
.progress{
|
|
color: #777777;
|
|
font-size: 24rpx;
|
|
}
|
|
.bought{
|
|
color: #777777;
|
|
font-size: 24rpx;
|
|
float: right;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.price{
|
|
overflow: hidden;
|
|
color:#FF0000;
|
|
text{
|
|
font-size: 48rpx;
|
|
color:#FF0000;
|
|
font-weight: 500;
|
|
}
|
|
text:nth-child(1){
|
|
color: #FF0000;
|
|
font-size: 28rpx;
|
|
}
|
|
text:nth-child(2){
|
|
color: #FF0000;
|
|
font-size: 48rpx;
|
|
}
|
|
text:nth-child(3){
|
|
color: #FF0000;
|
|
font-size: 28rpx;
|
|
}
|
|
text:nth-child(4){
|
|
color: #777777;
|
|
font-size: 28rpx;
|
|
text-decoration:line-through;
|
|
font-weight: 400;
|
|
}
|
|
button{
|
|
width: 176rpx;
|
|
height: 60rpx;
|
|
background: #FE9903;
|
|
border-radius: 15px;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
float: right;
|
|
margin: 10rpx 20rpx 20rpx 20rpx;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|