feat: 提交登录功能

chenyao

2025-03-29 0f48a5c60cd98763d5c0f3e08bb2afd87a2507ac

feat: 提交登录功能

 src/assets/images/login/bg.png

 src/assets/images/login/big-title.png

 src/assets/images/login/left-logo.png

 src/assets/images/login/login-btn.png

 src/assets/images/login/password.png

 src/assets/images/login/right-login-info.png

 src/assets/images/login/username.png

 src/page/login/index.vue

@@ -1,43 +1,14 @@
<template>
  <div class="login-container" @keyup.enter="handleLogin">
    <div class="login-time">
    <!-- <div class="login-time">
      {{ time }}
    </div> -->
    <div class="login-header">
      <div class="title">中图智飞低空智能感知网平台</div>
    </div>
    <div class="login-weaper">
      <div class="login-left animate__animated animate__fadeInLeft">
        <img class="img" src="/img/logo.png" alt="" />
        <p class="title">{{ login.info }}</p>
      </div>
      <div class="login-border animate__animated animate__fadeInRight">
        <div class="login-main">
          <p class="login-title">
            {{ $t('login.title') }}{{ website.title }}
            <top-lang></top-lang>
          </p>
          <userLogin v-if="activeName === 'user'"></userLogin>
          <!-- <codeLogin v-else-if="activeName === 'code'"></codeLogin>
          <thirdLogin v-else-if="activeName === 'third'"></thirdLogin>
          <registerLogin v-else-if="activeName === 'register'"></registerLogin>
          <div class="login-menu">
            <el-link href="#" @click.stop="activeName = 'user'">{{
              $t('login.userLogin')
            }}</el-link>
            <el-link href="#" @click.stop="activeName = 'code'">{{
              $t('login.phoneLogin')
            }}</el-link>
            <el-link href="#" @click.stop="activeName = 'third'">{{
              $t('login.thirdLogin')
            }}</el-link>
            <el-link
              :href="
                website.oauth2.ssoBaseUrl + website.oauth2.ssoAuthUrl + website.oauth2.redirectUri
              "
              >{{ $t('login.ssoLogin') }}</el-link
            >
          </div> -->
        </div>
      </div>
    </div>
    <div class="login-left-title-new">中国图强 智领飞跃</div>
    <div class="login-left-new"></div>
    <userLogin v-if="activeName === 'user'"></userLogin>
  </div>
</template>
<script>

 src/page/login/userlogin.vue

@@ -1,4 +1,6 @@
<template>
  <div class="login-right-new">
    <div class="user-login">用户登录</div>
  <el-form
    class="login-form"
    status-icon
@@ -7,30 +9,20 @@
    :model="loginForm"
    label-width="0"
  >
    <!-- <el-form-item v-if="tenantMode" prop="tenantId">
      <el-input
        @keyup.enter="handleLogin"
        v-model="loginForm.tenantId"
        auto-complete="off"
        :placeholder="$t('login.tenantId')"
      >
        <template #prefix>
          <i class="icon-quanxian" />
        </template>
      </el-input>
    </el-form-item> -->
    <el-form-item prop="username">
  <div class="username">
    <div>
      <el-form-item prop="username">
      <el-input
        @keyup.enter="handleLogin"
        v-model="loginForm.username"
        autocomplete="off"
        :placeholder="$t('login.username')"
      >
        <template #prefix>
          <i class="icon-yonghu" />
        </template>
      </el-input>
    </el-form-item>
    </div>
  </div>
  <div class="password">
    <el-form-item prop="password">
      <el-input
        @keyup.enter="handleLogin"
