<template>
	<div class="mobel">
		<div class="logo flex align-center justify-center">
			<img src="/default.jpg" alt="" srcset="" />
		</div>
		<div class="title">
			{{txtTips}}
		</div>
		<div class="eq flex align-center justify-center">
			<!-- <VueQrcode type="image/png" :color="qrColor" :value="options" :margin="0" errorCorrectionLevel="quartile"
				:width="size" /> -->
			<el-image style="width: 160px; height: 160px;" :src="options" fit="cover" />
		</div>
		<div class="txt">
			长按识别/保存二维码
		</div>
	</div>
</template>

<script>
	import VueQrcode from 'vue-qrcode'
	export default {
		components: {
			VueQrcode
		},
		data() {
			return {
				size: 160, //二维码大小
				qrColor: {
					'background': '#ffffff'
				},
				options: '', //生成二维码的内容
				txtTips: '', //显示的文字
			}
		},
		mounted() {
			this.getAppImg()
			this.getAppTxt()
		},
		methods: {
			//获取移动端域名
			getAppImg() {
				this.$Request.get('/app/common/type/428').then(res => {
					if (res.code == 0) {
						this.options = res.data.value
					}
				})

			},
			getAppTxt() {
				this.$Request.get('/app/common/type/429').then(res => {
					if (res.code == 0) {
						this.txtTips = res.data.value
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.mobel {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;
	}

	.logo {
		width: 100%;

		img {
			margin-top: 15vh;
			width: 80px;
			height: 80px;
			border-radius: 10px;
		}
	}

	.title {
		margin-top: 20px;
		width: 100%;
		text-align: center;
		font-weight: bold;
	}

	.eq {
		margin-top: 50px;
	}

	.txt {
		width: 100%;
		margin-top: 20px;
		text-align: center;
	}
</style>