From 1c4dddd5cab815cb15cbb57475a4c6f6ed60ceb2 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期三, 05 三月 2025 10:49:47 +0800
Subject: [PATCH] 🌈 style:增加翻译
---
src/view/Login.vue | 355 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 178 insertions(+), 177 deletions(-)
diff --git a/src/view/Login.vue b/src/view/Login.vue
index a403242..43b3fee 100644
--- a/src/view/Login.vue
+++ b/src/view/Login.vue
@@ -1,178 +1,179 @@
-<template>
- <div class="content">
- <div class="login_box">
- <img src="../assets/img/logo@2x.png" class="w--255 h--95 mt--57" />
- <div class="my--33 fs--28 lh--28 font-bold color1">客户登录</div>
- <div class="flex a-center px--14 py--19 text_box">
- <img src="../assets/img/youxiang@2x.png" class="w--20 h--15 mr--25 shrink0" />
- <el-input v-model="account" placeholder="请输入邮箱" />
- </div>
- <div class="flex a-center mt--16 px--14 py--19 text_box">
- <img src="../assets/img/mima@2x.png" class="w--18 h--20 mr--26 shrink0" />
- <el-input show-password v-model="pwd" placeholder="请输入密码" />
- </div>
- <div class="flex a-center mt--16 pl--14 text_box">
- <img src="../assets/img/yanzhengma@2x.png" class="w--18 h--20 mr--26 shrink0" />
- <el-input v-model="code" placeholder="请输入验证码" />
- <div class="code pointer">{{ codeStr }}</div>
- </div>
- <div @click="loginFun" class="mt--53 fs--18 lh--27 font-bold py--18 px--158 br--6 pointer bgcolor1">登录</div>
- </div>
- </div>
-</template>
-
-<script>
-import { generateVerificationCode } from '@/utils/utils';
-import { login } from './service'
-import CryptoJS from 'crypto-js';
-export default {
- components: {},
- props: {},
- data() {
- return {
- account: '',
- pwd: '',
- code: '',
- codeStr: '',
- };
- },
- created() {
- this.codeStr = generateVerificationCode()
- },
- mounted() {
- document.addEventListener("keydown", this.handleKeyDown);
- },
- methods: {
- // 监听当前页面是否按下了回车
- handleKeyDown(event) {
- if (event.key === "Enter") {
- this.loginFun();
- }
- },
- loginFun() {
- if (!this.account) {
- this.$message({
- message: '请输入邮箱',
- type: 'warning'
- });
- return
- }
- const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
- if (!emailPattern.test(this.account)) {
- this.$message({
- message: '请输入有效的邮箱地址',
- type: 'warning'
- });
- return;
- }
- if (!this.pwd) {
- this.$message({
- message: '请输入密码',
- type: 'warning'
- });
- return
- }
- if (!this.code) {
- this.$message({
- message: '请输入验证码',
- type: 'warning'
- });
- return
- }
- if (!this.codeStr.match(new RegExp(this.code, "i"))) {
- this.$message({
- message: '验证码错误',
- type: 'warning'
- });
- this.codeStr = generateVerificationCode()
- return
- }
- login({
- account: this.account,
- pwd: CryptoJS.MD5(this.pwd).toString(),
- type: 2
- }).then((result) => {
- localStorage.setItem('extra', result.data.extra);
- this.$store.commit('SET_USERINFO', result.data);
- this.$router.push({ path: '/home' });
- }).catch(() => {
- this.code = ''
- this.codeStr = generateVerificationCode()
- });
- }
- },
-};
-</script>
-<style scoped lang="less">
-.bgcolor1 {
- background: #014099;
- color: #FFFFFF;
-}
-
-.color1 {
- color: #3B3F56;
-}
-
-.content {
- position: relative;
- background-image: url("../assets/img/loginBg.png");
- background-size: 100% 100%;
- height: 100%;
- width: 100%;
-}
-
-.login_box {
- position: absolute;
- top: 50%;
- right: 178px;
- transform: translateY(-50%);
- width: 535px;
- height: 612px;
- background: #FFFFFF;
- border-radius: 11px;
- display: flex;
- flex-direction: column;
- align-items: center;
-
- .text_box {
- width: 352px;
- background: #F9F9F9;
- border-radius: 6px;
- border: 1px solid #DFDFDF;
-
- .code {
- padding: 19px 0;
- text-align: center;
- flex-shrink: 0;
- width: 80px;
- height: 100%;
- background: #014099;
- border-radius: 6px;
- font-weight: 400;
- font-size: 16px;
- color: #FFFFFF;
- line-height: 16px;
- }
- }
-
-
- ::v-deep .el-input {
- .el-input__inner {
- background-color: transparent;
- border: unset;
- padding: 0;
- height: unset;
- line-height: 16px;
- }
-
- .el-input__inner::placeholder {
- font-size: 16px;
- font-weight: 400;
- }
-
- .el-input__icon {
- line-height: unset;
- }
- }
-}
+<template>
+ <div class="content">
+ <div class="login_box">
+ <img src="../assets/img/logo@2x.png" class="w--255 h--95 mt--57" />
+ <div class="my--33 fs--28 lh--28 font-bold color1">客户登录 | User(C) Login</div>
+ <div class="flex a-center px--14 py--19 text_box">
+ <img src="../assets/img/youxiang@2x.png" class="w--20 h--15 mr--25 shrink0" />
+ <el-input v-model="account" placeholder="请输入邮箱 | Email" />
+ </div>
+ <div class="flex a-center mt--16 px--14 py--19 text_box">
+ <img src="../assets/img/mima@2x.png" class="w--18 h--20 mr--26 shrink0" />
+ <el-input show-password v-model="pwd" placeholder="请输入密码 | Password" />
+ </div>
+ <div class="flex a-center mt--16 pl--14 text_box">
+ <img src="../assets/img/yanzhengma@2x.png" class="w--18 h--20 mr--26 shrink0" />
+ <el-input v-model="code" placeholder="请输入验证码 | Verification code" />
+ <div class="code pointer">{{ codeStr }}</div>
+ </div>
+ <div @click="loginFun" class="mt--53 fs--18 lh--27 font-bold py--18 px--158 br--6 pointer bgcolor1">登录 | Login</div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { generateVerificationCode } from '@/utils/utils';
+import { login } from './service'
+import CryptoJS from 'crypto-js';
+export default {
+ components: {},
+ props: {},
+ data() {
+ return {
+ account: '',
+ pwd: '',
+ code: '',
+ codeStr: '',
+ };
+ },
+ created() {
+ this.codeStr = generateVerificationCode()
+ },
+ mounted() {
+ document.addEventListener("keydown", this.handleKeyDown);
+ },
+ methods: {
+ // 监听当前页面是否按下了回车
+ handleKeyDown(event) {
+ if (event.key === "Enter") {
+ this.loginFun();
+ }
+ },
+ loginFun() {
+ if (!this.account) {
+ this.$message({
+ message: '请输入邮箱',
+ type: 'warning'
+ });
+ return
+ }
+ const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+ if (!emailPattern.test(this.account)) {
+ this.$message({
+ message: '请输入有效的邮箱地址',
+ type: 'warning'
+ });
+ return;
+ }
+ if (!this.pwd) {
+ this.$message({
+ message: '请输入密码',
+ type: 'warning'
+ });
+ return
+ }
+ if (!this.code) {
+ this.$message({
+ message: '请输入验证码',
+ type: 'warning'
+ });
+ return
+ }
+ if (!this.codeStr.match(new RegExp(this.code, "i"))) {
+ this.$message({
+ message: '验证码错误',
+ type: 'warning'
+ });
+ this.codeStr = generateVerificationCode()
+ return
+ }
+ login({
+ account: this.account,
+ pwd: CryptoJS.MD5(this.pwd).toString(),
+ type: 2
+ }).then((result) => {
+ localStorage.setItem('extra', result.data.extra);
+ this.$store.commit('SET_USERINFO', result.data);
+ this.$router.push({ path: '/home' });
+ }).catch(() => {
+ this.code = ''
+ this.codeStr = generateVerificationCode()
+ });
+ }
+ },
+};
+</script>
+<style scoped lang="less">
+.bgcolor1 {
+ background: #014099;
+ color: #FFFFFF;
+}
+
+.color1 {
+ color: #3B3F56;
+}
+
+.content {
+ position: relative;
+ background-image: url("../assets/img/loginBg.png");
+ background-size: 100% 100%;
+ height: 100%;
+ width: 100%;
+}
+
+.login_box {
+ position: absolute;
+ top: 50%;
+ right: 178px;
+ transform: translateY(-50%);
+ width: 535px;
+ height: 612px;
+ background: #FFFFFF;
+ border-radius: 11px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .text_box {
+ width: 352px;
+ background: #F9F9F9;
+ border-radius: 6px;
+ border: 1px solid #DFDFDF;
+
+ .code {
+ padding: 19px 0;
+ text-align: center;
+ flex-shrink: 0;
+ width: 80px;
+ height: 100%;
+ background: #014099;
+ border-radius: 6px;
+ font-weight: 400;
+ font-size: 16px;
+ color: #FFFFFF;
+ line-height: 16px;
+ }
+ }
+
+
+ ::v-deep .el-input {
+ .el-input__inner {
+ background-color: transparent;
+ border: unset;
+ padding: 0;
+ height: unset;
+ line-height: 16px;
+
+ &::placeholder {
+ font-size: 14px; // 确保在此处设置
+ color: #999;
+ font-weight: 400;
+ }
+ }
+
+ .el-input__icon {
+ line-height: unset;
+ }
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.7.1