| | |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <div class="mainDiv" > |
|---|
| | | <div class="mainDiv1" > |
|---|
| | | <div id="main-login"> |
|---|
| | | <div id="img-div"> |
|---|
| | | <img id="img-pic" src="@/assets/img.png" alt=""> |
|---|
| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .mainDiv{ |
|---|
| | | //background-color: #1890FF; |
|---|
| | | overflow: hidden; |
|---|
| | | min-width: 718px; |
|---|
| | | |
|---|
| | | .mainDiv1{ |
|---|
| | | //background-color: #1890FF; |
|---|
| | | //overflow: hidden; |
|---|
| | | width: 100vw; |
|---|
| | | height: 100vh; |
|---|
| | | |
|---|
| | | display: grid; |
|---|
| | | place-items: center; /* 同时水平和垂直居中 */ |
|---|
| | | } |
|---|
| | | #main-login{ |
|---|
| | | margin: 150px auto 0 auto; |
|---|
| | | height: 60vh; |
|---|
| | | width: 70vw; |
|---|
| | | height: 60%; |
|---|
| | | width: 70%; |
|---|
| | | |
|---|
| | | //background-color: #f2f2f2; |
|---|
| | | //background-color: #f2f2f2; |
|---|
| | | } |
|---|
| | | #img-div{ |
|---|
| | | width: 55%; |
|---|
| | |
|---|
| | | max-height: 90%; |
|---|
| | | max-width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @media (max-width: 1030px) { |
|---|
| | | #img-div { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | #main-login{ |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | #div-login{ |
|---|
| | | margin-top: 5%; |
|---|
| | | background-color: #fff; |
|---|
| | |
|---|
| | | height: 80%; |
|---|
| | | border-radius: 12px; |
|---|
| | | min-width: 318px; |
|---|
| | | min-height: 300px; |
|---|
| | | box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); |
|---|
| | | } |
|---|
| | | h2{ |
|---|
