-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
213 lines (171 loc) · 7.67 KB
/
index.html
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!--
* @Description:
* @version:
* @Author: lxw
* @Date: 2020-03-28 19:55:24
* @LastEditors: lxw
* @LastEditTime: 2020-03-29 16:55:09
-->
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>易教育App - 下载</title>
<meta http-equiv="X-UA-Compatible" content="edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="在线教育平台 App下载 在线教育App 互联网课程视频 编程视频 flutterApp开发 flutter app下载引导页 ">
<meta name="description"
content="线上教育行业这几年来都非常的火热，而我们便是抓住这一机会，把教育培训与互联网结合起来，打造一款使用方便、体验良好、内容质量高、集教学与测试一体的在线教育平台——“易教育”">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 基础样式 -->
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/load.css">
<!-- 模块化特效样式 -->
<link rel="stylesheet" href="./less/blur-show.css">
<link rel="stylesheet" href="./less/Accordion.css">
<link rel="stylesheet" href="./less/ferris-wheel.css">
<link rel="shortcut icon" href="./icon.ico" />
</head>
<body>
<!--网页背景图片未加载好显示这个 -->
<div class="load-wrap" style="display: block;" id="load-wrap">
<section>
<div class="loader loader-2">
<svg class="loader-star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1">
<polygon
points="29.8 0.3 22.8 21.8 0 21.8 18.5 35.2 11.5 56.7 29.8 43.4 48.2 56.7 41.2 35.1 59.6 21.8 36.8 21.8 "
fill="#18ffff" />
</svg>
<div class="loader-circles"></div>
</div>
</section>
</div>
<!-- 挂载dom，通过它来查找子元素也就是模块 -->
<div id="wrap">
<!-- 修改为轮播切换效果，这是所有轮播item的新父节点，根据item数目动态设置其宽度,必须设置否则宽度不够，即使子元素float:left也会掉下去 -->
<div class="carousel-wrap clearfix" id="carousel-wrap" style="transform: translateX(0px);">
<!--第一层箭头切换内容，默认网页开始显示这一层内容，这一层主体样式没有封装成less模块，而是直接写在index.css文件里面 -->
<!-- 毛玻璃弹出层——背景存在兼容性问题ie不支持 CSS3 blur滤镜实现-->
<!-- 内置模板内容一 -->
<div class="carousel-item">
<div class="blur-bg" style="display:block;">
<h4>flutter—易教育App</h4>
<p>使用flutter开发的在线教育App，“易教育”是在线实用技能学习平台，主要为学习者提供海量、优质的课程，课程结构严谨，用户可以根据自身的学习程度，自主安排学习进度。“易教育”的宗旨是，为每一位想真真正正学到些实用知识、技能的学习者，提供贴心的一站式学习服务。
</p>
<div>
<img src="./images/download.png" alt="" title="点击下载App" class="icon" onclick="download()">
</div>
</div>
</div>
<!-- 内置模板内容二 分层叠加 + 二维码-->
<div class="carousel-item">
<div class="show-app-conten2">
<div class="layered-effect" title="点击展开">
<img src="./images/app1.jpg" alt="">
<img src="./images/app1.jpg" alt="">
<img src="./images/app1.jpg" alt="">
<img src="./images/app1.jpg" alt="">
</div>
<!-- 二维码 -->
<div class="downqrcode">
<img src="./images/downqrcode-.png" alt="">
<h3>多类课程、在线观看</h3>
<h4>扫描上方二维码即可下载</h4>
</div>
</div>
</div>
<!-- 内置模板内容三 摩天轮旋转 -->
<div class="carousel-item">
<div class="show-app-content3">
<div class="rotate-wrap">
<ul class="out">
<li class="item" style="background-color: rgba(121, 100, 102, 0.8);"> <span
title="编程">编程</span>
</li>
<li class="item" style="background-color: rgba(49, 65, 82, 0.8);"><span title="运营">运营</span>
</li>
<li class="item" style="background-color: rgba(76, 157, 160, 0.8);"><span
title="webpack">webpack</span></li>
<li class="item" style="background-color: rgba(66, 66, 66, 0.8);"><span
title="小程序">小程序</span>
</li>
<li class="item" style="background-color: rgba(193, 131, 106, 0.8);"><span
title="flutter">flutter</span></li>
<li class="item" style="background-color: rgba(117, 148, 179, 0.8);"><span
title="nodejs">nodejs</span></li>
<li class="item" style="background-color: rgba(71, 83, 94, 0.8);"> <span
title="Java">Java</span>
</li>
<li class="item" style="background-color: rgba(147, 147, 189, 0.8);"><span
title="vue">vue</span>
</li>
</ul>
<ul class="inner">
<li class="inner-item" style="background-color: rgba(179, 164, 140, 0.8);">免费</li>
<li class="inner-item" style="background-color: rgba(171, 209, 220, 0.8);">好评</li>
<li class="inner-item" style="background-color: rgba(238, 215, 163, 0.8);">独立</li>
<li class="inner-item" style="background-color: rgba(207, 184, 178, 0.8);">自主</li>
</ul>
</div>
<div class="conte-footer">
<h3>多种课程 | 免费观看 | 满足你的需求</h3>
<img src="./images/download.png" alt="" title="点击下载App" onclick="download()">
</div>
</div>
</div>
</div>
</div>
<!-- 左右切换箭头,属于全局部分index.css -->
<div class="toggle">
<div class="tootile">
<h4>点击左右箭头切换内容</h4>
</div>
<div class="code" style="position: absolute;right:0;top:-60%;">
<h4 onclick="location.href='https://github.com/LXY-1/show-page-template'">源码查阅</h4>
</div>
<div class="left">
<img src="./images/left.png" alt="" id="left">
</div>
<div class="right">
<img src="./images/right.png" alt="" id="right">
</div>
</div>
<script src="./js/carouselToggle.js"></script>
<script>
// 由于背景图片比较大，这判断背景图片是否加载完毕，没有加载完毕的话显示页面加载动画
// ps:判断图片加载完毕只能通过img标签或者是Image对象了，所以这里我们不能一开始就css设置body bakcoungIimage了。
const bgBody = document.body
const loadWrap = document.getElementById('load-wrap')
const bgImg = new Image();
bgImg.src = './images/bg.jpg'
// 背景图片加载完毕，但是未完全显示
bgImg.onload = function () {
const cItem = document.getElementsByClassName('carousel-item')[0]
cItem.style.backgroundImage = `url(${bgImg.src})`
setTimeout(() => {
loadWrap.style.display = 'none'
}, 500);
}
carouselSlider('carousel-wrap')
function download() {
var a = document.createElement("a");
a.download = 'yiedu' + ".apk";
a.href = 'http://47.103.223.248:8080/yiedu.apk';
a.style.display = 'none'
document.body.append(a) // 修复firefox中无法触发click
let ie = navigator.appName === 'Microsoft Internet Explorer' ? true : false
if (ie) {
a.click()
} else {
let mouseEv = document.createEvent('MouseEvents')
mouseEv.initEvent('click', false, false)
a.dispatchEvent(mouseEv)
}
}
</script>
</body>
</html>