first version of explore page

src/components/explore/content.jsx

@@ -7,6 +7,7 @@ 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";
+import hotRankings from "../../datamock/hotRankings";
 
 const { Title, Text } = Typography;
 
@@ -27,14 +28,6 @@ const featureCards = [
   { title: "热门直播", desc: "识别爆单直播间，找到有效打法", image: remenzhiboImg }
 ];
 
-const products = Array.from({ length: 5 }, (_, index) => ({
-  id: `product-${index}`,
-  title: "热卖商品标题",
-  price: "$59.90",
-  sales: "成交金额 $348.87万",
-  volume: "销量 58243"
-}));
-
 const focusStats = [
   { label: "商品数量", value: "0" },
   { label: "成交金额", value: "$0.00", sub: "$0.00 单品平均" },
@@ -120,7 +113,7 @@ export default function ExploreContent() {
                       </div>
                     </div>
                     <Row className="explore-product-row">
-                      {products.map((item, index) => (
+                      {hotRankings.map((item, index) => (
                         <Col key={item.id} className="explore-product-col">
                           <Card className="explore-product-card">
                             {index === 0 && (
@@ -246,10 +239,20 @@ export default function ExploreContent() {
                             <div className="explore-product-image">
                               <img src={hotTopImg} alt={item.title} />
                             </div>
-                            <div className="explore-product-title">{item.title}</div>
+                            <div className="explore-product-des">
-                            <div className="explore-product-price">{item.price}</div>
+                              <div className="explore-product-title">{item.title}</div>
-                            <div className="explore-product-meta">{item.sales}</div>
+                              <div className="explore-product-price">{item.price}</div>
-                            <div className="explore-product-meta">{item.volume}</div>
+                              <div className="explore-product-meta-row">
+                                <div className="explore-product-meta">
+                                  <span className="explore-product-meta-key">销售额</span>
+                                  <span className="explore-product-meta-value">{item.salesvalue}</span>
+                                </div>
+                                <div className="explore-product-meta">
+                                  <span className="explore-product-meta-key">销量</span>
+                                  <span className="explore-product-meta-value">{item.volumevalue}</span>
+                                </div>
+                              </div>
+                            </div>
                           </Card>
                         </Col>
                       ))}

src/css/explore/index.css

@@ -185,12 +185,11 @@
 }
 
 .explore-product-image {
-  width: 254px;
+  width: 252px;
-  height: 254px;
+  height: 252px;
   border-radius: 12px 12px 0 0;
   overflow: hidden;
   background: #f2f4f8;
-  margin-bottom: 12px;
 }
 
 .explore-product-image img {
@@ -200,10 +199,19 @@
   display: block;
 }
 
+.explore-product-des {
+  padding: 8px 12px;
+}
+
 .explore-product-title {
-  font-size: 12px;
+  font-size: 14px;
-  color: #1f2a37;
+  line-height: 20px;
+  color: rgb(34, 34, 34);
   margin-bottom: 6px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
 }
 
 .explore-product-price {
@@ -215,6 +223,28 @@
 .explore-product-meta {
   font-size: 11px;
   color: #94a3b8;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.explore-product-meta-row {
+  display: flex;
+  gap: 12px;
+  margin-top: 6px;
+}
+
+.explore-product-meta-key {
+  color: rgb(102, 102, 102);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.explore-product-meta-value {
+  color: rgb(34, 34, 34);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
 }
 
 .explore-hot-footer {

src/datamock/hotRankings.js

@@ -0,0 +1,39 @@
+const hotRankings = [
+  {
+    id: "top-1",
+    title: "[Dr.Melaxin Official] Gifted Collagen Boost Set",
+    price: "$59.90",
+    salesvalue: "$348.87万",
+    volumevalue: "58243"
+  },
+  {
+    id: "top-2",
+    title: "NeoCell Collagen Bio-Peptides Powder 20oz",
+    price: "$27.73",
+    salesvalue: "$276.06万",
+    volumevalue: "99556"
+  },
+  {
+    id: "top-3",
+    title: "[medicube] Affordable Glass Glow Skincare Set",
+    price: "$89.95",
+    salesvalue: "$260.83万",
+    volumevalue: "28998"
+  },
+  {
+    id: "top-4",
+    title: "DRDENT Purple Teeth Whitening Strips",
+    price: "$18.27",
+    salesvalue: "$245.30万",
+    volumevalue: "134252"
+  },
+  {
+    id: "top-5",
+    title: "tarte concealer paw brush",
+    price: "$27.11",
+    salesvalue: "$231.02万",
+    volumevalue: "85210"
+  }
+];
+
+export default hotRankings;