Recode login page

src/assets/css/pages/sign.scss

@@ -0,0 +1,161 @@
+@use "@/assets/css/mixins" as mixins;
+@use "@/assets/css/constants" as constants;
+
+[data-component=sign] {
+  background-color: #D2D0DD;
+  user-select: none;
+
+  a:hover {
+    color: constants.$production-color;
+  }
+
+  .sign-box {
+    position: relative;
+    background-color: constants.$origin-color;
+    width: 900px;
+    height: 600px;
+    overflow: hidden;
+    border-radius: 12px;
+
+    .left, .right {
+      opacity: 1;
+      animation: 1s ease;
+      @include mixins.unique-keyframes {
+        0% {
+          opacity: 0;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      > * {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.hidden {
+        opacity: 0;
+        animation: 1s ease;
+        @include mixins.unique-keyframes {
+          0% {
+            opacity: 1;
+          }
+
+          100% {
+            opacity: 0;
+          }
+        }
+      }
+
+      > * {
+        .title {
+          margin-bottom: 20px;
+          transform: translateY(-10px);
+
+          .primary {
+            font-size: 2.4em;
+            font-weight: bolder;
+            color: constants.$production-color;
+          }
+
+          .secondary {
+            font-size: 1.2em;
+          }
+        }
+
+        .form {
+          width: 300px;
+
+          .addition {
+            justify-content: space-between;
+            margin-bottom: 14px;
+
+            > * {
+              flex: 0 0 auto;
+            }
+          }
+
+          .footer {
+            text-align: center;
+
+            a {
+              color: constants.$production-color;
+            }
+          }
+        }
+      }
+
+
+      .sign-up {
+
+      }
+
+      .sign-in {
+
+      }
+    }
+
+    .cover {
+      position: absolute;
+      height: 100%;
+      width: 50%;
+      background-color: #F3F4F8;
+      animation: 0.8s ease;
+      @include mixins.unique-keyframes {
+        0% {
+          left: 50%;
+        }
+
+        100% {
+          left: 0;
+        }
+      }
+
+      .ball-box {
+        position: relative;
+        overflow: hidden;
+
+        background-color: #F1F2F7;
+
+        .ball {
+          position: absolute;
+          width: 128px;
+          height: 128px;
+          background-color: constants.$production-color;
+          border-radius: 50%;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%) translateY(50%);
+        }
+      }
+
+      .mask {
+        transform: rotateZ(180deg);
+        filter: blur(12px);
+
+        .ball {
+          width: 140px;
+          height: 140px;
+        }
+      }
+    }
+
+    &.switch {
+      .cover {
+        left: 50%;
+        animation: 0.8s ease;
+        @include mixins.unique-keyframes {
+          0% {
+            left: 0;
+          }
+
+          100% {
+            left: 50%;
+          }
+        }
+      }
+    }
+  }
+}

src/assets/svg/password.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M768 426.666667V341.333333A256 256 0 0 0 256 341.333333v85.333334a85.333333 85.333333 0 0 0-85.333333 85.333333v341.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h512a85.333333 85.333333 0 0 0 85.333333-85.333334v-341.333333a85.333333 85.333333 0 0 0-85.333333-85.333333zM341.333333 341.333333a170.666667 170.666667 0 0 1 341.333334 0v85.333334H341.333333z m298.666667 320a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z m-170.666667 0a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333z m-170.666666 42.666667v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z" /></svg>