From e67f248dea271168907993f8a7f49eae0fb0f80d Mon Sep 17 00:00:00 2001
From: TanYibin <5491541@qq.com>
Date: Sat, 14 Sep 2024 16:25:24 +0800
Subject: [PATCH] 首页样式调整
---
ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue | 109 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------
1 file changed, 62 insertions(+), 47 deletions(-)
diff --git a/ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue b/ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
index e018629..2472dc9 100644
--- a/ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
+++ b/ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
@@ -15,33 +15,35 @@
</div>
</div>
<div class="right-div">
- <a-form-model ref="form" :model="model" :rules="validatorRules">
- <div id="welcome">欢迎来到华恒仓储管理系统 ！</div>
- <a-form-model-item required prop="username">
- <a-input id="name" v-model="model.username" size="default" autocomplete="off" placeholder="请输入帐户名 / admin" @blur="getWarehouse">
- </a-input>
- </a-form-model-item>
- <a-form-model-item required prop="password">
- <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword" placeholder="请输入密码">
- </a-input>
- </a-form-model-item>
- <a-form-model-item prop="warehouseCode">
- <a-select
- show-search
- placeholder="请选择仓库"
- option-filter-prop="label"
- v-model="model.warehouseCode" id="warehouseCode">
- <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{
- item.name
- }}
- </a-select-option>
- </a-select>
- </a-form-model-item>
- <a-form-item>
- <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button"
- :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登 录</a-button>
- </a-form-item>
- </a-form-model>
+ <div class="right-login">
+ <a-form-model ref="form" :model="model" :rules="validatorRules">
+ <div id="welcome">欢迎来到华恒仓储管理系统</div>
+ <a-form-model-item required prop="username">
+ <a-input id="name" v-model="model.username" size="default" autocomplete="off" placeholder="请输入帐户名 / admin" @blur="getWarehouse">
+ </a-input>
+ </a-form-model-item>
+ <a-form-model-item required prop="password">
+ <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword" placeholder="请输入密码">
+ </a-input>
+ </a-form-model-item>
+ <a-form-model-item prop="warehouseCode">
+ <a-select
+ show-search
+ placeholder="请选择仓库"
+ option-filter-prop="label"
+ v-model="model.warehouseCode" id="warehouseCode">
+ <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{
+ item.name
+ }}
+ </a-select-option>
+ </a-select>
+ </a-form-model-item>
+ <a-form-item>
+ <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button"
+ :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登 录</a-button>
+ </a-form-item>
+ </a-form-model>
+ </div>
</div>
<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
<login-select-tenant ref="loginSelect" @success="loginSelectOk" ></login-select-tenant>
@@ -319,23 +321,35 @@ export default {
//}
.left-div {
- flex: 0 0 68%; /* 左侧div宽度为容器的70% */
- width: 68%;
+ flex: 0 0 65%; /* 左侧div宽度为容器的70% */
+ width: 65%;
+ height: 100%; /* 使 div 占满父容器高度 */
}
.right-div {
+ flex: 0 0 35%;
+ width: 35%;
+ height: 100%; /* 使 div 占满父容器高度 */
display: flex;
- flex: 0 0 32%;
- width: 32%;
+ justify-content: center; /* 水平居中 */
+ align-items: center; /* 垂直居中 */
+}
+
+.right-login {
background-color: #fafafa;
- display: flex; /* 使用 flex 布局 */
- flex-direction: column; /* 垂直排列子元素 */
- justify-content: center; /* 垂直居中 */
- align-items: center; /* 水平居中 */
- height: 100%; /* 使 div 占满父容器高度 */
+ border-radius: 0.5vw; /* 设置圆角半径 */
+ width: 80%;
+ height: 60%; /* 使 div 占满父容器高度 */
+ display: flex; /* 使用 flexbox 进行子元素布局 */
+ flex-direction: column; /* 垂直排列子元素 */
+ justify-content: center; /* 垂直居中子元素 */
+ align-items: center; /* 水平居中子元素 */
+ box-shadow: 1vw 1vw 1vw #c3c3c3;
+ border: 0.1vw solid #ccc; /* 增加边框线 */
}
+
#logo {
- height: 8%;
+ height: 10%;
width: 100%;
//background-color: red;
//margin-left: 150px;
@@ -345,12 +359,13 @@ export default {
// margin-top: 0;
}
#backgroundImg {
- height: 82%;
+ height: 82%; /* 使容器充满视口高度 */
display: flex;
- justify-content: center;
- align-items: center;
+ justify-content: center; /* 水平居中 */
+ align-items: center; /* 垂直居中 */
+ // background-color: #fafafa; /* 可选：背景颜色 */
.imge {
- height: 75%;
+ height: 85%;
background-size: contain;
background-repeat: no-repeat;
position: relative;
@@ -419,13 +434,13 @@ export default {
width: 100%; /* 宽度 100% */
}
#welcome {
- margin-top: 2vw;
+ margin-top: 2.2vw;
color: #333333;
font-size: 1.5vw;
align-content: end;
font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
text-align: center;
- margin-left: 1vw;
+ margin-left: 0vw;
margin-bottom: 3vw;
}
#name {
@@ -444,7 +459,7 @@ export default {
background-size: 1.6vw 1.6vw;
font-size: 1vw;
color: #333333;
- box-shadow: 1vw 1vw 1vw #c3c3c3;
+ // box-shadow: 1vw 1vw 1vw #c3c3c3;
}
::v-deep .ant-select-selection {
border-width: 0.1vw;
@@ -460,7 +475,7 @@ export default {
background-size: 1.6vw 1.6vw;
font-size: 1vw;
color: #333333;
- box-shadow: 1vw 1vw 1vw #c3c3c3;
+ // box-shadow: 1vw 1vw 1vw #c3c3c3;
}
#name::after {
@@ -492,7 +507,7 @@ export default {
background-size: 1.6vw 1.6vw;
font-size: 1vw;
color: #333333;
- box-shadow: 1vw 1vw 1vw #c3c3c3;
+ // box-shadow: 1vw 1vw 1vw #c3c3c3;
}
#warehouseCode {
border-color: #ebf3fd;
@@ -580,6 +595,6 @@ a-select {
display: flex;
color: #ebf3fd;
background-color: red;
- box-shadow: 1vw 1vw 1vw #c3c3c3;
+ // box-shadow: 1vw 1vw 1vw #c3c3c3;
}
</style>
\ No newline at end of file
--
libgit2 0.22.2