refactor: 优化首页样式

src/assets/styles/element-ui.scss

@@ -1,5 +1,4 @@
 // cover some element-ui styles
-
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
   font-weight: 400 !important;

src/permission.js

@@ -30,19 +30,20 @@ router.beforeEach((to, from, next) => {
         // 判断当前用户是否已拉取完user_info信息
         useUserStore().getInfo().then(() => {
           isRelogin.show = false
-          // usePermissionStore().generateRoutes().then(accessRoutes => {
-          //   // 根据roles权限生成可访问的路由表
-          //   accessRoutes.forEach(route => {
-          //     if (!isHttp(route.path)) {
-          //       router.addRoute(route) // 动态添加可访问路由表
-          //     }
-          //   })
-          //   next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-          // })
-          usePermissionStore().setRoutes([]);
-          usePermissionStore().setSidebarRouters(constantRoutes);
-          usePermissionStore().setDefaultRoutes([]);
-          usePermissionStore().setTopbarRoutes(constantRoutes);
+          usePermissionStore().generateRoutes().then(accessRoutes => {
+            // 根据roles权限生成可访问的路由表
+            accessRoutes.forEach(route => {
+              if (!isHttp(route.path)) {
+                router.addRoute(route) // 动态添加可访问路由表
+              }
+            })
+            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+          })
+          // 不使用动态路由
+          // usePermissionStore().setRoutes([]);
+          // usePermissionStore().setSidebarRouters(constantRoutes);
+          // usePermissionStore().setDefaultRoutes([]);
+          // usePermissionStore().setTopbarRoutes(constantRoutes);
           next()
         }).catch(err => {
           useUserStore().logOut().then(() => {

src/store/modules/settings.js

@@ -10,7 +10,7 @@ const useSettingsStore = defineStore(
   {
     state: () => ({
       title: '',
-      theme: storageSetting.theme || '#409EFF',
+      theme: storageSetting.theme || '#004EA2',
       sideTheme: storageSetting.sideTheme || sideTheme,
       showSettings: showSettings,
       topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

src/views/components/bgTools.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="tools" :style="{transform: `translateY(-50%) scale(${scaleVal})`}">
-    <!-- <img class="bg_123" src="@/assets/images/bg_tools/bg_mian.png" alt="" /> -->
     <img class="bg_bottom" src="@/assets/images/bg_tools/bottom.png" alt="" />
     <img class="bg_main" src="@/assets/images/bg_tools/main.png" alt="" />
     <img class="bg_line1" src="@/assets/images/bg_tools/line1.png" alt="" />
@@ -31,7 +30,7 @@ watch(width, value => {
   width: 1124px;
   height: 1080px;
   position: absolute;
-  left: 4%;
+  left: 0%;
   top: 50%;
   transform-origin: 0 50%;
   .bg_123{

src/views/index.vue

@@ -136,9 +136,3 @@ onMounted(()=>{
 
 </script>
 
-<style scoped lang="scss">
-.home {
-  
-}
-</style>
-

src/views/login.vue

@@ -7,73 +7,81 @@
       :rules="loginRules"
       class="login-form"
     >
-      <h3 class="title">工具数字化管理系统</h3>
-      <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          type="text"
-          size="large"
-          auto-complete="off"
-          placeholder="账号"
-        >
-          <template #prefix
-            ><svg-icon icon-class="user" class="el-input__icon input-icon"
-          /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          size="large"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix
-            ><svg-icon icon-class="password" class="el-input__icon input-icon"
-          /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          size="large"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter="handleLogin"
-        >
-          <template #prefix
-            ><svg-icon icon-class="validCode" class="el-input__icon input-icon"
-          /></template>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img" />
-        </div>
-      </el-form-item>
-      <el-checkbox
-        v-model="loginForm.rememberMe"
-        style="margin: 0px 0px 25px 0px"
-        >记住密码</el-checkbox
-      >
-      <el-form-item style="width: 100%">
-        <el-button
-          :loading="loading"
-          size="large"
-          type="primary"
-          style="width: 100%"
-          @click.prevent="handleLogin"
+      <h3 class="title">数字化图鉴</h3>
+      <div class="login-content">
+        <div class="login-welcome">早上好，欢迎登录！</div>
+        <div class="login-welcome-en">Good morning, welcome to login!</div>
+        <el-form-item prop="username">
+          <el-input
+            v-model="loginForm.username"
+            type="text"
+            size="large"
+            auto-complete="off"
+            placeholder="账号"
+          >
+            <template #prefix
+              ><svg-icon icon-class="user" class="el-input__icon input-icon"
+            /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            size="large"
+            auto-complete="off"
+            placeholder="密码"
+            @keyup.enter="handleLogin"
+          >
+            <template #prefix
+              ><svg-icon
+                icon-class="password"
+                class="el-input__icon input-icon"
+            /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code" v-if="captchaEnabled">
+          <el-input
+            v-model="loginForm.code"
+            size="large"
+            auto-complete="off"
+            placeholder="验证码"
+            style="width: 63%"
+            @keyup.enter="handleLogin"
+          >
+            <template #prefix
+              ><svg-icon
+                icon-class="validCode"
+                class="el-input__icon input-icon"
+            /></template>
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+          </div>
+        </el-form-item>
+        <el-checkbox
+          v-model="loginForm.rememberMe"
+          style="margin: 0px 0px 25px 0px"
+          >记住密码</el-checkbox
         >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right" v-if="register">
-          <router-link class="link-type" :to="'/register'"
-            >立即注册</router-link
+        <el-form-item style="width: 100%">
+          <el-button
+            :loading="loading"
+            size="large"
+            type="primary"
+            style="width: 100%"
+            @click.prevent="handleLogin"
           >
-        </div>
-      </el-form-item>
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+          <div style="float: right" v-if="register">
+            <router-link class="link-type" :to="'/register'"
+              >立即注册</router-link
+            >
+          </div>
+        </el-form-item>
+      </div>
     </el-form>
   </div>
 </template>
@@ -189,8 +197,8 @@ getCookie();
 </script>
 
 <style lang="scss" scoped>
-$greenSeaweed: rgb(24, 200, 223);
-$blueQueen: rgb(41, 104, 170);
+$greenSeaweed: rgb(9, 88, 255);
+$blueQueen: rgb(21, 121, 255);
 .login {
   width: 100vw;
   height: 100vh;
@@ -210,17 +218,36 @@ $blueQueen: rgb(41, 104, 170);
   text-align: center;
   color: #121212;
   font-weight: 600;
+  background: rgba($color: #ffffff, $alpha: 0.6);
+  box-shadow: 0px 2px 10px 0px rgba(39, 54, 100, 0.1);
+  border-radius: 10px 10px 0px 0px;
+  font-size: 42px;
+  color: #004ea2;
+  line-height: 42px;
+  letter-spacing: 2px;
+  padding: 20px;
+  font-style: italic;
 }
-
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  overflow: hidden;
-  position: relative;
-  z-index: 2;
-  right: 12%;
+.login-content {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 42px 60px;
+  background: rgba(255, 255, 255, 0.6);
+  box-shadow: 0px 2px 10px 0px rgba(39, 54, 100, 0.1);
+  backdrop-filter: blur(8px);
+  .login-welcome{
+    font-family: Helvetica;
+    font-size: 24px;
+    color: #004EA2;
+    line-height: 32px;
+  }
+  .login-welcome-en{
+    font-weight: 500;
+    font-size: 18px;
+    color: rgba(#326fb0, 0.8);
+    line-height: 32px;
+    margin-bottom: 32px;
+  }
   &::before,
   &::after {
     content: "";
@@ -237,7 +264,7 @@ $blueQueen: rgb(41, 104, 170);
   &::before {
     left: 45%;
     bottom: -75%;
-    background-color: rgba($blueQueen, 0.15);
+    background-color: rgba($blueQueen,0.15);
     animation: wawes 10s infinite linear;
   }
 
@@ -245,15 +272,22 @@ $blueQueen: rgb(41, 104, 170);
     left: 40%;
     bottom: -70%;
     background-color: rgba($greenSeaweed, 0.2);
-    animation: wawes  7s infinite;
+    animation: wawes 7s infinite;
   }
+}
+
+.login-form {
+  width: 480px;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
+  right: 8%;
   @keyframes wawes {
-    from{
+    from {
       transform: rotate(0);
     }
-    to{
+    to {
       transform: rotate(360deg);
-
     }
   }
   .el-input {