Home Explore Help
Sign In
asiainfo
/
static
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 1114 Releases 4 Wiki
Browse Source

登录页

wangkang3 5 years ago
parent
e6b0376e1f
commit
6ef99e5ec2
3 changed files with 49 additions and 45 deletions
Split View Show Diff Stats
  1. 3 0
      2020/company-app/biz/css/base-wk.css
  2. 25 14
      2020/company-app/login-new.html
  3. 21 31
      2020/company-app/login.html

+ 3 - 0
2020/company-app/biz/css/base-wk.css
View File 

@ -5,6 +5,9 @@ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, bo
5 5 
    font-weight: 400;
6 6 
    vertical-align: baseline;
7 7 
}
8 
.pages-login{
9 
    background: #fff;
10 
}
8 11 
.pages-login .header{
9 12 
    margin: .6rem .2rem;
10 13 
    line-height: .3rem;

+ 25 - 14
2020/company-app/login-new.html
View File 

@ -1,3 +1,4 @@
1
1 2 
<!DOCTYPE html>
2 3 
<html lang="en">
3 4 
<head>
 
@ -20,23 +21,21 @@
20 21 
<body class="pages-login">
21 22 
<div class="ipu-flex-row ipu-flex-vertical">
22 23 
    <div class="ipu-flex-col ipu-flex-col-auto">
23 
        <div class="header-container">
24 
            <div class="back-container">
25 
                <i class="ri-arrow-left-s-line"></i>
24 
        <div class="ipu-flex ipu-flex-justify-space header">
25 
            <!--                <i class="ri-close-fill"></i>-->
26 
            <i></i>
27 
            <div class="register">注册</div>
28 
        </div>
29 
        <div class="title-container">
30 
            <div>您好，</div>
31 
            <div class="ipu-flex">
32 
                <div>欢迎来到</div>
33 
                <div class="company-name">X部落-云办公套件</div>
26 34 
            </div>
27 
            <div class="login-title">登录</div>
28 35 
        </div>
29 36 
        <div class="operation-container">
30 
            <div class="ipu-flex username-container">
31 
                <i class="ri-smartphone-line point-left"></i>
32 
                <input type="text" placeholder="输入用户名"/>
33 
                <i class="ri-check-line point-right"></i>
34 
            </div>
35 
            <div class="ipu-flex pwd-container">
36 
                <i class="ri-lock-line point-left"></i>
37 
                <input type="password" placeholder="输入密码"/>
38 
                <i class="ri-eye-off-line point-right"></i>
39 
            </div>
37 
            <input type="text" placeholder="输入用户名"/>
38 
            <input type="password" placeholder="输入密码"/>
40 39 
            <div class="ipu-flex ipu-flex-justify-end">
41 40 
                <div class="forget-pwd">忘记密码？</div>
42 41 
            </div>
 
@ -44,6 +43,18 @@
44 43 
                <button class="login-button">登陆</button>
45 44 
            </div>
46 45 
        </div>
46 
        <div class="third-way-container">
47 
            <div class="ipu-flex ipu-flex-justify-space title">
48 
                <div class="border-container"></div>
49 
                <div>第三方登录</div>
50 
                <div class="border-container"></div>
51 
            </div>
52 
            <div class="ipu-flex ipu-flex-justify-space third-way">
53 
                <i class="ri-wechat-2-fill"></i>
54 
                <i class="ri-qq-fill"></i>
55 
                <i class="ri-weibo-fill"></i>
56 
            </div>
57 
        </div>
47 58 
    </div>
48 59 
</div>
49 60 
</body>

+ 21 - 31
2020/company-app/login.html
View File 

@ -18,43 +18,33 @@
18 18 
    <script src="biz/js/login.js"></script>
19 19 
</head>
20 20 
<body class="pages-login">
21 
    <div class="ipu-flex-row ipu-flex-vertical">
22 
        <div class="ipu-flex-col ipu-flex-col-auto">
23 
            <div class="ipu-flex ipu-flex-justify-space header">
24 
<!--                <i class="ri-close-fill"></i>-->
25 
                <i></i>
26 
                <div class="register">注册</div>
21 
<div class="ipu-flex-row ipu-flex-vertical">
22 
    <div class="ipu-flex-col ipu-flex-col-auto">
23 
        <div class="header-container">
24 
            <div class="back-container">
25 
                <i class="ri-arrow-left-s-line"></i>
27 26 
            </div>
28 
            <div class="title-container">
29 
                <div>您好，</div>
30 
                <div class="ipu-flex">
31 
                    <div>欢迎来到</div>
32 
                    <div class="company-name">X部落-云办公套件</div>
33 
                </div>
34 
            </div>
35 
            <div class="operation-container">
27 
            <div class="login-title">登录</div>
28 
        </div>
29 
        <div class="operation-container">
30 
            <div class="ipu-flex username-container">
31 
                <i class="ri-smartphone-line point-left"></i>
36 32 
                <input type="text" placeholder="输入用户名"/>
33 
                <i class="ri-check-line point-right"></i>
34 
            </div>
35 
            <div class="ipu-flex pwd-container">
36 
                <i class="ri-lock-line point-left"></i>
37 37 
                <input type="password" placeholder="输入密码"/>
38 
                <div class="ipu-flex ipu-flex-justify-end">
39 
                    <div class="forget-pwd">忘记密码？</div>
40 
                </div>
41 
                <div class="login-button-container">
42 
                    <button class="login-button">登陆</button>
43 
                </div>
38 
                <i class="ri-eye-off-line point-right"></i>
39 
            </div>
40 
            <div class="ipu-flex ipu-flex-justify-end">
41 
                <div class="forget-pwd">忘记密码？</div>
44 42 
            </div>
45 
            <div class="third-way-container">
46 
                <div class="ipu-flex ipu-flex-justify-space title">
47 
                    <div class="border-container"></div>
48 
                    <div>第三方登录</div>
49 
                    <div class="border-container"></div>
50 
                </div>
51 
                <div class="ipu-flex ipu-flex-justify-space third-way">
52 
                    <i class="ri-wechat-2-fill"></i>
53 
                    <i class="ri-qq-fill"></i>
54 
                    <i class="ri-weibo-fill"></i>
55 
                </div>
43 
            <div class="login-button-container">
44 
                <button class="login-button">登陆</button>
56 45 
            </div>
57 46 
        </div>
58 47 
    </div>
48 
</div>
59 49 
</body>
60 50 
</html>