244 lines
5.1 KiB
Vue
244 lines
5.1 KiB
Vue
|
<template>
|
||
|
<view class="coupon-details">
|
||
|
<view class="coupon-container">
|
||
|
<view class="title">新人专享好礼</view>
|
||
|
<view class="coupon-main">
|
||
|
<image src="/static/image/common/29.png" class="bg"></image>
|
||
|
<view class="left">
|
||
|
<view class="price"><text class="sign">¥</text><text class="value">{{ price }}</text></view>
|
||
|
<view class="label">专属优惠券</view>
|
||
|
</view>
|
||
|
<view class="btn" @click="exchangeCoupon">立即领取</view>
|
||
|
</view>
|
||
|
<view class="tag">
|
||
|
<view>
|
||
|
<image src="/static/image/common/25.png"></image>
|
||
|
<text>全场包邮</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<image src="/static/image/common/26.png"></image>
|
||
|
<text>延误必赔</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<image src="/static/image/common/27.png"></image>
|
||
|
<text>免费上门取件</text>
|
||
|
</view>
|
||
|
<view>
|
||
|
<image src="/static/image/common/28.png"></image>
|
||
|
<text>退货免运费</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
<view class="title-container">
|
||
|
<image src="/static/image/common/22.png" class="bg"></image>
|
||
|
<view class="title">首席搭配师</view>
|
||
|
</view>
|
||
|
<view class="content-container">
|
||
|
<image src="/static/image/common/23.png" class="people"></image>
|
||
|
<view class="tag">
|
||
|
<view class="">双十一成交破亿</view>
|
||
|
<view class="">单场千万级大咖</view>
|
||
|
<view class="">品牌特卖TOP1</view>
|
||
|
</view>
|
||
|
<view class="btn">
|
||
|
<view class="bg-view"></view>
|
||
|
<view>我们有万能穿搭公式</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</view>
|
||
|
</template>
|
||
|
<script>
|
||
|
export default {
|
||
|
data() {
|
||
|
return {
|
||
|
price: 0
|
||
|
}
|
||
|
},
|
||
|
onLoad(option) {
|
||
|
this.price = option.price;
|
||
|
},
|
||
|
methods: {
|
||
|
exchangeCoupon() {
|
||
|
this.$u.api.getCoupon({ id: 1 }).then(res => {
|
||
|
this.$u.toast(res.message);
|
||
|
if(res.errCode == 0) {}
|
||
|
})
|
||
|
},
|
||
|
}
|
||
|
};
|
||
|
</script>
|
||
|
<style lang="scss" scoped>
|
||
|
.coupon-details {
|
||
|
min-height: calc(100vh - var(--window-top));
|
||
|
background-color: #FFDFAC;
|
||
|
padding-top: 30rpx;
|
||
|
.coupon-container {
|
||
|
width: 690rpx;
|
||
|
height: 368rpx;
|
||
|
background: linear-gradient(-87deg, rgba(247,162,30,1), rgba(255,120,15,1));
|
||
|
box-shadow: 0rpx 4rpx 2rpx 0rpx rgba(102,102,102,0.2);
|
||
|
border-radius: 20rpx;
|
||
|
margin: 0 auto 70rpx;
|
||
|
padding: 22rpx {
|
||
|
top: 40rpx
|
||
|
};
|
||
|
.title {
|
||
|
font-size: 48rpx;
|
||
|
font-weight: bold;
|
||
|
color: rgba(255,255,255,1);
|
||
|
line-height: 34rpx;
|
||
|
text-shadow: 0rpx 4rpx 2rpx rgba(102,102,102,0.2);
|
||
|
text-align: center;
|
||
|
}
|
||
|
.coupon-main {
|
||
|
margin: 26rpx auto 20rpx;
|
||
|
width: 665rpx;
|
||
|
height: 194rpx;
|
||
|
position: relative;
|
||
|
.bg {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 665rpx;
|
||
|
height: 194rpx;
|
||
|
z-index: 1;
|
||
|
}
|
||
|
.left {
|
||
|
z-index: 2;
|
||
|
position: absolute;
|
||
|
top: 40rpx;
|
||
|
left: 122rpx;
|
||
|
.price {
|
||
|
margin-bottom: 16rpx;
|
||
|
display: flex;
|
||
|
align-items: flex-end;
|
||
|
line-height: 80rpx;
|
||
|
> text {
|
||
|
font-weight: bold;
|
||
|
color: rgba(255,120,15,1);
|
||
|
}
|
||
|
.sign {
|
||
|
font-size: 54rpx;
|
||
|
}
|
||
|
.value {
|
||
|
font-size: 102rpx;
|
||
|
}
|
||
|
}
|
||
|
.label {
|
||
|
font-size: 32rpx;
|
||
|
font-weight: 500;
|
||
|
color: rgba(255,120,15,1);
|
||
|
}
|
||
|
}
|
||
|
.btn {
|
||
|
z-index: 2;
|
||
|
position: absolute;
|
||
|
top: 62rpx;
|
||
|
right: 60rpx;
|
||
|
width: 192rpx;
|
||
|
height: 70rpx;
|
||
|
background: linear-gradient(-87deg, rgba(247,162,30,1), rgba(255,120,15,1));
|
||
|
border-radius: 20rpx;
|
||
|
line-height: 70rpx;
|
||
|
text-align: center;
|
||
|
font-size: 27rpx;
|
||
|
font-weight: bold;
|
||
|
color: rgba(255,255,255,1);
|
||
|
}
|
||
|
}
|
||
|
.tag {
|
||
|
display: flex;
|
||
|
align-items: center;
|
||
|
justify-content: space-between;
|
||
|
font-size: 20rpx;
|
||
|
font-weight: 500;
|
||
|
color: rgba(255,255,255,1);
|
||
|
> view {
|
||
|
> image {
|
||
|
width: 20rpx;
|
||
|
height: 20rpx;
|
||
|
margin-right: 10rpx;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.title-container {
|
||
|
position: relative;
|
||
|
height: 124rpx;
|
||
|
.bg {
|
||
|
position: absolute;
|
||
|
width: 504rpx;
|
||
|
height: 124rpx;
|
||
|
z-index: 1;
|
||
|
top: 50%;
|
||
|
left: 50%;
|
||
|
transform: translate(-50%, -75%);
|
||
|
}
|
||
|
.title {
|
||
|
position: absolute;
|
||
|
z-index: 2;
|
||
|
width: 750rpx;
|
||
|
height: 59rpx;
|
||
|
background: rgba(255,255,255,0.27);
|
||
|
font-size: 60rpx;
|
||
|
font-weight: 800;
|
||
|
color: rgba(255,122,16,1);
|
||
|
text-align: center;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
}
|
||
|
}
|
||
|
.content-container {
|
||
|
height: 684rpx;
|
||
|
position: relative;
|
||
|
.people {
|
||
|
width: 348rpx;
|
||
|
height: 684rpx;
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 50%;
|
||
|
transform: translate(-50%, 0%);
|
||
|
}
|
||
|
.tag {
|
||
|
> view {
|
||
|
position: absolute;
|
||
|
height: 48rpx;
|
||
|
background: rgba(229,0,79,0.36);
|
||
|
border-radius: 20rpx;
|
||
|
font-size: 24rpx;
|
||
|
font-weight: bold;
|
||
|
color: rgba(255,255,255,1);
|
||
|
line-height: 48rpx;
|
||
|
padding: 0 24rpx;
|
||
|
&:nth-child(1) {
|
||
|
top: 104rpx;
|
||
|
right: 71rpx;
|
||
|
}
|
||
|
&:nth-child(2) {
|
||
|
top: 271rpx;
|
||
|
left: 30rpx;
|
||
|
}
|
||
|
&:nth-child(3) {
|
||
|
top: 373rpx;
|
||
|
right: 33rpx;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
.btn {
|
||
|
position: absolute;
|
||
|
top: 459rpx;
|
||
|
left: 50%;
|
||
|
transform: translate(-50%, 0%);
|
||
|
width: 581rpx;
|
||
|
height: 86rpx;
|
||
|
background: linear-gradient(-87deg,rgba(247,162,30,1),rgba(255,120,15,1));
|
||
|
border-radius: 20rpx;
|
||
|
font-size: 40rpx;
|
||
|
font-weight: bold;
|
||
|
color: rgba(255,255,255,1);
|
||
|
line-height: 86rpx;
|
||
|
text-align: center;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|