upp

pc/src/pages/A2Main/Tab4S4/index.tsx

@@ -40,7 +40,7 @@ function Tab4S4({ closeFu, type }: Props) {
 
   // 打开知识页面的 id
 
-  const [knowId, setKnowId] = useState('');
+  const [knowId, setKnowId] = useState({ id: "", name: "" });
 
   return (
     <div className={styles.Tab4S4}>
@@ -61,7 +61,9 @@ function Tab4S4({ closeFu, type }: Props) {
                     <div
                       className="left2Row"
                       key={v2.id}
-                      onClick={() => setKnowId(v2.channelId)}
+                      onClick={() =>
+                        setKnowId({ id: v2.channelId, name: v2.name })
+                      }
                     >
                       {v2.name}
                     </div>
@@ -83,7 +85,13 @@ function Tab4S4({ closeFu, type }: Props) {
       </div>
 
       {/* 点击知识 打开 tab5的知识详情页 */}
-      {knowId ? <Tab5Info sId={knowId} closeFu={() => setKnowId('')} /> : null}
+      {knowId.id ? (
+        <Tab5Info
+          sId={knowId.id}
+          closeFu={() => setKnowId({ id: "", name: "" })}
+          title={knowId.name}
+        />
+      ) : null}
     </div>
   );
 }

pc/src/pages/A2Main/Tab5/index.tsx

@@ -37,7 +37,7 @@ function Tab5() {
   const tab5List = useSelector((state: RootState) => state.A2Main.tab5List);
 
   // 打开详情页的id
-  const [infoId, setInfoId] = useState('');
+  const [infoId, setInfoId] = useState({ id: "", name: "" });
 
   return (
     <div
@@ -67,7 +67,7 @@ function Tab5() {
             className="tab5Row"
             key={v.id}
             title={v.name}
-            onClick={() => setInfoId(v.channelId)}
+            onClick={() => setInfoId({ id: v.channelId, name: v.name })}
           >
             <div>
               <ImageLazy src={v.thumb} width="100%" height="100%" noLook />
@@ -90,7 +90,13 @@ function Tab5() {
         />
       </div>
 
-      {infoId ? <Tab5Info sId={infoId} closeFu={() => setInfoId('')} /> : null}
+      {infoId.id ? (
+        <Tab5Info
+          sId={infoId.id}
+          closeFu={() => setInfoId({ id: "", name: "" })}
+          title={infoId.name}
+        />
+      ) : null}
     </div>
   );
 }

pc/src/pages/A2Main/Tab5Info/index.module.scss

@@ -11,15 +11,22 @@
   :global {
     .Tab5Info1 {
       width: 25%;
-      padding: 20px 5px 20px 10px;
+      padding: 10px 5px 20px 10px;
       background-color: rgba(131, 123, 104, .9);
       backdrop-filter: blur(20px);
 
+      .Tab5Info1Title{
+        text-align: center;
+        font-weight: 700;
+        font-size: 20px;
+        color: var(--themeColor);
+        margin-bottom: 15px;
+      }
 
       .Tab5Info1Main {
         padding-right: 5px;
         width: 100%;
-        height: 100%;
+        height: calc(100% - 100px);
         overflow-y: auto;
       }
 

pc/src/pages/A2Main/Tab5Info/index.tsx

@@ -17,9 +17,13 @@ type Props = {
   sId: string;
   closeFu: () => void;
   isOpen?: boolean;
+  title?: string;
 };
 
-function Tab5Info({ sId, closeFu, isOpen }: Props) {
+function Tab5Info({ sId, closeFu, isOpen, title }: Props) {
+  // 顶部的标题
+  const [titleTxt, setTieleTxt] = useState("");
+
   const [data, setData] = useState([] as ListType[]);
 
   const getInfoFu = useCallback(async () => {
@@ -27,6 +31,11 @@ function Tab5Info({ sId, closeFu, isOpen }: Props) {
     if (res.code === 0) {
       let tempArr: any[] = [];
 
+      if (res.data && res.data[0]) {
+        // 顶部的标题
+        setTieleTxt(res.data[0].text);
+      }
+
       if (res.data && res.data[0] && res.data[0].channelChildren)
         tempArr = res.data[0].channelChildren;
 
@@ -80,6 +89,9 @@ function Tab5Info({ sId, closeFu, isOpen }: Props) {
   return (
     <div className={styles.Tab5Info}>
       <div className="Tab5Info1">
+        {/* 顶部的标题 */}
+        <div className="Tab5Info1Title">{title ? title : titleTxt}</div>
+
         <div className="Tab5Info1Main myscroll">
           {data.map((v1) => (
             <div className="tab5Row" key={v1.id}>

pc/src/pages/A4Know/index.tsx

@@ -4,18 +4,18 @@ import { useLocation } from "react-router-dom";
 import { urlParameter } from "@/utils/history";
 import Tab5Info from "../A2Main/Tab5Info";
 function A4Know() {
-  const [id, setId] = useState('');
+  const [id, setId] = useState("");
 
   // 获取地址栏参数
   const location = useLocation();
   useEffect(() => {
     const obj = urlParameter(location.search);
-    if (obj.id) setId(obj.channelId);
+    if (obj.id) setId(obj.id);
     else alert("参数错误!");
   }, [location.search]);
   return (
     <div className={styles.A4Know}>
-      {id ? <Tab5Info sId={id} closeFu={() => {}} isOpen={true}/> : null}
+      {id ? <Tab5Info sId={id} closeFu={() => {}} isOpen={true} /> : null}
     </div>
   );
 }