@@ -39,47 +31,27 @@
        autocomplete="off"
        :placeholder="$t('login.password')"
      >
      <template #suffix>
        <!-- <template #suffix>
          <i class="el-icon-view el-input__icon" @click="showPassword" />
        </template>
        <template #prefix>
          <i class="icon-mima" />
        </template>
        </template> -->
      </el-input>
    </el-form-item>
    <!-- <el-form-item prop="code" class="login-code" v-if="captchaMode">
      <el-input
        @keyup.enter="handleLogin"
        v-model="loginForm.code"
        auto-complete="off"
        :placeholder="$t('login.code')"
      >
        <template #prefix>
          <i class="icon-yanzhengma"></i>
        </template>
        <template #append>
          <div class="login-code-box">
            <img :src="loginForm.image" class="login-code-img" @click="refreshCode" />
          </div>
        </template>
      </el-input>
    </el-form-item> -->
  </div>
  <div class="forgot-password">忘记密码</div>
  <div class="">
    <el-form-item>
      <el-button type="primary" @click.prevent="handleLogin" class="login-submit"
        >{{ $t('login.submit') }}
      <el-button type="primary" @click.prevent="handleLogin" class="login-submit">
        {{ $t('login.submit') }}
      </el-button>
      <!-- <el-button
        v-if="this.registerMode"
        type="danger"
        @click.prevent="handleRegister"
        class="register-submit"
        >{{ $t('login.register') }}
      </el-button> -->
    </el-form-item>
    <!-- <el-dialog title="请选择身份信息后登录" append-to-body v-model="userBox" width="400px">
      <avue-form :option="userOption" v-model="userForm" @submit="submitLogin" />
    </el-dialog> -->
    </div>
  </el-form>
 
    
  </div>
</template>

<script>
@@ -296,4 +268,51 @@
};
</script>

