diff --git a/src/assets/images/baokuanshipin.png b/src/assets/images/baokuanshipin.png new file mode 100644 index 0000000..391e74f Binary files /dev/null and b/src/assets/images/baokuanshipin.png differ diff --git a/src/assets/images/baopinzhuizong.png b/src/assets/images/baopinzhuizong.png new file mode 100644 index 0000000..1149ddb Binary files /dev/null and b/src/assets/images/baopinzhuizong.png differ diff --git a/src/assets/images/darenshaixuan.png b/src/assets/images/darenshaixuan.png new file mode 100644 index 0000000..def4c4e Binary files /dev/null and b/src/assets/images/darenshaixuan.png differ diff --git a/src/assets/images/jinduijiankong.png b/src/assets/images/jinduijiankong.png new file mode 100644 index 0000000..d6644b7 Binary files /dev/null and b/src/assets/images/jinduijiankong.png differ diff --git a/src/assets/images/qianlileimu.png b/src/assets/images/qianlileimu.png new file mode 100644 index 0000000..b8b4bb8 Binary files /dev/null and b/src/assets/images/qianlileimu.png differ diff --git a/src/assets/images/remenzhibo.png b/src/assets/images/remenzhibo.png new file mode 100644 index 0000000..6f5845e Binary files /dev/null and b/src/assets/images/remenzhibo.png differ diff --git a/src/components/explore/content.jsx b/src/components/explore/content.jsx index 54440b5..5d4372c 100644 --- a/src/components/explore/content.jsx +++ b/src/components/explore/content.jsx @@ -1,15 +1,29 @@ import React from "react"; import { 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"; +import qianlileimuImg from "../../assets/images/qianlileimu.png"; +import baokuanshipinImg from "../../assets/images/baokuanshipin.png"; +import remenzhiboImg from "../../assets/images/remenzhibo.png"; const { Title, Text } = Typography; const featureCards = [ - { title: "爆品追踪", desc: "最近有什么商品有机会爆单?" }, - { title: "竞对监控", desc: "竞争对手新品和策略变化随时掌握" }, - { title: "达人筛选", desc: "寻找最适合的联盟达人合作" }, - { title: "潜力类目", desc: "竞争小、机会大的类目是什么?" }, - { title: "爆款视频", desc: "最近哪些视频带货效果好?" }, - { title: "热门直播", desc: "识别爆单直播间,找到有效打法" } + { + title: "爆品追踪", + desc: "最近有什么商品有机会爆单?", + image: baopinzhuizongImg + }, + { + title: "竞对监控", + desc: "竞争对手新品和策略变化随时掌握", + image: jinduijiankongImg + }, + { title: "达人筛选", desc: "寻找最适合的联盟达人合作", image: darenshaixuanImg }, + { title: "潜力类目", desc: "竞争小、机会大的类目是什么?", image: qianlileimuImg }, + { title: "爆款视频", desc: "最近哪些视频带货效果好?", image: baokuanshipinImg }, + { title: "热门直播", desc: "识别爆单直播间,找到有效打法", image: remenzhiboImg } ]; const products = Array.from({ length: 5 }, (_, index) => ({ @@ -25,18 +39,49 @@ export default function ExploreContent() {
- + <div className="explore-how-title"> + <span className="explore-how-icon" aria-hidden="true"> + <svg + width="26" + height="26" + viewBox="0 0 26 26" + fill="none" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink" + > + <rect width="26" height="26" fill="url(#pattern0_12165_45591)" /> + <defs> + <pattern id="pattern0_12165_45591" patternContentUnits="objectBoundingBox" width="1" height="1"> + <use xlinkHref="#image0_12165_45591" transform="scale(0.0138889)" /> + </pattern> + <image + id="image0_12165_45591" + width="72" + height="72" + preserveAspectRatio="none" + xlinkHref="data:image/png;base64,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" + /> + </defs> + </svg> + </span> 如何使用Hoyidata - +
{featureCards.map((item) => ( - -
{item.title}
-
{item.desc}
-
- +
+
+
+ {item.title} + +
+
{item.desc}
+
+
+ {item.image && {item.title}} +
+
))} diff --git a/src/css/explore/index.css b/src/css/explore/index.css index ccbbca7..71e4b85 100644 --- a/src/css/explore/index.css +++ b/src/css/explore/index.css @@ -13,13 +13,22 @@ .explore-how-inner, .explore-hot-inner { - width: 1200px; + width: 1392px; margin: 0 auto; } .explore-how-title { margin: 0 0 16px; + font-size: 24px; font-weight: 600; + display: flex; + align-items: center; +} + +.explore-how-icon { + display: inline-flex; + width: 26px; + height: 26px; } .explore-how-card { @@ -32,26 +41,51 @@ .explore-feature-card { background: #f0f6ff; border-radius: 12px; - padding: 18px; + padding: 18px 20px; min-height: 140px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.explore-feature-content { + flex: 1; + display: flex; + height: 120px; + flex-direction: column; + padding: 14px 0px 14px 14px; } .explore-feature-title { + font-size: 18px; + line-height: 24px; font-weight: 600; color: #1f2a37; + display: inline-flex; + align-items: center; + gap: 6px; } .explore-feature-desc { color: #6b7280; - font-size: 12px; + font-size: 14px; + line-height: 20px; margin-top: 6px; } .explore-feature-visual { - margin-top: 12px; - height: 46px; - border-radius: 8px; - background: #d9e9ff; + height: 120px; + width: 170px; + display: flex; + align-items: center; + justify-content: flex-end; +} + +.explore-feature-visual img { + height: 100%; + width: auto; + display: block; } .explore-hot { @@ -113,7 +147,7 @@ color: #94a3b8; } -@media (max-width: 1200px) { +@media (max-width: 1392px) { .explore-how-inner, .explore-hot-inner { width: auto;