Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
98dd7f93 by 杨威
Options

登录页修改

1 parent c2c50f3c
Inline Side-by-side
Showing 1 changed file with 59 additions and 54 deletions
1 <template> 1 <template>
2 <div id="login"> 2 <div id="login">
3 <img class="login-logo" src="./images/logo-login.svg" /> 3 <div class="login-logo"><img src="./images/logo-login.svg" /></div>
4 <div class="login-con"> 4 <div class="login-con">
5 <div class="login-title">用户登录</div> 5 <!-- <div class="login-title">用户登录</div>-->
6 <div class="login-user" :class="{ 'select-border': change.user }"> 6 <div class="login-user" :class="{ 'select-border': change.user }">
7 <img class="user-icon" src="./images/user.svg" /> 7 <img class="user-icon" src="./images/user.svg" />
8 <div class="line-mid"></div> 8 <!-- <div class="line-mid"></div>-->
9 <input 9 <input
10 type="text" 10 type="text"
11 class="user-input" 11 class="user-input"
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
18 </div> 18 </div>
19 <div class="login-user user-mt" :class="{ 'select-border': change.pass }"> 19 <div class="login-user user-mt" :class="{ 'select-border': change.pass }">
20 <img class="user-icon" src="./images/password.svg" /> 20 <img class="user-icon" src="./images/password.svg" />
21 <div class="line-mid"></div> 21 <!-- <div class="line-mid"></div>-->
22 <input 22 <input
23 type="password" 23 type="password"
24 class="user-input" 24 class="user-input"
...@@ -184,74 +184,82 @@ export default { ...@@ -184,74 +184,82 @@ export default {
184 #login { 184 #login {
185 width: 100vw; 185 width: 100vw;
186 height: 100vh; 186 height: 100vh;
187 background: url("./images/login-bg.png") center center no-repeat; 187 background: url("./images/login-bg.png") no-repeat bottom center;
188 background-size: 100% 100%; 188 background-size: 100% 100%;
189 overflow: hidden; 189 overflow: hidden;
190 position: relative; 190 //position: relative;
191 .login-logo { 191 .login-logo {
192 display: block; 192 //display: block;
193 margin: 0 auto; 193 //position: absolute;
194 position: absolute; 194 //top: 8%;
195 top: 11.5%; 195 //left: 0;
196 left: 0; 196 //right: 0;
197 right: 0; 197 margin-top: 8%;
198 margin: 0 auto; 198 height: 160px;
199 width: 360px; 199 width: 100%;
200 text-align: center;
200 } 201 }
201 .login-con { 202 .login-logo img{
202 position: absolute; 203 height: 100%;
203 top: 24%;
204 left: 0;
205 right: 0;
206 margin: 0 auto;
207 } 204 }
208 .login-title { 205 .login-con {
209 width: 320px; 206 //position: absolute;
210 margin: 0 auto; 207 //top: 24%;
211 font-size: 14px; 208 //left: 0;
212 font-weight: 500; 209 //right: 0;
210 margin: 10px auto;
211 width: 380px;
212
213 } 213 }
214 //.login-title {
215 // width: 320px;
216 // margin: 0 auto;
217 // font-size: 14px;
218 // font-weight: 500;
219 //}
214 .login-user { 220 .login-user {
215 width: 320px; 221 width: 100%;
216 height: 38px; 222 height: 46px;
217 border: 1px solid rgba(155, 155, 155, 1); 223 border: 1px solid rgba(155, 155, 155, 1);
218 box-sizing: border-box; 224 box-sizing: border-box;
219 margin: 0 auto; 225 margin: 38px auto auto auto;
220 margin-top: 20px;
221 border-radius: 2px; 226 border-radius: 2px;
222 position: relative; 227 //position: relative;
223 .user-icon { 228 .user-icon {
224 margin: 0 12px;
225 float: left;
226 width: 16px;
227 height: 16px;
228 margin-top: 11px;
229 }
230 .line-mid {
231 width: 1px;
232 height: 16px;
233 background: #cbcbcb;
234 float: left; 229 float: left;
235 margin-top: 11px; 230 margin: 13px auto auto 10px;
236 margin-right: 9px; 231 //float: left;
232 width: 28px;
233 height: 18px;
234 //margin-top: 11px;
237 } 235 }
236 //.line-mid {
237 // width: 1px;
238 // height: 16px;
239 // background: #cbcbcb;
240 // float: left;
241 // margin-top: 11px;
242 // margin-right: 9px;
243 //}
238 .user-input { 244 .user-input {
239 width: 230px; 245 width: 80%;
240 float: left; 246 float: left;
241 font-size: 12px; 247 font-size: 16px;
242 margin-top: 11px; 248 //margin-top: 11px;
243 background: none; 249 //background: none;
244 outline: 0; 250 outline: 0;
245 border: 0; 251 border: none;
246 color: #4a4a4a; 252 color: #4a4a4a;
247 box-shadow: inset 0 0 0 1000px #fff !important; 253 line-height: 266%;
254 //box-shadow: inset 0 0 0 1000px #fff !important;
255
248 } 256 }
249 .password-eye { 257 .password-eye {
250 float: right; 258 float: right;
251 width: 16px; 259 width: 16px;
252 height: 16px; 260 height: 16px;
253 margin-right: 12px; 261 margin-right: 12px;
254 margin-top: 11px; 262 margin-top: 13px;
255 cursor: pointer; 263 cursor: pointer;
256 } 264 }
257 .warning { 265 .warning {
...@@ -310,11 +318,8 @@ export default { ...@@ -310,11 +318,8 @@ export default {
310 cursor: pointer; 318 cursor: pointer;
311 } 319 }
312 .reserved-con { 320 .reserved-con {
313 position: absolute; 321
314 bottom: 36%; 322 margin: 38px auto;
315 left: 0;
316 right: 0;
317 margin: 0 auto;
318 } 323 }
319 .reserved-words { 324 .reserved-words {
320 font-size: 12px; 325 font-size: 12px;
......