diff --git a/src/components/explore/content.jsx b/src/components/explore/content.jsx index 03abe17..880bc94 100644 --- a/src/components/explore/content.jsx +++ b/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() { - {products.map((item, index) => ( + {hotRankings.map((item, index) => ( {index === 0 && ( @@ -246,10 +239,20 @@ export default function ExploreContent() {
{item.title}
-
{item.title}
-
{item.price}
-
{item.sales}
-
{item.volume}
+
+
{item.title}
+
{item.price}
+
+
+ 销售额 + {item.salesvalue} +
+
+ 销量 + {item.volumevalue} +
+
+
))} diff --git a/src/css/explore/index.css b/src/css/explore/index.css index 414f2b3..4d49fad 100644 --- a/src/css/explore/index.css +++ b/src/css/explore/index.css @@ -185,12 +185,11 @@ } .explore-product-image { - width: 254px; - height: 254px; + width: 252px; + 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; - color: #1f2a37; + font-size: 14px; + 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 { diff --git a/src/datamock/hotRankings.js b/src/datamock/hotRankings.js new file mode 100644 index 0000000..625608c --- /dev/null +++ b/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;