ll

liukangdong

2024-10-18 e6acb39a2475e211f2c1decc45a95c868239c25f

 admin/src/views/login.vue

@@ -6,39 +6,55 @@
        <div class="h3">智慧物流园区安消一体化系统</div>
      </div>
      <div class="form_wrap">
        <!-- <div class="tabs">
          <div class="tab active">
        <div class="tabs">
          <div class="tab" @click="tabClick('0')" :class="{ active: activeTab == '0' }">
            <div class="name">帐号登录</div>
            <div class="icon"></div>
          </div>
          <div class="tab">
          <div class="tab" @click="tabClick('1')" :class="{ active: activeTab == '1' }">
            <div class="name">手机登录</div>
            <div class="icon"></div>
          </div>
        </div> -->
        <div class="df_ac">
          <div class="label">帐号</div>
          <div class="line">
            <el-input v-model="username" placeholder="请输入帐号" maxlength="50" v-trim />
          </div>
        </div>
        <div class="df_ac">
          <div class="label">密码</div>
          <div class="line">
            <el-input v-model="password" placeholder="请输入密码" type="password" maxlength="30" show-password />
        <template v-if="activeTab == '0'">
          <div class="df_ac">
            <div class="label">帐号</div>
            <div class="line">
              <el-input v-model="username" placeholder="请输入帐号" maxlength="50" v-trim />
            </div>
          </div>
        </div>
          <div class="df_ac">
            <div class="label">密码</div>
            <div class="line">
              <el-input v-model="password" placeholder="请输入密码" type="password" maxlength="30" show-password />
            </div>
          </div>
          <div class="df_ac">
            <div class="label">验证码</div>
            <div class="line">
              <el-input v-model="captcha.value" placeholder="请输入验证码" maxlength="4" @keypress.enter.native="login" />
              <img v-if="!captcha.loading" class="code_image" :src="captcha.uri" @click="refreshCaptcha">
              <span v-else><i class="el-icon-loading"></i></span>
            </div>
          </div>
        </template>
        <template v-if="activeTab == '1'">
          <div class="df_ac">
            <div class="label">手机号</div>
            <div class="line">
              <el-input v-model="password" placeholder="请输入手机号" type="password" maxlength="30" show-password />
            </div>
          </div>
          <div class="df_ac">
            <div class="label">验证码</div>
            <div class="line">
              <el-input v-model="captcha.value" placeholder="请输入验证码" maxlength="4" @keypress.enter.native="login" />
              <span class="code_get" @click="getCode">获取验证码</span>
            </div>
          </div>
        </template>

        <div class="df_ac">
          <div class="label">验证码</div>
          <div class="line">
            <el-input v-model="captcha.value" placeholder="请输入验证码" maxlength="4" @keypress.enter.native="login" />
            <img v-if="!captcha.loading" class="code_image" :src="captcha.uri" @click="refreshCaptcha">
            <span v-else><i class="el-icon-loading"></i></span>
          </div>
        </div>
        <el-button :loading="loading" type="primary" class="login_btn"
          @click.native.prevent="login">立即登录</el-button>
        <el-button :loading="loading" type="primary" class="login_btn" @click.native.prevent="login">立即登录</el-button>
        <div class="btn_wrap">
          <el-checkbox v-model="isRemPsd">
            <span style="font-size: 13px; font-weight: 400" class="placeholder9">记住密码</span>
@@ -66,6 +82,7 @@
      isRemPsd: false,
      username: '',
      password: '',
      activeTab: '1',
      // 验证码
      captcha: {
        loading: false,
@@ -120,6 +137,13 @@
        .finally(() => {
          this.loading = false
        })
    },
    getCode() {
      console.log('getCode');
      
    },
    tabClick(val) {
      this.activeTab = val
    },
    // 刷新验证码
    refreshCaptcha() {
@@ -221,7 +245,7 @@
      background-color: #fff;
      box-sizing: border-box;
      /* padding: 50px 80px 20px; */
      padding: 80px 80px 20px;
      padding: 50px 80px 20px;
      position: relative;

      .tabs {
@@ -236,6 +260,7 @@
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          .icon {
            width: 36px;
@@ -287,10 +312,11 @@
        margin-bottom: 17px;
        display: flex;
        width: 100%;

        align-items: center;
        position: relative;
        .el-input {
          height: 40px;

          flex: 1;
          // font-size: 14px;
          ::v-deep .el-input__inner {
            height: 40px !important;
@@ -301,6 +327,17 @@
          width: 100px;
          margin-left: 10px;
        }
        .code_get{
          position: absolute;
          top: 10px;
          right: 10px;
          font-size: 14px;
          width: 72px;
          z-index: 11;
          margin-left: 10px;
          cursor: pointer;
          color: $primary-color;
        }
      }

      .forget {