<style></style>
<style lang="scss" scoped>
.login-right-new {
  .login-form {
    :deep(.el-form-item) {
      width: 300px;
      margin: 15px 0px 0px 86px;
    }

    :deep(.el-input) {
      width: 100%;
      .el-input__wrapper {
        background: rgba(17, 64, 136, 0.1);
        box-shadow: 0 0 0 1px rgba(17, 64, 136, 0.2);
        height: 42px;
      }
      
      .el-input__inner {
        color: #fff;
        &::placeholder {
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    :deep(.el-button) {
      position: absolute;
      width: 390px;
      height: 48px;
      top: 320px;
      left: -26px;
      background: linear-gradient( 270deg, rgba(103,209,251,0.8) 0%, rgba(0,82,248,0.58) 100%);
      box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.3);
      border: none;
      font-size: 16px;
      
      &:hover {
        background: linear-gradient(270deg, #0070FF 0%, rgba(0,112,255,0.5) 100%);
      }
    }
  }

  .username, .password {
    margin-bottom: 20px;
  }
  .login-click {
    margin-top: 30px;
  }
}
</style>

 src/router/page/index.js

@@ -5,7 +5,7 @@
    path: '/login',
    name: '登录页',
    component: () =>
      Store.getters.isMacOs ? import('@/mac/login.vue') : import('@/page/login/index.vue'),
      import('@/page/login/index.vue'),
    meta: {
      keepAlive: true,
      isTab: false,
@@ -16,7 +16,7 @@
    path: '/oauth/redirect/:source',
    name: '第三方登录',
    component: () =>
      Store.getters.isMacOs ? import('@/mac/login.vue') : import('@/page/login/index.vue'),
      import('@/page/login/index.vue'),
    meta: {
      keepAlive: true,
      isTab: false,
@@ -27,7 +27,7 @@
    path: '/lock',
    name: '锁屏页',
    component: () =>
      Store.getters.isMacOs ? import('@/mac/lock.vue') : import('@/page/lock/index.vue'),
      import('@/page/lock/index.vue'),
    meta: {
      keepAlive: true,
      isTab: false,

 src/styles/login.scss

@@ -1,26 +1,148 @@
.login-container {
  background: url('../assets/images/login/bg.png') no-repeat center / 100% 100%;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  // background-color: #fff;
  background: linear-gradient(110deg, rgb(2, 40, 85) 0%, rgb(44, 119, 241) 50%, rgb(255,255,255) 50%, rgb(240,240,240) 100%);
  overflow: hidden;
  &::before{
    // content:' ';
  // position: relative;
  // display: flex;
  // align-items: center;
  // width: 100%;
  // height: 100%;
  // // background-color: #fff;
  // background: linear-gradient(110deg, rgb(2, 40, 85) 0%, rgb(44, 119, 241) 50%, rgb(255,255,255) 50%, rgb(240,240,240) 100%);
  // overflow: hidden;
  // &::before{
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   margin-left: -48%;
  //   background-image: url(/img/login-bg.svg);
  //   background-position: 100%;
  //   background-repeat: no-repeat;
  //   background-size: auto 100%;
  // }
}
.login-header {
  background: url('../assets/images/login/big-title.png') no-repeat center / 100% 100%;
  width: 100%;
  height: 102px;
  position: relative;
  .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -48%;
    background-image: url(/img/login-bg.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    left: 637px;
    top: 22px;
    width: 646px;
    height: 58px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 54px;
    line-height: 58px;
    // text-shadow: 0px 2px 6px #0C3D79;
    text-align: center;
    font-style: normal;
    text-transform: none;
    color: #fff;
    // background: linear-gradient(90deg, #FFFFFF 0%, #B2D5FF 100%);
  }
}
.login-left-title-new {
  position: absolute;
  left: 147px;
  top: 263px;
  width: 926px;
  height: 42px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 28px;
  line-height: 33px;
  letter-spacing: 30px;
  // text-shadow: 0px 4px 6px rgba(0,0,0,0.72);
  color: #fff;
  text-align: center;
  font-style: normal;
  text-transform: none;
  // background: linear-gradient(90.00000000000004deg, #FFFFFF 0%, #E3FEFF 63%, #88BAFF 100%);
}
.login-left-new {
  position: absolute;
  top: 334px;
  left: 147px;
  width: 926px;
  height: 540px;
  background: url('../assets/images/login/left-logo.png') no-repeat center / 100% 100%;
}

.login-right-new {
  position: absolute;
  top: 305px;
  right: 291px;
  width: 488px;
  height: 508px;
  background: url('../assets/images/login/right-login-info.png') no-repeat center / 100% 100%;
  .user-login {
    position: absolute;
    top: 72px;
    left: 180px;
    width: 118px;
    height: 26px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 32px;
    // color: #D1E0F9;
    color: #fff;
    line-height: 26px;
    text-align: center;
  }
  .username {
    position: absolute;
    top: 127px;
    left: 46px;
    width: 394px;
    height: 72px;
    background: url('../assets/images/login/username.png') no-repeat center / 100% 100%;
    // :deep(.el-form-item) {
    //   width: 120px;
    // }
  }
  .password {
    position: absolute;
    top: 208px;
    left: 46px;
    width: 394px;
    height: 72px;
    background: url('../assets/images/login/password.png') no-repeat center / 100% 100%;
  }
  .forgot-password {
    position: absolute;
    width: 64px;
    height: 24px;
    top: 289px;
    right: 58px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 16px;
    color: #D1E0F9;
    line-height: 19px;
  }
  .login-click {
    position: absolute;
    bottom: 106px;
    left: 44px;
    width: 391px;
    height: 61px;
    background: url('../assets/images/login/login-btn.png') no-repeat center / 100% 100%;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 24px;
    line-height: 50px;
    text-align: center;
    color: #fff;
  }
}


.login-weaper {
  margin: 0 auto;
  width:100%;
@@ -112,9 +234,9 @@
  letter-spacing: 2px;
  font-weight: 300;
  cursor: pointer;
  margin-top: 30px;
  // margin-top: 30px;
  transition: 0.25s;
  background-color: #2C77F1;
  // background-color: #2C77F1;
}
.register-submit {
  width: 100%;