万朱浩 / Venue-Ops

Go to a project
Toggle navigation Toggle navigation pinning
戒酒的李白
d7da8b90 1 parent cfe1fdc8

【登陆注册】彻底完成

Inline Side-by-side
Showing 3 changed files with 328 additions and 281 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="zh"> 2 <html lang="zh">
3 -  
4 -<head>  
5 - <meta charset="UTF-8">  
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0"> 3 + <head>
  4 + <meta charset="UTF-8" />
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>微博舆情分析系统 | 登录</title> 6 <title>微博舆情分析系统 | 登录</title>
8 - <link rel="icon" href="../../../static/原神启动/favicon.ico">  
9 -</head> 7 + <link rel="icon" href="../../../static/原神启动/favicon.ico" />
  8 + </head>
10 9
11 -<style> 10 + <style>
12 * { 11 * {
13 - margin: 0;  
14 - padding: 0;  
15 - list-style: none; 12 + margin: 0;
  13 + padding: 0;
  14 + list-style: none;
16 } 15 }
17 16
18 html, 17 html,
19 body { 18 body {
20 - width: 100%;  
21 - height: 100%;  
22 - overflow: hidden;  
23 - 19 + width: 100%;
  20 + height: 100%;
  21 + overflow: hidden;
24 } 22 }
25 23
26 a { 24 a {
27 - text-decoration: none; 25 + text-decoration: none;
28 } 26 }
29 27
30 .login, 28 .login,
31 .register { 29 .register {
32 - display: none; 30 + display: none;
33 } 31 }
34 32
35 .show { 33 .show {
36 - display: block; 34 + display: block;
37 } 35 }
38 36
39 -  
40 #video-background { 37 #video-background {
41 - position: fixed;  
42 - top: 0;  
43 - left: 0;  
44 - width: 100%;  
45 - height: 100%;  
46 - z-index: -3;  
47 - overflow: hidden; 38 + position: fixed;
  39 + top: 0;
  40 + left: 0;
  41 + width: 100%;
  42 + height: 100%;
  43 + z-index: -3;
  44 + overflow: hidden;
48 } 45 }
49 46
50 #video-background video { 47 #video-background video {
51 - position: absolute;  
52 - top: 50%;  
53 - left: 50%;  
54 - transform: translate(-50%, -50%);  
55 - min-width: 100%;  
56 - max-height: 110%;  
57 - object-fit: cover; 48 + position: absolute;
  49 + top: 50%;
  50 + left: 50%;
  51 + transform: translate(-50%, -50%);
  52 + min-width: 100%;
  53 + max-height: 110%;
  54 + object-fit: cover;
58 } 55 }
59 56
60 #black-hid { 57 #black-hid {
61 - position: fixed;  
62 - width: 100%;  
63 - height: 100%;  
64 - background-color: #0a0a0a;  
65 - opacity: 0.6;  
66 - z-index: -2; 58 + position: fixed;
  59 + width: 100%;
  60 + height: 100%;
  61 + background-color: #0a0a0a;
  62 + opacity: 0.6;
  63 + z-index: -2;
