登录页

wente

2023-12-15 e5c2470a5091747762c147b910968cc202dede57

 web/src/views/pages/login.vue

@@ -4,15 +4,15 @@
    <div class="aui-content__wrapper">
      <div class="clear"></div>
      <main class="aui-content">
        <img class="login-left-bg" src="../../assets/img/vis-map2.png"/>
<!--        <img class="login-left-bg" src="../../assets/img/vis-map2.png"/>-->
        <div class="login-content">
          <div class="login-header">
            <!--<h3 class="login-title">{{ $t('login.title') }}</h3>-->
          </div>
<!--          <div class="login-header">-->
<!--            &lt;!&ndash;<h3 class="login-title">{{ $t('login.title') }}</h3>&ndash;&gt;-->
<!--          </div>-->
          <div class="login-body">
            <h3 class="login-title">{{ $t('login.title') }}</h3>
<!--            <h3 class="login-title">{{ $t('login.title') }}</h3>-->
            <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="formSubmit()" status-icon>
              <zt-form-item class="login-form-margin" prop="username" rules="required">
              <zt-form-item class="login-form-margin" style="margin-top:35px" prop="username" rules="required">
                <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
@@ -26,6 +26,11 @@
                </span>
                </el-input>
              </zt-form-item>
<!--              <zt-form-item class="login-form-margin" prop="password" rules="required">-->
<!--                <span slot="prefix" class="el-input__icon">-->
<!--                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>-->
<!--                </span>-->
<!--              </zt-form-item>-->
              <zt-form-item prop="captcha" rules="required" v-if="$config.IS_LOGIN_NEED_CAPTURE">
                <el-row :gutter="20">
                  <el-col :span="14">
@@ -41,11 +46,13 @@
                </el-row>
              </zt-form-item>
              <el-form-item class="login-form-margin">
                <el-button style="margin-bottom:0;" type="primary" @click="formSubmit()">{{
                  $t('login.clickTitle') }}
                <el-button class="btn" style="margin-bottom:0;float: left" type="primary" @click="changePassword()">修改密码</el-button>
                <el-button class="btn" style="margin-bottom:0;float: right" @click="register">用户注册
                </el-button>
                <el-button style="margin-bottom:0;" type="primary" @click="changePassword()">修改密码</el-button>
                <el-button style="margin-bottom:0;" @click="register">用户注册
              </el-form-item>
              <el-form-item class="login-form-margin">
                <el-button class="btn" style="margin-bottom:0;width: 100%" type="primary" @click="formSubmit()">{{
                  $t('login.clickTitle') }}
                </el-button>
              </el-form-item>
            </el-form>
@@ -53,11 +60,11 @@
<!--            <UserChangePassword ref="changePassword"/>-->
          </div>
        </div>
        <div class="login-time">
          <span v-text="day"></span>
          <br/>
          <span v-text="time"></span>
        </div>
<!--        <div class="login-time">-->
<!--          <span v-text="day"></span>-->
<!--          <br/>-->
<!--          <span v-text="time"></span>-->
<!--        </div>-->
      </main>
    </div>
  </div>
@@ -242,16 +249,15 @@
</script>
<style>
  .login__h2 {
    float: left;
    margin: 0;
    margin-left: 35.5%;
    position: absolute;
    left:50%;
    top:3%;
    transform: translateX(-50%);
    color: rgba(123, 224, 244, 1);
    font-size: 40px;
    margin-top: 20px;
    font-weight: 400;
    letter-spacing: 8px;
    text-align: center;
    margin-bottom: -80px;
  }

  .clear {
@@ -279,11 +285,15 @@

  .login-content {
    position: absolute;
    border-radius: 20px;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 25%;
    border: 15px solid transparent;
    border-image: url(../../assets/img/page-border.png) 20 stretch;
    right: 7%;
    top: 20%;
    background:#ecf0f3;
    box-shadow: 0 3px 6px 0 rgb(72 119 232 / 14%);
    //border: 15px solid transparent;
    //border-image: url(../../assets/img/page-border.png) 20 stretch;
  }

  .login-h6 {
@@ -292,27 +302,65 @@
    margin-top: -6px;
    margin-bottom: 25px;
  }

  .login-body .el-input__inner {
  .login-body {
    position: relative;
  }
  .login-body .el-input{
    border-radius: 3px;
    height: 60px;
    font-size: 17px;
    color: rgba(123, 224, 244, 1);
    background: transparent;
    border: 1px solid rgba(123, 224, 244, 0.3);
    color: #000;
    background-color: #fff !important;
    outline: none; /* 移除聚焦时的外边框样式 */
    border: none; /* 移除默认的边框样式 */
    box-shadow: 20px 20px 30px rgba(0,0,0,0.2),
    -20px -20px 30px rgba(255,255,255,1);
    transition: all 0.4s ease-out;
  }
  .login-title{
    box-shadow: 20px 20px 30px rgba(0,0,0,0.2),
    -20px -20px 30px rgba(255,255,255,1);
    transition: all 0.4s ease-out;
  }
  .login-body .el-input:hover{
    box-shadow:
      0 0 0 rgba(0,0,0,0.2),
      0 0 0 rgba(255,255,255,0.8),
      inset 10px 10px 20px rgba(0,0,0,0.1),
      inset -10px -10px 20px rgba(255,255,255,1);
  }
  .login-body .el-input__inner{
    font-size: 18px;
    height: inherit;
    transition: all 0.4s ease-out;
    border: none; /* 移除默认的边框样式 */
  }
  .login-body .el-input__inner:hover{
    font-size: 16px;
  }

  .aui-page__login__border .el-input {
    border: 1px solid rgba(123, 224, 244, 0.3);
    border-radius: 4px;
  .login-form-margin .btn{
    border: none !important;
    box-shadow: 20px 20px 30px rgba(0,0,0,0.2),
    -20px -20px 30px rgba(255,255,255,1);
    transition: all 0.4s ease-out;
  }

  .aui-page__login__border .el-input:hover,
  .aui-page__login__border .el-input:active {
    border-radius: 4px;
    border: 1px solid rgba(123, 224, 244, 1);
  .login-form-margin .btn:hover{
    box-shadow:
      0 0 0 rgba(0,0,0,0.2),
      0 0 0 rgba(255,255,255,0.8),
      inset 10px 10px 20px rgba(0,0,0,0.1),
      inset -10px -10px 20px rgba(255,255,255,1);
  }

  input:-webkit-autofill ,
  textarea:-webkit-autofill,
  select:-webkit-autofill{
    -webkit-text-fill-color: #000 !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent;
    font-size: 18px;
    background-image: none;
    transition: all 0.4s ease-out;
  }
  .aui-page__login__border .el-form-item {
    margin-bottom: 35px;
  }
@@ -321,9 +369,6 @@
    height: 50px;
  }

  .aui-page__login__border .el-form-item__content .el-input__inner {
    background: transparent !important;;
  }

  .aui-page__login__border .login-body .el-input__prefix .el-input__icon {
    font-size: 25px;
@@ -355,13 +400,4 @@
    color: rgba(0, 153, 255, 1)
  }

  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: rgba(123, 224, 244, 1) !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent;
    background-image: none;
    transition: background-color 50000s ease-in-out 5000s;
  }
</style>