new page: explore
parent
7557f3c7d9
commit
959a5a6d3e
|
|
@ -11,7 +11,8 @@
|
||||||
"@ant-design/icons": "^5.3.0",
|
"@ant-design/icons": "^5.3.0",
|
||||||
"antd": "^5.15.3",
|
"antd": "^5.15.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0"
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.22.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.23.7",
|
"@babel/core": "^7.23.7",
|
||||||
|
|
@ -2143,6 +2144,14 @@
|
||||||
"react-dom": ">=16.9.0"
|
"react-dom": ">=16.9.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@remix-run/router": {
|
||||||
|
"version": "1.23.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
|
||||||
|
"integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@rtsao/scc": {
|
"node_modules/@rtsao/scc": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
||||||
|
|
@ -9206,6 +9215,36 @@
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/react-router": {
|
||||||
|
"version": "6.30.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
|
||||||
|
"integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@remix-run/router": "1.23.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-router-dom": {
|
||||||
|
"version": "6.30.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
|
||||||
|
"integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
|
||||||
|
"dependencies": {
|
||||||
|
"@remix-run/router": "1.23.2",
|
||||||
|
"react-router": "6.30.3"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.8",
|
||||||
|
"react-dom": ">=16.8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/readable-stream": {
|
"node_modules/readable-stream": {
|
||||||
"version": "3.6.2",
|
"version": "3.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
||||||
|
|
@ -12794,6 +12833,11 @@
|
||||||
"rc-util": "^5.44.0"
|
"rc-util": "^5.44.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@remix-run/router": {
|
||||||
|
"version": "1.23.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
|
||||||
|
"integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w=="
|
||||||
|
},
|
||||||
"@rtsao/scc": {
|
"@rtsao/scc": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
|
||||||
|
|
@ -17827,6 +17871,23 @@
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"react-router": {
|
||||||
|
"version": "6.30.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
|
||||||
|
"integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
|
||||||
|
"requires": {
|
||||||
|
"@remix-run/router": "1.23.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-router-dom": {
|
||||||
|
"version": "6.30.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
|
||||||
|
"integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
|
||||||
|
"requires": {
|
||||||
|
"@remix-run/router": "1.23.2",
|
||||||
|
"react-router": "6.30.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"readable-stream": {
|
"readable-stream": {
|
||||||
"version": "3.6.2",
|
"version": "3.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,8 @@
|
||||||
"@ant-design/icons": "^5.3.0",
|
"@ant-design/icons": "^5.3.0",
|
||||||
"antd": "^5.15.3",
|
"antd": "^5.15.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0"
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.22.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.23.7",
|
"@babel/core": "^7.23.7",
|
||||||
|
|
|
||||||
11
src/App.jsx
11
src/App.jsx
|
|
@ -1,6 +1,15 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||||
import Home from "./components/home";
|
import Home from "./components/home";
|
||||||
|
import Explore from "./components/explore";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return <Home />;
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/explore" element={<Explore />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Card, Col, Row, Tabs, Typography } from "antd";
|
||||||
|
|
||||||
|
const { Title, Text } = Typography;
|
||||||
|
|
||||||
|
const featureCards = [
|
||||||
|
{ title: "爆品追踪", desc: "最近有什么商品有机会爆单？" },
|
||||||
|
{ title: "竞对监控", desc: "竞争对手新品和策略变化随时掌握" },
|
||||||
|
{ title: "达人筛选", desc: "寻找最适合的联盟达人合作" },
|
||||||
|
{ title: "潜力类目", desc: "竞争小、机会大的类目是什么？" },
|
||||||
|
{ title: "爆款视频", desc: "最近哪些视频带货效果好？" },
|
||||||
|
{ title: "热门直播", desc: "识别爆单直播间，找到有效打法" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const products = Array.from({ length: 5 }, (_, index) => ({
|
||||||
|
id: `product-${index}`,
|
||||||
|
title: "热卖商品标题",
|
||||||
|
price: "$59.90",
|
||||||
|
sales: "成交金额 $348.87万",
|
||||||
|
volume: "销量 58243"
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function ExploreContent() {
|
||||||
|
return (
|
||||||
|
<div className="explore-content">
|
||||||
|
<section className="explore-how">
|
||||||
|
<div className="explore-how-inner">
|
||||||
|
<Title level={3} className="explore-how-title">
|
||||||
|
如何使用Hoyidata
|
||||||
|
</Title>
|
||||||
|
<div className="explore-how-card">
|
||||||
|
<Row gutter={[20, 20]}>
|
||||||
|
{featureCards.map((item) => (
|
||||||
|
<Col key={item.title} xs={24} md={12} lg={8}>
|
||||||
|
<Card className="explore-feature-card" bordered={false}>
|
||||||
|
<div className="explore-feature-title">{item.title}</div>
|
||||||
|
<div className="explore-feature-desc">{item.desc}</div>
|
||||||
|
<div className="explore-feature-visual" />
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
))}
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="explore-hot">
|
||||||
|
<div className="explore-hot-inner">
|
||||||
|
<Tabs
|
||||||
|
className="explore-hot-tabs"
|
||||||
|
defaultActiveKey="hot"
|
||||||
|
items={[
|
||||||
|
{ key: "hot", label: "🔥 热卖榜单" },
|
||||||
|
{ key: "follow", label: "📌 我的关注" }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Layout } from "antd";
|
||||||
|
import HomeHeader from "../home/header";
|
||||||
|
import HomeFooter from "../home/footer";
|
||||||
|
import ExploreContent from "./content";
|
||||||
|
import "../../css/explore/index.css";
|
||||||
|
|
||||||
|
const { Header, Content } = Layout;
|
||||||
|
|
||||||
|
export default function Explore() {
|
||||||
|
return (
|
||||||
|
<Layout className="explore">
|
||||||
|
<Header className="home-header">
|
||||||
|
<HomeHeader />
|
||||||
|
</Header>
|
||||||
|
<Content>
|
||||||
|
<ExploreContent />
|
||||||
|
</Content>
|
||||||
|
<HomeFooter />
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,17 +1,126 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Button, Divider, Dropdown, Menu, Space, Typography } from "antd";
|
import { Button, Divider, Dropdown, Menu, Space, Typography } from "antd";
|
||||||
import { DownOutlined } from "@ant-design/icons";
|
import { DownOutlined } from "@ant-design/icons";
|
||||||
|
import { useLocation, useNavigate } from "react-router-dom";
|
||||||
import logoWhite from "../../assets/images/redhare.png";
|
import logoWhite from "../../assets/images/redhare.png";
|
||||||
|
|
||||||
const { Text } = Typography;
|
const { Text } = Typography;
|
||||||
|
|
||||||
const navItems = ["探索", "类目", "店铺", "达人", "商品", "视频与广告", "直播"];
|
const navItems = [
|
||||||
|
{ key: "explore", label: "探索", path: "/explore" },
|
||||||
|
{ key: "category", label: "类目" },
|
||||||
|
{ key: "shop", label: "店铺" },
|
||||||
|
{ key: "creator", label: "达人" },
|
||||||
|
{ key: "product", label: "商品" },
|
||||||
|
{ key: "media", label: "视频与广告" },
|
||||||
|
{ key: "live", label: "直播" }
|
||||||
|
];
|
||||||
const langItems = [
|
const langItems = [
|
||||||
{ key: "zh", label: "中文(简体)" },
|
{ key: "zh", label: "中文(简体)" },
|
||||||
{ key: "en", label: "English(US)" }
|
{ key: "en", label: "English(US)" }
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const dataSources = [
|
||||||
|
{
|
||||||
|
key: "tiktok",
|
||||||
|
name: "TikTok",
|
||||||
|
desc: "全球最火热的内容电商平台",
|
||||||
|
badge: "New",
|
||||||
|
icon: (
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M10.4984 10.3003V9.67743C10.285 9.64892 10.068 9.63111 9.84397 9.63111C7.17303 9.6276 5 11.8024 5 14.4792C5 16.1201 5.818 17.5724 7.06989 18.4516C6.26256 17.5867 5.76821 16.4227 5.76821 15.1484C5.76821 12.5108 7.88077 10.3608 10.4984 10.3003Z"
|
||||||
|
fill="#25F4EE"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M10.6157 17.3624C11.8072 17.3624 12.7816 16.412 12.8243 15.2303L12.8279 4.66919H14.7555C14.7164 4.45206 14.695 4.22781 14.695 4H12.0632L12.0597 14.5611C12.017 15.7428 11.0425 16.6932 9.85107 16.6932C9.4812 16.6932 9.13266 16.6007 8.82324 16.4369C9.22157 16.9958 9.87597 17.3624 10.6157 17.3624Z"
|
||||||
|
fill="#25F4EE"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M18.3585 8.25353V7.66625C17.6223 7.66625 16.9394 7.4491 16.3633 7.07178C16.8754 7.65912 17.5689 8.08628 18.3585 8.25353Z"
|
||||||
|
fill="#25F4EE"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M16.3632 7.07184C15.8013 6.42759 15.4634 5.58754 15.4634 4.66919H14.7593C14.9406 5.67297 15.5382 6.53438 16.3632 7.07184Z"
|
||||||
|
fill="#FE2C55"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M9.8474 12.2616C8.62752 12.2616 7.63525 13.2547 7.63525 14.4756C7.63525 15.3264 8.11894 16.0667 8.82312 16.4369C8.55995 16.0739 8.40346 15.6289 8.40346 15.1448C8.40346 13.9239 9.39572 12.9308 10.6156 12.9308C10.8432 12.9308 11.0637 12.9699 11.27 13.034V10.3431C11.0566 10.3146 10.8397 10.2968 10.6156 10.2968C10.5765 10.2968 10.5409 10.3003 10.5018 10.3003V12.3648C10.292 12.3008 10.075 12.2616 9.8474 12.2616Z"
|
||||||
|
fill="#FE2C55"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M18.3582 8.25366V10.3004C16.9925 10.3004 15.7264 9.86258 14.695 9.12218V14.4793C14.695 17.1524 12.522 19.3309 9.84746 19.3309C8.81607 19.3309 7.85581 19.0034 7.06982 18.4517C7.95539 19.402 9.21795 20.0001 10.6157 20.0001C13.2866 20.0001 15.4632 17.8252 15.4632 15.1484V9.79137C16.4946 10.5318 17.7607 10.9696 19.1264 10.9696V8.33556C18.8596 8.33556 18.6036 8.30706 18.3582 8.25366Z"
|
||||||
|
fill="#FE2C55"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M14.6949 14.4792V9.12211C15.7263 9.86251 16.9924 10.3003 18.3581 10.3003V8.2536C17.5686 8.08634 16.8751 7.65918 16.3629 7.07184C15.5378 6.53438 14.9439 5.67297 14.7554 4.66919H12.8277L12.8242 15.2302C12.7815 16.412 11.807 17.3624 10.6156 17.3624C9.87584 17.3624 9.22499 16.9958 8.81955 16.4405C8.11536 16.0667 7.63168 15.3299 7.63168 14.4792C7.63168 13.2583 8.62394 12.2652 9.84383 12.2652C10.0714 12.2652 10.2919 12.3043 10.4982 12.3684V10.3039C7.88064 10.3608 5.76807 12.5108 5.76807 15.1484C5.76807 16.4227 6.26242 17.5831 7.06975 18.4516C7.85574 19.0033 8.816 19.3308 9.84738 19.3308C12.5183 19.3308 14.6949 17.1524 14.6949 14.4792Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "amazon",
|
||||||
|
name: "Amazon",
|
||||||
|
desc: "全球最大的综合电商平台",
|
||||||
|
icon: (<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-[24px] h-[24px] "><path d="M18.0342 17.5733C11.2287 20.8121 7.00515 18.1023 4.3015 16.4564C4.1342 16.3526 3.84985 16.4806 4.09656 16.764C4.99728 17.8561 7.94913 20.4885 11.8022 20.4885C15.6578 20.4885 17.9516 18.3847 18.2385 18.0177C18.5235 17.6538 18.3222 17.453 18.0342 17.5733H18.0342ZM19.9456 16.5177C19.7628 16.2797 18.8343 16.2354 18.2499 16.3072C17.6647 16.3769 16.7862 16.7346 16.8626 16.9493C16.9017 17.0298 16.9817 16.9937 17.3838 16.9575C17.7869 16.9173 18.9163 16.7748 19.1517 17.0824C19.3881 17.3922 18.7915 18.8678 18.6825 19.1058C18.5772 19.3438 18.7227 19.4052 18.9205 19.2467C19.1155 19.0882 19.4686 18.6779 19.7056 18.0972C19.9409 17.5134 20.0844 16.6989 19.9455 16.5177H19.9456Z" fill="#FF9900"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4578 10.9644C13.4578 11.8142 13.4793 12.523 13.0497 13.2777C12.703 13.8913 12.1539 14.2687 11.5403 14.2687C10.7027 14.2687 10.2149 13.6305 10.2149 12.6886C10.2149 10.8294 11.8808 10.4919 13.4578 10.4919V10.9644ZM15.6575 16.2813C15.5133 16.4101 15.3047 16.4194 15.1421 16.3334C14.4181 15.7321 14.2892 15.453 13.8904 14.8792C12.6939 16.1003 11.8471 16.4654 10.2947 16.4654C8.45999 16.4654 7.03027 15.3332 7.03027 13.066C7.03027 11.2958 7.99062 10.09 9.3558 9.501C10.5401 8.97938 12.1938 8.88735 13.4578 8.7432V8.46092C13.4578 7.9424 13.4976 7.32881 13.1939 6.88091C12.927 6.47899 12.4177 6.3133 11.9697 6.3133C11.1384 6.3133 10.3959 6.73973 10.2149 7.62332C10.178 7.81972 10.0339 8.01302 9.83752 8.0222L7.72056 7.79521C7.54265 7.75524 7.34631 7.6111 7.3954 7.33799C7.8832 4.77319 10.1995 4 12.2734 4C13.335 4 14.7217 4.28228 15.5593 5.08613C16.6209 6.07706 16.5196 7.39937 16.5196 8.83827V12.2376C16.5196 13.2593 16.943 13.7072 17.3418 14.2595C17.4829 14.4558 17.5136 14.6921 17.3357 14.8393C16.8908 15.2105 16.0992 15.9009 15.6636 16.2874L15.6575 16.2813Z" fill="white"></path></svg>)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "shopee",
|
||||||
|
name: "Shopee",
|
||||||
|
desc: "东南亚最流行的电商平台",
|
||||||
|
badge: "Beta",
|
||||||
|
icon: (
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
className="w-[24px] h-[24px]"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M17.3699 20C17.7237 19.9845 18.0596 19.8398 18.314 19.5934C18.5683 19.347 18.7236 19.0159 18.7503 18.6628L18.7551 18.5748L19.2708 8.18211V8.1661C19.2706 8.08502 19.2384 8.00728 19.181 7.94998C19.1236 7.89268 19.0458 7.8605 18.9647 7.8605H15.6527C15.5727 5.71284 14.0274 4 12.135 4C10.2425 4 8.69889 5.71244 8.61769 7.8605H5.30041C5.22026 7.86186 5.14386 7.89466 5.08766 7.95182C5.03147 8.00899 4.99999 8.08595 5 8.1661V8.1897L5.47041 18.5416L5.47721 18.6712C5.49597 19.0148 5.64006 19.3397 5.88221 19.5843C6.12437 19.8289 6.44778 19.9762 6.79124 19.9984H17.3151L17.3699 20ZM12.1354 4.93402C13.5142 4.93402 14.6378 6.23366 14.6906 7.8601H9.58011C9.63292 6.23366 10.7565 4.93402 12.1354 4.93402ZM14.7638 15.9743C14.7215 16.3487 14.5785 16.7046 14.3502 17.0044C14.1219 17.3041 13.8167 17.5364 13.467 17.6767C13.0283 17.8547 12.5563 17.9353 12.0834 17.9131C11.4269 17.8916 10.7832 17.7261 10.1977 17.4283C9.92941 17.2812 9.67608 17.1082 9.44131 16.9119C9.38811 16.8675 9.36131 16.8279 9.41211 16.7555C9.46651 16.6735 9.68332 16.3607 9.71732 16.3091C9.72691 16.2931 9.7401 16.2796 9.75584 16.2695C9.77159 16.2595 9.78945 16.2533 9.80801 16.2514C9.82657 16.2495 9.84532 16.252 9.86277 16.2586C9.88022 16.2652 9.89588 16.2758 9.90852 16.2895L10.0025 16.3619C10.598 16.8377 11.3274 17.1152 12.0886 17.1555C13.1014 17.1419 13.8358 16.6911 13.9686 15.9927C14.113 15.2231 13.499 14.5631 12.3162 14.1947C11.8068 14.0247 11.3075 13.8261 10.8205 13.5998C9.99652 13.1198 9.61211 12.4915 9.66732 11.715C9.75092 10.641 10.7537 9.83495 12.0274 9.83055C12.6031 9.83183 13.1727 9.94839 13.7026 10.1734C13.9305 10.2729 14.1495 10.3914 14.3574 10.5278C14.3736 10.5363 14.3879 10.5481 14.3991 10.5626C14.4104 10.577 14.4184 10.5937 14.4228 10.6115C14.4271 10.6292 14.4275 10.6477 14.4241 10.6657C14.4207 10.6837 14.4135 10.7008 14.403 10.7158C14.3526 10.799 14.203 11.0318 14.143 11.1286C14.099 11.195 14.0446 11.203 13.967 11.1538C13.3974 10.7736 12.7294 10.5675 12.0446 10.5606C11.1754 10.5778 10.5197 11.091 10.4765 11.7942C10.4653 12.4294 10.9513 12.8902 11.983 13.2426C14.113 13.9226 14.9202 14.7227 14.767 15.9739"
|
||||||
|
fill="#F04E23"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
export default function HomeHeader() {
|
export default function HomeHeader() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
const selectedKey = location.pathname.startsWith("/explore") ? "explore" : "";
|
||||||
|
const isHome = location.pathname === "/";
|
||||||
|
const [activeSourceKey, setActiveSourceKey] = React.useState("tiktok");
|
||||||
|
const activeSource =
|
||||||
|
dataSources.find((item) => item.key === activeSourceKey) || dataSources[0];
|
||||||
|
const sourceMenu = {
|
||||||
|
items: dataSources.map((item) => ({
|
||||||
|
key: item.key,
|
||||||
|
label: (
|
||||||
|
<div className="home-source-option">
|
||||||
|
<span className="home-source-icon">{item.icon || item.name.slice(0, 1)}</span>
|
||||||
|
<div className="home-source-meta">
|
||||||
|
<div className="home-source-name">{item.name}</div>
|
||||||
|
<div className="home-source-desc">{item.desc}</div>
|
||||||
|
</div>
|
||||||
|
{item.key === activeSource.key && <span className="home-source-check">✓</span>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})),
|
||||||
|
onClick: ({ key }) => {
|
||||||
|
setActiveSourceKey(key);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<a
|
<a
|
||||||
|
|
@ -24,14 +133,43 @@ export default function HomeHeader() {
|
||||||
<img className="home-logo" src={logoWhite} alt="Hoyidata" />
|
<img className="home-logo" src={logoWhite} alt="Hoyidata" />
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
{!isHome && (
|
||||||
|
<Dropdown
|
||||||
|
overlayClassName="home-source-dropdown"
|
||||||
|
menu={sourceMenu}
|
||||||
|
trigger={["click"]}
|
||||||
|
placement="bottomLeft"
|
||||||
|
>
|
||||||
|
<button className="home-source-trigger" type="button">
|
||||||
|
<span
|
||||||
|
className={`home-source-chip${activeSource.key === "shopee" ? " home-source-chip--shopee" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span className="home-source-icon">
|
||||||
|
{activeSource.icon || activeSource.name.slice(0, 1)}
|
||||||
|
</span>
|
||||||
|
<span className="home-source-text">{activeSource.name}</span>
|
||||||
|
{activeSource.badge && <span className="home-source-badge">{activeSource.badge}</span>}
|
||||||
|
<DownOutlined className="home-source-caret" />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</Dropdown>
|
||||||
|
)}
|
||||||
<Menu
|
<Menu
|
||||||
className="home-nav-menu"
|
className="home-nav-menu"
|
||||||
mode="horizontal"
|
mode="horizontal"
|
||||||
items={navItems.map((item) => ({
|
items={navItems.map((item) => ({
|
||||||
key: item,
|
key: item.key,
|
||||||
label: item
|
label: item.label
|
||||||
}))}
|
}))}
|
||||||
selectable={false}
|
selectable={false}
|
||||||
|
selectedKeys={selectedKey ? [selectedKey] : []}
|
||||||
|
onClick={({ key }) => {
|
||||||
|
const target = navItems.find((item) => item.key === key);
|
||||||
|
if (target?.path) {
|
||||||
|
navigate(target.path);
|
||||||
|
}
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="home-actions">
|
<div className="home-actions">
|
||||||
<Dropdown menu={{ items: langItems }} trigger={["hover"]} placement="bottomRight">
|
<Dropdown menu={{ items: langItems }} trigger={["hover"]} placement="bottomRight">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
.explore {
|
||||||
|
background: #f5f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-content {
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-how {
|
||||||
|
background: linear-gradient(180deg, #e9f3ff 0%, #f7fbff 100%);
|
||||||
|
padding: 32px 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-how-inner,
|
||||||
|
.explore-hot-inner {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-how-title {
|
||||||
|
margin: 0 0 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-how-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-feature-card {
|
||||||
|
background: #f0f6ff;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 18px;
|
||||||
|
min-height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-feature-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2a37;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-feature-desc {
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-feature-visual {
|
||||||
|
margin-top: 12px;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #d9e9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-hot {
|
||||||
|
padding: 24px 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-hot-tabs {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-hot-card {
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-hot-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-hot-title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2a37;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-hot-range {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-product-card {
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-product-image {
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #f2f4f8;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-product-title {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1f2a37;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-product-price {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2a37;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.explore-product-meta {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.explore-how-inner,
|
||||||
|
.explore-hot-inner {
|
||||||
|
width: auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -110,9 +110,9 @@
|
||||||
|
|
||||||
.home-logos {
|
.home-logos {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
height: 108px;
|
height: 92px;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 32px 48px;
|
padding: 16px 48px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -123,7 +123,7 @@
|
||||||
.home-logos-track {
|
.home-logos-track {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 40px;
|
gap: 32px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
animation: home-logo-scroll 30s linear infinite;
|
animation: home-logo-scroll 30s linear infinite;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,89 @@
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.home-source-trigger {
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
height: 28px;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 0px;
|
||||||
|
line-height: 0px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
height: 28px;
|
||||||
|
width: 120px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #111827;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 14px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-chip--shopee {
|
||||||
|
background: #f04e23;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-icon svg {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-text {
|
||||||
|
padding: 0 2px;
|
||||||
|
width: 52px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 28px !important;
|
||||||
|
height: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-badge {
|
||||||
|
background: #ef4444;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 1px 6px;
|
||||||
|
border-radius: 999px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-caret {
|
||||||
|
font-size: 10px;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-meta {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-name {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-desc {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-source-check {
|
||||||
|
color: #2563eb;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
.home-nav-menu {
|
.home-nav-menu {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue