newLogin.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. #userLayout{
  2. margin: 0;
  3. padding: 0;
  4. // background-image: url("~@/assets/login_background.svg");
  5. background-size: cover;
  6. width: 100%;
  7. height: 100%;
  8. position: relative;
  9. .login_panle{
  10. position: absolute;
  11. top: 3vh;
  12. left: 2vw;
  13. width: 96vw;
  14. height: 94vh;
  15. background-color: rgba(255,255,255,.8);
  16. backdrop-filter: blur(5px);
  17. border-radius: 10px;
  18. display: flex;
  19. align-items: center;
  20. justify-content: space-evenly;
  21. .login_panle_right{
  22. background-image: url("~@/assets/login_left.svg");
  23. background-size: cover;
  24. width: 40%;
  25. height: 60%;
  26. float: right !important;
  27. }
  28. .login_panle_form{
  29. width: 420px;
  30. background-color: #fff;
  31. padding: 40px 40px 40px 40px;
  32. border-radius: 10px;
  33. box-shadow: 2px 3px 7px rgba(0,0,0,.2);
  34. .login_panle_form_title{
  35. display: flex;
  36. align-items: center;
  37. margin: 30px 0;
  38. .login_panle_form_title_logo{
  39. width: 90px;
  40. height: 72px;
  41. }
  42. .login_panle_form_title_p{
  43. font-size: 40px;
  44. padding-left: 20px ;
  45. }
  46. }
  47. .vPic {
  48. width: 33%;
  49. height: 38px;
  50. float: right !important;
  51. background: #ccc;
  52. img {
  53. width: 100%;
  54. height: 100%;
  55. cursor: pointer;
  56. vertical-align: middle;
  57. }
  58. }
  59. }
  60. .login_panle_foot{
  61. position: absolute;
  62. bottom: 20px;
  63. .links{
  64. display: flex;
  65. align-items: center;
  66. justify-content: space-between;
  67. .link-icon{
  68. width: 30px;
  69. height: 30px;
  70. }
  71. }
  72. .copyright{
  73. color: #777777;
  74. margin-top: 5px;
  75. }
  76. }
  77. }
  78. }
  79. //小屏幕不显示右侧,将登陆框居中
  80. @media (max-width: 750px) {
  81. .login_panle_right{
  82. display: none;
  83. }
  84. .login_panle{
  85. width: 100vw;
  86. height: 100vh;
  87. top: 0;
  88. left: 0;
  89. }
  90. .login_panle_form{
  91. width: 100%;
  92. }
  93. }
  94. /*
  95. powerBy : [email protected]
  96. */