hz/ebiz-ai-knowledge-manage
1
0
Fork 0
mirror of http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git synced 2025-12-06 17:36:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

layout(login): 优化登录页面布局

Browse Source 
- 使用 flex 布局实现居中对齐
-调整登录表单的位置和样式
- 优化代码结构，提高可读性
This commit is contained in:
陈昱达
2025-05-12 16:15:38 +08:00
parent 7a6989d2e9
commit f353be8a7d
1 changed files with 73 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/views/app/login/index.vue
View File

@@ -1,70 +1,76 @@
<template>
<div class="login-container">
<div class="login-form" style="padding: 39px 26px;">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
auto-complete="on"
>
<div class="title-container flex">
<img :src="xing" alt="" style="width: 25px;height: 23px" />
<h3 class="title ml5">欢迎登录</h3>
<div class="login-container ">
<div
class="flex align-items-c justify-content-b"
style="width:100%;height: 100vh"
>
<p></p>
<div class="login-form" style="padding: 39px 26px;margin-right: 30vh">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
auto-complete="on"
>
<div class="title-container flex">
<img :src="xing" alt="" style="width: 25px;height: 23px" />
<h3 class="title ml5">欢迎登录</h3>
</div>
<el-form-item prop="userName" class="login-input" label="账号ID">
<!-- <span class="svg-container">-->
<!-- <svg-icon icon-class="user" />-->
<!-- </span>-->
<el-input
ref="userName"
v-model="loginForm.userName"
placeholder="请输入用户名"
name="userName"
type="text"
tabindex="1"
auto-complete="on"
/>
</el-form-item>
<el-form-item prop="password" class="login-input">
<!-- <span class="svg-container">-->
<!-- <svg-icon icon-class="password" />-->
<!-- </span>-->
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="请输入密码"
name="password"
tabindex="2"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<i v-if="passwordType === 'password'" class="el-icon-view"></i>
<i
v-else
class="iconfont icon-yanjingxianshi"
style="font-size: 20px"
></i>
<!-- <svg-icon-->
<!-- :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"-->
<!-- />-->
</span>
</el-form-item>
</el-form>
<div style="height: 127px"></div>
<div>
<el-button
:loading="loading"
type="primary"
style="width:100%;margin-bottom: 20px;border-radius: 8px"
:style="buttonStyle"
@click.native.prevent="handleLogin"
>登录 <i class="iconfont icon-chuansuoyou"></i
></el-button>
</div>
<el-form-item prop="userName" class="login-input" label="账号ID">
<!-- <span class="svg-container">-->
<!-- <svg-icon icon-class="user" />-->
<!-- </span>-->
<el-input
ref="userName"
v-model="loginForm.userName"
placeholder="请输入用户名"
name="userName"
type="text"
tabindex="1"
auto-complete="on"
/>
</el-form-item>
<el-form-item prop="password" class="login-input">
<!-- <span class="svg-container">-->
<!-- <svg-icon icon-class="password" />-->
<!-- </span>-->
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="请输入密码"
name="password"
tabindex="2"
auto-complete="on"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<i v-if="passwordType === 'password'" class="el-icon-view"></i>
<i
v-else
class="iconfont icon-yanjingxianshi"
style="font-size: 20px"
></i>
<!-- <svg-icon-->
<!-- :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"-->
<!-- />-->
</span>
</el-form-item>
</el-form>
<div style="height: 127px"></div>
<div>
<el-button
:loading="loading"
type="primary"
style="width:100%;margin-bottom: 20px;border-radius: 8px"
:style="buttonStyle"
@click.native.prevent="handleLogin"
>登录 <i class="iconfont icon-chuansuoyou"></i
></el-button>
</div>
</div>
@@ -273,6 +279,7 @@ $light_gray: #eee;
width: 100%;
background-color: #f0f4fa;
overflow: hidden;
justify-content: flex-end;
& .login-form {
border: 2px solid #fff;
@@ -288,7 +295,7 @@ $light_gray: #eee;
top: 15vh;
right: 25vh;
border-radius: 8px;
position: fixed;
//position: fixed;
}
.tips {