From e695d422ac91d723804b0c128de9d6d118f41c12 Mon Sep 17 00:00:00 2001
From: jlzhou <12020042@qq.com>
Date: Wed, 16 Aug 2023 15:06:44 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E7=94=A8=E7=99=BB=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 20230816-通用/index.html | 248 +++++++++++++++++++++++++++++++++++++
 1 file changed, 248 insertions(+)
 create mode 100644 20230816-通用/index.html
diff --git a/20230816-通用/index.html b/20230816-通用/index.html
new file mode 100644
index 0000000..6ce07cf
--- /dev/null
+++ b/20230816-通用/index.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+
+  <div class="login">
+
+    <div class="login-frame">
+      <div class="login-form">
+        <div>
+          <input required />
+          <label>账号</label>
+        </div>
+        <div>
+          <input required type="password" />
+          <label>密码</label>
+        </div>
+        <div class="valicode">
+          <input required />
+          <label>验证码</label>
+          <div><img src="http://placehold.jp/16/999999/000000/100x33.png?text=%E9%AA%8C%E8%AF%81%E7%A0%81"
+              title="点击更换验证码" /></div>
+        </div>
+        <div class="login-btn" onclick="this.classList.toggle('loging');"></div>
+      </div>
+    </div>
+
+    <svg class="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+      viewBox="0 24 150 28" preserveAspectRatio="none">
+      <defs>
+        <path id="gentle-wave" d="M-160
+              44c30 0
+              58-18 88-18s
+              58 18 88 18
+              58-18 88-18
+              58 18 88 18
+              v44h-352z"></path>
+      </defs>
+      <g class="parallax">
+        <use xlink:href="#gentle-wave" x="50" y="6" fill="#ffffff"></use>
+        <use xlink:href="#gentle-wave" x="50" y="3" fill="#ffffff66"></use>
+        <use xlink:href="#gentle-wave" x="50" y="0" fill="#ffffffaa"></use>
+      </g>
+    </svg>
+    <div>Copyright © 2023 湖南XXXXXXX有限公司 All Rights Reserved.</div>
+  </div>
+  <style>
+    .login {
+      --bg1: #295a90;
+      --bg2: #3893b0;
+      --size: 16px;
+      font-size: var(--size);
+      width: 100vw;
+      height: 100vh;
+      background-image: linear-gradient(120deg, var(--bg1), var(--bg2));
+      position: fixed;
+      left: 0;
+      top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .login-frame {
+        width: 18em;
+        border-radius: .5em;
+        box-sizing: content-box;
+        background-color: #FCFCFC;
+        padding: 1em 2em;
+        margin-bottom: 20vh;
+        box-shadow: 0 0 2em #0005;
+
+        .login-form {
+          display: block;
+          line-height: 1;
+
+          &>div.login-btn {
+            cursor: pointer;
+            border-radius: 2em;
+            background-color: var(--bg1);
+            margin: 1.5em 0;
+            height: 2.2em;
+            text-align: center;
+            color: #FFF;
+            font-size: 1.2em;
+            line-height: 2.2em;
+            font-weight: bold;
+
+            &::after {
+              content: "登　　录";
+            }
+
+            &::before {
+              content: "";
+            }
+          }
+
+          &>div.loging {
+            opacity: .8;
+            cursor: wait;
+
+            &::after {
+              content: "登录中...";
+            }
+
+            &::before {
+              content: "";
+              display: inline-block;
+              border: .2em solid #FFF;
+              border-left-color: #0000;
+              width: 1em;
+              height: 1em;
+              vertical-align: middle;
+              border-radius: 1em;
+              box-sizing: border-box;
+              margin-right: .5em;
+              animation: login-loading 1s infinite linear;
+            }
+          }
+
+          &>div:not(.login-btn) {
+            position: relative;
+            border-radius: 2em;
+            border: solid 1px #ddd;
+            margin: 1.5em 0;
+
+            &>label {
+              position: absolute;
+              color: var(--bg1);
+              opacity: .8;
+              left: 1em;
+              top: .5em;
+              transition: all .5s;
+              transform: scale(.9);
+            }
+
+            &>input {
+              width: 100%;
+              border: none;
+              outline: none;
+              background-color: #0000;
+              font-size: 1em;
+              padding: .5em 1em;
+              color: var(--bg1);
+
+              &:focus~label,
+              &:valid~label {
+                opacity: 1;
+                top: -1.1em;
+                transform: scale(.8);
+              }
+            }
+          }
+
+          &>div.valicode {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: .5em;
+
+            &>div {
+              overflow: hidden;
+              border-top-right-radius: 2em;
+              border-bottom-right-radius: 2em;
+            }
+
+            & img {
+              display: block;
+              height: 2.1em;
+              width: 100%;
+              cursor: pointer;
+            }
+          }
+
+        }
+
+      }
+
+      .wave {
+        width: 100%;
+        height: 10vh;
+        position: absolute;
+        bottom: 2em;
+        left: 0;
+      }
+
+      &>:last-child {
+        width: 100%;
+        height: calc(2 * var(--size));
+        background-color: #FFF;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        color: var(--bg1);
+        font-size: .8em;
+        line-height: 2;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+      }
+    }
+
+
+
+    .parallax>use:nth-child(1) {
+      animation-delay: -2s;
+      animation-duration: 13s;
+    }
+
+    .parallax>use:nth-child(2) {
+      animation-delay: -4s;
+      animation-duration: 23s;
+    }
+
+    .parallax>use {
+      animation: move-forever 12s linear infinite;
+    }
+
+@keyframes move-forever {
+  0% {
+    transform: translate(-90px, 0%);
+  }
+
+  100% {
+    transform: translate(85px, 0%);
+  }
+
+}
+
+@keyframes login-loading {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+
+}
+  </style>
+
+</body>
+
+</html>
\ No newline at end of file
