templatediv classcenterh1登录/注册/h1div classlogondiv :classoverlaylongClassdiv classoverlaylong-Signin v-ifdisplayMode 0h2 classoverlaylongH2登录/h2input typetext placeholder用户名 v-modellogin.usernameinput typepassword placeholder密码 v-modellogin.password autocompletenew-passwordh3 clickresetPassword忘记密码/h3button classinupbutton clicksignUp :disabled!isLoginFormValid登录/button/divdiv classoverlaylong-Signup v-ifdisplayMode 1h2 classoverlaylongH2注册账户/h2input typetext v-modelusername placeholder用户名 inputvalidateUsernamep v-ifusernameError classerror{{ usernameError }}/pinput typepassword v-modelpassword placeholder密码 autocompletenew-password inputvalidatePasswordp v-ifpasswordError classerror{{ passwordError }}/pinput typepassword v-modelconfirmPassword placeholder确认密码 autocompletenew-password inputvalidatePasswordp v-ifconfirmPasswordError classerror{{ confirmPasswordError }}/pbutton classinupbutton clickenroll :disabled!isFormValid注册/button/div/divdiv :classoverlaytitleClassdiv classoverlaytitle-Signin v-ifdisplayMode 0h2 classoverlaytitleH2你好朋友/h2p classoverlaytitleP输入您的个人信息开始与我们同行。/pdiv classbuttongohs clicksignIn注册/div/divdiv classoverlaytitle-Signup v-ifdisplayMode 1h2 classoverlaytitleH2欢迎回来/h2p classoverlaytitleP请使用您的个人信息登录以保持连接。/pdiv classbuttongohs clickfirstLoginpush登录/div/div/div/div/div/templatescriptimport Request from /utils/request;import Cookies from js-cookie;export default {data() {return {overlaylongClass: overlaylong,overlaytitleClass: overlaytitle,displayMode: 0, // 默认显示登录页面username: ,password: ,confirmPassword: ,usernameError: ,passwordError: ,confirmPasswordError: ,login: {username: ,password: },};},computed: {isFormValid() {return !this.usernameError !this.passwordError !this.confirmPasswordError;},isLoginFormValid() {return this.login.username ! this.login.password ! ;}},methods: {signIn() {this.overlaylongClass overlaylongleft;this.overlaytitleClass overlaytitleright;setTimeout(() {this.displayMode 1;}, 200);},firstLoginpush() {this.overlaylongClass overlaylongright;this.overlaytitleClass overlaytitleleft;setTimeout(() {this.displayMode 0;}, 200);},resetPassword() {// 这里可以添加重置密码的逻辑console.log(忘记密码);},signUp() {if (this.login.username || this.login.password ) {this.$message.error(请输入用户名和密码);return;}Request.post(login/loginadmin, {username: this.login.username,password: this.login.password}).then((res) {console.log(res);if (res.data.msg ! 0) {// 登录成功后设置 Cookie 并直接跳转到 /firstpageCookies.set(admin, JSON.stringify(res.data.data));this.$router.push(/firstpage).catch(() {});this.$message.success(登录成功);} else {this.$message.error(用户名或密码错误请重新输入);this.login.username ;this.login.password ;}}).catch((error) {console.error(登录请求失败:, error);this.$message.error(登录请求失败请稍后再试);});},validateUsername() {if (this.username.trim() ) {this.usernameError 用户名不能为空;return;}if (this.username.length 8 || this.username.length 15) {this.usernameError 用户名必须在8到15个字符之间;return;}const regex /^(?.*[a-zA-Z])(?.*\d)[a-zA-Z\d!#$%^*()_\-[\]{};:|,./?]*$/;if (!regex.test(this.username)) {this.usernameError 用户名必须同时包含字母和数字并且可以包含特殊字符;return;}this.usernameError ;},validatePassword() {if (this.password.trim() ) {this.passwordError 密码不能为空;return;}if (this.confirmPassword.trim() ) {this.confirmPasswordError 确认密码不能为空;return;}if (this.password.length 8 || this.password.length 15) {this.passwordError 密码必须在8到15个字符之间;return;}const regex /^(?.*[a-zA-Z])(?.*\d)[a-zA-Z\d!#$%^*()_\-[\]{};:|,./?]*$/;if (!regex.test(this.password)) {this.passwordError 密码必须同时包含字母和数字并且可以包含特殊字符;return;}if (this.password ! this.confirmPassword) {this.confirmPasswordError 密码不一致;return;}this.passwordError ;this.confirmPasswordError ;},enroll() {if (this.isFormValid) {if (this.username this.password ) {this.$notify.error(请输入有效的用户名和密码后再进行注册);} else if (this.username this.password ! ) {this.$notify.error(请输入有效的用户名后再进行注册);} else if (this.username ! this.password ) {this.$notify.error(请输入有效的密码后再进行注册);} else {Request.post(login/enroll, { username: this.username, password: this.password }).then((res) {console.log(res);if (res.data.data 0) {this.$notify.success(注册成功);this.username ;this.password ;this.confirmPassword ;} else if (res.data.data 1) {this.$notify.error(用户已存在);}}).catch((error) {console.error(申请异常, error);this.$message.error(申请异常请稍后再试);});}} else {this.$notify.error(请输入有效的用户名和密码后再次尝试);}}}};/scriptstyle scoped.center {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;flex-direction: column;}h1 {font-size: 30px;color: #333;margin-bottom: 20px;}.error {color: red;font-size: 14px;margin-top: 5px;}.inupbutton:disabled {opacity: 0.5;cursor: not-allowed;}.logon {background-color: #fff;border-radius: 10px;box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);width: 768px;max-width: 100%;min-height: 480px;display: flex;overflow: hidden;}.overlaylong {border-radius: 10px 0 0 10px;width: 50%;height: 100%;background-color: #f9f9f9;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 20px;}.overlaylongleft {border-radius: 0px 10px 10px 0px;width: 50%;height: 100%;background-color: #f9f9f9;transform: translateX(100%);transition: transform 0.6s ease-in-out;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 20px;}.overlaylongright {border-radius: 10px 0 0 10px;width: 50%;height: 100%;background-color: #f9f9f9;transform: translateX(0%);transition: transform 0.6s ease-in-out;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 20px;}.overlaytitle {border-radius: 0px 10px 10px 0px;width: 50%;height: 100%;background-color: #29eac4;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 20px;color: #fff;}.overlaytitleleft {border-radius: 0px 10px 10px 0px;width: 50%;height: 100%;background-color: #29eac4;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 20px;color: #fff;transform: translateX(0%);transition: transform 0.6s ease-in-out;}.overlaytitleright {border-radius: 0px 10px 10px 0px;width: 50%;height: 100%;background-color: #29eac4;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 20px;color: #fff;transform: translateX(-100%);transition: transform 0.6s ease-in-out;}.overlaytitleH2 {font-size: 24px;margin-bottom: 10px;}.overlaytitleP {font-size: 16px;margin-bottom: 20px;}.buttongohs {width: 180px;height: 40px;border-radius: 50px;border: 1px solid #fff;color: #fff;font-size: 15px;text-align: center;line-height: 40px;cursor: pointer;}.overlaylongH2 {font-size: 24px;color: #333;margin-bottom: 20px;}input {background-color: #eee;border: none;padding: 12px 15px;margin: 10px 0;width: 240px;border-radius: 5px;font-size: 16px;}h3 {font-size: 14px;margin-top: 10px;cursor: pointer;color: #666;}.inupbutton {background-color: #29eac4;border: none;width: 180px;height: 40px;border-radius: 50px;font-size: 15px;color: #fff;text-align: center;line-height: 40px;margin-top: 30px;cursor: pointer;}/style