127 lines
3.2 KiB
Vue
127 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<view class="meituan">
|
||
|
|
<view class="content">
|
||
|
|
<view class="left">
|
||
|
|
<view class="sum">
|
||
|
|
￥<text class="num">8</text>
|
||
|
|
</view>
|
||
|
|
<view class="type">抵用券</view>
|
||
|
|
</view>
|
||
|
|
<view class="centre">
|
||
|
|
<view class="title">【洗牙】8元无门槛红包</view>
|
||
|
|
<view class="valid-date">今日到期</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view size="mini" class="immediate-use" :round="true">立即使用</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="tips">
|
||
|
|
<view class="circle-left"></view>
|
||
|
|
<view class="circle-right"></view>
|
||
|
|
<view class="explain u-line-1">满8.1元可用、限最新版本客户端使用</view>
|
||
|
|
<view class="rule">
|
||
|
|
<text>使用规则</text>
|
||
|
|
<u-icon name="arrow-right" color="" :size="20" @click=""></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.meituan {
|
||
|
|
margin: 30rpx auto;
|
||
|
|
background-color: #ffffff;
|
||
|
|
width: 700rpx;
|
||
|
|
// border: 10rpx;
|
||
|
|
color: $u-warning;
|
||
|
|
font-size: 28rpx;
|
||
|
|
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 80rpx 20rpx;
|
||
|
|
border: 10rpx;
|
||
|
|
background-color: #fff5f4;
|
||
|
|
|
||
|
|
.left {
|
||
|
|
.sum {
|
||
|
|
font-size: 32rpx;
|
||
|
|
|
||
|
|
.num {
|
||
|
|
font-size: 60rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.centre {
|
||
|
|
margin-left: 40rpx;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: $u-main-color;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
margin-left: 30rpx;
|
||
|
|
|
||
|
|
.immediate-use {
|
||
|
|
padding: 0 20rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
border-radius: 25rpx;
|
||
|
|
line-height: 50rpx;
|
||
|
|
background-color: $u-warning !important;
|
||
|
|
color: #ffffff !important;
|
||
|
|
font-size: 24rpx;
|
||
|
|
border: none;
|
||
|
|
word-break: keep-all;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips {
|
||
|
|
padding: 0 20rpx;
|
||
|
|
border: 10rpx;
|
||
|
|
background-color: $u-info-light;
|
||
|
|
position: relative;
|
||
|
|
color: $u-tips-color;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
line-height: 60rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
|
||
|
|
.circle-left,
|
||
|
|
.circle-right {
|
||
|
|
position: absolute;
|
||
|
|
height: 36rpx;
|
||
|
|
width: 18rpx;
|
||
|
|
background-color: #f2f2f2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-right {
|
||
|
|
border-radius: 40rpx 0 0 40rpx;
|
||
|
|
right: 0;
|
||
|
|
top: -18rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-left {
|
||
|
|
border-radius: 0 40rpx 40rpx 0;
|
||
|
|
left: 0;
|
||
|
|
top: -18rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rule {
|
||
|
|
font-size: 24rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
text {
|
||
|
|
margin-right: 10rpx;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|