style(site): enlarge banner and tighten spacing
This commit is contained in:
@@ -12,7 +12,7 @@ Build app UI in `src/`. Keep `.openai/hosting.json`, `worker/index.js`, `scripts
|
|||||||
|
|
||||||
- 本项目是品牌化管理入口门户,不承载统一登录、运营数据或业务编辑。
|
- 本项目是品牌化管理入口门户,不承载统一登录、运营数据或业务编辑。
|
||||||
- 门户使用常规三行布局:头部展示 Logo、名称与口号,中间为广告语与滚动图 Banner,底部为三个管理系统入口。
|
- 门户使用常规三行布局:头部展示 Logo、名称与口号,中间为广告语与滚动图 Banner,底部为三个管理系统入口。
|
||||||
- Banner 保持紧凑,不占满页面剩余高度;三张轮播图分别对应平台、气站和配送场景。
|
- Banner 作为页面主视觉保持足够高度,头部、Banner 与系统入口之间使用紧凑间距;三张轮播图分别对应平台、气站和配送场景。
|
||||||
- 桌面端优先一屏完成,移动端允许自然纵向滚动。
|
- 桌面端优先一屏完成,移动端允许自然纵向滚动。
|
||||||
- 视觉语言延续三套管理系统登录页的半写实等距插画,并使用平台蓝、气站橙、配送青绿区分入口。
|
- 视觉语言延续三套管理系统登录页的半写实等距插画,并使用平台蓝、气站橙、配送青绿区分入口。
|
||||||
- 三个入口始终在新标签页打开,分别指向 `p.heqiapp.com`、`z.heqiapp.com` 与 `d.heqiapp.com`。
|
- 三个入口始终在新标签页打开,分别指向 `p.heqiapp.com`、`z.heqiapp.com` 与 `d.heqiapp.com`。
|
||||||
|
|||||||
@@ -42,12 +42,13 @@ a {
|
|||||||
|
|
||||||
.site-shell {
|
.site-shell {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: auto clamp(230px, 32vh, 300px) auto;
|
grid-template-rows: auto clamp(420px, 58vh, 540px) auto;
|
||||||
gap: clamp(18px, 2.4vh, 28px);
|
align-content: start;
|
||||||
|
gap: clamp(8px, 1.2vh, 12px);
|
||||||
width: min(100%, 1440px);
|
width: min(100%, 1440px);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: clamp(22px, 3.2vh, 38px) clamp(24px, 4.5vw, 68px)
|
padding: clamp(16px, 2.2vh, 26px) clamp(24px, 4.5vw, 68px)
|
||||||
clamp(24px, 3.4vh, 40px);
|
clamp(18px, 2.4vh, 28px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-header {
|
.site-header {
|
||||||
@@ -104,7 +105,7 @@ a {
|
|||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 230px;
|
min-height: 420px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #dfe8f4;
|
background: #dfe8f4;
|
||||||
border: 1px solid rgba(103, 126, 154, 0.14);
|
border: 1px solid rgba(103, 126, 154, 0.14);
|
||||||
@@ -121,7 +122,7 @@ a {
|
|||||||
.banner__slide {
|
.banner__slide {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
min-height: 230px;
|
min-height: 420px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -150,7 +151,7 @@ a {
|
|||||||
display: flex;
|
display: flex;
|
||||||
width: min(54%, 650px);
|
width: min(54%, 650px);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 230px;
|
min-height: 420px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: clamp(34px, 5vw, 74px);
|
padding: clamp(34px, 5vw, 74px);
|
||||||
@@ -217,7 +218,7 @@ a {
|
|||||||
|
|
||||||
.site-footer {
|
.site-footer {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 14px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-heading {
|
.footer-heading {
|
||||||
@@ -345,7 +346,7 @@ a {
|
|||||||
|
|
||||||
@media (max-width: 980px) {
|
@media (max-width: 980px) {
|
||||||
.site-shell {
|
.site-shell {
|
||||||
grid-template-rows: auto clamp(240px, 34vh, 310px) auto;
|
grid-template-rows: auto clamp(380px, 52vh, 480px) auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner__copy {
|
.banner__copy {
|
||||||
@@ -366,8 +367,8 @@ a {
|
|||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100dvh;
|
min-height: 100dvh;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 18px;
|
gap: 10px;
|
||||||
padding: 20px 16px 24px;
|
padding: 16px 16px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand img {
|
.brand img {
|
||||||
@@ -395,7 +396,7 @@ a {
|
|||||||
.banner,
|
.banner,
|
||||||
.banner__slide,
|
.banner__slide,
|
||||||
.banner__copy {
|
.banner__copy {
|
||||||
min-height: 310px;
|
min-height: 460px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner {
|
.banner {
|
||||||
|
|||||||
Reference in New Issue
Block a user