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 {