登录页面

src/views/login/index.vue

@@ -353,10 +353,10 @@ $light_gray: #122583;
 .title-img {
   position: relative;
   display: block;
-  width: 44.64vw;
+  width: 46vw;
   object-fit: contain;
-  filter: drop-shadow(1px 1px 4px #0005);
-  margin: 16.11vh auto 0;
+  filter: drop-shadow(0 0 15px rgba(19,79,147,0.6));
+  margin: 15.46vh auto 0;
 }
 //how many images we have
 $slides: 8;
@@ -388,8 +388,10 @@ $total_animation_time: $time_per_slide * $slides;
      filter: blur(12px);
      transition: all 1s cubic-bezier(0.550, 0.085, 0.680, 0.530);
    }
+
    .active {
      filter: blur(0);
+     transform: none!important;
      opacity: 1;
    }
 }
@@ -413,12 +415,11 @@ $total_animation_time: $time_per_slide * $slides;
   .login-form {
     position: relative;
     width: 28.7vw;
-    margin: 9.81vh 10.2vw 0 auto;
+    margin: 10.46vh 10.52vw 0 auto;
     overflow: hidden;
     border-radius: 10px;
-    box-shadow: inset 0 0 4px rgb(255, 255, 255, 0.8);
-    filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.2));
-    background-color: rgba(255, 255, 255, 0.2);
+    filter: drop-shadow(0 0 7px rgba(0,0,0,0.2));
+    background-color: rgba(255,255,255,0.8509803921568627)
   }
 
   .tips {
@@ -443,15 +444,14 @@ $total_animation_time: $time_per_slide * $slides;
 
   .title-container {
     position: relative;
-    margin-bottom: 2vw;
+    margin-bottom: 3.4vh;
 
     .title {
       text-align: center;
       font-size: 1.7vw;
       letter-spacing: 4px;
-      color: #ffffff;
+      color: #1d57da;
       padding: 1.41vw 0 1.2vw;
-      text-shadow: 1px 0 #000, 0 1px #000, 1px 1px #000;
       filter: drop-shadow(1px 1px 4px #0002);
       position: relative;
 
@@ -467,6 +467,24 @@ $total_animation_time: $time_per_slide * $slides;
         right: 0;
       }
     }
+
+    @supports (background-clip: text) {
+      .title {
+        display: inline-block;
+        color: transparent;
+        background: linear-gradient(
+            90deg,
+            #1d57da 0%,
+            #1d57da 0%,
+            #05a658 100%
+        );
+        background-clip: text;
+        filter: none;
+        left: 50%;
+        text-shadow: none;
+        transform: translateX(-50%);
+      }
+    }
   }
 
   .show-pwd {
@@ -514,14 +532,13 @@ $total_animation_time: $time_per_slide * $slides;
   width: 100%;
   text-align: center;
   color: #fff;
-  line-height: 16px;
-  font-size: 16px;
+  font-size: .84vw;
   text-shadow: 1px 0 #000, 0 1px #000, 1px 1px #000;
-  filter: drop-shadow(1px 1px 4px #000);
+  filter: drop-shadow(1px 1px 4px #000000aa);
 
   position: absolute;
   left: 0;
-  bottom: 6vh;
+  bottom: 1.6vh;
 }
 
 @media (max-width: 960px) {