diff --git a/src/assets/images/hottop1.png b/src/assets/images/hottop1.png new file mode 100644 index 0000000..aeafd12 Binary files /dev/null and b/src/assets/images/hottop1.png differ diff --git a/src/components/explore/content.jsx b/src/components/explore/content.jsx index 3070504..03abe17 100644 --- a/src/components/explore/content.jsx +++ b/src/components/explore/content.jsx @@ -6,6 +6,7 @@ import darenshaixuanImg from "../../assets/images/darenshaixuan.png"; import qianlileimuImg from "../../assets/images/qianlileimu.png"; import baokuanshipinImg from "../../assets/images/baokuanshipin.png"; import remenzhiboImg from "../../assets/images/remenzhibo.png"; +import hotTopImg from "../../assets/images/hottop1.png"; const { Title, Text } = Typography; @@ -107,24 +108,144 @@ export default function ExploreContent() { key: "hot", label: "🔥 热卖榜单", children: ( - +
热卖商品 (01/02 ~ 01/31)
- + +
- + {products.map((item, index) => ( - - -
- TOP {index + 1} + + + {index === 0 && ( +
+ + + + + + + + + + + + + +
+ )} + {index === 1 && ( +
+ + + + + + + + + + + + + +
+ )} + {index === 2 && ( +
+ + + + + + + + + + + + + +
+ )} +
+ {item.title}
-
{item.title}
{item.price}
{item.sales}
diff --git a/src/components/home/footer.jsx b/src/components/home/footer.jsx index f80a9e0..3d08bd5 100644 --- a/src/components/home/footer.jsx +++ b/src/components/home/footer.jsx @@ -18,12 +18,12 @@ export default function HomeFooter() {
版权所有：深圳火蚁木木科技有限公司 - 备案号：（注册中...） + 备案号：粤ICP备2024173664号
-
联系方式：redhare@redhare.cc 办公地址：深圳市南山区粤海街道海滨二路99号 diff --git a/src/css/explore/index.css b/src/css/explore/index.css index e52c0cf..414f2b3 100644 --- a/src/css/explore/index.css +++ b/src/css/explore/index.css @@ -111,6 +111,15 @@ .explore-hot-card { border-radius: 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); + + .ant-col { + width: 254px; + padding: 0 !important; + + .ant-card-body { + padding: 0 !important; + } + } } .explore-hot-header { @@ -128,53 +137,67 @@ } .explore-hot-more { - font-size: 12px; - color: #94a3b8; + font-size: 14px; + line-height: 20px; + color: rgb(153,153,153); + display: inline-flex; + align-items: center; + gap: 4px; } .explore-hot-title { - font-weight: 600; - color: #1f2a37; + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: rgb(34,34,34); } .explore-hot-range { color: #94a3b8; - font-size: 12px; + font-size: 16px; } .explore-product-card { border-radius: 12px; background: #fff; position: relative; + width: 254px; + height: 388px; + padding: 0; } -.explore-product-rank { +.explore-product-col { + flex: 0 0 254px; + max-width: 254px; +} + +.explore-product-row { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +.explore-product-flag { position: absolute; - top: 10px; - left: 10px; - padding: 2px 8px; - border-radius: 10px; - font-size: 10px; - font-weight: 600; - color: #7c4a10; - background: #f3e6d4; -} - -.explore-product-rank.rank-2 { - color: #225c8b; - background: #dbeaff; -} - -.explore-product-rank.rank-3 { - color: #9f3a3a; - background: #ffe1e1; + top: 0; + left: 0; + z-index: 2; } .explore-product-image { - height: 120px; - border-radius: 12px; + width: 254px; + height: 254px; + border-radius: 12px 12px 0 0; + overflow: hidden; background: #f2f4f8; - margin-bottom: 10px; + margin-bottom: 12px; +} + +.explore-product-image img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; } .explore-product-title { diff --git a/src/css/homecss/footer.css b/src/css/homecss/footer.css index 03893b3..f62ad0b 100644 --- a/src/css/homecss/footer.css +++ b/src/css/homecss/footer.css @@ -36,6 +36,10 @@ gap: 24px; margin-top: 8px; flex-wrap: wrap; + > a { + line-height: 22px; + color: rgba(0,0,0,0.88); + } } .home-footer-icp {