67 } 64 }
68 65
69 form { 66 form {
70 - position: relative;  
71 - width: 642.03px;  
72 - height: 477.28px;  
73 - background-color: #fff;  
74 - margin: auto;  
75 - top: 20%;  
76 - border-radius: 0.1cm;  
77 -  
78 - 67 + position: relative;
  68 + width: 642.03px;
  69 + height: 477.28px;
  70 + background-color: #fff;
  71 + margin: auto;
  72 + top: 20%;
  73 + border-radius: 0.1cm;
79 } 74 }
80 75
81 -  
82 -  
83 .login_box { 76 .login_box {
84 - position: absolute;  
85 - width: 100%;  
86 - height: 100%;  
87 - background-color: #fff;  
88 - box-shadow: inset 0px 0px 3px black;  
89 - padding: 15px;  
90 - box-sizing: border-box;  
91 - 77 + position: absolute;
  78 + width: 100%;
  79 + height: 100%;
  80 + background-color: #fff;
  81 + box-shadow: inset 0px 0px 3px black;
  82 + padding: 15px;
  83 + box-sizing: border-box;
92 } 84 }
93 85
94 .title { 86 .title {
95 - position: absolute;  
96 - top: 0;  
97 - left: 0;  
98 - width: 612px;  
99 - height: auto;  
100 - padding: 15px;  
101 - left: 50%;  
102 - transform: translateX(-50%);  
103 - 87 + position: absolute;
  88 + top: 0;
  89 + left: 0;
  90 + width: 612px;
  91 + height: auto;
  92 + padding: 15px;
  93 + left: 50%;
  94 + transform: translateX(-50%);
104 } 95 }
105 96
106 .QRcode img { 97 .QRcode img {
107 - height: 90px;  
108 - width: 90px;  
109 -  
110 - object-fit: unset;  
111 -  
112 - /* 添加过渡效果 */  
113 - cursor: pointer; 98 + height: 70px;
  99 + width: 70px;
  100 + object-fit: unset;
  101 + /* 添加过渡效果 */
  102 + cursor: pointer;
114 } 103 }
115 104
116 .QRcode { 105 .QRcode {
117 - height: 90px;  
118 - width: 90px;  
119 - 106 + height: 90px;
  107 + width: 90px;
120 } 108 }
121 109
122 - .QRcode:hover>img {  
123 - line-height: normal;  
124 -  
125 - /* transform-origin: unset; */  
126 - 110 + .QRcode:hover > img {
  111 + line-height: normal;
  112 + /* transform-origin: unset; */
127 } 113 }
128 114
129 -  
130 .logo { 115 .logo {
131 - position: absolute;  
132 - width: 150px;  
133 - height: 50px;  
134 - left: 50%;  
135 - transform: translateX(-50%);  
136 - margin-top: 15px; 116 + position: absolute;
  117 + width: 150px;
  118 + height: 50px;
  119 + left: 50%;
  120 + transform: translateX(-50%);
  121 + margin-top: 15px;
  122 + transition: opacity 0.5s ease; /* 添加过渡效果 */
137 } 123 }
138 124
139 .logo img { 125 .logo img {
140 - width: 150px;  
141 - height: 50px; 126 + width: 150px;
  127 + height: 50px;
142 } 128 }
143 129
144 .content { 130 .content {
145 - position: absolute;  
146 - width: 612px;  
147 - height: 150px;  
148 -  
149 - top: 80px;  
150 - left: 50%;  
151 - transform: translateX(-50%); 131 + position: absolute;
  132 + width: 612px;
  133 + height: 150px;
  134 + top: 80px;
  135 + left: 50%;
  136 + transform: translateX(-50%);
152 } 137 }
153 138
154 .input { 139 .input {
155 - height: 60px;  
156 - width: 522px;  
157 - margin-top: 25px;  
158 - margin-left: 40px;  
159 -  
160 - border: none;  
161 -  
162 - 140 + height: 60px;
  141 + width: 522px;
  142 + margin-top: 25px;
  143 + margin-left: 40px;
  144 + border: none;
163 } 145 }
164 146
165 .content input { 147 .content input {
166 - height: 60px;  
167 - width: 522px;  
168 -  
169 - text-indent: 1em;  
170 - font-size: 18px;  
171 - letter-spacing: .2em;  
172 - font-weight: 700;  
173 - outline: none;  
174 - border: none;  
175 - box-shadow: inset 0px 0px 2px rgb(207, 206, 206);  
176 - box-shadow: 0px 0px 4px rgb(207, 206, 206);  
177 - border-radius: 0.1cm;  
178 - 148 + height: 60px;
  149 + width: 522px;
  150 + text-indent: 1em;
  151 + font-size: 18px;
  152 + letter-spacing: 0.2em;
  153 + font-weight: 700;
  154 + outline: none;
  155 + border: none;
  156 + box-shadow: inset 0px 0px 2px rgb(207, 206, 206);
  157 + box-shadow: 0px 0px 4px rgb(207, 206, 206);
  158 + border-radius: 0.1cm;
179 } 159 }
180 160
181 .content input::placeholder { 161 .content input::placeholder {
182 - opacity: 0.4; 162 + opacity: 0.4;
183 } 163 }
184 164
185 .register-text { 165 .register-text {
186 - position: absolute;  
187 - width: 522px;  
188 - height: 30px;  
189 - top: 270px;  
190 - left: 50%;  
191 - transform: translateX(-50%); 166 + position: absolute;
  167 + width: 522px;
  168 + height: 30px;
  169 + top: 270px;
  170 + left: 50%;
  171 + transform: translateX(-50%);
192 } 172 }
193 173
194 .register-text a { 174 .register-text a {
195 - font-weight: 700;  
196 - font-size: 18px;  
197 - letter-spacing: .1em; 175 + font-weight: 700;
  176 + font-size: 18px;
  177 + letter-spacing: 0.1em;
198 } 178 }
199 179
200 .a1 { 180 .a1 {
201 - color: #949292; 181 + color: #949292;
202 } 182 }
203 183
204 -  
205 .a2 { 184 .a2 {
206 - color: #d6c194; 185 + color: #d6c194;
207 } 186 }
208 187
209 .a2:hover { 188 .a2:hover {
210 - color: #d6a948; 189 + color: #d6a948;
211 } 190 }
212 191
213 .a3:hover { 192 .a3:hover {
214 - color: #d6a948; 193 + color: #d6a948;
215 } 194 }
216 195
217 .a3 { 196 .a3 {
218 - position: absolute;  
219 - right: 0;  
220 - color: #d6c194; 197 + position: absolute;
  198 + right: 0;
  199 + color: #d6c194;
221 } 200 }
222 201
223 .start { 202 .start {
224 - position: absolute;  
225 - top: 320px;  
226 - width: 612px;  
227 - height: 60px;  
228 - left: 50%;  
229 - transform: translateX(-50%); 203 + position: absolute;
  204 + top: 320px;
  205 + width: 612px;
  206 + height: 60px;
  207 + left: 50%;
  208 + transform: translateX(-50%);
230 } 209 }
231 210
232 .start button { 211 .start button {
233 - position: absolute;  
234 - width: 522px;  
235 - height: 60px;  
236 -  
237 - left: 50%;  
238 - transform: translateX(-50%);  
239 - cursor: pointer;  
240 - border: none;  
241 - font-size: 20px;  
242 - letter-spacing: 0.1em;  
243 - background-color: rgb(54, 54, 61);  
244 - color: rgb(215, 210, 180);  
245 - font-weight: 700;  
246 - border-radius: .1cm;  
247 - box-shadow: 0px 0px 3px 1px #969595; 212 + position: absolute;
  213 + width: 522px;
  214 + height: 60px;
  215 + left: 50%;
  216 + transform: translateX(-50%);
  217 + cursor: pointer;
  218 + border: none;
  219 + font-size: 20px;
  220 + letter-spacing: 0.1em;
  221 + background-color: rgb(54, 54, 61);
  222 + color: rgb(215, 210, 180);
  223 + font-weight: 700;
  224 + border-radius: 0.1cm;
  225 + box-shadow: 0px 0px 3px 1px #969595;
248 } 226 }
249 227
250 .start button:hover { 228 .start button:hover {
251 - color: #d6c194; 229 + color: #d6c194;
252 } 230 }
253 231
254 .exit { 232 .exit {
255 - position: absolute;  
256 - right: 20px;  
257 - width: 25px;  
258 - height: 25px; 233 + position: absolute;
  234 + right: 20px;
  235 + width: 25px;
  236 + height: 25px;
259 } 237 }
260 238
261 .exit img { 239 .exit img {
262 - width: 25px;  
263 - height: 25px; 240 + width: 25px;
  241 + height: 25px;
264 } 242 }
265 243
266 .other-login { 244 .other-login {
267 - position: absolute;  
268 - width: 612px;  
269 - height: 80px;  
270 - top: 400px;  
271 - left: 50%;  
272 - transform: translateX(-50%);  
273 - padding-left: 80px;  
274 - font-size: 18px;  
275 - letter-spacing: 0.1em;  
276 -  
277 - font-weight: 700; 245 + position: absolute;
  246 + width: 612px;
  247 + height: 80px;
  248 + top: 400px;
  249 + left: 50%;
  250 + transform: translateX(-50%);
  251 + padding-left: 80px;
  252 + font-size: 18px;
  253 + letter-spacing: 0.1em;
  254 + font-weight: 700;
278 } 255 }
279 256
280 .other-login a { 257 .other-login a {
281 - color: rgb(15, 15, 15); 258 + color: rgb(15, 15, 15);
282 } 259 }
283 260
284 .other-login span:first-child { 261 .other-login span:first-child {
285 - margin-left: 15px; 262 + margin-left: 15px;
286 } 263 }
287 264
288 .other-login span:last-child { 265 .other-login span:last-child {
289 - position: absolute;  
290 - right: 80px; 266 + position: absolute;
  267 + right: 80px;
291 } 268 }
292 269
293 .xieyi { 270 .xieyi {
294 - position: absolute;  
295 - width: 612px;  
296 - height: 40px;  
297 - line-height: 40px;  
298 - left: 50%;  
299 - transform: translateX(-50%);  
300 - top: 310px;  
301 - font-size: 18px;  
302 - font-weight: 700;  
303 - color: #8d8c8b; 271 + position: absolute;
  272 + width: 612px;
  273 + height: 40px;
  274 + line-height: 40px;
  275 + left: 50%;
  276 + transform: translateX(-50%);
  277 + top: 310px;
  278 + font-size: 18px;
  279 + font-weight: 700;
  280 + color: #8d8c8b;
304 } 281 }
305 282
306 .xieyi input { 283 .xieyi input {
307 - margin-left: 45px; 284 + margin-left: 45px;
308 } 285 }
309 286
310 .yanzhengma:hover { 287 .yanzhengma:hover {
311 - color: #aa863e; 288 + color: #aa863e;
312 } 289 }
313 -</style>  
314 -  
315 -<body onclick="playAudio()"> 290 + </style>
316 291
  292 + <body onclick="playAudio()">
