wms / wms4 · Commits

Commit e67f248dea271168907993f8a7f49eae0fb0f80d

Authored by 谭毅彬
1 parent f236798e

首页样式调整 

Signed-off-by: TanYibin <5491541@qq.com>
Inline Side-by-side
Showing 1 changed file with 62 additions and 47 deletions
ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
  View file @e67f248
... ... @@ -15,33 +15,35 @@
15 15 </div>
16 16 </div>
17 17 <div class="right-div">
18   - <a-form-model ref="form" :model="model" :rules="validatorRules">
19   - <div id="welcome">欢迎来到华恒仓储管理系统 ！</div>
20   - <a-form-model-item required prop="username">
21   - <a-input id="name" v-model="model.username" size="default" autocomplete="off" placeholder="请输入帐户名 / admin" @blur="getWarehouse">
22   - </a-input>
23   - </a-form-model-item>
24   - <a-form-model-item required prop="password">
25   - <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword" placeholder="请输入密码">
26   - </a-input>
27   - </a-form-model-item>
28   - <a-form-model-item prop="warehouseCode">
29   - <a-select
30   - show-search
31   - placeholder="请选择仓库"
32   - option-filter-prop="label"
33   - v-model="model.warehouseCode" id="warehouseCode">
34   - <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{
35   - item.name
36   - }}
37   - </a-select-option>
38   - </a-select>
39   - </a-form-model-item>
40   - <a-form-item>
41   - <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button"
42   - :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登 录</a-button>
43   - </a-form-item>
44   - </a-form-model>
  18 + <div class="right-login">
  19 + <a-form-model ref="form" :model="model" :rules="validatorRules">
  20 + <div id="welcome">欢迎来到华恒仓储管理系统</div>
  21 + <a-form-model-item required prop="username">
  22 + <a-input id="name" v-model="model.username" size="default" autocomplete="off" placeholder="请输入帐户名 / admin" @blur="getWarehouse">
  23 + </a-input>
  24 + </a-form-model-item>
  25 + <a-form-model-item required prop="password">
  26 + <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword" placeholder="请输入密码">
  27 + </a-input>
  28 + </a-form-model-item>
  29 + <a-form-model-item prop="warehouseCode">
  30 + <a-select
  31 + show-search
  32 + placeholder="请选择仓库"
  33 + option-filter-prop="label"
  34 + v-model="model.warehouseCode" id="warehouseCode">
  35 + <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{
  36 + item.name
  37 + }}
  38 + </a-select-option>
  39 + </a-select>
  40 + </a-form-model-item>
  41 + <a-form-item>
  42 + <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button"
  43 + :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登 录</a-button>
  44 + </a-form-item>
  45 + </a-form-model>
  46 + </div>
45 47 </div>
46 48 <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
47 49 <login-select-tenant ref="loginSelect" @success="loginSelectOk" ></login-select-tenant>
... ... @@ -319,23 +321,35 @@ export default {
319 321 //}
320 322  
321 323 .left-div {
322   - flex: 0 0 68%; /* 左侧div宽度为容器的70% */
323   - width: 68%;
  324 + flex: 0 0 65%; /* 左侧div宽度为容器的70% */
  325 + width: 65%;
  326 + height: 100%; /* 使 div 占满父容器高度 */
324 327 }
325 328  
326 329 .right-div {
  330 + flex: 0 0 35%;
  331 + width: 35%;
  332 + height: 100%; /* 使 div 占满父容器高度 */
327 333 display: flex;
328   - flex: 0 0 32%;
329   - width: 32%;
  334 + justify-content: center; /* 水平居中 */
  335 + align-items: center; /* 垂直居中 */
  336 +}
  337 +
  338 +.right-login {
330 339 background-color: #fafafa;
331   - display: flex; /* 使用 flex 布局 */
332   - flex-direction: column; /* 垂直排列子元素 */
333   - justify-content: center; /* 垂直居中 */
334   - align-items: center; /* 水平居中 */
335   - height: 100%; /* 使 div 占满父容器高度 */
  340 + border-radius: 0.5vw; /* 设置圆角半径 */
  341 + width: 80%;
  342 + height: 60%; /* 使 div 占满父容器高度 */
  343 + display: flex; /* 使用 flexbox 进行子元素布局 */
  344 + flex-direction: column; /* 垂直排列子元素 */
  345 + justify-content: center; /* 垂直居中子元素 */
  346 + align-items: center; /* 水平居中子元素 */
  347 + box-shadow: 1vw 1vw 1vw #c3c3c3;
  348 + border: 0.1vw solid #ccc; /* 增加边框线 */
336 349 }
  350 +
337 351 #logo {
338   - height: 8%;
  352 + height: 10%;
339 353 width: 100%;
340 354 //background-color: red;
341 355 //margin-left: 150px;
... ... @@ -345,12 +359,13 @@ export default {
345 359 // margin-top: 0;
346 360 }
347 361 #backgroundImg {
348   - height: 82%;
  362 + height: 82%; /* 使容器充满视口高度 */
349 363 display: flex;
350   - justify-content: center;
351   - align-items: center;
  364 + justify-content: center; /* 水平居中 */
  365 + align-items: center; /* 垂直居中 */
  366 + // background-color: #fafafa; /* 可选：背景颜色 */
352 367 .imge {
353   - height: 75%;
  368 + height: 85%;
354 369 background-size: contain;
355 370 background-repeat: no-repeat;
356 371 position: relative;
... ... @@ -419,13 +434,13 @@ export default {
419 434 width: 100%; /* 宽度 100% */
420 435 }
421 436 #welcome {
422   - margin-top: 2vw;
  437 + margin-top: 2.2vw;
423 438 color: #333333;
424 439 font-size: 1.5vw;
425 440 align-content: end;
426 441 font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
427 442 text-align: center;
428   - margin-left: 1vw;
  443 + margin-left: 0vw;
429 444 margin-bottom: 3vw;
430 445 }
431 446 #name {
... ... @@ -444,7 +459,7 @@ export default {
444 459 background-size: 1.6vw 1.6vw;
445 460 font-size: 1vw;
446 461 color: #333333;
447   - box-shadow: 1vw 1vw 1vw #c3c3c3;
  462 + // box-shadow: 1vw 1vw 1vw #c3c3c3;
448 463 }
449 464 ::v-deep .ant-select-selection {
450 465 border-width: 0.1vw;
... ... @@ -460,7 +475,7 @@ export default {
460 475 background-size: 1.6vw 1.6vw;
461 476 font-size: 1vw;
462 477 color: #333333;
463   - box-shadow: 1vw 1vw 1vw #c3c3c3;
  478 + // box-shadow: 1vw 1vw 1vw #c3c3c3;
464 479 }
465 480  
466 481 #name::after {
... ... @@ -492,7 +507,7 @@ export default {
492 507 background-size: 1.6vw 1.6vw;
493 508 font-size: 1vw;
494 509 color: #333333;
495   - box-shadow: 1vw 1vw 1vw #c3c3c3;
  510 + // box-shadow: 1vw 1vw 1vw #c3c3c3;
496 511 }
497 512 #warehouseCode {
498 513 border-color: #ebf3fd;
... ... @@ -580,6 +595,6 @@ a-select {
580 595 display: flex;
581 596 color: #ebf3fd;
582 597 background-color: red;
583   - box-shadow: 1vw 1vw 1vw #c3c3c3;
  598 + // box-shadow: 1vw 1vw 1vw #c3c3c3;
584 599 }
585 600 </style>
586 601 \ No newline at end of file
... ...