样式调整
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