登录页调整

odc.xiaohui

2024-03-01 5a086e68ed63077bbb3af6d2eb179d380d8805cf

登录页调整

 src/assets/img/dlbj.png

 src/assets/img/zcnr.png

 src/views/login.vue

@@ -1,18 +1,158 @@
<script setup lang="ts">
import router from "@/router";

const login = () => {
        console.log('登录')
        router.push('/daoAnOffice')
}
</script>

<template>
<div>
  <el-button type="primary" @click="login">登录</el-button>
</div>
  <div class="login">
   <div class="login-title">
     <div class="login-title-left">
       <img src="@/assets/img/zcnr.png" alt="" style="height: 595.8px">
     </div>
      <div class="login-form-t">
        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" label-position="top">
          <h3 class="title">都江堰四办合一</h3>
          <el-form-item prop="tenantId">
          </el-form-item>
          <el-form-item prop="username" label="账号名称" label-width="280px">
            <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
              <template #prefix> <el-icon><UserFilled /></el-icon></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" label="账号密码" label-width="280px" style="margin: 50px 0">
            <el-input v-model="loginForm.password" type="password" show-password size="large" auto-complete="off" placeholder="密码" @keyup.enter="handleLogin">
              <template #prefix><el-icon><Lock /></el-icon></template>
            </el-input>
          </el-form-item>


          <el-form-item style="width:100%;">
            <el-button size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
              <span >立即登录</span>

            </el-button>
            <p style="text-align: center;font-size: 12px;color: #73749F;margin-top: 35px;width: 100%">为保护您的数据安全，请再次确认身份信息</p>
          </el-form-item>
        </el-form>
      </div>
   </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>版权所有@ 2024 都江堰四办合一</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
<script setup lang="ts">
import router from "@/router";
import {reactive} from "vue";
import {Lock, Search, UserFilled} from "@element-plus/icons-vue";

const loginForm = reactive<LoginData>({
  tenantId: '000000',
  username: '',
  password: '',
  rememberMe: false,
  code: '',
  uuid: ''
} as LoginData);
const loginRules: ElFormRules = {
  username: [{  trigger: 'blur', message: '请输入您的账号' }],
  password: [{  trigger: 'blur', message: '请输入您的密码' }],
  code: [{ required: false, trigger: 'change', message: '请输入验证码' }]
};



const handleLogin= () => {
  router.push('./daoAnOffice')
}



</script>

<style lang="scss" scoped>
.login {
  height: 1080px;
  width: 3840px;
  display: flex;
  justify-content: center;
  align-items: center;
  //height: 100%;
  background-image: url("../assets/img/dlbj.png");
  background-size: cover;
  .login-title{
    width: 1158.6px;
    height: 595.8px;
    display: flex;
    .login-title-left{
      height: 595.8px;
    }
    .login-form-t{
      height: 595.8px;
    }
  }
}

.title {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 34px;
  color: #2882FE;
  line-height: 14px;
  margin-bottom: 85px;
}

.login-form {
  height: 100%;
  border-radius: 6px;
  background: #ffffff;
  width: 561px;
  padding: 62px;

  .el-input {
    height: 40px;

    input {
      height: 40px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  font-family: PingFang SC;
  height: 40px;
  line-height: 40px;
  position: absolute;
  bottom: -160px;
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  color: #80ADF8;
}

.login-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>