File: C:/github_repos/ho-xsj-website/templates/download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新世纪数学下载</title>
<link rel="shortcut icon" href="https://osscdn.xsj21.com/website/favicon.ico" type="image/x-icon">
<style>
body {
height: 100vh;
margin: 0;
padding: 0;
}
div.bg {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
height: 100%;
align-items: center;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
background-image: url(https://osscdn.xsj21.com/xsjApp/download-bg.png);
}
div.bg > .student, div.bg > .teacher {
height: 90px;
width: 335px;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
position: absolute;
}
div.bg > .student {
background-image: url(https://osscdn.xsj21.com/xsjApp/download-student.png);
bottom: 154px;
}
div.bg > .teacher {
background-image: url(https://osscdn.xsj21.com/xsjApp/download-teacher.png);
bottom: 32px;
}
.tooltip {
position: absolute;
background-color: rgba(3, 3, 3, .5);
z-index: 10;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
background-image: url(https://osscdn.xsj21.com/xsjApp/download-tooltip.png);
background-position: 65% 2%;
background-size: 70% 25%;
background-repeat: no-repeat;
}
.show {
display: flex;
}
.bg > span {
display: flex;
align-self: center;
font-size: 12px;
color: rgba(255, 255, 255, .6);
position: absolute;
bottom: 12px;
}
</style>
</head>
<body>
<div class="bg">
<div onclick="download(this, 'student')" data-link="{{ data['student'] }}" class="student"></div>
<div onclick="download(this, 'teacher')" data-link="{{ data['teacher'] }}" class="teacher"></div>
<span>新世纪小学数学编委会 出品</span>
</div>
<div onclick="showToolTip()" class="tooltip"></div>
<script>
function download(e, type) {
console.log({ e, type });
if (is_weixn()) {
showToolTip();
} else {
if (e.dataset.link) {
window.location.href = e.dataset.link;
} else {
alert('android正在制作');
}
}
}
function showToolTip() {
const tooltip = document.querySelector('.tooltip');
tooltip.classList.toggle('show');
}
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
</script>
</body>
</html>