wms / wms4 · Commits

Commit a154a321f4da1d735b61ada6844eec14306526c3

Authored by 谭毅彬
1 parent 97e2f75b

首页样式优化 

Signed-off-by: TanYibin <5491541@qq.com>
Inline Side-by-side
Showing 1 changed file with 77 additions and 77 deletions
ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
  View file @a154a32
... ... @@ -85,21 +85,21 @@ export default {
85 85 username: [
86 86 {
87 87 required: true,
88   - message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入用户名!</span>
  88 + message: <span style="color: red; font-weight: bold; margin-left: 10%; font-size: 0.85vw;">请输入用户名!</span>
89 89 },
90 90 { validator: this.handleUsernameOrEmail }
91 91 ],
92 92 password: [
93 93 {
94 94 required: true,
95   - message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入密码!</span>,
  95 + message: <span style="color: red; font-weight: bold; margin-left: 10%; font-size: 0.85vw;">请输入密码!</span>,
96 96 validator: 'click'
97 97 }
98 98 ],
99 99 warehouseCode: [
100 100 {
101 101 required: true,
102   - message: <span style="color: red; font-weight: bold; margin-left: 10%;">请选择仓库!</span>,
  102 + message: <span style="color: red; font-weight: bold; margin-left: 10%; font-size: 0.85vw;">请选择仓库!</span>,
103 103 trigger: 'change',
104 104 validator: 'click'
105 105 }
... ... @@ -302,21 +302,23 @@ export default {
302 302 }
303 303 ::v-deep .ant-select-selection {
304 304 border-width: 1px;
  305 + border-style: solid;
305 306 border-radius: 0.6vw;
306 307 width: 100% !important;
307 308 height: 100% !important;
308   - background-color: #fff;
  309 + line-height: 3vw;
309 310 background-image: url(../../assets/cangku.png);
310   - padding-left: 50px; /* 留出图片的空间 */
  311 + padding-left: 12%; /* 留出图片的空间 */
311 312 background-repeat: no-repeat;
312   - background-position: 20px center;
313   - background-size: 28px 28px;
  313 + background-position: 0.6vw center;
  314 + background-size: 1.6vw 1.6vw;
  315 + font-size: 1vw;
  316 + color: #333333;
314 317 box-shadow: 2px 5px 5px #c3c3c3;
315   - font-size: 18px;
316 318 }
317 319  
318 320 /deep/ .ant-select-selection__rendered {
319   - margin-top: 8px;
  321 + margin-top: 0.6vw;
320 322 }
321 323  
322 324 ///deep/ .ant-select-dropdown-menu-item-selected{
... ... @@ -325,48 +327,57 @@ export default {
325 327 //}
326 328  
327 329 .left-div {
328   - flex: 0 0 65%; /* 左侧div宽度为容器的70% */
  330 + flex: 0 0 68%; /* 左侧div宽度为容器的70% */
329 331 }
330 332  
331 333 .right-div {
332   - flex: 0 0 35%;
  334 + flex: 0 0 32%;
333 335 background-color: #fafafa;
334 336 }
  337 +#logo {
  338 + height: 10%;
  339 + width: 100%;
  340 + //background-color: red;
  341 + //margin-left: 150px;
  342 + //margin-left: 11%;
  343 + //margin-top: -3%;
  344 + display: flex;
  345 + // margin-top: 0;
  346 +}
335 347 #backgroundImg {
336 348 height: 80%;
337 349 display: flex;
338 350 justify-content: center;
339   - align-items: flex-start;
  351 + align-items: center;
340 352 .imge {
341 353 height: 75%;
342 354 background-size: contain;
343 355 background-repeat: no-repeat;
344 356 position: relative;
345   - background-position: top center;
346 357 }
347 358 }
348   -#logo {
349   - height: 15%;
350   - width: 100%;
351   - //background-color: red;
352   - //margin-left: 150px;
353   - //margin-left: 11%;
354   - //margin-top: 30px;
  359 +#copyright {
  360 + height: 10%; /* 高度为视口的 10% */
  361 + width: 100%; /* 确保宽度不超出容器 */
  362 + position: fixed; /* 固定定位 */
  363 + bottom: 0; /* 靠底部对齐 */
355 364 display: flex;
  365 + align-items: flex-end; /* 垂直方向上靠下对齐 */
  366 + padding: 10px; /* 添加内边距 */
356 367 }
357 368 #logoImg {
358   - width: 35%;
  369 + width: 22%;
359 370 height: 100%;
360 371 float: right;
361 372 position: relative;
362 373 //background-color: yellow;
363 374 .imge {
364   - width: 60%;
365   - height: 20%;
  375 + width: 83%;
  376 + height: 30%;
366 377 position: absolute;
367   - right: 3%; /* 水平居右 */
368   - top: 50%; /* 从顶部偏移50% */
369   - transform: translateY(-50%); /* 向上移动自身高度的50%，实现垂直居中 */
  378 + right: 5%; /* 水平居右 */
  379 + top: 20%; /* 从顶部偏移50% */
  380 + // transform: translateY(-50%); /* 向上移动自身高度的50%，实现垂直居中 */
370 381 //object-fit: contain;
371 382 //top: 39%;
372 383 //left: 45%;
... ... @@ -375,9 +386,9 @@ export default {
375 386 }
376 387 }
377 388 #text {
378   - height: 100%;
  389 + height: 69%;
379 390 width: 100%;
380   - font-size: 1vw;
  391 + font-size: 1.1vw;
