--Pc-ClientWeb-Qing/src/components/Download.vue

<template>
	<div class="download-box" ref="pronbit">
		<div class="container">
			<div class="title">
				<h3>下载软件地址</h3>
			</div>

			<div class="row" :style="'background:url(' + mod.bgImage + ')'" style="padding: 40px 20px 0 20px;">

				<div class=" col-lg-7 col-md-8 col-sm-12 center" style="margin-top: 20px;margin-bottom: 40px;">
					<div class="mainRight-box ">
						<div class="modLogo-text">
							<img class="modLogo" :src="mod.applyLogo" alt="" />
							<h1>{{ mod.mainText }}</h1>
						</div>
						<h2 class="subText">{{ mod.subText }}</h2>
            <div class="mod-cnt">
              {{mod.content}}
            </div>
						<div class="download-code">
							<div class="downloadImg">
								<div class="downloadImg-box" :style="getHoversColor"
									@click="downloadLink(linkData.iosLink)">
									<img :src="mod.iosDownloadBtn" style="width: 42px; height: 42px" alt="" />
									<div style="margin-left: 10px">iPhone下载</div>
								</div>

								<div class="downloadImg-box" :style="getHoversColor"
									@click="downloadLink(linkData.androidLink)">
									<img :src="mod.androidDownloadBtn" style="width: 42px; height: 42px" alt="" />
									<div style="margin-left: 10px">Android下载</div>
								</div>
							</div>

							<div class="download-content-code">
								<!-- <img class="modQrCde" :src="mod.qrcode" alt="" /> -->
								<qrcode-vue class="modQrCde" :value="url" size="100" level="H" />
								<div>扫一扫轻松下载</div>
							</div>
						</div>
					</div>
				</div>


				<div class="col-lg-1 d-none d-lg-block"></div>
				<div class="col-lg-4 col-md-4 col-sm-12" style="margin-top: 20px;">
					<div class="iphone">
						<img class="iphone12" :src="mod.mainImage" alt="" />
					</div>
				</div>
			</div>
		</div>
		<DefaultBowser ref="bowser"/>
	</div>
</template>


<script>
	import QrcodeVue from 'qrcode.vue'
	import DefaultBowser from './default-browser.vue'

	import {isWxBrowser} from '../utlis/browser.js'

	export default {
		components: {
			QrcodeVue,
			DefaultBowser,
		},
		computed: {
			getHoversColor: function() {
				return {
					"--text-color": this.mod.unSelectTextColor,
					"--text-color-hover": this.mod.selectTextColor,
					"--background-color": this.mod.unSelectBgColor,
					"--background-color-hover": this.mod.selectBgColor,
					"--box-shadow-color-hover": this.mod.selectBgColor + "4D",
				};
			},
		},
		data() {
			return {
				winHeight: 0,
				isShow: false,
				url: ''
			};
		},

		props: {
			mod: {
				type: Object,
				default: () => {},
			},
			linkData: {
				tpye: Object,
				default: () => {},
			},
		},
		created() {

			console.log(this.linkData)
			window.addEventListener("scroll", this.handleScrollx, true);
			this.winHeight =
				document.documentElement.clientHeight / 2 ||
				document.body.clientHeight / 2;

			this.url = document.URL
		},
		methods: {
			downloadLink: function(link) {
				// window.open(link);
				if (isWxBrowser() && link.endsWith('.apk')) {
					console.log('请使用默认浏览器打开')
					this.$refs.bowser.show()
				} else {
					window.open(link);
				}
			},
			handleScrollx() {
				if (this.winHeight > this.$refs.pronbit.getBoundingClientRect().top) {
					this.isShow = true;

					window.removeEventListener("scroll", this);
				}
			},
		},
	};
</script>


<style scoped>
	.iphone {
		width: 100%;
		max-height: 600px;
		overflow: hidden;
	}

	.iphone12 {
		width: 100%;
		height: 100%;
		object-fit: scale-down;
	}

	.download-box {
		display: flex;
		flex-flow: column;
	}

	.title {
		color: #0f0f0f;
		font-size: 26px;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 55px;
		letter-spacing: 5px;
	}

	.title::after {
		content: "";
		width: 12px;
		height: 12px;
		background: #ff4242;
		border-radius: 50%;
		margin-left: 5px;
	}

	.download-bg {
		/* width: 100%; */
		/* height: 520px; */
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
		box-sizing: border-box;
		/* padding: 94px 110px 0; */
		/* opacity: 0; */
		/* animation: aniamtionDownload 1.2s ease-in-out forwards; */
	}

	@keyframes aniamtionDownload {
		100% {
			opacity: 1;
		}
	}

	.mainImg-box {
		/* width: 344px;
		position: relative; */
		/* animation: aniamtionMainImg 1.2s forwards; */
		/* transform: translateY(600px); */
	}

	/*
	@keyframes aniamtionMainImg {
		100% {
			transform: translateX(0);
		}
	} */

	.mainImg-box::after {
		content: "";
		height: 100px;
		background: linear-gradient(rgba(255, 255, 255, 0) 0%,
				rgb(255, 255, 255) 100%);
		width: 100%;
		top: 326px;
		z-index: 99;
		position: absolute;
		left: 0px;
	}

	.mainRight-box {
		display: flex;
		flex-direction: column;
    max-width: 600px;
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modLogo-text {
		display: flex;
		color: #333333;
		font-weight: bold;
		align-items: center;
		margin-top: 14px;

	}

	.modLogo {
		margin-right: 18px;
		width: 60px;
		height: 60px;
		border-radius: 5px;
	}

	.subText {
		margin-top: 12px;
		font-size: 20px;
		color: #999999;
		white-space: pre-line;
	}

	.download-code {
		display: flex;
		margin-top: 26px;
    justify-content: center;
	}

	.downloadImg {
		display: flex;
		flex-flow: column;
		margin-right: 20px;
		justify-content: space-between;
	}

	.download-content-code {
		width: 120px;
		height: 170px;
		background: #ffffff;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 10px;
		color: #333333;
		font-size: 14px;
		display: flex;
		flex-flow: column;
		align-items: center;
	}

	.modQrCde {
		/* width: 100%; */
		margin-bottom: 12px;
		border-radius: 3px;
	}

	.downloadImg-box {
		/* width: 222px; */
		height: 72px;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 15px;
		border-radius: 10px;
		color: var(--text-color);
		background: var(--background-color);
		box-shadow: 0px;
		transition: color 0.25s, background-color 0.25s, box-shadow 0.25s;
		cursor: pointer;
		padding-right: 12px;

	}

	.downloadImg-box:hover {
		color: var(--text-color-hover);
		background: var(--background-color-hover);
		box-shadow: 0px 2px 30px 0px var(--box-shadow-color-hover);
		transition: color 0.35s, background-color 0.35s, box-shadow 0.35s;
	}

	/* @media screen and (max-width: 1500px) {
		.mainImg-box {
			width: 300px;
		}
	} */

  .mod-cnt {
    color: #333;
  }
</style>