我们先看下我们的效果图
代码
<template>
<view class="container">
<view class="container-top">
<!-- 进入该页面,默认为拆红包模板 -->
<template v-if="true">
<view class="count">
<view class="icon">
<view class="count-title"><text>3.00</text>元已放入您的红包账户</view>
</view>
</view>
</template>
<!-- 摘完则为红包分享模板 -->
<template v-if="false">
<view class="second">
<view class="second-detail">
您的红包领用次数已用完,分享可增加红包领用次数
</view>
</view>
</template>
<view class="envelope-bg center-x">
<image class="image" src="../../static/older-envelopes.png"></image>
<image class="light-gold" src="../../static/light-gold.png"></image>
<view class="title">
<view class="title-icon">
<image src="../../static/envelope-icon.png" mode="widthFix"></image>
</view>
<view class="title-text">
恭喜获得支付优惠红包
</view>
<view class="title-icon">
<image src="../../static/envelope-icon.png" mode="widthFix"></image>
</view>
</view>
<view class="money">
20<text>元</text>
</view>
<view class="money-icon center-x">
<image src="../../static/gold-coin-seal.png" mode="widthFix"></image>
</view>
<view class="change">
<view class="change-rest">今日剩余<text class="color">3</text>次机会</view>
</view>
<view class="agian center-x">
<text class="again-color center">再拆一次</text>
</view>
<view class="my-count ">
<view class="count center-x">
红包已放入“我的-红包余额”中
</view>
</view>
</view>
</view>
<view class="container-bottom ">
<view class="bottom-box">
<image class="envelope-banner" src="../../static/envelope-banner.png" mode="widthFix" />
<image class="envelope-adv" src="../../static/envelope-adv.png" mode="widthFix" />
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
page {
font-family: Source Han Sans CN;
}
.container {
width: 100vw;
height: 100vh;
background-color: #ed180b;
.container-bottom {
height: 40%;
text-align: center;
position: relative;
.bottom-box {
position: absolute;
top: 12%;
width: 100%;
height: 345rpx;
.envelope-banner {
width: calc(100% - 60rpx);
height: 100%;
}
.envelope-adv {
width: 72rpx;
height: 32rpx;
position: absolute;
bottom: 0rpx;
right: 30rpx;
}
}
}
.container-top {
height: 60%;
position: relative;
.my-count {
width: 100%;
height: 18rpx;
text-align: center;
bottom: 12%;
position: absolute;
.count {
font-size: 18rpx;
font-weight: 400;
line-height: 36rpx;
}
}
.agian {
width: 45%;
height: 10%;
background: url('../../static/btn.png') no-repeat center;
background-size: inherit;
text-align: center;
bottom: 10%;
opacity: 0.87;
border-radius: 33rpx;
.again-color {
font-size: 30rpx;
font-weight: bolder;
color: #F01010;
}
}
.second {
width: 100%;
height: 27rpx;
position: absolute;
top: 35rpx;
left: 29rpx;
.second-detail {
width: 100%;
height: 100%;
font-family: Source Han Sans CN;
font-size: 28rpx;
font-weight: 400;
color: #FFF;
}
}
.count {
width: 100%;
color: #FFE3B4;
padding-top: 40rpx;
.icon {
width: 489rpx;
height: 50rpx;
background-color: #a8212d;
border-radius: 25px;
margin-left: 51rpx;
border-radius: 25rpx;
padding-left: 30rpx;
.count-title {
font-size: 26rpx;
color: #fff;
font-weight: 400;
line-height: 50rpx;
}
}
}
}
.envelope-bg {
width: 110%;
height: 85%;
position: absolute;
bottom: 0;
.change {
width: 100%;
height: 23rpx;
text-align: center;
.change-rest {
width: 80%;
height: 23rpx;
position: absolute;
text-align: center;
top: 75%;
left: 50%;
font-size: 24rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFE3B4;
line-height: 17rpx;
transform: translate(-50%, -50%);
.color {
color: #fff;
}
}
}
.money-icon {
width: 12%;
height: 20%;
top: 56%;
image {
width: 100%;
}
}
.money {
width: 40%;
height: 20%;
position: absolute;
text-align: center;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 130rpx;
font-weight: 800;
color: #FF403E;
text {
font-size: 38rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FF403E;
line-height: 50rpx;
}
}
.title {
position: absolute;
top: 26%;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height: 50rpx;
.title-text {
font-size: 28rpx;
font-weight: 400;
color: #BD8958;
line-height: 50rpx;
}
.title-icon {
width: 22rpx;
height: 22rpx;
position: relative;
top: 10%;
image {
width: 100%;
height: 100%;
}
}
}
.image {
width: 74%;
height: 100%;
transform: translateX(20%);
}
.light-gold {
width: 49%;
height: 40%;
position: absolute;
top: 22%;
left: 50%;
transform: translateX(-50%);
}
}
}
</style>