continue explore page

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 (
     <div className="explore-content">
@@ -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: (
+                  <Card className="explore-hot-card" bordered={false}>
+                    <div className="explore-hot-header">
+                      <div className="explore-hot-header-left">
+                        <Text className="explore-hot-title">热卖商品</Text>
+                        <Text className="explore-hot-range">(01/02 ~ 01/31)</Text>
+                      </div>
+                      <Button type="link" className="explore-hot-more">
+                        更多
+                      </Button>
+                    </div>
+                    <Row gutter={[16, 16]}>
+                      {products.map((item, index) => (
+                        <Col key={item.id} xs={24} sm={12} lg={4}>
+                          <Card className="explore-product-card" bordered={false}>
+                            <div className={`explore-product-rank rank-${index + 1}`}>
+                              TOP {index + 1}
+                            </div>
+                            <div className="explore-product-image" />
+                            <div className="explore-product-title">{item.title}</div>
+                            <div className="explore-product-price">{item.price}</div>
+                            <div className="explore-product-meta">{item.sales}</div>
+                            <div className="explore-product-meta">{item.volume}</div>
+                          </Card>
+                        </Col>
+                      ))}
+                    </Row>
+                    <div className="explore-hot-footer">
+                      <Button type="link">更多榜单</Button>
+                    </div>
+                  </Card>
+                )
+              },
+              {
+                key: "follow",
+                label: "📌 我的关注",
+                children: (
+                  <Card className="explore-follow-card" bordered={false}>
+                    <div className="explore-follow-tabs">
+                      {["商品", "达人", "小店", "视频", "脚本工具"].map((tab) => (
+                        <button key={tab} className="explore-follow-tab">
+                          {tab}
+                        </button>
+                      ))}
+                      <div className="explore-follow-actions">
+                        <Button type="primary" size="small">
+                          添加商品
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="explore-follow-toolbar">
+                      <div className="explore-follow-date">
+                        <span>2026/01/31</span>
+                        <span className="explore-follow-divider">—</span>
+                        <span>2026/01/31</span>
+                      </div>
+                      <div className="explore-follow-filters">
+                        {["昨日", "过去7天", "过去30天", "过去90天", "过去180天", "过去365天"].map(
+                          (filter) => (
+                            <button key={filter} className="explore-follow-filter">
+                              {filter}
+                            </button>
+                          )
+                        )}
+                        <button className="explore-follow-filter">分组</button>
+                      </div>
+                    </div>
+                    <div className="explore-follow-stats">
+                      {focusStats.map((stat) => (
+                        <div key={stat.label} className="explore-follow-stat">
+                          <div className="explore-follow-stat-label">{stat.label}</div>
+                          <div className="explore-follow-stat-value">{stat.value}</div>
+                          {stat.sub && <div className="explore-follow-stat-sub">{stat.sub}</div>}
+                        </div>
+                      ))}
+                    </div>
+                    <div className="explore-follow-search">
+                      <input type="text" placeholder="搜索已关注商品" />
+                      <div className="explore-follow-tools">
+                        <Button size="small">列表设置</Button>
+                        <Button size="small" type="primary">
+                          数据导出
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="explore-follow-table">
+                      <div className="explore-follow-table-head">
+                        <span>商品信息</span>
+                        <span>成交金额</span>
+                        <span>销量</span>
+                        <span>平均销售价</span>
+                        <span>达人</span>
+                        <span>视频</span>
+                        <span>操作</span>
+                      </div>
+                      <div className="explore-follow-empty">
+                        <div className="explore-follow-empty-icon" />
+                        <div className="explore-follow-empty-text">
+                          添加关注商品，实时监控数据走势
+                        </div>
+                        <Button type="primary" size="small">
+                          添加商品
+                        </Button>
+                      </div>
+                    </div>
+                  </Card>
+                )
+              }
             ]}
           />
-          <Card className="explore-hot-card" bordered={false}>
-            <div className="explore-hot-header">
-              <Text className="explore-hot-title">热卖商品</Text>
-              <Text className="explore-hot-range">(01/02 ~ 01/31)</Text>
-            </div>
-            <Row gutter={[16, 16]}>
-              {products.map((item) => (
-                <Col key={item.id} xs={24} sm={12} lg={4}>
-                  <Card className="explore-product-card" bordered={false}>
-                    <div className="explore-product-image" />
-                    <div className="explore-product-title">{item.title}</div>
-                    <div className="explore-product-price">{item.price}</div>
-                    <div className="explore-product-meta">{item.sales}</div>
-                    <div className="explore-product-meta">{item.volume}</div>
-                  </Card>
-                </Col>
-              ))}
-            </Row>
-          </Card>
         </div>
       </section>
     </div>

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 {