1

hwh

2024-08-23 3d1df57ccc06c0c84813fac71f19ee5a4187b3da

 Web/src/views/login/index.vue

@@ -8,7 +8,7 @@
               <span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
            </div>
         </div>
         <el-carousel height="500px" class="login-carousel">
         <!-- <el-carousel height="500px" class="login-carousel">
            <el-carousel-item>
               <img :src="loginIconTwo" class="login-icon-group-icon" />
            </el-carousel-item>
@@ -18,7 +18,7 @@
            <el-carousel-item>
               <img :src="loginIconTwo2" class="login-icon-group-icon" />
            </el-carousel-item>
         </el-carousel>
         </el-carousel> -->
      </div>
      <div class="login-right flex">
         <div class="login-right-warp flex-margin">
@@ -32,16 +32,16 @@
                        <el-tab-pane :label="$t('message.label.one1')" name="account">
                           <Account />
                        </el-tab-pane>
                        <el-tab-pane :label="$t('message.label.two2')" name="mobile">
                        <!-- <el-tab-pane :label="$t('message.label.two2')" name="mobile">
                           <Mobile />
                        </el-tab-pane>
                        </el-tab-pane> -->
                     </el-tabs>
                  </div>
                  <Scan v-if="state.isScan" />
                  <div class="login-content-main-scan" @click="state.isScan = !state.isScan">
                  <!-- <div class="login-content-main-scan" @click="state.isScan = !state.isScan">
                     <i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
                     <div class="login-content-main-scan-delta"></div>
                  </div>
                  </div> -->
               </div>
            </div>
         </div>
@@ -88,16 +88,21 @@
.login-container {
   height: 100%;
   background-color: rgba(53, 62, 84);

   .login-left {
      width: 50%;
      width: 20%;
      position: fixed;
      z-index: 100;
      height: 100%;
      float: left;
      // float: left;
      justify-content: center;

      .login-carousel {
         position: relative;
         top: 50%;
         transform: translateY(-50%);
      }

      .login-left-logo {
         display: flex;
         align-items: center;
@@ -106,19 +111,23 @@
         left: 30px;
         z-index: 1;
         animation: logoAnimation 0.3s ease;

         img {
            // width: 100px;
            height: 64px;
         }

         .login-left-logo-text {
            display: flex;
            flex-direction: column;

            span {
               margin-left: 20px;
               font-size: 28px;
               font-weight: 700;
               color: var(--el-color-white);
            }

            .login-left-logo-text-msg {
               padding-top: 5px;
               font-size: 14px;
@@ -126,6 +135,7 @@
            }
         }
      }

      .login-icon-group-icon {
         width: 85%;
         height: 85%;
@@ -135,15 +145,19 @@
         transform: translateY(-50%) translate3d(0, 0, 0);
      }
   }

   .login-right {
      width: 50%;
      float: right;
      width: 60%;
      // float: right;
      margin-left: auto;
      margin-right: auto;
      background: var(--el-color-white);
      background-image: url('../../assets/bg.svg');
      background-size: 100% auto;
      background-position: 50% calc(50% - 15px);
      background-attachment: fixed;
      background-repeat: no-repeat;

      .login-right-warp {
         border: 1px solid var(--el-color-primary-light-3);
         border-radius: 3px;
@@ -151,12 +165,14 @@
         position: relative;
         overflow: hidden;
         background-color: var(--el-color-white);

         .login-right-warp-one,
         .login-right-warp-two {
            position: absolute;
            display: block;
            width: inherit;
            height: inherit;

            &::before,
            &::after {
               content: '';
@@ -164,6 +180,7 @@
               z-index: 1;
            }
         }

         .login-right-warp-one {
            &::before {
               filter: hue-rotate(0deg);
@@ -174,6 +191,7 @@
               background: linear-gradient(90deg, transparent, var(--el-color-primary));
               animation: loginLeft 3s linear infinite;
            }

            &::after {
               filter: hue-rotate(0deg);
               top: -100%;
@@ -185,6 +203,7 @@
               animation-delay: 0.7s;
            }
         }

         .login-right-warp-two {
            &::before {
               filter: hue-rotate(0deg);
@@ -196,6 +215,7 @@
               animation: loginRight 3s linear infinite;
               animation-delay: 1.4s;
            }

            &::after {
               filter: hue-rotate(0deg);
               bottom: -100%;
@@ -207,10 +227,12 @@
               animation-delay: 2.1s;
            }
         }

         .login-right-warp-main {
            display: flex;
            flex-direction: column;
            height: 100%;

            .login-right-warp-main-title {
               height: 130px;
               line-height: 130px;
@@ -222,9 +244,11 @@
               animation-delay: 0.3s;
               color: var(--el-color-primary);
            }

            .login-right-warp-main-form {
               flex: 1;
               padding: 0 50px 50px;

               .login-content-main-scan {
                  position: absolute;
                  top: 0;
@@ -235,6 +259,7 @@
                  cursor: pointer;
                  transition: all ease 0.3s;
                  color: var(--el-color-primary);

                  &-delta {
                     position: absolute;
                     width: 35px;
@@ -245,11 +270,13 @@
                     background: var(--el-color-white);
                     transform: rotate(-45deg);
                  }

                  &:hover {
                     opacity: 1;
                     transition: all ease 0.3s;
                     color: var(--el-color-primary) !important;
                  }

                  i {
                     width: 47px;
                     height: 50px;
@@ -263,6 +290,7 @@
            }
         }
      }

      /* 在这里可以添加一个伪元素来覆盖原内容，实现磨砂效果 */
      .login-right-warp::before {
         content: '';
@@ -272,7 +300,8 @@
         width: 100%;
         height: 100%;
         background-color: rgba(255, 255, 255, 1);
         filter: blur(4px); /* 调整模糊半径以改变磨砂效果强度 */
         filter: blur(4px);
         /* 调整模糊半径以改变磨砂效果强度 */
         z-index: 1;
      }

@@ -283,6 +312,7 @@
      }
   }
}

.copyright,
.icp {
   position: absolute;
@@ -290,39 +320,48 @@
   transform: translateX(-50%);
   white-space: nowrap;
}

@media screen and (min-width: 1200px) {
   .login-right-warp {
      width: 500px;
   }

   .copyright,
   .icp {
      left: 75%;
      color: var(--el-text-color-secondary);
   }

   .icp {
      .el-link {
         color: var(--el-text-color-secondary);
      }
   }
}

@media screen and (max-width: 1200px) {

   .copyright,
   .icp {
      left: 50%;
      color: var(--el-color-white);
   }

   .icp {
      .el-link {
         color: var(--el-color-white);
      }
   }
}

@media screen and (max-width: 580px) {

   .copyright,
   .icp {
      left: 50%;
      color: var(--el-text-color-secondary);
   }

   .icp {
      .el-link {
         color: var(--el-text-color-secondary);