ncrease the tracking area for top-selling products

main
yezhen 2026-02-01 17:26:52 +08:00
parent c61da9b738
commit 8080194041
6 changed files with 36 additions and 61 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 216 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 354 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

View File

@ -15,6 +15,7 @@ import {
} from "antd";
import { DownOutlined } from "@ant-design/icons";
import logoWhite from "../assets/images/logo-white2.png";
import adsItemImage from "../assets/images/f89fdab0.webp";
import "../css/home.css";
const { Header, Content } = Layout;
@ -138,66 +139,17 @@ export default function Home() {
</section>
<section className="home-section">
<div className="home-section-header">
<span className="home-section-number">01</span>
<Title level={2}>爆品追踪</Title>
<div className="home-section-inner">
<div className="home-section-header">
<span className="home-section-number">01</span>
<span>爆品追踪</span>
</div>
<img
className="home-section-header-image"
src={adsItemImage}
alt="ads item preview"
/>
</div>
<Card className="home-section-card" bordered={false}>
<Row gutter={24}>
<Col xs={24} lg={6} className="home-section-sidebar">
<Text className="home-section-filter-title">筛选</Text>
<Space direction="vertical" size={8} className="home-filter-list">
<Text className="home-section-filter-item">日期</Text>
<Text className="home-section-filter-item">类目</Text>
<Text className="home-section-filter-item">价格</Text>
</Space>
</Col>
<Col xs={24} lg={18}>
<Row gutter={20}>
<Col xs={24} lg={14}>
<Table
className="home-section-table"
columns={tableColumns}
dataSource={tableData}
pagination={false}
size="small"
/>
</Col>
<Col xs={24} lg={10}>
<Card
className="home-section-preview-card"
bordered={false}
>
<div className="home-section-preview-image" />
<Row gutter={[12, 12]}>
<Col span={8}>
<Statistic value="¥920.18k" title="成交金额" />
</Col>
<Col span={8}>
<Statistic value="9276" title="销量" />
</Col>
<Col span={8}>
<Statistic value="¥99.20" title="成交均价" />
</Col>
</Row>
<Divider />
<Row gutter={[12, 12]}>
<Col span={8}>
<Statistic value="¥64.47k" title="直播" />
</Col>
<Col span={8}>
<Statistic value="¥0.00" title="短视频" />
</Col>
<Col span={8}>
<Statistic value="¥225.71k" title="商城" />
</Col>
</Row>
</Card>
</Col>
</Row>
</Col>
</Row>
</Card>
</section>
</Content>
</Layout>

View File

@ -217,7 +217,15 @@ body {
}
.home-section {
background-color: rgb(243, 247, 252);
width: 100%;
}
.home-section-inner {
width: 1200px;
height: 700px;
padding: 32px 48px 64px;
margin: 0 auto;
}
.home-section-header {
@ -225,10 +233,25 @@ body {
align-items: baseline;
gap: 16px;
margin-bottom: 20px;
height: 100px;
justify-content: center;
align-items: center;
font-size: 36px;
font-family: "TencentW7", "PingFang SC", "Segoe UI", sans-serif;
}
.home-section-header-image {
width: 1200px;
height: 600px;
display: block;
margin: 0 auto;
object-fit: cover;
object-position: center -100px;
border-radius: 24px;
}
.home-section-number {
font-size: 48px;
font-size: 100px;
color: #e4edf8;
font-weight: 700;
}

View File

@ -27,7 +27,7 @@ module.exports = {
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
test: /\.(png|jpe?g|gif|svg|webp)$/i,
type: "asset/resource"
},
{