Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
e672ebc8 by yangwei
Options

样式调整

1 parent 312ab615
Inline Side-by-side
Showing 1 changed file with 93 additions and 79 deletions
1 <template> 1 <template>
2 <div id="login"> 2 <div id="login">
3 <div class="login-logo"><img src="./images/logo-login.svg" /></div> 3 <div class="login-content-wrap">
4 <div class="login-con"> 4 <div class="login-logo"><img src="./images/logo-login.svg" /></div>
5 <div class="login-img"> 5 <div class="login-con">
6 <div class="content"></div> 6 <div class="login-img">
7 </div> 7 <div class="content"></div>
8 <div class="login-wrap">
9 <p>账号登录</p>
10 <div class="login-user" :class="{ 'select-border': change.user }">
11 <img class="user-icon" src="./images/user.svg" />
12 <input
13 type="text"
14 class="user-input"
15 placeholder="请输入账号"
16 v-model="userInfo.username"
17 @focus="reduceBorder('user')"
18 @blur="addBorder('user')"
19 />
20 <span class="warning" v-show="warning.user">账号不能为空</span>
21 </div>
22 <div
23 class="login-user user-mt"
24 :class="{ 'select-border': change.pass }"
25 >
26 <img class="user-icon" src="./images/password.svg" />
27 <input
28 type="password"
29 class="user-input"
30 placeholder="请输入密码"
31 v-model="userInfo.password"
32 v-show="!selectEye"
33 @focus="reduceBorder('pass')"
34 @blur="addBorder('pass')"
35 />
36 <input
37 type="text"
38 class="user-input"
39 placeholder="请输入密码"
40 v-model="userInfo.password"
41 v-show="selectEye"
42 @focus="reduceBorder('pass')"
43 @blur="addBorder('pass')"
44 />
45 <img
46 class="password-eye"
47 src="./images/open.svg"
48 @click="selectEyes"
49 v-show="selectEye"
50 />
51 <img
52 class="password-eye"
53 src="./images/close.svg"
54 @click="selectEyes"
55 v-show="!selectEye"
56 />
57 <span class="warning" v-show="warning.pass">密码不能为空</span>
58 </div> 8 </div>
59 <div 9 <div class="login-wrap">
60 class="login-user login-valid" 10 <p>账号登录</p>
61 :class="{ 'select-border': change.valid }" 11 <div class="login-user" :class="{ 'select-border': change.user }">
62 > 12 <img class="user-icon" src="./images/user.svg" />
63 <img class="user-icon" src="./images/valid.svg" /> 13 <input
64 <input 14 type="text"
65 type="text" 15 class="user-input"
66 class="user-input" 16 placeholder="请输入账号"
67 placeholder="请输入验证码" 17 v-model="userInfo.username"
68 v-model="userInfo.captchaCode" 18 @focus="reduceBorder('user')"
69 @focus="reduceBorder('valid')" 19 @blur="addBorder('user')"
70 @blur="addBorder('valid')" 20 />
71 /> 21 <span class="warning" v-show="warning.user">账号不能为空</span>
72 <img 22 </div>
73 class="valid-img" 23 <div
74 :src="codeSrc" 24 class="login-user user-mt"
75 alt="暂无验证码" 25 :class="{ 'select-border': change.pass }"
76 @click="reloadCaptcha" 26 >
77 /> 27 <img class="user-icon" src="./images/password.svg" />
78 <span class="warning" v-show="warning.valid">验证码不能为空</span> 28 <input
29 type="password"
30 class="user-input"
31 placeholder="请输入密码"
32 v-model="userInfo.password"
33 v-show="!selectEye"
34 @focus="reduceBorder('pass')"
35 @blur="addBorder('pass')"
36 />
37 <input
38 type="text"
39 class="user-input"
40 placeholder="请输入密码"
41 v-model="userInfo.password"
42 v-show="selectEye"
43 @focus="reduceBorder('pass')"
44 @blur="addBorder('pass')"
45 />
46 <img
47 class="password-eye"
48 src="./images/open.svg"
49 @click="selectEyes"
50 v-show="selectEye"
51 />
52 <img
53 class="password-eye"
54 src="./images/close.svg"
55 @click="selectEyes"
56 v-show="!selectEye"
57 />
58 <span class="warning" v-show="warning.pass">密码不能为空</span>
59 </div>
60 <div
61 class="login-user login-valid"
62 :class="{ 'select-border': change.valid }"
63 >
64 <img class="user-icon" src="./images/valid.svg" />
65 <input
66 type="text"
67 class="user-input"
68 placeholder="请输入验证码"
69 v-model="userInfo.captchaCode"
70 @focus="reduceBorder('valid')"
71 @blur="addBorder('valid')"
72 />
73 <img
74 class="valid-img"
75 :src="codeSrc"
76 alt="暂无验证码"
77 @click="reloadCaptcha"
78 />
79 <span class="warning" v-show="warning.valid">验证码不能为空</span>
80 </div>
81 <div id="loginBtn" class="login-btn" @click="goHome">登录</div>
79 </div> 82 </div>
80 <div id="loginBtn" class="login-btn" @click="goHome">登录</div>
81 </div> 83 </div>
82 </div> 84 </div>
83 </div> 85 </div>
...@@ -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 {
......