登录页面切换风格

src/css/common.css

@@ -1812,6 +1812,7 @@ table {
   float: left;
   width: 50%;
   position: relative;
+
 }
 
 .login-left .img {

src/css/login.css

@@ -36,6 +36,7 @@
   float: left;
   width: 50%;
   position: relative;
+  
 }
 
 .login-left .img {

src/page/login/index.vue

@@ -1,18 +1,22 @@
 <template>
   <div class="login-container" ref="login" @keyup.enter="handleLogin">
     <div class="login-weaper animated bounceInDown">
-      <div class="top">
+      <!-- 横幅顶部 -->
+      <!-- <div class="top">
           <img src="https://www.v6g.cn/IMAGE/top.png" />
-        </div>
+        </div> -->
       <div class="login-left">
         <div class="login-time">
           {{ time }}
         </div>
-        <div class="left">
+        <!-- 对联左 -->
+        <!-- <div class="left">
           <img src="https://www.v6g.cn/IMAGE/left.png" />
-        </div>
+        </div> -->
- 
+        <!-- 本地图片 -->
-        <img src="../../../public/img/indexbg.png" />
+        <!-- <img src="../../../public/img/indexbg.png" /> -->
+        <!-- 线上图片 -->
+        <img src="https://www.v6g.cn/IMAGE/indexbg.png" />
         <!-- <p class="title">{{ $t('login.info') }}</p> -->
 
         <!-- <img class="img" src="/img/logo.png" alt="" /> -->
@@ -37,9 +41,10 @@
             <!-- <a :href="website.ssoUrl + website.redirectUri">{{ $t('login.ssoLogin') }}</a> -->
           </div>
         </div>
-        <div class="right">
+        <!-- 对联右 -->
+        <!-- <div class="right">
           <img src="https://www.v6g.cn/IMAGE/right.png" />
-        </div>
+        </div> -->
       </div>
     </div>
     <div class="index_footer">
@@ -182,48 +187,70 @@ export default {
     width: 130px;
     height: 60px;
   }
-span{
+
-  margin-left: 10px;
+  span {
-}
+    margin-left: 10px;
+  }
 }
-.left{
+
+.left {
   position: absolute;
   left: 0;
   width: 80px;
   height: 100%;
   mask: linear-gradient(to right, #000000, #ffffffb0);
 
-  img{
+  img {
     width: 100%;
     height: 100%;
   }
 }
-.right{
+
+.right {
   position: absolute;
   right: 0;
   width: 80px;
   height: 100%;
   mask: linear-gradient(to left, #000000, #ffffffb0);
-  img{
+
+  img {
     width: 100%;
     height: 100%;
   }
 }
-.login-weaper{
+
+.login-weaper {
   position: relative;
 }
-.top{
+
+.top {
   position: absolute;
-    top: -18%;
+  top: -18%;
-    left: 35%;
+  left: 35%;
-    width: 30%;
+  width: 30%;
-    height: 70px;
+  height: 70px;
-    z-index: 1;
+  z-index: 1;
-    overflow: hidden;
+  overflow: hidden;
-    border-radius: 15px;
+  border-radius: 15px;
-  img{
+
+  img {
     width: 100%;
     height: 100%;
   }
 }
+
+.login-left {
+  /* 新增 */
+    box-sizing: border-box !important;
+    border: 1px solid #ebebeb !important;
+    background: #ffffff5c;
+    box-shadow: -1px -5px 8px #00000003;
+    backdrop-filter: blur(6px);
+
+  img {
+    width: 78%;
+    height: 100%;
+  }
+
+}
 </style>

src/styles/login.scss

@@ -6,7 +6,7 @@
   height: 100%;
   margin: 0 auto;
   // background-image: url('/img/bg/bg.jpg');
-  background-image: url('https://www.v6g.cn/IMAGE/fm2.png');
+  background-image: url('https://www.v6g.cn/IMAGE/kg2.png');
   background-size: 100% 100%;
 }