ソースを参照

修复登录界面不能出现滚动条滚动的问题
优化登录界面背景图无法自适应出现滚动条的问题
优化登录logo文本颜色使用主题色

zhontai 2 年 前
コミット
7e0c380bec
2 ファイル変更47 行追加38 行削除
  1. 1 1
      src/theme/app.scss
  2. 46 37
      src/views/admin/login/index.vue

+ 1 - 1
src/theme/app.scss

@@ -145,7 +145,7 @@ body,
     width: 1px !important;
     transition: width 0.3s ease;
     position: relative;
-    left: -1px;
+    margin-left: -1px;
   }
   .layout-aside-pc-0 {
     width: 0px !important;

+ 46 - 37
src/views/admin/login/index.vue

@@ -1,45 +1,47 @@
 <template>
-  <div class="login-container flex">
-    <div class="login-left">
-      <div class="login-left-logo">
-        <img :src="logoMini" />
-        <div class="login-left-logo-text">
-          <span>{{ getThemeConfig.globalViceTitle }}</span>
-          <span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
+  <el-scrollbar>
+    <div class="login-container flex">
+      <div class="login-left">
+        <div class="login-left-logo">
+          <img :src="logoMini" />
+          <div class="login-left-logo-text">
+            <span>{{ getThemeConfig.globalViceTitle }}</span>
+            <span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
+          </div>
         </div>
+        <div class="login-left-img">
+          <img :src="loginMain" />
+        </div>
+        <img :src="loginBg" class="login-left-waves" />
       </div>
-      <div class="login-left-img">
-        <img :src="loginMain" />
-      </div>
-      <img :src="loginBg" class="login-left-waves" />
-    </div>
-    <div class="login-right flex">
-      <div class="login-right-warp flex-margin">
-        <span class="login-right-warp-one"></span>
-        <span class="login-right-warp-two"></span>
-        <div class="login-right-warp-mian">
-          <div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }} 欢迎您!</div>
-          <div class="login-right-warp-main-form">
-            <div v-if="!state.isScan">
-              <el-tabs v-model="state.tabsActiveName">
-                <el-tab-pane :label="$t('message.label.one1')" name="account">
-                  <Account />
-                </el-tab-pane>
-                <el-tab-pane :label="$t('message.label.two2')" name="mobile">
-                  <Mobile />
-                </el-tab-pane>
-              </el-tabs>
-            </div>
-            <Scan v-if="state.isScan" />
-            <div class="login-content-main-sacn" @click="state.isScan = !state.isScan">
-              <i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
-              <div class="login-content-main-sacn-delta"></div>
+      <div class="login-right flex">
+        <div class="login-right-warp flex-margin">
+          <span class="login-right-warp-one"></span>
+          <span class="login-right-warp-two"></span>
+          <div class="login-right-warp-mian">
+            <div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }} 欢迎您!</div>
+            <div class="login-right-warp-main-form">
+              <div v-if="!state.isScan">
+                <el-tabs v-model="state.tabsActiveName">
+                  <el-tab-pane :label="$t('message.label.one1')" name="account">
+                    <Account />
+                  </el-tab-pane>
+                  <el-tab-pane :label="$t('message.label.two2')" name="mobile">
+                    <Mobile />
+                  </el-tab-pane>
+                </el-tabs>
+              </div>
+              <Scan v-if="state.isScan" />
+              <div class="login-content-main-sacn" @click="state.isScan = !state.isScan">
+                <i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
+                <div class="login-content-main-sacn-delta"></div>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
+  </el-scrollbar>
 </template>
 
 <script setup lang="ts" name="loginIndex">
@@ -75,9 +77,15 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+:deep() {
+  .el-scrollbar__view {
+    height: 100%;
+  }
+}
 .login-container {
   height: 100%;
   background: var(--el-color-white);
+  min-height: 500px;
   .login-left {
     flex: 1;
     position: relative;
@@ -101,11 +109,11 @@ onMounted(() => {
         span {
           margin-left: 10px;
           font-size: 28px;
-          color: #26a59a;
+          color: var(--el-color-primary);
         }
         .login-left-logo-text-msg {
           font-size: 12px;
-          color: #32a99e;
+          color: var(--el-color-primary);
         }
       }
     }
@@ -125,7 +133,8 @@ onMounted(() => {
     .login-left-waves {
       position: absolute;
       top: 0;
-      right: -100px;
+      left: 100%;
+      height: 100%;
     }
   }
   .login-right {