continue explore page

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-content">
       <section className="explore-how">
         <div className="explore-how-inner">
-          <Title level={3} className="explore-how-title">
+          <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
-          </Title>
+          </div>
           <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-card">
+                    <div className="explore-feature-content">
+                      <div className="explore-feature-title">
+                        <span>{item.title}</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="w-5 h-5 relative top-[-1px]"><path d="M7.0835 16.4584L13.3335 10.2084L7.0835 3.95837" stroke="#222222" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                      </div>
                       <div className="explore-feature-desc">{item.desc}</div>
-                    <div className="explore-feature-visual" />
-                  </Card>
+                    </div>
+                    <div className="explore-feature-visual">
+                      {item.image && <img src={item.image} alt={item.title} />}
+                    </div>
+                  </div>
                 </Col>
               ))}
             </Row>

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;