first version of explore page
parent
1b0e92d7dc
commit
397a57b436
|
|
@ -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-price">{item.price}</div>
|
||||
<div className="explore-product-meta">{item.sales}</div>
|
||||
<div className="explore-product-meta">{item.volume}</div>
|
||||
<div className="explore-product-des">
|
||||
<div className="explore-product-title">{item.title}</div>
|
||||
<div className="explore-product-price">{item.price}</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>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue