Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
640a4a57 by yangwei
Options

样式调整

1 parent 8ed93a4a
Inline Side-by-side
Showing 1 changed file with 78 additions and 64 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-wrap"> 5 <div class="login-con">
6 <p>用户登录</p> 6 <div class="login-wrap">
7 <div class="login-user" :class="{ 'select-border': change.user }"> 7 <p>用户登录</p>
8 <img class="user-icon" src="./images/user.svg" /> 8 <div class="login-user" :class="{ 'select-border': change.user }">
9 <input 9 <img class="user-icon" src="./images/user.svg" />
10 type="text" 10 <input
11 class="user-input" 11 type="text"
12 placeholder="请输入账号" 12 class="user-input"
13 v-model="userInfo.username" 13 placeholder="请输入账号"
14 @focus="reduceBorder('user')" 14 v-model="userInfo.username"
15 @blur="addBorder('user')" 15 @focus="reduceBorder('user')"
16 /> 16 @blur="addBorder('user')"
17 <span class="warning" v-show="warning.user">账号不能为空</span> 17 />
18 <span class="warning" v-show="warning.user">账号不能为空</span>
19 </div>
20 <div class="login-user user-mt" :class="{ 'select-border': change.pass }">
21 <img class="user-icon" src="./images/password.svg" />
22 <input
23 type="password"
24 class="user-input"
25 placeholder="请输入密码"
26 v-model="userInfo.password"
27 v-show="!selectEye"
28 @focus="reduceBorder('pass')"
29 @blur="addBorder('pass')"
30 />
31 <input
32 type="text"
33 class="user-input"
34 placeholder="请输入密码"
35 v-model="userInfo.password"
36 v-show="selectEye"
37 @focus="reduceBorder('pass')"
38 @blur="addBorder('pass')"
39 />
40 <img
41 class="password-eye"
42 src="./images/open.svg"
43 @click="selectEyes"
44 v-show="selectEye"
45 />
46 <img
47 class="password-eye"
48 src="./images/close.svg"
49 @click="selectEyes"
50 v-show="!selectEye"
51 />
52 <span class="warning" v-show="warning.pass">密码不能为空</span>
53 </div>
54 <div class="login-user login-valid" :class="{ 'select-border': change.valid }">
55 <img class="user-icon" src="./images/valid.svg" />
56 <input
57 type="text"
58 class="user-input"
59 placeholder="请输入验证码"
60 v-model="userInfo.captchaCode"
61 @focus="reduceBorder('valid')"
62 @blur="addBorder('valid')"
63 />
64 <img class="valid-img" :src="codeSrc" alt="暂无验证码" @click="reloadCaptcha">
65 <span class="warning" v-show="warning.valid">验证码不能为空</span>
66 </div>
67 <div id="loginBtn" class="login-btn" @click="goHome">登录</div>
18 </div> 68 </div>
19 <div class="login-user user-mt" :class="{ 'select-border': change.pass }">
20 <img class="user-icon" src="./images/password.svg" />
21 <input
22 type="password"
23 class="user-input"
24 placeholder="请输入密码"
25 v-model="userInfo.password"
26 v-show="!selectEye"
27 @focus="reduceBorder('pass')"
28 @blur="addBorder('pass')"
29 />
30 <input
31 type="text"
32 class="user-input"
33 placeholder="请输入密码"
34 v-model="userInfo.password"
35 v-show="selectEye"
36 @focus="reduceBorder('pass')"
37 @blur="addBorder('pass')"
38 />
39 <img
40 class="password-eye"
41 src="./images/open.svg"
42 @click="selectEyes"
43 v-show="selectEye"
44 />
45 <img
46 class="password-eye"
47 src="./images/close.svg"
48 @click="selectEyes"
49 v-show="!selectEye"
50 />
51 <span class="warning" v-show="warning.pass">密码不能为空</span>
52 </div>
53 <div class="login-user login-valid" :class="{ 'select-border': change.valid }">
54 <img class="user-icon" src="./images/valid.svg" />
55 <input
56 type="text"
57 class="user-input"
58 placeholder="请输入验证码"
59 v-model="userInfo.captchaCode"
60 @focus="reduceBorder('valid')"
61 @blur="addBorder('valid')"
62 />
63 <img class="valid-img" :src="codeSrc" alt="暂无验证码" @click="reloadCaptcha">
64 <span class="warning" v-show="warning.valid">验证码不能为空</span>
65 </div>
66 <div id="loginBtn" class="login-btn" @click="goHome">登录</div>
67 </div> 69 </div>
68 </div> 70 </div>
69 </div> 71 </div>
...@@ -198,6 +200,11 @@ export default { ...@@ -198,6 +200,11 @@ export default {
198 }; 200 };
199 </script> 201 </script>
200 <style lang="scss" scoped> 202 <style lang="scss" scoped>
203 input::placeholder{
204 color: #878787;
205 font-size: 14px;
206 font-family:Arial, Helvetica, sans-serif
207 }
201 #login { 208 #login {
202 width: 100vw; 209 width: 100vw;
203 height: 100vh; 210 height: 100vh;
...@@ -205,11 +212,18 @@ export default { ...@@ -205,11 +212,18 @@ export default {
205 background-size: 100% 100%; 212 background-size: 100% 100%;
206 overflow: hidden; 213 overflow: hidden;
207 position: relative; 214 position: relative;
215 .login-content-wrap{
216 position: absolute;
217 left: 50%;
218 top: 50%;
219 transform: translate(-50%, -50%);
220 }
208 .login-logo { 221 .login-logo {
209 margin-top: 18vh;
210 height: 70px; 222 height: 70px;
211 width: 100%; 223 width: 100%;
212 text-align: center; 224 text-align: center;
225 position: absolute;
226 top: -70px;
213 } 227 }
214 .login-logo img { 228 .login-logo img {
215 height: 100%; 229 height: 100%;
......