修改登录页面验证码框

src/permission.ts

@@ -44,8 +44,9 @@ router.beforeEach(async (to:any, from:any, next:any) => {
           // const { roles } = await userStore.getInfo();
 					const { perms } = await userStore.getInfo();
           const accessRoutes = await permissionStore.generateRoutes(perms);
-					// console.log("路由权限--perms--》",accessRoutes);
+					console.log("路由权限--perms--》",accessRoutes);
           accessRoutes.forEach((route:any) => {
+            console.log("路由权限--addRoutecessRoutes",route);
             router.addRoute(route);
           });
           next({ ...to, replace: true });

src/store/modules/permission.ts

@@ -103,8 +103,13 @@ export const usePermissionStore = defineStore("permission", () => {
       listRoutes()
         .then(({ data: asyncRoutes }) => {
           // 根据角色获取有访问权限的路由
-					// console.log("获取到的路由---->",asyncRoutes, roles);
+					console.log("获取到的路由---->",asyncRoutes);
           const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
+
+          console.log("获取到的路由--1-->",accessedRoutes);
+
+          console.log("获取到的路由--2-->",roles);
+
           setRoutes(accessedRoutes);
           resolve(accessedRoutes);
         })
@@ -113,6 +118,9 @@ export const usePermissionStore = defineStore("permission", () => {
         });
     });
   }
+  console.log("获取到的路由--3->",routes)
+  console.log("获取到的路由--4->",setRoutes)
+  console.log("获取到的路由--5->",generateRoutes)
   return { routes, setRoutes, generateRoutes };
 });
 

src/views/login/index.vue

@@ -2,19 +2,12 @@
   <div class="login-container">
     <div class="login-main">
       <div class="login-form">
-        <el-form
-      ref="loginFormRef"
-      :model="loginData"
-      :rules="loginRules"
-    >
-  
+        <el-form ref="loginFormRef" :model="loginData" :rules="loginRules">
           <!-- <div class="flex text-white items-center py-4">
         <span class="text-2xl flex-1 text-center">{{ $t("login.title") }}</span>
         <lang-select style="color: #fff" />
       </div> -->
-      <div class="login-title">
-        用户登录
-      </div>
+          <div class="login-title">用户登录</div>
           <el-form-item prop="username">
             <div class="p-2">
               <svg-icon icon-class="user" />
@@ -67,6 +60,7 @@
               auto-complete="off"
               :placeholder="$t('login.verifyCode')"
               class="w-[60%]"
+              style="width: 60%"
               @keyup.enter="handleLogin"
             />
 
@@ -85,14 +79,13 @@
           </el-button>
 
           <!-- 账号密码提示 -->
-      <div class="mt-4 text-sm" style="color:#333">
+          <div class="mt-4 text-sm" style="color: #333">
             <span>{{ $t("login.username") }}: ceshi</span>
             <span class="ml-4"> {{ $t("login.password") }}: 123456</span>
           </div>
         </el-form>
       </div>
     </div>
-   
   </div>
 </template>
 
@@ -190,15 +183,12 @@ function handleLogin() {
 
           const redirect = (query.redirect as LocationQueryValue) ?? "/";
 
-          const otherQueryParams = Object.keys(query).reduce(
-            (acc: any, cur: string) => {
+          const otherQueryParams = Object.keys(query).reduce((acc: any, cur: string) => {
             if (cur !== "redirect") {
               acc[cur] = query[cur];
             }
             return acc;
-            },
-            {}
-          );
+          }, {});
           //console.log("登陆输出：",redirect,otherQueryParams);
           router.push({ path: redirect, query: otherQueryParams });
           getCaptcha();
@@ -227,11 +217,11 @@ onMounted(() => {
   background-image: url(../../assets/login/bg.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  background-color: #ECEFF5;
+  background-color: #eceff5;
   display: flex;
   justify-content: center;
   align-items: center;
-	.login-main{
+  .login-main {
     width: 800px;
     height: 700px;
     position: relative;
@@ -239,11 +229,11 @@ onMounted(() => {
     background-repeat: no-repeat;
     background-size: 100% 100%;
     margin-left: -18%;
-    .login-title{
+    .login-title {
       font-weight: bold;
       font-size: 37px;
       text-align: center;
-      color: #1E5EFF;
+      color: #1e5eff;
       line-height: 43px;
       margin-bottom: 30px;
     }
@@ -252,12 +242,12 @@ onMounted(() => {
     width: 500px;
     background-color: #fff;
     border-radius: 6px;
-    box-shadow: 0px 0px 42px -28px #37508E;
+    box-shadow: 0px 0px 42px -28px #37508e;
     padding: 60px 30px;
     position: absolute;
     left: 50%;
     top: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     margin-left: 60%;
     overflow: hidden;
     box-sizing: border-box;
@@ -278,12 +268,11 @@ onMounted(() => {
 
 .el-form-item {
   border-radius: 5px;
-  border: solid 1px #D9D9D9;
+  border: solid 1px #d9d9d9;
   color: #666;
 }
 
 .el-input {
-
   // 子组件 scoped 无效，使用 :deep
   :deep(.el-input__wrapper) {
     padding: 0;