-
Notifications
You must be signed in to change notification settings - Fork 0
/
ok.html
161 lines (158 loc) · 3.26 KB
/
ok.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>提交成功</title>
<style>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, 黑体, sans-serif;
}
.ok {
width: 100%;
height: 100%;
overflow: hidden;
}
.ok-title {
padding: 4em 0 2em;
background-color: #00bca4;
text-align: center;
}
.ok-title img {
height: 2.5em;
}
.ok-title h1 {
margin-top: 1em;
color: #fff;
font-size: 1.25em;
}
.ok-tips, .ok-qrcode {
color: #666;
}
.ok-tips {
padding: 1.5em 0;
}
.ok-tips table {
margin: 0 auto;
}
.ok-tips td {
padding: 0.5em 0.5em;
}
.ok-tips img {
height: 3em;
}
.ok-qrcode {
text-align: center;
}
.ok-qrcode > div {
display: inline-block;
margin: 0 1em;
}
.ok-qrcode img {
height: 5em;
}
.ok-qrcode p {
font-size: 0.75em;
}
</style>
</head>
<body>
<div class="ok">
<div class="ok-title">
<p><img src="./images/ok/bird@2x.png"></p>
<h1>提交成功</h1>
</div>
<div class="ok-tips">
<table>
<tbody>
<tr>
<td>
</td>
<td>
<p>小瞳正在审核材料中<br>请耐心等待面试通知</p>
</td>
</tr>
<tr>
<td>
<img src="./images/ok/ship@2x.png">
</td>
<td>
<p>不放心？<br>登陆邮箱确认报名状态</p>
</td>
</tr>
<tr>
<td>
<img src="./images/ok/clock@2x.png">
</td>
<td>
<p>没有收到邮件？<br>联系我们解决<br>邮箱：eeyesnet@163.com</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="ok-qrcode">
<div>
<img id="ok-qrcode-qun" src="./images/ok/freshmengroup.jpg">
<p>QQ新生群<br>(552035254)</p>
</div><div>
<img id="ok-qrcode-weixin" src="./images/ok/wechat.jpg">
<p>微信公众号<br>(xjtueeyes)</p>
</div>
</div>
</div>
<script>
+function () {
function resize() {
document.getElementsByClassName("ok")[0].style.fontSize = window.innerHeight / 37 + "px";
};
window.addEventListener("resize", resize);
resize();
}();
+function () {
var qun = document.getElementById("ok-qrcode-qun"),
weixin = document.getElementById("ok-qrcode-weixin");
var run = false;
function reset() {
run = false;
qun.style.opacity = "";
weixin.style.opacity = "";
}
function fadeOut(element) {
function time() {
return (new Date()).getTime();
}
var t0 = time();
function fadeOutFunc() {
var opacity = 1 - (time() - t0) / 400;
if (opacity > 0) {
element.style.opacity = opacity;
if (run) {
setTimeout(fadeOutFunc, 0);
} else {
reset();
}
} else {
element.style.opacity = 0;
}
}
run = true;
fadeOutFunc();
setTimeout(reset, 1000);
}
qun.addEventListener("touchstart", function () {
fadeOut(weixin);
});
weixin.addEventListener("touchstart", function () {
fadeOut(qun);
});
qun.addEventListener("touchend", reset);
qun.addEventListener("touchcancel", reset);
weixin.addEventListener("touchend", reset);
weixin.addEventListener("touchcancel", reset);
}();
</script>
</body>
</html>