万朱浩 / Venue-Ops

Go to a project
Toggle navigation Toggle navigation pinning
kpt
17d15ed2 2 parents e96d14dd 4e0c9779

Merge branch 'main' of https://github.com/666ghj/Weibo_PublicOpinion_AnalysisSystem

Inline Side-by-side
Showing 7 changed files with 424 additions and 0 deletions
No preview for this file type
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 + <title>原神登录</title>
  8 + <link rel="icon" href="login_resources/favicon.ico">
  9 +</head>
  10 +
  11 +<style>
  12 + * {
  13 + margin: 0;
  14 + padding: 0;
  15 + list-style: none;
  16 + }
  17 +
  18 + html,
  19 + body {
  20 + width: 100%;
  21 + height: 100%;
  22 + overflow: hidden;
  23 +
  24 + }
  25 +
  26 + a {
  27 + text-decoration: none;
  28 + }
  29 +
  30 + .login,
  31 + .register {
  32 + display: none;
  33 + }
  34 +
  35 + .show {
  36 + display: block;
  37 + }
  38 +
  39 +
  40 + #video-background {
  41 + position: fixed;
  42 + top: 0;
  43 + left: 0;
  44 + width: 100%;
  45 + height: 100%;
  46 + z-index: -3;
  47 + overflow: hidden;
  48 + }
  49 +
  50 + #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;
  58 + }
  59 +
  60 + #black-hid {
  61 + position: fixed;
  62 + width: 100%;
  63 + height: 100%;
  64 + background-color: #0a0a0a;
  65 + opacity: 0.6;
  66 + z-index: -2;
  67 + }
  68 +
  69 + 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 +
  79 + }
  80 +
  81 +
  82 +
  83 + .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 +
  92 + }
  93 +
  94 + .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 +
  104 + }
  105 +
  106 + .QRcode img {
  107 + height: 90px;
  108 + width: 90px;
  109 +
  110 + object-fit: unset;
  111 +
  112 + /* 添加过渡效果 */
  113 + cursor: pointer;
  114 + }
  115 +
  116 + .QRcode {
  117 + height: 90px;
  118 + width: 90px;
  119 +
  120 + }
  121 +
  122 + .QRcode:hover>img {
  123 + line-height: normal;
  124 +
  125 + /* transform-origin: unset; */
  126 +
  127 + }
  128 +
  129 +
  130 + .logo {
  131 + position: absolute;
  132 + width: 150px;
  133 + height: 50px;
  134 + left: 50%;
  135 + transform: translateX(-50%);
  136 + margin-top: 15px;
  137 + }
  138 +
  139 + .logo img {
  140 + width: 150px;
  141 + height: 50px;
  142 + }
  143 +
  144 + .content {
  145 + position: absolute;
  146 + width: 612px;
  147 + height: 150px;
  148 +
  149 + top: 80px;
  150 + left: 50%;
  151 + transform: translateX(-50%);
  152 + }
  153 +
  154 + .input {
  155 + height: 60px;
  156 + width: 522px;
  157 + margin-top: 25px;
  158 + margin-left: 40px;
  159 +
  160 + border: none;
  161 +
  162 +
  163 + }
  164 +
  165 + .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 +
  179 + }
  180 +
  181 + .content input::placeholder {
  182 + opacity: 0.4;
  183 + }
  184 +
  185 + .register-text {
  186 + position: absolute;
  187 + width: 522px;
  188 + height: 30px;
  189 + top: 270px;
  190 + left: 50%;
  191 + transform: translateX(-50%);
  192 + }
  193 +
  194 + .register-text a {
  195 + font-weight: 700;
  196 + font-size: 18px;
  197 + letter-spacing: .1em;
  198 + }
  199 +
  200 + .a1 {
  201 + color: #949292;
  202 + }
  203 +
  204 +
  205 + .a2 {
  206 + color: #d6c194;
  207 + }
  208 +
  209 + .a2:hover {
  210 + color: #d6a948;
  211 + }
  212 +
  213 + .a3:hover {
  214 + color: #d6a948;
  215 + }
  216 +
  217 + .a3 {
  218 + position: absolute;
  219 + right: 0;
  220 + color: #d6c194;
  221 + }
  222 +
  223 + .start {
  224 + position: absolute;
  225 + top: 320px;
  226 + width: 612px;
  227 + height: 60px;
  228 + left: 50%;
  229 + transform: translateX(-50%);
  230 + }
  231 +
  232 + .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;
  248 + }
  249 +
  250 + .start button:hover {
  251 + color: #d6c194;
  252 + }
  253 +
  254 + .exit {
  255 + position: absolute;
  256 + right: 20px;
  257 + width: 25px;
  258 + height: 25px;
  259 + }
  260 +
  261 + .exit img {
  262 + width: 25px;
  263 + height: 25px;
  264 + }
  265 +
  266 + .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;
  278 + }
  279 +
  280 + .other-login a {
  281 + color: rgb(15, 15, 15);
  282 + }
  283 +
  284 + .other-login span:first-child {
  285 + margin-left: 15px;
  286 + }
  287 +
  288 + .other-login span:last-child {
  289 + position: absolute;
  290 + right: 80px;
  291 + }
  292 +
  293 + .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;
  304 + }
  305 +
  306 + .xieyi input {
  307 + margin-left: 45px;
  308 + }
  309 +
  310 + .yanzhengma:hover {
  311 + color: #aa863e;
  312 + }
  313 +</style>
  314 +
  315 +<body onclick="playAudio()">
  316 +
  317 + <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">
  320 + </audio>
  321 +
  322 + <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>
  324 + </div>
  325 +
  326 + <div id="black-hid">
  327 + </div>
  328 +
  329 + <form id="login" class="login show">
  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="login_resources/logo2.08ebb840.png" alt=""></a>
  334 + <a class="exit" href=""><img src="login_resources/关闭 (1).png" alt=""></a>
  335 + </div>
  336 + </div>
  337 + <div class="content">
  338 + <div class="input"><input type="text" placeholder="输入手机号/邮箱"></div>
  339 + <div class="input"><input type="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>
  347 + </div>
  348 + <div class="start">
  349 + <button>进入游戏</button>
  350 + </div>
  351 + <div class="other-login">
  352 + <span><a href="" class="a4">手机快捷登录</a></span>
  353 + <span><a href="" class="a5">TapTap</a></span>
  354 + </div>
  355 + </form>
  356 +
  357 +
  358 + <form id="register" class="register">
  359 + <div class="login_box">
  360 + <div class="title">
  361 + <a class="logo" href=""><img src="login_resources/logo2.08ebb840.png" alt=""></a>
  362 + <a class="exit" href=""><img src="login_resources/关闭 (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" 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" placeholder="输入短信验证码"></div>
  375 + </div>
  376 + <div class="xieyi">
  377 + <input type="checkbox">
  378 + <span>已同意《用户协议》和《隐私权益》</span>
  379 + </div>
  380 + <div class="register-text">
  381 + <span>
  382 + <a href="" class="a2" id="login_btn">返回登录页面</a>
  383 + </span>
  384 +
  385 + </div>
  386 + <div class="start" style="top: 370px;">
  387 + <button>注册并登录</button>
  388 + </div>
  389 +
  390 + </form>
  391 +
  392 +
  393 + <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 +
  421 + </script>
  422 +</body>
  423 +
  424 +</html>