新项目

马宇豪

2023-08-09 9300040f80721d230e2f7e296cb0d25a84b8067b

 src/views/loginPage/component/accountLogin.vue

@@ -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">
@@ -191,16 +191,12 @@
            // 存储 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);
                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')
@@ -327,15 +323,17 @@

<style scoped lang="scss">
.login-content-form {
    margin-top: 40px;
    width: 80%;
    margin-top: 4vh;
    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);
        &:focus-within {
            border: 1px solid #2053d7;
            border: 1px solid #11FEEE;
        }
    }
    @for $i from 1 through 4 {
@@ -347,9 +345,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 +377,31 @@
        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-image: linear-gradient(to bottom,#003892,#003892,#003892);
        }
      &:active {
        letter-spacing: 6px;
        border: 2px solid #11FEEE;
        color: #11FEEE;
        font-weight: bolder;
        background-image: linear-gradient(to bottom,#003892,#003892,#003892);
      }
    }
}
</style>