diff --git a/src/components/explore/content.jsx b/src/components/explore/content.jsx index 5d4372c..3070504 100644 --- a/src/components/explore/content.jsx +++ b/src/components/explore/content.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Col, Row, Tabs, Typography } from "antd"; +import { Button, Card, Col, Row, Tabs, Typography } from "antd"; import baopinzhuizongImg from "../../assets/images/baopinzhuizong.png"; import jinduijiankongImg from "../../assets/images/jinduijiankong.png"; import darenshaixuanImg from "../../assets/images/darenshaixuan.png"; @@ -34,6 +34,14 @@ const products = Array.from({ length: 5 }, (_, index) => ({ volume: "销量 58243" })); +const focusStats = [ + { label: "商品数量", value: "0" }, + { label: "成交金额", value: "$0.00", sub: "$0.00 单品平均" }, + { label: "直播成交", value: "$0.00", sub: "$0.00 单品平均" }, + { label: "视频成交", value: "$0.00", sub: "$0.00 单品平均" }, + { label: "商品卡成交", value: "$0.00", sub: "$0.00 单品平均" } +]; + export default function ExploreContent() { return (
@@ -95,29 +103,119 @@ export default function ExploreContent() { className="explore-hot-tabs" defaultActiveKey="hot" items={[ - { key: "hot", label: "🔥 热卖榜单" }, - { key: "follow", label: "📌 我的关注" } + { + key: "hot", + label: "🔥 热卖榜单", + children: ( + +
+
+ 热卖商品 + (01/02 ~ 01/31) +
+ +
+ + {products.map((item, index) => ( + + +
+ TOP {index + 1} +
+
+
{item.title}
+
{item.price}
+
{item.sales}
+
{item.volume}
+ + + ))} + +
+ +
+ + ) + }, + { + key: "follow", + label: "📌 我的关注", + children: ( + +
+ {["商品", "达人", "小店", "视频", "脚本工具"].map((tab) => ( + + ))} +
+ +
+
+
+
+ 2026/01/31 + + 2026/01/31 +
+
+ {["昨日", "过去7天", "过去30天", "过去90天", "过去180天", "过去365天"].map( + (filter) => ( + + ) + )} + +
+
+
+ {focusStats.map((stat) => ( +
+
{stat.label}
+
{stat.value}
+ {stat.sub &&
{stat.sub}
} +
+ ))} +
+
+ +
+ + +
+
+
+
+ 商品信息 + 成交金额 + 销量 + 平均销售价 + 达人 + 视频 + 操作 +
+
+
+
+ 添加关注商品,实时监控数据走势 +
+ +
+
+ + ) + } ]} /> - -
- 热卖商品 - (01/02 ~ 01/31) -
- - {products.map((item) => ( - - -
-
{item.title}
-
{item.price}
-
{item.sales}
-
{item.volume}
- - - ))} - -
diff --git a/src/css/explore/index.css b/src/css/explore/index.css index 71e4b85..e52c0cf 100644 --- a/src/css/explore/index.css +++ b/src/css/explore/index.css @@ -90,12 +90,24 @@ .explore-hot { padding: 24px 0 40px; + background: linear-gradient(180deg, #e9f3ff 0%, #f7fbff 100%); } .explore-hot-tabs { margin-bottom: 16px; } +.explore-hot-tabs .ant-tabs-tab { + height: 50px; + padding: 10px 0; +} + +.explore-hot-tabs .ant-tabs-tab-btn { + font-size: 24px; + font-weight: 500; + line-height: 30px; +} + .explore-hot-card { border-radius: 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); @@ -106,6 +118,18 @@ align-items: center; gap: 8px; margin-bottom: 16px; + justify-content: space-between; +} + +.explore-hot-header-left { + display: flex; + align-items: center; + gap: 8px; +} + +.explore-hot-more { + font-size: 12px; + color: #94a3b8; } .explore-hot-title { @@ -121,6 +145,29 @@ .explore-product-card { border-radius: 12px; background: #fff; + position: relative; +} + +.explore-product-rank { + 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; } .explore-product-image { @@ -147,6 +194,155 @@ color: #94a3b8; } +.explore-hot-footer { + text-align: center; + margin-top: 12px; +} + +.explore-follow-card { + border-radius: 16px; + box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); + padding: 16px; +} + +.explore-follow-tabs { + display: flex; + align-items: center; + gap: 16px; + border-bottom: 1px solid #eef2f7; + padding-bottom: 12px; +} + +.explore-follow-tab { + background: transparent; + border: 0; + font-size: 14px; + color: #1f2a37; + cursor: pointer; + padding-bottom: 8px; +} + +.explore-follow-actions { + margin-left: auto; +} + +.explore-follow-toolbar { + display: flex; + align-items: center; + gap: 16px; + padding: 12px 0; +} + +.explore-follow-date { + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 6px; + padding: 6px 10px; + font-size: 12px; + color: #6b7280; +} + +.explore-follow-divider { + margin: 0 6px; +} + +.explore-follow-filters { + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.explore-follow-filter { + border: 1px solid #e5e7eb; + background: #fff; + padding: 4px 10px; + border-radius: 6px; + font-size: 12px; + color: #6b7280; +} + +.explore-follow-stats { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 12px; + padding: 12px 0; + border-top: 1px solid #eef2f7; + border-bottom: 1px solid #eef2f7; +} + +.explore-follow-stat { + background: #f9fafb; + border-radius: 8px; + padding: 10px 12px; +} + +.explore-follow-stat-label { + font-size: 12px; + color: #6b7280; +} + +.explore-follow-stat-value { + font-size: 18px; + font-weight: 600; + color: #1f2a37; + margin-top: 6px; +} + +.explore-follow-stat-sub { + font-size: 11px; + color: #38bdf8; + margin-top: 4px; +} + +.explore-follow-search { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px 0; +} + +.explore-follow-search input { + flex: 1; + border: 1px solid #e5e7eb; + border-radius: 6px; + padding: 8px 12px; + font-size: 12px; +} + +.explore-follow-tools { + display: flex; + gap: 8px; +} + +.explore-follow-table { + border-top: 1px solid #eef2f7; +} + +.explore-follow-table-head { + display: grid; + grid-template-columns: 2fr repeat(5, 1fr) 0.6fr; + padding: 12px 8px; + font-size: 12px; + color: #6b7280; +} + +.explore-follow-empty { + display: flex; + flex-direction: column; + align-items: center; + padding: 40px 0; + color: #94a3b8; + gap: 12px; +} + +.explore-follow-empty-icon { + width: 90px; + height: 70px; + border-radius: 50%; + background: #eef2f7; +} + @media (max-width: 1392px) { .explore-how-inner, .explore-hot-inner {