新修改

马宇豪

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>
@@ -18,8 +18,8 @@
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation4 codeDeal">
            <el-checkbox v-model="saveCode" label="记住密码" size="large" />
            <span class="forgetCode" @click="identify">忘记密码？</span>
            <el-checkbox v-model="saveCode" label="记住密码" size="large" style="color: #11FEEE"/>
<!--            <span class="forgetCode" @click="identify">忘记密码？</span>-->
        </el-form-item>
        <div class="btnBox">
            <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
@@ -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
            }
        }
@@ -191,16 +202,13 @@
            // 存储 token 到浏览器缓存
            let res = await useLoginApi().signIn(state.ruleForm);
            if (res.data.code === 100) {
              console.log(res.data.data,'user')
                await userInfo.setUserInfos(res.data.data);
                Cookies.set('token', res.data.data.tk);
                Cookies.set('uid', res.data.data.uid);
                // Session.set('token', res.data.data.accessToken);
                // Session.set('projectId', '');
                // Session.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.password),)
                    localStorage.setItem('userPassword', Base64.encode(state.ruleForm.pwd),)
                } else {
                    localStorage.removeItem('userCode')
                    localStorage.removeItem('userPassword')
@@ -234,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',
@@ -327,15 +335,20 @@

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

    .el-input::v-deep .el-input__wrapper {
        height: 56px;
        border-radius: 4px;
    .el-input ::v-deep(.el-input__wrapper) {
        height: 48px;
        background-color: #0A3296;
        border-radius: 2px;
        padding: 0 30px;
        border: 1px solid rgba(17,254,238,.4);
        .el-input__inner{
          color: #fff;
        }
        &:focus-within {
            border: 1px solid #2053d7;
            border: 1px solid #11FEEE;
        }
    }
    @for $i from 1 through 4 {
@@ -347,9 +360,13 @@
            animation-delay: calc($i/10) + s;
        }
    }
    .codeDeal::v-deep .el-form-item__content {
    .codeDeal ::v-deep(.el-form-item__content) {
        display: flex;
        justify-content: space-between;
      .el-checkbox__inner{
        background-color: transparent;
        border: 1px solid #11FEEE;
      }

        .forgetCode {
            color: #2053d7;
@@ -375,20 +392,32 @@
        justify-content: center;
    }
    .login-content-submit {
        width: 55%;
        width: 100%;
        height: 56px;
        font-size: 18px;
        border-radius: 6px;
        border-radius: 28px;
        border: 1px solid #11FEEE;
        letter-spacing: 4px;
        font-weight: 300;
        margin-top: 15px;
        background-image: linear-gradient(to right,#545EF1,#6B8CF1);
        background-image: linear-gradient(to bottom,#0081C2,#003892,#0081C2);
        transition: 0.3s;
        box-shadow: 0 8px 30px rgba(88,101,241,.4);
        &:hover {
            letter-spacing: 6px;
            background-image: linear-gradient(to left,#545EF1,#6B8CF1);
            border: 2px solid #11FEEE;
            color: #11FEEE;
            font-weight: bolder;
          background-color: transparent;
            background-image: linear-gradient(to bottom,#003892,#003892,#003892);
        }
      &:active {
        letter-spacing: 6px;
        border: 2px solid #11FEEE;
        color: #11FEEE;
        font-weight: bolder;
        background-color: transparent;
        background-image: linear-gradient(to bottom,#003892,#003892,#003892);
      }
    }
}
</style>