web-app-v1/pages/political/political.vue

<template>
	<view class="qr_code flexCC">
		<view class="img flexC"><image :src="warea_info.avatar" class="store_img"></image></view>
		<view class="qr_con">
			<view class="store_name">{{ warea_info.admin_name | getName(10) }}</view>
			<image :src="warea_info.qrcode" class="code_img"></image>
			<view class="hint">长按二维码-加客服好友</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			warea_info: '' //店铺信息
		};
	},
	methods: {},
	onLoad(ops) {
		if (ops.warea) {
			this.warea_info = JSON.parse(decodeURIComponent(ops.warea));
		}
	}
};
</script>

<style lang="scss" scoped>
.qr_code {
	width: 100vw;
	height: 100vh;
	background: url('../../static/new_my/bg3.png') no-repeat;
	background-size: 100% 100%;
	.img {
		.store_img {
			width: 200rpx;
			height: 200rpx;
			border: 6rpx solid #fff;
			border-radius: 50%;
		}
	}
	.qr_con {
		width: 690rpx;
		height: 70vh;
		background: rgba(255, 255, 255, 0.79);
		margin: -100rpx auto 0;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.store_name {
			font-size: 44rpx;
			font-weight: bold;
			padding: 130rpx 0 30rpx;
		}
		.code_img {
			width: 450rpx;
			height: 450rpx;
			margin: 80rpx 0 40rpx;
			border-radius: 24rpx;
		}
		.hint {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
}
</style>