feat: 首页新增静态货品分层模块

分类7图+随身电力/桌搭空间/电力补给三板块+底部大图,共22张静态图均带新窗口跳转链接;移动端按列数等分自适应;gitignore忽略bak
This commit is contained in:
opd-admin
2026-10-16 11:08:14 +08:00
parent cc434cf89f
commit 3fd98244fd
25 changed files with 162 additions and 102 deletions

View File

@@ -317,16 +317,14 @@ input {
margin-bottom: 50px;
}
.section-title .title {
font-size: 24px;
font-size: 2.6rem;
font-weight: 600;
display: inline-block;
color: #424242;
margin: 0 0 25px;
line-height: 27px;
margin-top: 175px;
}
@media only screen and (max-width: 767px) {
.section-title .title {
font-size: 30px;
font-size: 2.4rem;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
@@ -351,7 +349,6 @@ input {
}
.section-title P {
line-height: 30px;
color: #747474;
}
@media only screen and (max-width: 479px) {
.section-title.mb-60px {
@@ -9401,3 +9398,82 @@ body.offcanvas-open {
--bs-gutter-x: 0;
}
}
/* ===== 首页静态模块(新增) ===== */
/* 公共:小图行 flex 居中 */
.home-img-grid {
display: grid;
gap: 28px;
grid-auto-flow: column;
margin-top: 23px;
align-items: center;
justify-content: center;
}
.home-img-grid img {
height: auto;
max-width: 100%;
display: block;
}
/* 公共:大图块居中 */
.home-img-block { text-align: center; }
.home-img-block img { max-width: 100%; height: auto; display: inline-block; margin: 0; }
.home-subtitle { font-size: 1.2rem; margin: 5px 0 0; }
.home-mt-150 { margin-top: 150px; }
/* 公共:图片跳转链接 */
.home-img-grid a { display: block; }
.home-img-block a { display: inline-block; }
/* 分类 7 图:上排3张 home-cate3 / 下排4张 home-cate4 */
.home-cate3,
.home-cate4 {
display: flex;
justify-content: center;
align-items: end;
gap: 0;
}
.home-cate3 img { margin: 40px 95px; }
.home-cate4 img { margin: 40px 95px; }
/* 随身电力:大图 h_n1 + 小图 h_n2-h_n4(小图间距走 .home-img-grid 的 gap) */
.home-power-big img { margin: 0; }
/* 桌搭空间:大图 h2_n1 + 小图 h2_n2-h2_n4 */
.home-desk-big img { margin: 0; }
/* 电力补给:大图 h3_n1 + 两行小图 h3_n2-h3_n5 */
.home-charge-big img { margin: 0; }
/* 底部:大图 n_cpbs + 店铺底部导航 n_dpdbd */
.home-bottom-big img { margin: 0; }
.home-bottom-nav img { margin: 0; }
/* ===== 移动端自适应(≤767px) ===== */
@media (max-width: 767px) {
/* 小图行改为按列数等分铺满,间距收紧 */
.home-img-grid {
gap: 8px;
margin-top: 12px;
grid-auto-flow: row;
width: 100%;
}
.home-img-grid img { width: 100%; margin: 0; }
/* 分类 7 图:3列 / 4列等分 */
.home-cate3,
.home-cate4 {
display: grid;
align-items: baseline;
gap: 8px;
}
.home-cate3 { grid-template-columns: repeat(3, 1fr); }
.home-cate4 { grid-template-columns: repeat(4, 1fr); }
.home-cate3 img,
.home-cate4 img { margin: 0; }
/* 随身电力 / 桌搭空间小图:3列等分 */
.home-power-small,
.home-desk-small { grid-template-columns: repeat(3, 1fr); }
/* 电力补给小图:2列等分 */
.home-charge-small { grid-template-columns: repeat(2, 1fr); }
/* 大图撑满宽度 */
.home-img-block img { width: 100%; }
/* 间距与字号收缩 */
.home-mt-150 { margin-top: 60px; }
.home-subtitle { font-size: 0.85rem; }
.section-title .title { margin-top: 60px; font-size: 1.75rem; }
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 299 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 303 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 545 KiB