feat: 首页新增静态货品分层模块
分类7图+随身电力/桌搭空间/电力补给三板块+底部大图,共22张静态图均带新窗口跳转链接;移动端按列数等分自适应;gitignore忽略bak
88
public/assets/css/style.min.css
vendored
@@ -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; }
|
||||
}
|
||||
|
||||
BIN
public/assets/images/home/h2_n1.png
Normal file
|
After Width: | Height: | Size: 269 KiB |
BIN
public/assets/images/home/h2_n2.png
Normal file
|
After Width: | Height: | Size: 76 KiB |
BIN
public/assets/images/home/h2_n3.png
Normal file
|
After Width: | Height: | Size: 70 KiB |
BIN
public/assets/images/home/h2_n4.png
Normal file
|
After Width: | Height: | Size: 95 KiB |
BIN
public/assets/images/home/h3_n1.png
Normal file
|
After Width: | Height: | Size: 299 KiB |
BIN
public/assets/images/home/h3_n2.png
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
public/assets/images/home/h3_n3.png
Normal file
|
After Width: | Height: | Size: 119 KiB |
BIN
public/assets/images/home/h3_n4.png
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
public/assets/images/home/h3_n5.png
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
public/assets/images/home/h_n1.png
Normal file
|
After Width: | Height: | Size: 303 KiB |
BIN
public/assets/images/home/h_n2.png
Normal file
|
After Width: | Height: | Size: 72 KiB |
BIN
public/assets/images/home/h_n3.png
Normal file
|
After Width: | Height: | Size: 70 KiB |
BIN
public/assets/images/home/h_n4.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
public/assets/images/home/n_c1.png
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
public/assets/images/home/n_c2.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
public/assets/images/home/n_c3.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
public/assets/images/home/n_c4.png
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
public/assets/images/home/n_c5.png
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
public/assets/images/home/n_c6.png
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
public/assets/images/home/n_c7.png
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
public/assets/images/home/n_cpbs.png
Normal file
|
After Width: | Height: | Size: 1.8 MiB |
BIN
public/assets/images/home/n_dpdbd.png
Normal file
|
After Width: | Height: | Size: 545 KiB |