样式调整
Showing
1 changed file
with
17 additions
and
3 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div id="login"> | 2 | <div id="login"> |
| 3 | <div class="login-content-wrap"> | ||
| 3 | <div class="login-logo"><img src="./images/logo-login.svg" /></div> | 4 | <div class="login-logo"><img src="./images/logo-login.svg" /></div> |
| 4 | <div class="login-con"> | 5 | <div class="login-con"> |
| 5 | <div class="login-img"> | 6 | <div class="login-img"> |
| ... | @@ -81,6 +82,7 @@ | ... | @@ -81,6 +82,7 @@ |
| 81 | </div> | 82 | </div> |
| 82 | </div> | 83 | </div> |
| 83 | </div> | 84 | </div> |
| 85 | </div> | ||
| 84 | </template> | 86 | </template> |
| 85 | <script> | 87 | <script> |
| 86 | import axios from "axios"; | 88 | import axios from "axios"; |
| ... | @@ -211,6 +213,11 @@ export default { | ... | @@ -211,6 +213,11 @@ export default { |
| 211 | }; | 213 | }; |
| 212 | </script> | 214 | </script> |
| 213 | <style lang="scss" scoped> | 215 | <style lang="scss" scoped> |
| 216 | input::placeholder{ | ||
| 217 | color: #878787; | ||
| 218 | font-size: 14px; | ||
| 219 | font-family:Arial, Helvetica, sans-serif | ||
| 220 | } | ||
| 214 | #login { | 221 | #login { |
| 215 | width: 100vw; | 222 | width: 100vw; |
| 216 | height: 100vh; | 223 | height: 100vh; |
| ... | @@ -218,17 +225,24 @@ export default { | ... | @@ -218,17 +225,24 @@ export default { |
| 218 | background-size: 100%; | 225 | background-size: 100%; |
| 219 | overflow: hidden; | 226 | overflow: hidden; |
| 220 | position: relative; | 227 | position: relative; |
| 228 | .login-content-wrap{ | ||
| 229 | position: absolute; | ||
| 230 | left: 50%; | ||
| 231 | top: calc(50% + 10px); | ||
| 232 | transform: translate(-50%, -50%); | ||
| 233 | } | ||
| 221 | .login-logo { | 234 | .login-logo { |
| 222 | margin-top: 18vh; | ||
| 223 | height: 70px; | 235 | height: 70px; |
| 224 | width: 100%; | 236 | width: 100%; |
| 225 | text-align: center; | 237 | text-align: center; |
| 238 | position: absolute; | ||
| 239 | top: -140px; | ||
| 226 | } | 240 | } |
| 227 | .login-logo img { | 241 | .login-logo img { |
| 228 | height: 100%; | 242 | height: 100%; |
| 229 | } | 243 | } |
| 230 | .login-con { | 244 | .login-con { |
| 231 | margin: 70px auto; | 245 | margin: 0 auto; |
| 232 | width: 936px; | 246 | width: 936px; |
| 233 | height: 450px; | 247 | height: 450px; |
| 234 | .login-img{ | 248 | .login-img{ |
| ... | @@ -287,7 +301,7 @@ export default { | ... | @@ -287,7 +301,7 @@ export default { |
| 287 | height: 40px; | 301 | height: 40px; |
| 288 | border: 1px solid #E5E5E5; | 302 | border: 1px solid #E5E5E5; |
| 289 | box-sizing: border-box; | 303 | box-sizing: border-box; |
| 290 | margin-top: 30px; | 304 | margin-top: 34px; |
| 291 | border-radius: 2px; | 305 | border-radius: 2px; |
| 292 | position: relative; | 306 | position: relative; |
| 293 | .user-icon { | 307 | .user-icon { | ... | ... |
-
Please register or sign in to post a comment