SchoolPhysicalExamination/application/app/view/download/demo2.html

208 lines
6.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no, email=no">
<meta name="full-screen" content="true">
<meta name="screen-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="360-fullscreen" content="true">
<title>下载页面</title>
<script src="/x_admin/js/jq.js"></script>
<style>
*{
padding: 0 0;
margin: 0 0;
}
.big_box{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.content_1{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
overflow: auto;
padding: 10vw;
box-sizing: border-box;
font-size: 4vw;
}
.download{
width: 60vw;
height: 12vw;
background: url('/download_img/download.png') no-repeat;
background-size: contain;
}
img{
width: 55vw;
}
.jump{
width: 60vw;
height: 12vw;
margin-bottom: 10vw;
margin-top: 12vw;
background: url('/download_img/open_wechat_app.png') no-repeat;
background-size: contain;
}
.ts{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
.ts_box{
width: 85vw;
height: 27vw;
position: absolute;
top: 20%;
left: 12%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: flex-start;
font-size: 5vw;
color: white;
font-weight: bold;
}
.ts_pic{
width: 32vw;
height: 40vw;
position: absolute;
top: 0%;
right: 0%;
background: url(/tsf/registered_arrow.png) no-repeat;
background-size: contain;
background-position: center;
}
a{
margin-top: 10vw;
text-decoration: none;
color: blue;
}
.bouncing-button-container {
transform-origin: center bottom; /* 设置旋转的基点在底部中心 */
animation: rotateAndRaise 2s ease-in-out forwards infinite;
}
@keyframes rotateAndRaise {
0% {
transform: rotate(0deg) translateY(0); /* 初始状态,不旋转也不升高 */
}
10% {
transform: rotate(5deg); /* 初始状态,不旋转也不升高 */
}
20% {
transform: rotate(0deg) translateY(-50px); /* 50%时旋转15°并升高50px */
}
30% {
transform: rotate(-5deg); /* 初始状态,不旋转也不升高 */
}
40% {
transform: rotate(0deg) translateY(0px); /* 结束状态往右旋转30°并升高50px */
}
100% {
transform: rotate(0deg) translateY(0px); /* 结束状态往右旋转30°并升高50px */
}
}
.bottom_d{
width: 100vw;
height: 65vw;
position: absolute;
bottom: 0;
left: 0;
background: url('/download_img/bottom.png') no-repeat;
background-position: bottom;
background-size: contain;
}
</style>
</head>
<body id="box_k">
<div class="big_box">
<div class="content_1">
<img src="/download_img/title.png" alt="">
<div class="jump" onclick="jump()"></div>
<div class="download" onclick="download()"></div>
<div class="bottom_d"></div>
<!-- <a href="javascript:;">已安装? 打开Reedaw&nbsp;></a> -->
</div>
</div>
<div class="ts" style="display: none;">
<div class="ts_box">
<div>1、点击右上角“ ··· ”</div>
<div>2、在菜单中选择“在浏览器中打开”</div>
</div>
<div class="ts_pic"></div>
</div>
</body>
</html>
<script>
var str_url = "{$url}";
function isWeixin() {
var ua = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(ua);
}
function isIOS() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
return /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
}
function jump(){
// window.location.href = 'weixin://dl/business/?appid=wx3e50e84030fe0d1e&path=pages/index/index';
window.location.href = 'weixin://dl/business/?appid=wx9c0b7a436ada6d1e&path=pages/home/home';
}
$('.ts').on('click',function(){
$(this).hide()
})
// if(isWeixin() && !isIOS()){
// $('.ts').show()
// }else{
// // console.log('当前不在微信环境中');
// // $('.download').addClass('bouncing-button-container')
// }
function download(){
if (isIOS()) {
console.log('当前是iOS设备');
window.location.href = "https://apps.apple.com/app/reedaw/id6654906497";
}else{
if (isWeixin()) {
console.log('当前在微信环境中');
$('.ts').show()
}else{
console.log('当前不是iOS设备');
// 在这里执行非iOS设备下的代码
window.location.href = str_url;
}
}
}
</script>