diff --git a/src/components/explore/content.jsx b/src/components/explore/content.jsx index 880bc94..64019d4 100644 --- a/src/components/explore/content.jsx +++ b/src/components/explore/content.jsx @@ -37,6 +37,35 @@ const focusStats = [ ]; export default function ExploreContent() { + const [followTab, setFollowTab] = React.useState("商品"); + const followConfig = { + 商品: { + action: "添加商品", + empty: "添加关注商品,实时监控数据走势", + placeholder: "搜索已关注商品" + }, + 达人: { + action: "关注达人", + empty: "添加关注达人,实时监控数据走势", + placeholder: "搜索已关注达人" + }, + 小店: { + action: "添加店铺", + empty: "添加关注店铺,实时监控数据走势", + placeholder: "搜索已关注店铺" + }, + 视频: { + action: "添加视频", + empty: "添加关注视频,实时监控数据走势", + placeholder: "搜索已关注视频" + }, + 脚本工具: { + action: "添加脚本", + empty: "添加关注脚本,实时监控数据走势", + placeholder: "搜索已关注脚本" + } + }; + return (
@@ -270,13 +299,19 @@ export default function ExploreContent() {
{["商品", "达人", "小店", "视频", "脚本工具"].map((tab) => ( - ))}
@@ -294,27 +329,49 @@ export default function ExploreContent() { ) )} - + {followTab === "达人" && ( + + )} + + {followTab === "达人" && ( + <> + + + + )}
-
- {focusStats.map((stat) => ( -
-
{stat.label}
-
{stat.value}
- {stat.sub &&
{stat.sub}
} + {followTab === "商品" && ( +
+ {focusStats.map((stat) => ( +
+
{stat.label}
+
{stat.value}
+ {stat.sub &&
{stat.sub}
} +
+ ))} +
+ )} + {followTab === "商品" && ( +
+ +
+ +
- ))} -
-
- -
- -
-
+ )}
商品信息 @@ -328,10 +385,10 @@ export default function ExploreContent() {
- 添加关注商品,实时监控数据走势 + {followConfig[followTab].empty}
diff --git a/src/css/explore/index.css b/src/css/explore/index.css index 4d49fad..3ec5571 100644 --- a/src/css/explore/index.css +++ b/src/css/explore/index.css @@ -275,6 +275,12 @@ padding-bottom: 8px; } +.explore-follow-tab.is-active { + color: #1677ff; + border-bottom: 2px solid #1677ff; + font-weight: 600; +} + .explore-follow-actions { margin-left: auto; } @@ -314,6 +320,32 @@ color: #6b7280; } +.explore-follow-filter.is-disabled { + color: #b0b7c3; + background: #f5f6f8; + cursor: not-allowed; +} + +.explore-follow-select { + padding-right: 18px; + position: relative; +} + +.explore-follow-select::after { + content: "▾"; + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); + font-size: 10px; + color: #9aa3af; +} + +.explore-follow-lock { + margin-left: 6px; + font-size: 11px; +} + .explore-follow-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));