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.
147 lines
2.7 KiB
147 lines
2.7 KiB
3 months ago
|
<template>
|
||
|
|
<view class="miaosha">
|
||
|
|
<view class="title">
|
||
|
|
<view class="left">
|
||
|
|
<image src="../../static/images/img/miaosha.png" mode="heightFix"></image>
|
||
|
|
<text>13点场</text>
|
||
|
|
<view class="time">
|
||
|
|
<view class="timeItem">
|
||
|
|
13
|
||
|
|
</view>
|
||
|
|
<text>:</text>
|
||
|
|
<view class="timeItem">
|
||
|
|
00
|
||
|
|
</view>
|
||
|
|
<text>:</text>
|
||
|
|
<view class="timeItem">
|
||
|
|
00
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<text>更多</text>
|
||
|
|
<image src="../../static/images/img/jiantou.png" mode="widthFix"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="list">
|
||
|
|
<view class="listItem" v-for="item in 5" :key="item">
|
||
|
|
<view class="pic">
|
||
|
|
<image src="../../static/images/img/example.png" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="price">
|
||
|
|
￥199+2红包
|
||
|
|
</view>
|
||
|
|
<view class="oldPrice">
|
||
|
|
￥299
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.miaosha{
|
||
|
|
margin: 20rpx 24rpx;
|
||
|
|
background: linear-gradient(0deg, #FFFFFF, #FAE4D5);
|
||
|
|
border-radius: 20rpx;
|
||
|
|
padding:22rpx;
|
||
|
|
.title{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.left{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
&>image{
|
||
|
|
height: 29rpx;
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
&>text{
|
||
|
|
font-family: Source Han Sans SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #222222;
|
||
|
|
margin: 0 20rpx;
|
||
|
|
}
|
||
|
|
.time{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.timeItem{
|
||
|
|
width: 34rpx;
|
||
|
|
height: 34rpx;
|
||
|
|
background: #EB6100;
|
||
|
|
border-radius: 5px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 34rpx;
|
||
|
|
font-family: Microsoft YaHei;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
&>text{
|
||
|
|
font-family: Source Han Sans SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #222222;
|
||
|
|
margin:0 12rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.right{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
text{
|
||
|
|
|
||
|
|
font-family: Source Han Sans SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
image{
|
||
|
|
width: 44rpx;
|
||
|
|
height: 44rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list{
|
||
|
|
display: flex;
|
||
|
|
margin-top:18rpx;
|
||
|
|
.listItem{
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 20%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
.pic{
|
||
|
|
width: 90rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding:10rpx;
|
||
|
|
text-align: center;
|
||
|
|
&>image{
|
||
|
|
width: 100%;
|
||
|
|
height:100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.price{
|
||
|
|
margin:12rpx 0;
|
||
|
|
font-family: Source Han Sans SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #EB6100;
|
||
|
|
}
|
||
|
|
.oldPrice{
|
||
|
|
font-family: Source Han Sans SC;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 20rpx;
|
||
|
|
color: #999999;
|
||
|
|
text-decoration-line: line-through;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|