diff --git a/public/img/auth_banner.jpg b/public/img/auth_banner.jpg new file mode 100644 index 00000000..449b0ad5 Binary files /dev/null and b/public/img/auth_banner.jpg differ diff --git a/src/locales/lang/en.js b/src/locales/lang/en.js index 3c48b9d1..08936077 100644 --- a/src/locales/lang/en.js +++ b/src/locales/lang/en.js @@ -1,4 +1,19 @@ export default { + login: { + slogan: 'High performance / delicate / grace', + describe: 'Vue3 + element plus based front-end solutions in the background.', + signInTitle: 'Sign in', + rememberMe: 'Remember me', + forgetPassword: 'Forget password', + signIn: 'Sign in', + signInOther: 'Sign in with', + userPlaceholder: 'user / phone / email', + userError: 'Please input a user name', + PWPlaceholder: 'Please input a password', + PWError: 'Please input a password', + admin: 'Administrator', + user: 'User' + }, user: { dynamic: 'Dynamic', info: 'User Info', diff --git a/src/locales/lang/ja.js b/src/locales/lang/ja.js index 132c630f..258d30eb 100644 --- a/src/locales/lang/ja.js +++ b/src/locales/lang/ja.js @@ -1,4 +1,19 @@ export default { + login: { + slogan: '高性能 / 精緻 / 優雅', + describe: 'Vue 3+Element-Palusによる中バックグラウンドの先端解決策。', + signInTitle: 'ユーザー登録', + rememberMe: '覚えてください', + forgetPassword: 'パスワードを忘れます', + signIn: 'ログイン', + signInOther: 'その他のログイン方式', + userPlaceholder: 'ユーザ名/携帯電話/メールアドレス', + userError: 'ユーザ名を入力してください', + PWPlaceholder: 'パスワードを入力してください', + PWError: 'パスワードを入力してください', + admin: '管理者', + user: 'ユーザー' + }, user: { dynamic: 'ダイナミック', info: 'ユーザー', diff --git a/src/locales/lang/zh-cn.js b/src/locales/lang/zh-cn.js index a1162c26..3937d681 100644 --- a/src/locales/lang/zh-cn.js +++ b/src/locales/lang/zh-cn.js @@ -1,4 +1,19 @@ export default { + login: { + slogan: '高性能 / 精致 / 优雅', + describe: '基于Vue3 + Element-Plus 的中后台前端解决方案。', + signInTitle: '用户登录', + rememberMe: '记住我', + forgetPassword: '忘记密码', + signIn: '登录', + signInOther: '其他登录方式', + userPlaceholder: '用户名 / 手机 / 邮箱', + userError: '请输入用户名', + PWPlaceholder: '请输入密码', + PWError: '请输入密码', + admin: '管理员', + user: '用户' + }, user: { dynamic: '近期动态', info: '个人信息', diff --git a/src/style/theme/dark.scss b/src/style/theme/dark.scss index cc35c3c8..8d6b590a 100644 --- a/src/style/theme/dark.scss +++ b/src/style/theme/dark.scss @@ -31,13 +31,7 @@ #app {background: $--background;color: $--text-color;} /* 登录 */ - .login_bg {background: $--background !important;} - .login-form {background: $--card-background !important;} - .login-logo h2 {color: $--text-color !important;} - @media (max-width: 1000px){ - .login_bg {background: $--card-background !important;} - .login_container {background: $--card-background !important;} - } + .login_bg {background: $--card-background !important;} .el-menu { --el-menu-item-hover-fill: rgba(0,0,0,0.2); diff --git a/src/views/userCenter/login.vue b/src/views/userCenter/login.vue index 08e48112..1725c188 100644 --- a/src/views/userCenter/login.vue +++ b/src/views/userCenter/login.vue @@ -1,61 +1,77 @@ @@ -72,13 +88,31 @@ }, rules: { user: [ - {required: true, message: '请输入用户名', trigger: 'blur'} + {required: true, message: this.$t('login.userError'), trigger: 'blur'} ], password: [ - {required: true, message: '请输入密码', trigger: 'blur'} + {required: true, message: this.$t('login.PWError'), trigger: 'blur'} ] }, - islogin: false + islogin: false, + config: { + lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG, + theme: this.$TOOL.data.get('APP_THEME') || 'default' + }, + lang: [ + { + name: '简体中文', + value: 'zh-cn', + }, + { + name: 'English', + value: 'en', + }, + { + name: '日本語', + value: 'ja', + } + ] } }, watch:{ @@ -90,6 +124,14 @@ this.ruleForm.user = 'user' this.ruleForm.password = 'user' } + }, + 'config.theme'(val){ + document.body.setAttribute('data-theme', val) + this.$TOOL.data.set("APP_THEME", val); + }, + 'config.lang'(val){ + this.$i18n.locale = val + this.$TOOL.data.set("APP_LANG", val); } }, created: function() { @@ -105,6 +147,10 @@ }, methods: { async login(){ + + var validate = await this.$refs.loginForm.validate().catch(()=>{}) + if(!validate){ return false } + this.islogin = true var data = { username: this.ruleForm.user, @@ -141,54 +187,49 @@ }) this.$message.success("Login Success 登录成功") this.islogin = false + }, + configTheme(){ + this.config.theme = this.config.theme=='default'?'dark':'default' + }, + configLang(command){ + this.config.lang = command.value } } }