150 lines
3.1 KiB
Plaintext
150 lines
3.1 KiB
Plaintext
|
||
.container {
|
||
width: 100%;
|
||
max-width: @container-width;
|
||
margin: 0 auto;
|
||
padding: 0
|
||
clamp(@spacing-base, calc((100% - @page-content) / 2), @page-gutter);
|
||
}
|
||
|
||
.container--home {
|
||
padding: 0 @home-gutter;
|
||
|
||
// 1:1 还原基准为 1920。仅当视口明显窄于 1920 时才收窄留白。
|
||
@media (max-width: 1600px) {
|
||
padding: 0 @spacing-lg;
|
||
}
|
||
}
|
||
|
||
.auth-page {
|
||
position: relative;
|
||
display: flex;
|
||
min-height: 100vh;
|
||
background: @white;
|
||
|
||
// 设计稿 #36/#38/#39 的左侧品牌区为固定 784px 渐变块。
|
||
&__brand {
|
||
.flex(column, flex-start, flex-start);
|
||
flex: 0 0 @login-brand-width;
|
||
padding: 304px 0 0 257px;
|
||
background: linear-gradient(
|
||
160deg,
|
||
@auth-gradient-from 0%,
|
||
@auth-gradient-to 100%
|
||
);
|
||
color: @white;
|
||
text-align: left;
|
||
}
|
||
|
||
&__logo {
|
||
margin: 0;
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
line-height: 58px;
|
||
color: @white;
|
||
}
|
||
|
||
&__key {
|
||
margin: 26px 0 0;
|
||
font-size: 15px;
|
||
font-weight: 400;
|
||
letter-spacing: 0.5px;
|
||
color: @white;
|
||
}
|
||
|
||
&__slogan {
|
||
// logo(116) + key 上距 26 + key(20) = 162；设计稿 slogan 顶 715，
|
||
// 故与 key 底(446+20=466) 间距 249px。
|
||
margin: 249px 0 0;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
line-height: 29px;
|
||
letter-spacing: 8px;
|
||
color: @white;
|
||
}
|
||
|
||
// 设计稿 #39：右上角「游客模式」12px，标注框 (1840,24) 64.2×16
|
||
// （64.2 含 Sketch 文本框内边距，实际文字 48px），右留白 16px。
|
||
&__guest {
|
||
position: absolute;
|
||
top: 24px;
|
||
right: 16px;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 16px;
|
||
color: #1f2937;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
|
||
&:hover {
|
||
color: @primary-strong;
|
||
}
|
||
}
|
||
|
||
&__main {
|
||
.flex(column, center, center);
|
||
flex: 1;
|
||
min-width: 0;
|
||
// 设计稿三页的标题顶分别为 306/287/268，卡片在 1080 视口中居中后
|
||
// 会比标注高 15px，用上内边距把内容整体下移补平。
|
||
padding: 80px 0 40px;
|
||
}
|
||
|
||
// 设计稿表单区统一 693px 宽。标题/副标题按自身文字宽度相对表单居中，
|
||
// 不额外内缩——设计稿标注的 714px 宽是 Sketch 文本框含内边距的值。
|
||
&__card {
|
||
.flex(column, flex-start, flex-start);
|
||
width: @login-form-width;
|
||
text-align: left;
|
||
}
|
||
|
||
&__title {
|
||
margin: 0;
|
||
font-size: 34px;
|
||
font-weight: 700;
|
||
line-height: 45px;
|
||
color: #1f2937;
|
||
}
|
||
|
||
// 三页副标题样式一致且模板类名统一为 auth-page__subtitle，
|
||
// 放在公共层，避免各页 scoped 选择器与模板类名不匹配。
|
||
&__subtitle {
|
||
margin: 12px 0 0;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 17px;
|
||
color: #6b7280;
|
||
}
|
||
|
||
&__title,
|
||
&__subtitle {
|
||
align-self: center;
|
||
text-align: center;
|
||
}
|
||
|
||
&__link {
|
||
color: @primary-strong;
|
||
|
||
&:hover {
|
||
color: @primary-hover;
|
||
}
|
||
}
|
||
}
|
||
|
||
.link {
|
||
cursor: pointer;
|
||
transition: color 0.2s;
|
||
|
||
&:hover {
|
||
color: @primary-color;
|
||
}
|
||
}
|
||
|
||
.text-ellipsis {
|
||
.ellipsis();
|
||
}
|
||
|
||
.text-secondary {
|
||
color: @text-color-secondary;
|
||
}
|