zhuangxiu/pages/index/follow.vue

<template>
	<view class="content">
		<image class="qr" src="../../static/image/followTop.jpg" mode="scaleToFill"></image>
		<image class="pint" src="../../static/image/followCenter.png" mode="scaleToFill"></image>
		<view class="text">
			<!-- #ifdef H5 -->
			长按二维码识别
			<!-- #endif -->
			<!-- #ifndef H5 -->
			扫码识别公众号
			<!-- #endif -->
		</view>
		<image class="buttomImg" src="../../static/image/followButtom.png" mode="widthFix"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		onLoad(options) {},
		methods: {}
	};
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
	}

	.content {
		padding-bottom: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		line-height: 1;
		background-color: $color-green;

		.qr {
			margin: 0 75rpx;
			width: 600rpx;
			height: 600rpx;
		}

		.pint {
			margin: 0 auto;
			margin-top: 50rpx;
			width: 200rpx;
			height: 200rpx;

		}
		.text{
			color: #FFFFFF;
			width: 100%;
			flex-shrink: 0;
			text-align: center;
			margin-top: 30rpx;
		}

		.buttomImg {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 50rpx;
		}
	}
</style>