381 392 align-content: center;
382 393 color: #333333;
383 394 //margin-left: 5px;
... ... @@ -385,14 +396,6 @@ export default {
385 396 font-weight: bold;
386 397 //background-color: blue;
387 398 }
388   -#copyright {
389   - height: 5%;
390   - width: stretch;
391   - position: fixed;
392   - // transform: translateX(-50%);
393   - //margin-left: 820px;
394   - //margin-top: 100px;
395   -}
396 399 #form-container {
397 400 width: 200px; /* 设置宽度 */
398 401 height: 50px; /* 设置高度 */
... ... @@ -400,26 +403,23 @@ export default {
400 403 //margin-top: 100px;
401 404 }
402 405 #company {
403   - align-content: center;
404   - text-align: center;
405   - color: #ac1e2b;
406   - height: 100%;
407   - width: 100%;
408   - font-size: 0.9vw;
409   - align-content: baseline;
410   - font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
  406 + text-align: center; /* 水平居中对齐 */
  407 + // color: #ac1e2b; /* 字体颜色 */
  408 + font-size: 0.9vw; /* 字体大小 */
  409 + font-family: 'Microsoft YaHei', 'SimSun', sans-serif; /* 字体系列 */
  410 + width: 100%; /* 宽度 100% */
411 411 }
412 412 #welcome {
413   - width: 85%;
414   - height: 3vw;
415   - margin-top: 25%;
416   - margin-left: 50%;
417   - transform: translateX(-48%);
  413 + height: 28%;
  414 + margin-left: 9%;
418 415 color: #333333;
419 416 font-size: 1.5vw;
420   - align-content: center;
  417 + align-content: end;
421 418 font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
422 419 }
  420 +#welcome-middle {
  421 + height: 55%;
  422 +}
423 423 #name {
424 424 border-width: 1px;
425 425 border-style: solid;
... ... @@ -427,13 +427,14 @@ export default {
427 427 width: 85%;
428 428 height: 3vw;
429 429 line-height: 3vw;
430   - margin-top: 2.5vw;
  430 + margin-top: 3vw;
431 431 margin-left: 8%;
  432 + margin-bottom: 0.5vw;
432 433 background-image: url(../../assets/huiyuan.png);
433 434 padding-left: 12%; /* 留出图片的空间 */
434 435 background-repeat: no-repeat;
435   - background-position: 20px center;
436   - background-size: 26px 26px;
  436 + background-position: 0.6vw center;
  437 + background-size: 1.6vw 1.6vw;
437 438 font-size: 1vw;
438 439 color: #333333;
439 440 box-shadow: 2px 5px 5px #c3c3c3;
... ... @@ -446,7 +447,7 @@ export default {
446 447 overflow: hidden;
447 448 }
448 449 #name::placeholder {
449   - font-size: 18px;
  450 + font-size: 1vw;
450 451 color: #999999;
451 452 padding-left: 0px;
452 453 }
... ... @@ -457,17 +458,31 @@ export default {
457 458 width: 85%;
458 459 height: 3vw;
459 460 line-height: 3vw;
460   - margin-top: 0.5vw;
461 461 margin-left: 8%;
  462 + margin-bottom: 0.5vw;
462 463 background-image: url(../../assets/mima.png);
463 464 padding-left: 12%; /* 留出图片的空间 */
464 465 background-repeat: no-repeat;
465   - background-position: 20px center;
466   - background-size: 26px 26px;
  466 + background-position: 0.6vw center;
  467 + background-size: 1.6vw 1.6vw;
467 468 font-size: 1vw;
468 469 color: #333333;
469 470 box-shadow: 2px 5px 5px #c3c3c3;
470 471 }
  472 +#warehouseCode {
  473 + border-color: #ebf3fd;
  474 + border-width: 1px;
  475 + border-style: solid;
  476 + border-radius: 0.6vw;
  477 + width: 85%;
  478 + height: 3vw;
  479 + line-height: 3vw;
  480 + margin-left: 8%;
  481 + margin-bottom: 2.5vw;
  482 + font-size: 1vw;
  483 + text-align: center;
  484 + //color: #333333;
  485 +}
471 486 #password::after {
472 487 content: '';
473 488 display: inline-block;
... ... @@ -476,29 +491,15 @@ export default {
476 491 overflow: hidden;
477 492 }
478 493 #password::placeholder {
479   - font-size: 18px;
  494 + font-size: 1vw;
480 495 color: #999999;
481 496 padding-left: 0px;
482 497 }
483   -/deep/ .ant-form-item-control{
484   - line-height: 65px;
  498 +/deep/ .ant-form-item-control {
  499 + line-height: 3vw;
485 500 }
486 501 /deep/ .ant-select-selection__rendered {
487   - line-height: 25px;
488   -}
489   -#warehouseCode {
490   - border-color: #ebf3fd;
491   - border-width: 1px;
492   - border-style: solid;
493   - border-radius: 0.6vw;
494   - width: 85%;
495   - height: 3vw;
496   - line-height: 3vw;
497   - margin-top: 0.5vw;
498   - margin-left: 8%;
499   - font-size: 1vw;
500   - text-align: center;
501   - //color: #333333;
  502 + line-height: 1.5vw;
502 503 }
503 504 a-select {
504 505 width: 100%;
... ... @@ -517,9 +518,8 @@ a-select {
517 518 width: 85%;
518 519 height: 3vw;
519 520 line-height: 3vw;
520   - margin-top: 0.5vw;
521 521 margin-left: 8%;
522   - font-size: 1.8vw;
  522 + font-size: 1.2vw;
523 523 align-items: center;
524 524 justify-content: center;
525 525 display: flex;
... ...