317 <audio id="audio-player" autoplay class="hide-player"> 293 <audio id="audio-player" autoplay class="hide-player">
318 - <source src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%83%8C%E6%99%AF%E9%9F%B3.mp4"  
319 - type="audio/mp3"> 294 + <source
  295 + src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%83%8C%E6%99%AF%E9%9F%B3.mp4"
  296 + type="audio/mp3"
  297 + />
320 </audio> 298 </audio>
321 299
322 <div id="video-background"> 300 <div id="video-background">
323 - <video src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%A7%86%E9%A2%91.mp4" autoplay="autoplay" muted="muted" loop="loop"></video> 301 + <video
  302 + src="https://lovexl-oss.oss-cn-beijing.aliyuncs.com/bed/%E5%8E%9F%E7%A5%9E%E9%A6%96%E9%A1%B5%E8%A7%86%E9%A2%91.mp4"
  303 + autoplay="autoplay"
  304 + muted="muted"
  305 + loop="loop"
  306 + ></video>
324 </div> 307 </div>
325 308
326 - <div id="black-hid">  
327 - </div> 309 + <div id="black-hid"></div>
328 310
329 <form id="login" class="login show" method="POST" action="/user/login"> 311 <form id="login" class="login show" method="POST" action="/user/login">
330 - <div class="login_box">  
331 - <div class="title">  
332 - <!-- <a class="QRcode" href=""><img src="login_resources/二维码 (1).png" alt=""></a> -->  
333 - <a class="logo" href=""><img src="../../../static/原神启动/logo2.08ebb840.png" alt=""></a>  
334 - <a class="exit" href=""><img src="../../../static/原神启动/关闭 (1).png" alt=""></a>  
335 - </div>  
336 - </div>  
337 - <div class="content">  
338 - <div class="input"><input type="text" name="username" placeholder="输入账号/原神"></div>  
339 - <div class="input"><input type="password" name="password" placeholder="输入密码/始める！"></div>  
340 - </div>  
341 - <div class="register-text">  
342 - <span>  
343 - <a href="" class="a1">没有账号？</a>  
344 - <a href="" class="a2" id="register_btn">立即注册</a>  
345 - </span>  
346 - <span><a href="" class="a3">忘记密码</a></span> 312 + <div class="login_box">
  313 + <div class="title">
  314 + <a class="QRcode" href=""
  315 + ><img src="../../../static/原神启动/二维码.png" alt="二维码"
  316 + /></a>
  317 + <a class="logo" href=""
  318 + ><img src="../../../static/原神启动/logo2.08ebb840.png" alt=""
  319 + /></a>
  320 + <a class="exit" href=""
  321 + ><img src="../../../static/原神启动/关闭 (1).png" alt=""
  322 + /></a>
