appv3.html
3.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>元阳水务管理端APP下载</title>
<!-- 引入相关的 css 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" />
<!-- 引入相关的 js 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.app_one {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.app_two {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.app_three {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.app_image {
width: 100%;
height: 100%;
}
.app_div {
height: 40px;
width: 100%;
position: absolute;
bottom: 1%;
left: 0%;
display: flex;
justify-content: center;
}
.app_div1 {
height: 40px;
width: 100%;
position: absolute;
top: 1%;
left: 0%;
display: flex;
justify-content: center;
}
.app_image1 {
width: 40px;
height: 40px;
}
.app_image2 {
width: 40px;
height: 40px;
transform: scaleY(-1);
}
.app_btn {
position: absolute;
bottom: 10%;
left: 20%;
width: 60%;
height: 35px;
background: #3F7DF7;
border: none;
border-radius: 28px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
}
</style>
</head>
<body>
<div id="app" class="swiper-container app_box" direction="vertical">
<div class="swiper-wrapper">
<div class="swiper-slide app_one" id="appOne">
<img src="assets/img/admindownload1.png" class="app_image" />
<button onclick="location.href='<?php echo $row['apk_url']; ?>'" class="app_btn">立即下载</button>
<div class="app_div">
<img src="app2/img/icon.png" class="app_image1" />
</div>
</div>
<div class="swiper-slide app_two" id="appTwo">
<div class="app_div1">
<img src="app2/img/icon.png" class="app_image2" />
</div>
<img src="assets/img/admindownload2.png" class="app_image" />
<button onclick="location.href='<?php echo $row['apk_url']; ?>'" class="app_btn">立即下载</button>
<div class="app_div">
<img src="app2/img/icon.png" class="app_image1" />
</div>
</div>
<div class="swiper-slide app_three" id="appThree">
<div class="app_div1">
<img src="app2/img/icon.png" class="app_image2" />
</div>
<img src="assets/img/download.png" class="app_image" />
<button onclick="location.href='<?php echo $row['apk_url']; ?>'" class="app_btn">立即下载</button>
</div>
</div>
</div>
</body>
<script>
document.addEventListener('plusready', function() {
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
});
var deviceWidth = window.innerWidth;
var deviceHeight = window.innerHeight;
// console.log("设备宽度：" + deviceWidth, "设备高度：" + deviceHeight);
// 获取元素
var element = document.getElementById("app");
// 设置宽高
element.style.width = deviceWidth + "px";
element.style.height = deviceHeight + "px";
// 第一种 通过方法响应点击事件
function download() {
// alert("点击事件");
// console.log(index)
}
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical', // 垂直切换选项
loop: false, // 循环模式选项
// 如果需要前进后退按钮
navigation: {
nextEl: '.app_image1',
prevEl: '.app_image2',
},
resistanceRatio: 0
});
</script>
</html>