forked from drone/command-center-dashboard

罗广辉
2025-03-29 dc6e82b8df8264b633a6b4e525cef0430d284555
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>