347 </div> 323 </div>
348 - <div class="start">  
349 - <button>进入游戏</button> 324 + </div>
  325 + <div class="content">
  326 + <div class="input">
  327 + <input type="text" name="username" placeholder="输入账号/原神" />
350 </div> 328 </div>
351 - <div class="other-login">  
352 - <span><a href="" class="a4">手机快捷登录</a></span>  
353 - <span><a href="" class="a5">TapTap</a></span> 329 + <div class="input">
  330 + <input
  331 + type="password"
  332 + name="password"
  333 + placeholder="输入密码/始める！"
  334 + />
354 </div> 335 </div>
  336 + </div>
  337 + <div class="register-text">
  338 + <span>
  339 + <a href="" class="a1">没有账号？</a>
  340 + <a href="" class="a2" id="register_btn">立即注册</a>
  341 + </span>
  342 + <span><a href="" class="a3">忘记密码</a></span>
  343 + </div>
  344 + <div class="start">
  345 + <button>进入游戏</button>
  346 + </div>
  347 + <div class="other-login">
  348 + <span><a href="" class="a4">手机快捷登录</a></span>
  349 + <span><a href="" class="a5">TapTap</a></span>
  350 + </div>
355 </form> 351 </form>
356 352
357 -  
358 <form id="register" class="register" method="POST" action="/user/register"> 353 <form id="register" class="register" method="POST" action="/user/register">
359 - <div class="login_box">  
360 - <div class="title">  
361 - <a class="logo" href=""><img src="../../../static/原神启动//logo2.08ebb840.png" alt=""></a>  
362 - <a class="exit" href=""><img src="../../../static/原神启动//关闭 (1).png" alt=""></a>  
363 - </div>  
364 - </div>  
365 - <div class="content">  
366 - <div class="input">  
367 - <span  
368 - style="display: inline-block;width: 60px;height: 60px;font-size: 21px;font-weight: 800;color: black;line-height: 60px;text-align: center; ">  
369 - +86</span>  
370 - <input style="width: 452px;float: right;" type="text" name="username" placeholder="输入要注册的账号">  
371 - <a class="yanzhengma" href=""  
372 - style="position: absolute; top: 43px;right: 60px;color: #d6c194;font-weight: 700;letter-spacing: 0.1em;">我是假按钮</a>  
373 - </div>  
374 - <div class="input"><input type="text" name="password" placeholder="设定密码"></div> 354 + <div class="login_box">
  355 + <div class="title">
  356 + <a class="logo" href=""
  357 + ><img src="../../../static/原神启动//logo2.08ebb840.png" alt=""
  358 + /></a>
  359 + <a class="exit" href=""
  360 + ><img src="../../../static/原神启动//关闭 (1).png" alt=""
  361 + /></a>
