第一次做响应式的图片布局---百分比图片

我们先看下我们的效果图

代码

<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>