新项目

马宇豪

2023-08-09 9300040f80721d230e2f7e296cb0d25a84b8067b

新项目

 .env.development

@@ -1,5 +1,5 @@
# 本地环境
ENV = 'development'

VITE_API_URL = 'http://121.239.169.27:16070'
VITE_API_URL = 'http://121.239.169.41:9091'
#线上正式环境接口地址

 src/assets/loginPage/login-bg.jpg

 src/assets/loginPage/login_icon_password.png

 src/assets/loginPage/login_icon_user.png

 src/assets/loginPage/panel-bg.png

 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>

 src/views/loginPage/loginPage.vue

@@ -1,16 +1,12 @@
<template>
    <div class="login-container">
        <div class="loginContent">
          <div class="welcc">广域特殊气体泄露在线监测预警系统</div>
            <div class="loginPanel">
                <div class="welcc">科学研究实验安全风险评估系统</div>
                <div class="loginGroup">
                  <div class="loginPic">
                    <img src="../../assets/loginPage/login-pic.png">
                  </div>
                  <div style="width: 45%">
                    <el-tabs v-model="tabsActiveName">
                  <div style="width: 100%">
                    <div style="width:100%;text-align: center;font-size: 22px;color: #11FEEE">欢迎登录</div>
                      <AccountLogin />
                    </el-tabs>
                  </div>
                </div>
            </div>
@@ -30,7 +26,6 @@

// 定义接口来定义对象的类型
interface LoginState {
    tabsActiveName: string;
    isScan: boolean;
}

@@ -41,7 +36,6 @@
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const state = reactive<LoginState>({
            tabsActiveName: 'account',
            isScan: false
        });
        // 获取布局配置信息
@@ -64,60 +58,13 @@

<style scoped lang="scss">
    @media screen and (min-width: 1366px){
        .loginContent{
            display: flex;
            justify-content: space-around;
            padding: 0 200px;
        }
        .loginPic{
          width: 55%;
          height: 100%;
          position: relative;

          img{
            width: 103%;
            height: auto;
            position: absolute;
            bottom: -180px;
            right: 15%;
            margin-top: 40px;
          }
        }
    }
    @media screen and (min-width: 1024px) and (max-width: 1366px){
      .loginPic{
        width: 55%;
        height: 100%;
        position: relative;

        img{
          width: 103%;
          height: auto;
          position: absolute;
          bottom: -80px;
          right: 0;
        }
      }
    }
    @media screen and (min-width: 960px) and (max-width: 1024px){
        .loginContent{
            display: flex;
            justify-content: space-between;
            padding: 0 40px;
        }
        .loginPic{
          width: 55%;
          height: 100%;
          position: relative;

          img{
            width: 103%;
            height: auto;
            position: absolute;
            bottom: -80px;
            right: 0;
          }
        }
    }
.login-container {
    width: 100%;
@@ -144,34 +91,31 @@
        }
    }
    .loginContent {
        width: 100%;
        width: 32vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        margin-top: -10vh;
        .welcc {
          font-size: 40px;
          font-family: 'PingFang SC';
          text-align: center;
          font-weight: 900;
          color: #11FEEE;
          white-space: nowrap;
          z-index: 9999;
          margin-bottom: 3vh;
        }
        .loginPanel {
            width: 85%;
            min-height: 56%;
            padding: 80px 40px;
            width: 100%;
            padding: 4vh;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            background: #fff;
            min-width: 450px;
            border-radius: 15px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            .welcc {
              font-size: 52px;
              font-family: 'PingFang SC';
              text-align: right;
              font-weight: 900;
              color: #485BD4;
              letter-spacing: 6px;
              white-space: nowrap;
              position: relative;
              z-index: 9999;
              text-shadow: 0 3px 5px rgba(72,91,212,.4);
            }
            align-items: center;
            background: url("../../assets/loginPage/panel-bg.png") no-repeat center;
            background-size: 100% 100%;

            :deep(.loginGroup){
              width: 100%;