375 </div> 362 </div>
376 - <div class="xieyi">  
377 - <input type="checkbox">  
378 - <span>已同意《用户协议》和《隐私权益》</span> 363 + </div>
  364 + <div class="content">
  365 + <div class="input">
  366 + <span
  367 + style="
  368 + display: inline-block;
  369 + width: 60px;
  370 + height: 60px;
  371 + font-size: 21px;
  372 + font-weight: 800;
  373 + color: black;
  374 + line-height: 60px;
  375 + text-align: center;
  376 + "
  377 + >
  378 + +86</span
  379 + >
  380 + <input
  381 + style="width: 452px; float: right"
  382 + type="text"
  383 + name="username"
  384 + placeholder="输入要注册的账号"
  385 + />
  386 + <a
  387 + class="yanzhengma"
  388 + href=""
  389 + style="
  390 + position: absolute;
  391 + top: 43px;
  392 + right: 60px;
  393 + color: #d6c194;
  394 + font-weight: 700;
  395 + letter-spacing: 0.1em;
  396 + "
  397 + >我是假按钮</a
  398 + >
379 </div> 399 </div>
380 - <div class="register-text">  
381 - <span>  
382 - <a href="" class="a2" id="login_btn">返回登录页面</a>  
383 - </span>  
384 - 400 + <div class="input">
  401 + <input type="text" name="password" placeholder="设定密码" />
