redhare
/
rh-rhdata-customer-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

continue explore page

main
yezhen 2026-02-03 14:10:28 +08:00
parent df10d9cc92
commit 536b7eb501
2 changed files with 316 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/components/explore/content.jsx
View File

@ -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>

196
src/css/explore/index.css
View File

@ -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 {