页面展示优化
This commit is contained in:
@@ -1,19 +1,15 @@
|
||||
<template>
|
||||
<view class="containersView">
|
||||
<div style="width: 100%;height: 85%;position: absolute;background: url('/static/download/appeq_bg.png') no-repeat center bottom / cover;"></div>
|
||||
<view class="containers">
|
||||
<div class="bg" style="background: url('/static/download/appeq_bg.png') no-repeat center bottom / cover;"></div>
|
||||
|
||||
<view style="text-align: center;position: relative;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
||||
<image style="width: 124rpx;height: 124rpx;margin-top: -920rpx;border-radius:20upx;" src="/static/download/appLogo.png"></image>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/download/appLogo.png"></image>
|
||||
<view style="font-size: 40rpx;margin-top: 22rpx;color: #FFFFFF;font-weight: bold;">斯耀短剧APP</view>
|
||||
<view style="font-size: 28rpx;margin-top: 16rpx;color: #FFFFFF;font-weight: bold;">海量电子榨菜 免费又过瘾</view>
|
||||
<button class="confirm-btn" @click="download">{{data.confirmBtn}}</button>
|
||||
|
||||
</view>
|
||||
<view id="shareit" v-if="data.show_share" @tap="closeShare">
|
||||
<image class="arrow" src="https://renwu.xiansqx.com/img/20210813/9aa484db4c60458f86deb2a8ab6fe400.png">
|
||||
</image>
|
||||
<view id="follow">点击右上角按钮,选择浏览器打开下载!</view>
|
||||
</view>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<div v-if="data.isWeixin" style="width: 100%;height: 100%;position: absolute;top: 0;background: url('/static/download/open_guide.png') no-repeat center bottom / cover;"></div>
|
||||
<!-- #endif -->
|
||||
@@ -26,7 +22,6 @@
|
||||
import { commonType } from '@/api/init.js';
|
||||
|
||||
let data = reactive({
|
||||
show_share: false,
|
||||
openShare: false,
|
||||
openShares: false,
|
||||
confirmBtn: '斯耀短剧APP',
|
||||
@@ -45,9 +40,7 @@
|
||||
data.isWeixin = true
|
||||
}
|
||||
})
|
||||
function closeShare() {
|
||||
data.show_share = false;
|
||||
}
|
||||
|
||||
|
||||
function download() {
|
||||
var u = navigator.userAgent;
|
||||
@@ -113,49 +106,30 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.containersView {
|
||||
.containers {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#shareit {
|
||||
-webkit-user-select: none;
|
||||
position: fixed;
|
||||
/*width: 100%;*/
|
||||
height: 2000px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
.bg{
|
||||
width: 100%;
|
||||
height: 85%;
|
||||
position: absolute;
|
||||
}
|
||||
.content{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.logo{
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
margin-top: -920rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#shareit img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 1%;
|
||||
}
|
||||
|
||||
#follow {
|
||||
margin-right: 60px;
|
||||
margin-left: 30px;
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
float: left;
|
||||
margin-top: 160px;
|
||||
}
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 416rpx;
|
||||
height: 90rpx;
|
||||
@@ -170,5 +144,6 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 70rpx;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user