214 lines
3.5 KiB
Vue
214 lines
3.5 KiB
Vue
<template>
|
||
<view class="app">
|
||
<view class="tabs">
|
||
<view class="tab-item">
|
||
<view class="title">
|
||
卷
|
||
</view>
|
||
<view class="text">
|
||
2张
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="statuss">
|
||
<view class="statusitem">
|
||
待领取
|
||
</view>
|
||
<span> |</span>
|
||
<view class="statusitem">
|
||
已使用
|
||
</view>
|
||
<span> |</span>
|
||
<view class="statusitem">
|
||
已过期
|
||
</view>
|
||
</view>
|
||
<view class="rollup">
|
||
<view class="item">
|
||
<view class="top">
|
||
<view class="title">
|
||
<span class="text">
|
||
￥
|
||
</span>
|
||
<span class="price">
|
||
6
|
||
</span>
|
||
</view>
|
||
<view class="what">
|
||
商品优惠卷
|
||
</view>
|
||
<view class="texts">
|
||
满60可用
|
||
</view>
|
||
<view class="time">
|
||
有效期至 2023.02.28 23:59
|
||
</view>
|
||
<view class="btn">
|
||
领取
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
领取来源：首页新人福利
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
padding: 0;
|
||
|
||
.content {
|
||
width: 96%;
|
||
margin: 20rpx auto 0;
|
||
background-color: #fff;
|
||
padding-bottom: 100rpx;
|
||
|
||
.rollup {
|
||
border-radius: 5rpx;
|
||
|
||
.item {
|
||
width: 94%;
|
||
height: 240rpx;
|
||
margin: 20rpx auto 0;
|
||
border: 1rpx solid #f4f5f7;
|
||
|
||
.bottom {
|
||
font-size: 22rpx;
|
||
color: #969394;
|
||
line-height: 60rpx;
|
||
padding-left: 25rpx;
|
||
}
|
||
|
||
.top {
|
||
width: 100%;
|
||
height: 180rpx;
|
||
background: #FDE9E8;
|
||
position: relative;
|
||
color: #F44B2F;
|
||
|
||
.what {
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
background: #FED1D2;
|
||
border-radius: 16rpx;
|
||
font-size: 20rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
top: 120rpx;
|
||
left: 40rpx;
|
||
}
|
||
|
||
.btn {
|
||
width: 98rpx;
|
||
height: 50rpx;
|
||
border: 2rpx solid #F44B2F;
|
||
border-radius: 24rpx;
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
top: 70rpx;
|
||
right: 40rpx;
|
||
text-align: center;
|
||
line-height: 49rpx;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
top: 120rpx;
|
||
left: 200rpx;
|
||
}
|
||
|
||
.texts {
|
||
font-size: 34rpx;
|
||
font-weight: 800;
|
||
position: absolute;
|
||
top: 44rpx;
|
||
left: 200rpx;
|
||
}
|
||
|
||
.title {
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: 50rpx;
|
||
|
||
.price {
|
||
font-size: 60rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.text {
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.statuss {
|
||
padding-top: 25rpx;
|
||
|
||
span {
|
||
color: #c1c1c1;
|
||
font-size: 18rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.statusitem {
|
||
text-align: center;
|
||
padding: 0 40rpx;
|
||
display: inline-block;
|
||
height: 60rpx;
|
||
font-size: 30rpx;
|
||
color: #969394;
|
||
line-height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs {
|
||
width: 100%;
|
||
|
||
.tab-item {
|
||
margin: 20rpx 0 0 24rpx;
|
||
text-align: center;
|
||
width: 20%;
|
||
|
||
.text {
|
||
width: 70%;
|
||
margin-left: 15%;
|
||
height: 30rpx;
|
||
background: #F44B2F;
|
||
border-radius: 9rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 40rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #F44B2F;
|
||
line-height: 59rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|