✨ feat(login): 修登录页面样式

src/renderer/components/LangTab/index.vue

@@ -1,6 +1,9 @@
 <template>
-  <el-dropdown split-button type="primary" @command="handleCommand">
-    {{ $t('buttons.changeLanguage') }}
+  <el-dropdown type="primary" @command="handleCommand">
+    <div class="lang-change-btn">
+      <SvgIcon icon-class="earth" class-name="earth"></SvgIcon>
+      {{ curLang }}
+    </div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item v-for="lang in langs" :key="lang.value" :command="lang.value">
         {{ lang.text }}
@@ -12,8 +15,12 @@
 <script>
 import i18n from '@/i18n'
 import { ipcRenderer } from 'electron'
+import SvgIcon from '@/components/SvgIcon/index.vue'
 
 export default {
+  components: {
+    SvgIcon,
+  },
   data() {
     return {
       langs: [
@@ -36,6 +43,11 @@ export default {
       ],
     }
   },
+  computed: {
+    curLang() {
+      return localStorage.getItem('lang') || 'zh-CN'
+    },
+  },
   methods: {
     handleCommand(lang) {
       localStorage.setItem('lang', lang)
@@ -55,4 +67,20 @@ export default {
 .el-icon-arrow-down {
   font-size: 12px;
 }
+
+.lang-change-btn {
+  display: flex;
+  height: 54px;
+  padding: 0px 16px;
+  align-items: center;
+
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: 1px solid var(--e-6-e-6-e-6, #e6e6e6);
+}
+
+.svg-icon-earth {
+  width: 24px;
+  height: 24px;
+}
 </style>

src/renderer/icons/svg/earth.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22Z" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M2 12H22" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C14.2092 22 16 17.5229 16 12C16 6.47715 14.2092 2 12 2C9.79085 2 8 6.47715 8 12C8 17.5229 9.79085 22 12 22Z" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.92871 5.07129C6.73836 6.88094 9.23836 8.00024 11.9998 8.00024C14.7612 8.00024 17.2612 6.88094 19.0709 5.07129" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19.0709 18.9289C17.2612 17.1193 14.7612 16 11.9998 16C9.23836 16 6.73836 17.1193 4.92871 18.9289" stroke="#333333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/renderer/views/login/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="login-container">
     <div class="login-from-box">
+      <div class="lang-change">
+        <LangTab></LangTab>
+      </div>
+      <img class="login-icon" src="./login-icon.png" alt="" />
       <el-form
         class="login-form"
         ref="loginForm"
@@ -10,7 +14,6 @@
         label-position="left"
       >
         <h3 class="title">{{ systemName }}</h3>
-        <LangTab></LangTab>
         <el-form-item prop="username">
           <span class="svg-container svg-container_login">
             <svg-icon icon-class="user" />
@@ -62,9 +65,7 @@
             {{ $t('li-ji-deng-lu') }}
           </button>
         </div>
-        <div class="tips">
-          <!-- <span>Copyright © 2020-2024 <a target="_blank" href="https://www.fuint.cn">fuint.cn</a> 延禾技术 All Rights Reserved.</span> -->
-        </div>
+        <div class="tips"></div>
       </el-form>
     </div>
   </div>
@@ -107,7 +108,6 @@ export default {
     }
   },
   created() {
-    console.log(this.$t)
     this.getCode()
   },
   methods: {
@@ -157,9 +157,9 @@ export default {
 // 定义新的配色变量
 $primary-color: #a9b1b8; // 主色调，蓝色
 $secondary-color: #eabc48; // 次色调，深蓝色
-$light-gray: #f5f5f5; // 浅灰色
+$light-gray: #999; // 浅灰色
 $dark-gray: #9f8787; // 深灰色
-$background-color: #161212; // 背景色，灰色
+$background-color: #f6f6f6; // 背景色，灰色
 
 /* reset element-ui css */
 .login-container {
@@ -168,9 +168,11 @@ $background-color: #161212; // 背景色，灰色
   width: 100%;
   top: 0;
   left: 0;
-  background: linear-gradient(to bottom right, $primary-color, $secondary-color);
-  background-position: center;
+  background: url('./login-bg.png');
+  background-size: 100% 100%;
   color: #ffffff;
+  box-sizing: border-box;
+  padding: 4vw 8vw;
 
   ::v-deep .el-input {
     display: inline-block;
@@ -180,7 +182,6 @@ $background-color: #161212; // 背景色，灰色
     input {
       background: transparent;
       border: 0px;
-      -webkit-appearance: none;
       border-radius: 0px;
       padding: 12px 5px 12px 15px;
       color: $light-gray;
@@ -202,16 +203,30 @@ $background-color: #161212; // 背景色，灰色
 
   .login-from-box {
     position: relative;
-    .login-form {
+    display: flex;
+    overflow: hidden;
+    align-items: flex-start;
+    border-radius: 20px;
+    background: #fff;
+    box-sizing: border-box;
+    padding: 4vw 0 0 5vw;
+
+    .lang-change {
       position: absolute;
-      left: 0;
-      right: 0;
+      right: 40px;
+    }
+
+    .login-icon {
+      width: calc(100% - 520px);
+      height: 59vh;
+    }
+
+    .login-form {
       width: 520px;
       padding: 35px 35px 15px 35px;
-      margin: 150px auto;
+      margin: 100px auto;
       align-items: center;
       color: white;
-      background-color: rgba(63, 63, 63, 0.373);
       border-radius: 10px;
 
       .login-btn {
@@ -222,7 +237,8 @@ $background-color: #161212; // 背景色，灰色
           margin: 10px 0 36px 0;
           font-size: 1.2em;
           color: white;
-          background: linear-gradient(to right, $primary-color, $secondary-color);
+          background: #f67f20;
+          border-radius: 8px;
           border: none;
           outline: none;
           cursor: pointer;
@@ -253,9 +269,8 @@ $background-color: #161212; // 背景色，灰色
         img {
           cursor: pointer;
           vertical-align: middle;
-          height: 48px;
+          height: 3vw;
           height: 100%;
-
           border-radius: 1px;
         }
       }
@@ -282,7 +297,7 @@ $background-color: #161212; // 背景色，灰色
     .title {
       font-size: 26px;
       font-weight: 400;
-      color: $light-gray;
+      color: #000;
       margin: 0px auto 20px auto;
       text-align: center;
       font-weight: bold;