feat 公共样式整改
This commit is contained in:
@@ -85,77 +85,57 @@ const coreBusiness = [
|
||||
|
||||
<style lang="less" scoped>
|
||||
.app-footer {
|
||||
// 设计稿:footer 顶 y=1942,总高 481px。各行绝对坐标换算为相对 footer 顶:
|
||||
// 列标题 54 / 内容首行 115 / legal[0] 332 / legal[1] 371。
|
||||
min-height: @footer-height;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: @footer-bg;
|
||||
color: @white;
|
||||
padding: @spacing-xl 0 @spacing-base;
|
||||
|
||||
&__inner {
|
||||
.flex(row, flex-start, flex-start);
|
||||
.flex(row, space-between, flex-start);
|
||||
flex-wrap: wrap;
|
||||
gap: @spacing-xl;
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
max-width: @page-content;
|
||||
margin: 0 auto;
|
||||
height: 250px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 54px;
|
||||
padding-left: clamp(
|
||||
@spacing-base,
|
||||
calc((100% - 1609px) / 2),
|
||||
155px
|
||||
);
|
||||
overflow: hidden;
|
||||
padding: 0 @page-gutter;
|
||||
}
|
||||
|
||||
&__about {
|
||||
flex: 0 1 625px; // x155 → 780
|
||||
flex: 0 1 360px;
|
||||
max-width: 420px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__brand {
|
||||
.flex(row, flex-start);
|
||||
margin-bottom: 20px;
|
||||
margin-left: 45px;
|
||||
margin-bottom: @spacing-sm;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: @font-size-xl;
|
||||
font-size: @font-size-lg;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin-top: 0;
|
||||
margin: 0;
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
color: fade(@white, 72%);
|
||||
}
|
||||
|
||||
&__col {
|
||||
.flex(column, flex-start, flex-start);
|
||||
gap: 0;
|
||||
gap: 2px;
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
|
||||
&--core {
|
||||
flex: 0 0 193px;
|
||||
margin-left: 142px;
|
||||
}
|
||||
&--nav {
|
||||
flex: 0 0 80px;
|
||||
margin-left: 142px;
|
||||
}
|
||||
&--contact {
|
||||
flex: 0 0 253px;
|
||||
margin-left: 174px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: @spacing-base;
|
||||
font-size: @font-size-lg;
|
||||
margin: 0 0 @spacing-sm;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
@@ -165,10 +145,11 @@ const coreBusiness = [
|
||||
&__link {
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 1.8;
|
||||
line-height: 1.7;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
color: fade(@white, 72%);
|
||||
|
||||
&:hover {
|
||||
color: @primary-light;
|
||||
@@ -178,30 +159,29 @@ const coreBusiness = [
|
||||
&__contact {
|
||||
font-size: @font-size-sm;
|
||||
font-weight: 400;
|
||||
line-height: 1.8;
|
||||
line-height: 1.7;
|
||||
color: fade(@white, 72%);
|
||||
}
|
||||
|
||||
&__bottom {
|
||||
width: 867px;
|
||||
max-width: calc(100% - 32px);
|
||||
margin: 0 auto;
|
||||
padding-bottom: 20px;
|
||||
text-align: left;
|
||||
// legal[0] 需落在相对 footer 顶 332px 处
|
||||
margin-top: 62px;
|
||||
width: 100%;
|
||||
max-width: @page-content;
|
||||
margin: @spacing-lg auto 0;
|
||||
padding: @spacing-base @page-gutter 0;
|
||||
border-top: 1px solid fade(@white, 10%);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__legal {
|
||||
margin: 0;
|
||||
font-size: @font-size-sm;
|
||||
font-size: @font-size-xs;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
white-space: nowrap;
|
||||
color: @white;
|
||||
color: fade(@white, 55%);
|
||||
|
||||
&--icp {
|
||||
margin-top: @spacing-base;
|
||||
margin-left: 315px;
|
||||
margin-top: @spacing-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user