zhapp/pages/registr/appPromoPage.vue

<template>
	<view class="page">
		<view class="header dis a-end">
			<image class="logo mr-2" src="/static/image/my/logo.png" mode=""></image>
			<view class="dis f-c a-start title">
				<text>晋掌柜</text>
				<text>高效、智能车险工具，让车险交易更简单</text>
			</view>
		</view>
		<!-- 宣传图 -->
		<view class="showimg dis  f-c a-c">
			<image class="img1" src="/static/image/registr/Mask1@2x.png" mode=""></image>
			<image class="img2 mt-5" src="/static/image/registr/Mask2.png" mode=""></image>
		</view>
		<!-- 底部下载按钮 -->
		<view class="btn dis a-c j-c " @tap="downloadApp('android')">
			立即下载
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			// 判断是不是微信
			async weixinTip(ele) {
				var ua = navigator.userAgent;
				var isWeixin = !!/MicroMessenger/i.test(ua);
				if (isWeixin) {
					ele.onclick = function(e) {
						window.event ? window.event.returnValue = false : e.preventDefault();
						document.getElementById('weixin-tip').style.display = 'block';
					}
				} else {
					let apkquote = await this.$http.get('/version/getMaxVersion', {
						appid: "__UNI__05D695B",
						packageType: "apk",
					});
					if (apkquote.code == '200') {
						window.open(apkquote.data.path);
					} else {
						uni.showToast({
							title: apkquote.msg,
							icon: 'none'
						});
					}
				}
			},
			downloadApp(typeId) {
				var btn = document.getElementById(typeId);
				this.weixinTip(btn);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		background-image: url('../../static/image/registr/bg.png');
		background-size: 100% 100%;
	}

	// 头部样式
	.header {
		width: 100%;
		padding: 50rpx 35rpx 35rpx;
		box-sizing: border-box;

		.logo {
			width: 120rpx;
			height: 120rpx;
		}

		.title {
			margin-bottom: 8rpx;

			text:first-child {
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 12rpx;
			}

			text:last-child {
				font-size: 30rpx;
				color: #333;
			}
		}
	}

	// 宣传图页面居中
	.showimg {
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);


		.img1 {
			width: 100%;
			height: 214rpx;
		}

		.img2 {
			width: 660rpx;
			height: 686rpx;
		}
	}

	.btn {
		position: absolute;
		bottom: 70rpx;
		left: 0;
		right: 0;
		margin: 0 60rpx;
		height: 88rpx;
		background: #FDE935;
		border-radius: 58rpx 58rpx 58rpx 58rpx;
		font-size: 36rpx;
		color: #1F1F1F;
		font-weight: bold;
	}
</style>