大家好~我是
米洛
!
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程
,希望大家多多支持。
欢迎关注我的公众号米洛的测开日记
,一起交流学习!
# 回顾
上一节我们修复了接口文档的问题,这一节我们来改造下登录页。
# 现在的登录页
怎么说呢,比较难看,再加上上下还有空隙,所以在忍受了许久以后我打算对它下手了。
说句实话,这块内容涉及到比较多css的东西,为了节约时间,我白嫖
了github上的一些登录模板。
先来看下最终的模板:
不能说很好看,但起码比之前更扁平化
了一些,之前花里胡哨的,我还是更喜欢简约点的。
下面是原作者的git地址: https://github.com/zeroojs/landing-ux (opens new window)
# 开始改造
- 修改BasicLayout.jsx
import {DefaultFooter, getMenuData, getPageTitle} from '@ant-design/pro-layout';
import {connect, FormattedMessage, Link, useIntl} from 'umi';
import React from 'react';
import login from '../assets/login.svg';
import logo from '../assets/logo.svg';
import './index.css';
import styles from './UserLayout.less';
const UserLayout = (props) => {
const {
route = {
routes: [],
},
} = props;
const {routes = []} = route;
const {
children,
location = {
pathname: '',
},
} = props;
const {formatMessage} = useIntl();
const {breadcrumb} = getMenuData(routes);
const title = getPageTitle({
pathname: location.pathname,
formatMessage,
breadcrumb,
...props,
});
return (
<div className="container">
<div className="form-warp">
<div>
<div className={styles.top}>
<div className={styles.header}>
<Link to="/">
<img alt="logo" className={styles.logo} src={logo}/>
<span className={styles.title}>pity</span>
</Link>
</div>
<div className={styles.desc}>
<FormattedMessage
id="pages.layouts.userLayout.title"
defaultMessage="pity是一款开源且自由的接口自动化平台"
/>
</div>
</div>
</div>
{children}
<DefaultFooter copyright={
<span>{new Date().getFullYear()} woody个人出品 <a
href="https://beian.miit.gov.cn">鄂ICP备20001602号</a></span>} links={false} style={{
background: '#ffffff'
}}/>
</div>
<div className="desc-warp">
<div className="desc-warp-item sign-up-desc">
<div className="content">
</div>
<img className="image" src={login} alt=""/>
</div>
</div>
</div>
);
};
export default connect(({settings}) => ({...settings}))(UserLayout);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
我们把原先的结构调整一下,与github的模式一致,保留的地方是children(也就是我们的登录表单)。
新增index.css
写好html页面以后,我们还需要引入css,这儿我做了一些改动,我去掉了注册/登录页面的切换:
.container {
position: relative;
min-height: 100vh;
width: 100%;
overflow: hidden;
}
* {
font-size: 13px;
}
.container::before {
content: " ";
position: absolute;
width: 2000px;
height: 2000px;
border-radius: 50%;
background-image: linear-gradient(-45deg, #6266f5 0%, #04befe 100%);
transition: 1.8s ease-in-out;
z-index: 6;
top: -10%;
right: 48%;
transform: translateY(-50%);
}
.container.sign-up-mode::before {
transform: translate(100%, -50%);
}
.form-warp {
width: 50%;
position: absolute;
z-index: 5;
left: 75%;
top: 43%;
transform: translate(-50%, -50%);
display: grid;
grid-template-columns: 1fr;
transition: 1s 0.7s ease-in-out;
}
.container.sign-up-mode .form-warp {
left: 25%;
}
.desc-warp {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.desc-warp-item {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
padding: 3rem 17% 2rem 12%;
z-index: 6;
}
/* 事件穿透 BEGIN */
.sign-in-desc {
pointer-events: none;
}
.sign-up-mode .sign-in-desc {
pointer-events: all;
}
.sign-up-mode .sign-up-desc {
pointer-events: none;
}
/* 事件穿透 END */
.content {
width: 100%;
transition: transform 0.9s ease-in-out;
transition-delay: .6s;
}
.sign-in-desc .image,
.sign-in-desc .content {
transform: translateX(800px);
}
.sign-up-mode .sign-in-desc .image,
.sign-up-mode .sign-in-desc .content {
transform: translateX(0);
}
.sign-up-mode .sign-up-desc .image,
.sign-up-mode .sign-up-desc .content {
transform: translateX(-800px);
}
.image {
width: 100%;
display: block;
transition: transform 0.9s ease-in-out;
transition-delay: .5s;
}
/* 响应式 */
@media screen and (max-width: 870px) {
.container::before {
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
}
.container.sign-up-mode::before {
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
}
.form-warp {
width: 100%;
top: 75%;
left: 50%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
}
.container.sign-up-mode .form-warp {
top: 25%;
left: 50%;
transform: translate(-50%, 0);
}
/*.image {*/
/* width: 200px;*/
/* transition: transform 0.9s ease-in-out;*/
/* transition-delay: 0.7s;*/
/*}*/
.desc-warp {
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.desc-warp-item {
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
}
.sign-in-desc {
grid-row: 3 / 4;
}
.sign-in-desc .image,
.sign-in-desc .content {
transform: translateY(800px);
}
.sign-up-mode .sign-in-desc .image,
.sign-up-mode .sign-in-desc .content {
transform: translateY(0);
}
.sign-up-mode .sign-up-desc .image,
.sign-up-mode .sign-up-desc .content {
transform: translateY(-800px);
}
}
@media screen and (max-width: 570px) {
.container::before {
bottom: 42%;
left: 50%;
}
img {
display: none;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
css很长,是响应式的,因为我这块属实辣鸡
,所以也只好白嫖下别人的了(已给博主投币支持)。当然还有一些地方没有优化好,比如响应式不是很生效,不过总体来看的话,已经比之前效果好很多了。
# 提交按钮加border-radius
来看看区别:
- 之前半屏
- 现在半屏
# ![](https://files.mdnice.com/user/11504/15a6a24f-3a73-4690-89a9-04d0cd215dc1.png)
说到底还是自己前端太弱了,css这玩意真的是一门大大的学问,以后有机会一定要学习更多这方面的知识!