share_h5/pages/down.vue

<template>
	<view>
		<!-- <navbar backColor="#fff" :config="config"></navbar> -->
		<view class="backBox">
			<image src="/static/down/download_pattern_left.png" mode=""></image>
			<image src="/static/down/download_pattern_right.png" mode=""></image>
		</view>
		<view>
			<view class="top-box">
				<!-- <image src="@/static/logo.png" mode="" class="logo"></image> -->
				<image src="/static/login/logo.png" mode="" class="logo"></image>
			</view>
			<view class="btn-row">
				<button class="btn" @click="downLoad(1)">
					<image src="/static/login/android.png" mode="" class="logo"></image>
					安卓下载
				</button>
				<button class="btn" @click="downLoad(2)">
					<image src="/static/login/ios.png" mode="" class="logo"></image>
					IOS下载
				</button>
			</view>
		</view>
		<image class="bottomBg" mode="widthFix" src="/static/down/top_bg_mobile.png"></image>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: "下载",
					color: "#fff",
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#3775F6"],
					statusBarFontColor: "#ffffff",
				},
				appInfo: null,
			};
		},
		onLoad(options) {
			this.getData();
		},
		methods: {
			getData() {
				this.$http.get("/app/config/info").then((res) => {
					if (res && res.code == 200) {
						this.appInfo = res.data;
					}
				});
			},
			downLoad(type) {
				window.location.href = type == 1 ? this.appInfo.android_link : this.appInfo.ios_link;
			},
		},
	};
</script>

<style lang='scss' scopd>
	.backBox{
		display: flex;
		justify-content: space-between;
		>image{
			width: 21.66%;
		}
	}
	.top-box {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		position: relative;
		top: -80rpx;

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

	.btn-row {
		margin-top: 100rpx;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;

		.btn {
			border-radius: 60rpx;
			width: 80%;
			background: #3D93FC;
			color: #fff;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}
	.bottomBg{
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		transform: rotate(180deg);
	}
</style>