添加忘记密码重置界面

src/permission.js

@@ -11,7 +11,7 @@ import usePermissionStore from '@/store/modules/permission'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/register', '/forgetPassword']
 
 const isWhiteList = (path) => {
   return whiteList.some(pattern => isPathMatch(pattern, path))

src/router/index.js

@@ -47,6 +47,11 @@ export const constantRoutes = [
     component: () => import('@/views/register'),
     hidden: true
   },
+  {
+    path: '/forgetPassword',
+    component: () => import('@/views/forgetPassword'),
+    hidden: true
+  },
   {
     path: "/:pathMatch(.*)*",
     component: () => import('@/views/error/404'),

src/views/forgetPassword.vue

@@ -0,0 +1,331 @@
+<template>
+    <div class="login-container">
+        <div class="loginRoot">
+            <div class="login">
+                <div class="leftLogo">
+                    <div class="left-logo-container">
+                        <img :src="systemLogo" />
+                        <div class="shortBar"></div>
+                        <div class="welcome-message">Welcome to log in and use this system platform</div>
+                        <div class="welcome-label">欢迎登录</div>
+                    </div>
+                </div>
+                <div class="rightForm">
+                    <el-form ref="forgetRef" :model="forgetForm" :rules="forgetRules" class="login-form">
+                        <div class="title-container">
+                            <div class="title-label">{{ title }}</div>
+                        </div>
+                        <el-form-item prop="username">
+                            <el-input v-model="forgetForm.username" type="text" size="large" class="custom-input"
+                                auto-complete="off" placeholder="账号">
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item prop="email">
+                            <el-input v-model="forgetForm.email" type="email" size="large" class="custom-input"
+                                auto-complete="off" placeholder="邮箱">
+                            </el-input>
+                        </el-form-item>
+                        <div style="float: right;margin-bottom: 35px;">
+                            <router-link to="/login" custom v-slot="{ href }">
+                                <a class="routeLinkText" :href="href">返回登录</a>
+                            </router-link>
+                        </div>
+                        <el-form-item style="width:100%;">
+                            <el-button :loading="loading" size="large" type="primary" class="myLoginBtn"
+                                style="width:100%;" @click.prevent="handleForgetPassword">
+                                <span v-if="!loading">确 认</span>
+                                <span v-else>提 交 中...</span>
+                            </el-button>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+
+            <!--  底部  -->
+            <!-- <div class="el-login-footer">
+        <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+      </div> -->
+        </div>
+    </div>
+</template>
+
+<script setup>
+import useUserStore from '@/store/modules/user'
+import systemLogo from '@/assets/images/systemLogo.png'
+
+const title = '忘记密码'
+const userStore = useUserStore()
+const route = useRoute()
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+
+const forgetForm = ref({
+    username: "",
+    email: ""
+})
+
+const forgetRules = {
+    username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+    email: [{ required: true, trigger: "blur", message: "请输入您的邮箱" }]
+}
+const loading = ref(false)
+
+const handleForgetPassword = () => {
+    proxy.$refs.forgetRef.validate(valid => {
+        if (valid) {
+            // loading.value = true
+
+
+
+        }
+    })
+}
+</script>
+
+<style lang='scss' scoped>
+.login-container {
+    position: relative;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url("../assets/images/login-background.png");
+    background-size: cover;
+}
+
+.loginRoot {
+    position: absolute;
+    top: calc(50% - 290px);
+    left: calc(50% - 500px);
+    z-index: 2;
+}
+
+.login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1000px;
+    height: 580px;
+    border-radius: 6px;
+}
+
+.leftLogo {
+    width: 500px;
+    height: 580px;
+    display: flex;
+    /* 垂直居中 */
+    align-items: center;
+    /* 水平居中（可选） */
+    justify-content: center;
+    background-image: url("../assets/images/login-leftBg.png");
+    background-size: cover;
+
+
+    .left-logo-container {
+        width: 302px;
+        height: 154px;
+        margin: 0 auto;
+    }
+
+    .shortBar {
+        width: 40px;
+        height: 6px;
+        border-radius: 3px 3px 3px 3px;
+        background: #ffffff;
+        margin: 10px auto 24px auto;
+    }
+
+    .welcome-message {
+        margin: 0 auto;
+        font-family: Arial;
+        font-weight: 400;
+        width: 203px;
+        height: 29px;
+        font-size: 14px;
+        text-align: center;
+        color: #FFFFFF;
+    }
+
+    .welcome-label {
+        padding-top: 12px;
+        margin: 0 auto;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 400;
+        width: 66px;
+        height: 14px;
+        font-size: 14px;
+        text-align: center;
+        color: #FFFFFF;
+        letter-spacing: 1px;
+    }
+}
+
+.rightForm {
+    width: 500px;
+    height: 580px;
+    display: flex;
+    /* 垂直居中 */
+    align-items: center;
+    background: #ffffff;
+}
+
+
+.title-label {
+    font-family: Alibaba PuHuiTi;
+    font-weight: 500;
+    height: 32px;
+    font-size: 32px;
+    text-align: center;
+    color: #3B3B3B;
+    letter-spacing: 2px;
+    display: inline-flex;
+}
+
+.title-container {
+    margin: 0px auto 70px auto;
+    text-align: center;
+}
+
+:deep(.el-form-item--default) {
+    margin-bottom: 20px;
+}
+
+:deep(.el-form-item__error) {
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    letter-spacing: 1px;
+}
+
+:deep(.el-input .el-input__password) {
+    font-size: 18px;
+}
+
+// 输入框样式
+.custom-input {
+    width: 310px;
+    height: 50px;
+    border-left: 5px solid #1A75E6;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 18px;
+    text-align: center;
+    color: #DCDCDC;
+    letter-spacing: 1px;
+
+    /* Vue 3 方式 */
+    :deep(.el-input__wrapper.is-focus) {
+        box-shadow: 0 0 0 1px #A6C9FF inset;
+        background: #ffffff;
+        font-family: Arial;
+        font-weight: 400;
+        font-size: 18px;
+        color: #000000;
+        letter-spacing: 1px;
+    }
+
+    :deep(.el-input__wrapper:hover) {
+        box-shadow: 0 0 0 1px #A6C9FF inset;
+        background: #ffffff;
+        font-family: Arial;
+        font-weight: 400;
+        font-size: 18px;
+        color: #000000;
+        letter-spacing: 1px;
+    }
+
+    :deep(.el-input__wrapper) {
+        background: #f7f7f7;
+        border-radius: 0px;
+    }
+}
+
+.captcha-input {
+    :deep(.el-input__inner) {
+        position: absolute;
+        left: 15px;
+        width: 170px;
+    }
+}
+
+.routeLinkText {
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #0090FF;
+    cursor: pointer;
+}
+
+.login-form {
+    width: 310px;
+    height: 416px;
+    margin: 0 auto;
+    z-index: 1;
+
+    .el-input {
+        height: 50px;
+        --el-input-border-color: transparent;
+
+        input {
+            height: 50px;
+        }
+    }
+
+    .input-icon {
+        height: 39px;
+        width: 18px;
+        margin-left: 0px;
+    }
+}
+
+.login-tip {
+    font-size: 13px;
+    text-align: center;
+    color: #bfbfbf;
+}
+
+.login-code {
+    width: 33%;
+    height: 40px;
+    position: absolute;
+    right: 22px;
+    z-index: 2;
+
+    img {
+        cursor: pointer;
+        vertical-align: middle;
+    }
+}
+
+.myLoginBtn {
+    width: 310px;
+    height: 50px;
+    margin-top: 6px;
+    border-radius: 25px 25px 25px 25px;
+    background: #1a75e6;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 24px;
+    text-align: center;
+    color: #FFFFFF;
+    letter-spacing: 1px;
+}
+
+.el-login-footer {
+    height: 40px;
+    line-height: 40px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-family: Arial;
+    font-size: 12px;
+    letter-spacing: 1px;
+}
+
+.login-code-img {
+    height: 40px;
+    padding-left: 12px;
+}
+</style>

src/views/login.vue

@@ -35,6 +35,11 @@
               </div>
             </el-form-item>
             <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
+            <div style="float: right;margin-bottom: 35px;">
+              <router-link to="/forgetPassword" custom v-slot="{ href }">
+                <a class="routeLinkText" :href="href">忘记密码？</a>
+              </router-link>
+            </div>
             <el-form-item style="width:100%;">
               <el-button :loading="loading" size="large" type="primary" class="myLoginBtn" style="width:100%;"
                 @click.prevent="handleLogin">
@@ -332,6 +337,14 @@ getCookie()
   }
 }
 
+.routeLinkText {
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #0090FF;
+  cursor: pointer;
+}
+
 .login-form {
   width: 310px;
   height: 416px;
@@ -376,7 +389,7 @@ getCookie()
 .myLoginBtn {
   width: 310px;
   height: 50px;
-  margin-top: 46px;
+  margin-top: 6px;
   border-radius: 25px 25px 25px 25px;
   background: #1a75e6;
   font-family: Microsoft YaHei;