编写登录页样式

src/styles/common/style.scss

@@ -1,14 +1,16 @@
 @import './var.scss';
 @import './animation.scss';
 
+// extends
 // 毛玻璃
-.--background-filter {
+.go-background-filter {
   backdrop-filter: $--filter-blur-base;
-  background-color: $--filter-color-base;
+  background-color: $--filter-color-base-1;
+  box-shadow: $--border-shadow;
 }
 
 // 边框圆角
-.--border-radius {
+.go-border-radius {
   border-radius: $--border-radius-base;
   overflow: hidden;
 }

src/styles/common/var.scss

@@ -13,9 +13,13 @@ $--color-text-4: hsla(0, 0%, 100%, 0.3);
 // 顶部距离
 $--header-height: 60px;
 // 模糊
-$--filter-blur-base: blur(2px);
+$--filter-blur-base: blur(20px);
 // 毛玻璃
-$--filter-color-base: rgba(0, 0, 0, 0.07);
+$--filter-color-base-1: rgba(0, 0, 0, 0.1);
+$--filter-color-base-2: rgba(0, 0, 0, 0.2);
+$--filter-color-base-3: rgba(23, 23, 26, 0.3);
 // 边框
 $--border-radius-base: 8px;
 $--border-bottom-style: 1px solid $--color-border;
+// 阴影
+$--border-shadow: 0 8px 20px rgba(0,0,0, .15);

src/views/login/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="go-login-box">
+    <div class="go-login-box-bg"></div>
     <n-divider class="go-login-box-header" />
     <div class="go-login">
       <div class="go-login-carousel">
@@ -16,7 +17,7 @@
       <div class="login-account">
         <div class="login-account-container">
           <n-collapse-transition :appear="true" :show="show">
-            <n-card title="登录">
+            <n-card class="login-account-card" title="登录 GoView">
               <div class="login-account-top">
                 <img
                   class="login-account-top-logo"
@@ -151,6 +152,7 @@ $width: 450px;
 $account-img-height: 270px;
 $footer-height: 50px;
 $account-height: calc(100vh - $footer-height);
+$--filter-color-base-login: rgba(51, 55, 61, 0.3);
 
 * {
   box-sizing: border-box;
@@ -158,7 +160,7 @@ $account-height: calc(100vh - $footer-height);
 @include go(login-box) {
   height: 100vh;
   overflow: hidden;
-  background-image: linear-gradient(120deg, #17171a 0%, #232324 100%);
+  background-image: linear-gradient(120deg, $--color-bg-1 0%, $--color-bg-2 100%);
   &-header {
     margin: 0px;
     padding-top: $--header-height;
@@ -188,6 +190,11 @@ $account-height: calc(100vh - $footer-height);
         margin-top: 100px;
       }
 
+      &-card {
+        @extend .go-background-filter;
+        background-color: $--filter-color-base-login;
+      }
+
       &-top {
         padding-top: 10px;
         text-align: center;
@@ -204,6 +211,14 @@ $account-height: calc(100vh - $footer-height);
     color: $--color-text-2;
   }
 
+  &-bg {
+    z-index: 0;
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background: url('@/assets/images/login/login-bg.png') no-repeat 750px -120px;
+  }
+
   @media (min-width: 768px) {
     .login-account {
       background-repeat: no-repeat;