<template>
|
<div
|
class="invite-page"
|
:style="{
|
'background-image': `url(${imgUrl}?x-oss-process=image/resize,w_750/format,jpg/quality,q_90/interlace,1)`,
|
}"
|
>
|
<div class="title">
|
<p class="desc-line1">天地精华 民族精神 世界精彩</p>
|
<p class="desc-line2">五粮液APP邀请您共品佳酿！</p>
|
</div>
|
<div class="download-btns">
|
<div class="btn-1" @click="goApp('android')">
|
<span class="download-icon icon1"></span
|
><span class="download-text">Android下载</span>
|
</div>
|
<div class="btn-2" @click="goApp('iphone')">
|
<span class="download-icon icon2"></span
|
><span class="download-text">iphone下载</span>
|
</div>
|
</div>
|
<!-- 微信引导提示 -->
|
<guide-open :openStatus.sync="openStatus"></guide-open>
|
</div>
|
</template>
|
|
<script>
|
import guideOpen from '@/components/pop-up/guideOpen.vue'
|
export default {
|
name: 'nwInvite',
|
components: {
|
guideOpen
|
},
|
data() {
|
return {
|
isShow: false,
|
openStatus: false,
|
imgUrl: require('../../assets/images/invite/share_bg.png')
|
}
|
},
|
methods: {
|
goApp(type) {
|
let url
|
var isWeixin = this.is_weixin()
|
// 判断是否在微信内置浏览器打开
|
if (isWeixin) {
|
this.openStatus = true
|
} else {
|
if (type === 'android') {
|
if (this.$root.isIos) {
|
this.$toast('请点击iphone下载')
|
return
|
}
|
url = this.$store.getters.androidUrl
|
} else {
|
if (!this.$root.isIos) {
|
this.$toast('请点击Android下载')
|
return
|
}
|
url = this.$store.getters.iosUrl
|
}
|
location.href = url
|
}
|
},
|
is_weixin() {
|
var ua = window.navigator.userAgent.toLowerCase()
|
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
return true
|
} else {
|
return false
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="stylus" scoped>
|
.invite-page {
|
width: 750px;
|
height: 1334px;
|
background-repeat: no-repeat;
|
background-size: 750px 1334px;
|
position: relative;
|
image-rendering: -webkit-optimize-contrast;
|
|
.title {
|
width: 100%;
|
position: absolute;
|
top: 928px;
|
text-align: center;
|
}
|
|
.desc-line1 {
|
font-size: 32px;
|
font-weight: 600;
|
}
|
|
.desc-line2 {
|
font-size: 28px;
|
margin-top: 10px;
|
font-weight: 400;
|
}
|
|
.desc-line1, .desc-line2 {
|
color: #f1e6cd;
|
font-family: 'Times New Roman', Times, serif;
|
}
|
|
.text {
|
font-size: 26px;
|
text-align: center;
|
width: 272px;
|
line-height: 54px;
|
background: #fff;
|
color: #db41cc;
|
border-radius: 4px;
|
position: absolute;
|
left: 20px;
|
bottom: 60px;
|
}
|
|
.download-btns {
|
width: 100%;
|
position: absolute;
|
top: 1070px;
|
|
.btn-1 {
|
margin: 0 auto;
|
}
|
|
.btn-2 {
|
margin: 20px auto 0;
|
}
|
|
.btn-1, .btn-2 {
|
width: 216px;
|
height: 44px;
|
border: 1px solid #e7b13d;
|
border-radius: 4px;
|
padding: 20px 82px;
|
}
|
|
.download-icon {
|
display: inline-block;
|
width: 44px;
|
height: 44px;
|
}
|
|
.icon1 {
|
background: url('../../assets/images/Frame.png') no-repeat;
|
background-size: 44px;
|
}
|
|
.icon2 {
|
background: url('../../assets/images/Frame1.png') no-repeat;
|
background-size: 44px;
|
}
|
|
.download-text {
|
font-size: 24px;
|
font-weight: 400;
|
background: linear-gradient(180deg, #fbd585, #e7b13d 100%);
|
-webkit-background-clip: text;
|
color: transparent;
|
position: relative;
|
bottom: 14px;
|
margin-left: 10px;
|
}
|
}
|
}
|
</style>
|
