新修改

马宇豪

2024-04-10 4076c14a8eac96cd716522f2cb15dcda0eb4fcef

 src/views/loginPage/component/accountLogin.vue

@@ -1,14 +1,14 @@
<template>
    <el-form size="large" class="login-content-form">
        <el-form-item class="login-animation1">
            <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.name" clearable autocomplete="off" size="large">
            <el-input type="text" placeholder="请输入用户名" v-model="ruleForm.name" clearable autocomplete="off" size="large">
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px" /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation2">
            <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
            <el-input :type="isShowPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px" /></el-icon>
                </template>
@@ -84,7 +84,7 @@
import { useLoginApi } from '/@/api/login';
import { useUserInfo } from '/@/stores/userInfo';
import type { FormInstance, FormRules } from 'element-plus'

import "amfe-flexible";
import {verifyPhone,verifyIdCard} from "/@/utils/toolsValidate"
import { Base64 } from 'js-base64'
import {useMenuApi} from "/@/api/systemManage/menu";
@@ -122,13 +122,24 @@
        // 页面载入时执行方法
        onMounted(() => {
            hasUserCodeOrPassword()
            const baseSize = 38;
            /* 设置 rem 函数 */
            function setRem() {
              const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
              document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
            }
            setRem();/* 初始化 rem */

            window.onresize = () => {
              setRem();/* 改变窗口大小时重新设置 rem */
            }
            // getAllDepartment();
        });

        const hasUserCodeOrPassword =()=> {
            if (localStorage.getItem('userCode') && localStorage.getItem('userPassword')) {
                state.ruleForm.name = localStorage.getItem('userCode') as string
                state.ruleForm.password = Base64.decode(localStorage.getItem('userPassword'))//解密
                state.ruleForm.pwd = Base64.decode(localStorage.getItem('userPassword'))//解密
                state.saveCode = true
            }
        }
@@ -194,6 +205,7 @@
                await userInfo.setUserInfos(res.data.data);
                Cookies.set('token', res.data.data.tk);
                Cookies.set('uid', res.data.data.uid);
                Cookies.set('roles', JSON.stringify(res.data.data.roles));
                if (state.saveCode) {
                    localStorage.setItem('userCode', state.ruleForm.name)
                    localStorage.setItem('userPassword', Base64.encode(state.ruleForm.pwd),)
@@ -230,7 +242,7 @@
        let res = await useMenuApi().getMenuAdmin();
        if (res.data.code === 100) {
          state.menu = JSON.parse(JSON.stringify(res.data.data))
          router.push(state.menu[0].children[0].path);
          router.push(state.menu[0].path);
        } else {
          ElMessage({
            type: 'warning',
@@ -323,7 +335,7 @@

<style scoped lang="scss">
.login-content-form {
    margin-top: 4vh;
    margin-top: 30px;
    width: 100%;

    .el-input ::v-deep(.el-input__wrapper) {
@@ -332,6 +344,9 @@
        border-radius: 2px;
        padding: 0 30px;
        border: 1px solid rgba(17,254,238,.4);
        .el-input__inner{
          color: #fff;
        }
        &:focus-within {
            border: 1px solid #11FEEE;
        }
@@ -384,7 +399,6 @@
        border: 1px solid #11FEEE;
        letter-spacing: 4px;
        font-weight: 300;
        margin-top: 15px;
        background-image: linear-gradient(to bottom,#0081C2,#003892,#0081C2);
        transition: 0.3s;
        box-shadow: 0 8px 30px rgba(88,101,241,.4);
@@ -393,6 +407,7 @@
            border: 2px solid #11FEEE;
            color: #11FEEE;
            font-weight: bolder;
          background-color: transparent;
            background-image: linear-gradient(to bottom,#003892,#003892,#003892);
        }
      &:active {
@@ -400,6 +415,7 @@
        border: 2px solid #11FEEE;
        color: #11FEEE;
        font-weight: bolder;
        background-color: transparent;
        background-image: linear-gradient(to bottom,#003892,#003892,#003892);
      }
    }