页面展示优化

This commit is contained in:
GaoHao
2025-01-09 11:38:37 +08:00
parent 31b37eb1db
commit c686a02931
7 changed files with 125 additions and 173 deletions

View File

@@ -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>