From 5a086e68ed63077bbb3af6d2eb179d380d8805cf Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期五, 01 三月 2024 09:35:51 +0800
Subject: [PATCH] 登录页调整
---
src/views/login.vue | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 153 insertions(+), 13 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index 293b51f..2cc78ce 100644
--- a/src/views/login.vue
+++ b/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>
--
Gitblit v1.8.0