385 </div> 402 </div>
386 - <div class="start" style="top: 370px;">  
387 - <button>注册并登录</button>  
388 - </div>  
389 - 403 + </div>
  404 + <div class="xieyi">
  405 + <input type="checkbox" />
  406 + <span>已同意《用户协议》和《隐私权益》</span>
  407 + </div>
  408 + <div class="register-text">
  409 + <span>
  410 + <a href="" class="a2" id="login_btn">返回登录页面</a>
  411 + </span>
  412 + </div>
  413 + <div class="start" style="top: 370px">
  414 + <button>注册并登录</button>
  415 + </div>
390 </form> 416 </form>
391 417
392 -  
393 <script> 418 <script>
394 - //点击网页后，播放音乐  
395 - function playAudio() {  
396 - var audioPlayer = document.getElementById('audio-player');  
397 - audioPlayer.play();  
398 - };  
399 -  
400 - // 获取表单和链接的引用  
401 - const loginForm = document.getElementById('login');  
402 - const registerForm = document.getElementById('register');  
403 - const registerLink = document.getElementById('register_btn');  
404 - const loginLink = document.getElementById('login_btn');  
405 -  
406 - // 点击"立即注册"链接时切换表单显示状态  
407 - registerLink.addEventListener('click', function (event) {  
408 - event.preventDefault(); // 阻止链接默认行为  
409 - loginForm.classList.remove('show');  
410 - registerForm.classList.add('show');  
411 - });  
412 -  
413 - // 点击"返回登录界面"链接时切换表单显示状态  
414 - loginLink.addEventListener('click', function (event) {  
415 - event.preventDefault(); // 阻止链接默认行为  
416 - registerForm.classList.remove('show');  
417 - loginForm.classList.add('show');  
418 - });  
419 -  
420 - 419 + //点击网页后，播放音乐
  420 + function playAudio() {
  421 + var audioPlayer = document.getElementById("audio-player");
  422 + audioPlayer.play();
  423 + }
  424 +
  425 + // 获取表单和链接的引用
  426 + const loginForm = document.getElementById("login");
  427 + const registerForm = document.getElementById("register");
  428 + const registerLink = document.getElementById("register_btn");
  429 + const loginLink = document.getElementById("login_btn");
  430 +
  431 + // 点击"立即注册"链接时切换表单显示状态
  432 + registerLink.addEventListener("click", function (event) {
  433 + event.preventDefault(); // 阻止链接默认行为
  434 + loginForm.classList.remove("show");
  435 + registerForm.classList.add("show");
  436 + });
  437 +
  438 + // 点击"返回登录界面"链接时切换表单显示状态
  439 + loginLink.addEventListener("click", function (event) {
  440 + event.preventDefault(); // 阻止链接默认行为
  441 + registerForm.classList.remove("show");
  442 + loginForm.classList.add("show");
  443 + });
  444 +
  445 + // 在页面加载3秒后更改图片链接和文本内容
  446 + setTimeout(function () {
  447 + // 更改二维码图片链接
  448 + const qrCode = document.querySelector(".QRcode img");
  449 + qrCode.style.transition = "opacity 1s ease"; // 添加过渡效果
  450 + qrCode.style.opacity = 0; // 渐隐
  451 +
  452 + // 等待过渡效果完成后隐藏图片
  453 + setTimeout(function () {
  454 + qrCode.style.display = "none"; // 隐藏二维码图片
  455 + }, 1000); // 1秒等于1000毫秒
  456 +
  457 + // 更改logo为文本并添加样式
  458 + const logo = document.querySelector(".logo");
  459 + logo.style.transition = "opacity 1s ease"; // 添加过渡效果
  460 + logo.style.opacity = 0; // 渐隐
  461 +
  462 + // 等待过渡效果完成后更改内容并渐显
  463 + setTimeout(function () {
  464 + logo.innerHTML =
  465 + '<div style="width:500px;height:50px;margin-left:-200px;display:flex;align-items:center;"><img style="width:150px;height:75px;margin-bottom:20px" src="../../../static/原神启动/微博logo.png" alt=""/><div style="font-size: 35px; font-weight: bold; color: black;">微博舆情分析系统</div></div>';
  466 + logo.style.opacity = 1; // 渐显
  467 + }, 1000); // 1秒等于1000毫秒
  468 + }, 3000); // 3000 毫秒 等于 3 秒
421 </script> 469 </script>
422 -</body>  
423 -  
424 -</html>  
  470 + </body>
  471 +</html>