🌈 style:增加翻译

pyt

2025-03-05 1c4dddd5cab815cb15cbb57475a4c6f6ed60ceb2

 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>