app-问答-知识

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

@@ -49,7 +49,6 @@
 
       .tab4S3cenNone {
         min-height: 200px;
-        color: #fff;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -150,4 +149,123 @@
       }
     }
   }
+}
+
+// 移动端样式
+.Tab4S3App {
+  padding: 15px 15px 0;
+
+  :global {
+
+    .tab4S3main {
+      width: 100%;
+      height: 100%;
+
+      .tab4S3close {
+        display: none;
+      }
+
+      .tab4S3Top {
+        display: none;
+      }
+
+      .tab4S3xBtn {
+        display: none;
+      }
+
+      .tab4S3cenNone {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        letter-spacing: 4px;
+        color: var(--themeColor);
+        padding-bottom: 100px;
+      }
+
+      .tab4S3cen {
+        padding-left: 30px;
+        height: 100%;
+
+        .tab4S3cenTit {
+          margin-bottom: 15px;
+          font-size: 20px;
+          position: relative;
+
+          &::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: -20px;
+            transform: translateY(-50%);
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: var(--themeColor);
+          }
+        }
+
+        .left3Main {
+          opacity: .8;
+          width: 100%;
+          height: calc(100% - 50px);
+          padding-right: 30px;
+          overflow-y: auto;
+          padding-bottom: 80px;
+
+          .left3MainRow {
+            font-size: 16px;
+            margin-bottom: 20px;
+
+            .left3MainRowT {
+              padding-bottom: 15px;
+              word-wrap: break-word;
+            }
+
+            .left3MainRowC {
+              padding-left: 15px;
+              margin-bottom: 15px;
+              font-size: 14px;
+              word-wrap: break-word;
+            }
+
+
+
+            .left3MainRowCX {
+              color: #FF5757;
+            }
+
+            .left3MainRowCD {
+              color: #8CFD79;
+            }
+
+            .left3MainRowCN {
+              pointer-events: none;
+            }
+
+
+            .left3Sta {
+              font-size: 14px;
+              margin-bottom: 5px;
+
+              .left3Sta1 {
+                color: #8CFD79;
+              }
+
+              .left3Sta2 {
+                color: #FF5757;
+              }
+            }
+
+            .left3Txt {
+              font-size: 14px;
+              word-wrap: break-word;
+            }
+          }
+        }
+      }
+
+    }
+  }
 }

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

@@ -6,7 +6,7 @@ import { A2_APIgoodsSaveAnswer } from "@/store/action/A2Main";
 import classNames from "classnames";
 import { Button } from "antd";
 
-const objC = {
+const pcWdObjC = {
   0: "A",
   1: "B",
   2: "C",
@@ -17,9 +17,11 @@ const objC = {
 type Props = {
   closeFu: () => void;
   questionList: A2QuestionType[];
+  // 从手机端进来
+  isApp?: boolean;
 };
 
-function Tab4S3({ closeFu, questionList }: Props) {
+function Tab4S3({ closeFu, questionList, isApp }: Props) {
   const [listRes, setListRes] = useState<A2QuestionResType[]>([]);
 
   useEffect(() => {
@@ -60,7 +62,7 @@ function Tab4S3({ closeFu, questionList }: Props) {
   );
 
   return (
-    <div className={styles.Tab4S3}>
+    <div className={classNames(isApp ? styles.Tab4S3App : styles.Tab4S3)}>
       <div className="tab4S3main">
         {/* 关闭按钮 */}
         <div className="tab4S3close" onClick={closeFu}>
@@ -91,7 +93,7 @@ function Tab4S3({ closeFu, questionList }: Props) {
                       )}
                       onClick={() => selecttFu(v1, v2.val)}
                     >
-                      {Reflect.get(objC, i2)}：{v2.name}
+                      {Reflect.get(pcWdObjC, i2)}：{v2.name}
                     </div>
                   ))}
                   {/* 回答情况 */}
@@ -110,8 +112,6 @@ function Tab4S3({ closeFu, questionList }: Props) {
                   </div>
                   {/* 说明 */}
                   <div className="left3Txt" hidden={!v1.done || !v1.txt}>
-                    {/* 正确答案：{v1.ok}
-              <br /> */}
                     题目解析：{v1.txt}
                   </div>
                 </div>

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

@@ -112,4 +112,103 @@
       }
     }
   }
+}
+
+// 移动端样式
+.Tab4S4App {
+  padding: 15px;
+
+  :global {
+    .tab4S4main {
+      width: 100%;
+      height: 100%;
+
+      .tab4S4close {
+        display: none;
+      }
+
+      .tab4S4Top {
+        display: none;
+      }
+
+      .tab4S4xBtn {
+        display: none;
+      }
+
+      .tab4S4cen {
+        color: #fff;
+        margin-top: 10px;
+        height: 100%;
+        overflow-y: auto;
+        padding-bottom: 80px;
+        padding-right: 30px;
+
+        .left2Box {
+          padding-bottom: 36px;
+          padding-left: 30px;
+          position: relative;
+
+          &::before {
+            content: '';
+            position: absolute;
+            z-index: 2;
+            top: 5px;
+            left: 0px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: var(--themeColor);
+          }
+
+          &::after {
+            content: '';
+            position: absolute;
+            width: 1px;
+            height: 100%;
+            top: 5px;
+            left: 5px;
+            border-left: 1px dashed var(--themeColor);
+          }
+
+          &:last-child {
+            padding-bottom: 0px;
+
+            &::after {
+              display: none;
+            }
+          }
+
+          .left2Name {
+            font-weight: 700;
+            font-size: 18px;
+            padding-bottom: 15px;
+          }
+
+          .left2RowAll {
+            opacity: .8;
+            line-height: 24px;
+            width: 100%;
+            font-size: 16px;
+            word-wrap: break-word;
+
+            .left2Row {
+              margin-bottom: 15px;
+            }
+          }
+        }
+      }
+
+      .left2Null {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--themeColor);
+        font-size: 24px;
+        padding-top: 20px;
+        padding-bottom: 100px;
+        letter-spacing: 4px;
+      }
+    }
+  }
 }

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

@@ -5,13 +5,17 @@ import { Button } from "antd";
 import { A2Left2Type } from "@/types";
 import { A2_APIgetKnowledge } from "@/store/action/A2Main";
 import Tab5Info from "../Tab5Info";
+import classNames from "classnames";
+import Info from "@/pages/App/MainM/Tab5/Info";
 
 type Props = {
   closeFu: () => void;
   type: string;
+  // 从移动端进来
+  isApp?: boolean;
 };
 
-function Tab4S4({ closeFu, type }: Props) {
+function Tab4S4({ closeFu, type, isApp }: Props) {
   const [list, setList] = useState<A2Left2Type[]>([]);
 
   // 第一次不显示暂无信息
@@ -43,7 +47,7 @@ function Tab4S4({ closeFu, type }: Props) {
   const [knowId, setKnowId] = useState({ id: "", name: "" });
 
   return (
-    <div className={styles.Tab4S4}>
+    <div className={classNames(isApp ? styles.Tab4S4App : styles.Tab4S4)}>
       <div className="tab4S4main">
         {/* 关闭按钮 */}
         <div className="tab4S4close" onClick={closeFu}>
@@ -55,7 +59,10 @@ function Tab4S4({ closeFu, type }: Props) {
           <div className="tab4S4cen myscroll">
             {list.map((v) => (
               <div className="left2Box" key={v.name}>
-                <div className="left2Name">{v.name}：</div>
+                <div className="left2Name">
+                  {v.name}
+                  {isApp ? "" : "："}
+                </div>
                 <div className="left2RowAll">
                   {v.arr.map((v2) => (
                     <div
@@ -86,11 +93,20 @@ function Tab4S4({ closeFu, type }: Props) {
 
       {/* 点击知识 打开 tab5的知识详情页 */}
       {knowId.id ? (
-        <Tab5Info
-          sId={knowId.id}
-          closeFu={() => setKnowId({ id: "", name: "" })}
-          title={knowId.name}
-        />
+        isApp ? (
+          <Info
+            sId={knowId.id}
+            closeFu={() => setKnowId({ id: "", name: "" })}
+            title={knowId.name}
+            isGoodsRu={true}
+          />
+        ) : (
+          <Tab5Info
+            sId={knowId.id}
+            closeFu={() => setKnowId({ id: "", name: "" })}
+            title={knowId.name}
+          />
+        )
       ) : null}
     </div>
   );

pc/src/pages/App/MainM/Tab3/Tab3InfoM/Tab3InfoMtxt/index.module.scss

@@ -98,7 +98,7 @@
         height: 100%;
       }
 
-      // 简介
+      // ---------------简介
       .tab3ITmain1 {
         overflow-y: auto;
         padding: 10px 15px 80px;
@@ -162,6 +162,8 @@
           }
         }
       }
+
+      // ---------------留言
     }
 
   }
@@ -178,15 +180,15 @@
     .tab3ITmain {
       height: 100%;
 
-      .tab3ITmain1 {
-        // overflow: hidden;
+      // .tab3ITmain1 {
+      //   overflow: hidden;
 
-        // .t3m1Title {
-        //   overflow: hidden;
-        //   text-overflow: ellipsis;
-        //   white-space: nowrap;
-        // }
-      }
+      //   .t3m1Title {
+      //     overflow: hidden;
+      //     text-overflow: ellipsis;
+      //     white-space: nowrap;
+      //   }
+      // }
     }
   }
 }

pc/src/pages/App/MainM/Tab3/Tab3InfoM/Tab3InfoMtxt/index.tsx

@@ -3,6 +3,8 @@ import styles from "./index.module.scss";
 import { A2BarrageType, A2GoodsType, A2QuestionType } from "@/types";
 import classNames from "classnames";
 import { envUrl } from "@/utils/env";
+import Tab4S3 from "@/pages/A2Main/Tab4S3";
+import Tab4S4 from "@/pages/A2Main/Tab4S4";
 
 const topArrTemp = [
   {
@@ -38,6 +40,8 @@ type Props = {
   barrageList: A2BarrageType[];
   btnOkFlag: boolean;
   goodsId: number;
+  // 关闭音频
+  closeAudioFu: () => void;
 };
 
 function Tab3InfoMtxt({
@@ -48,13 +52,18 @@ function Tab3InfoMtxt({
   barrageList,
   btnOkFlag,
   goodsId,
+  closeAudioFu,
 }: Props) {
-  // 页面的展开和收起
+  // 页面的展开和收起-待完善
   const [pageShow, setPageShow] = useState(true);
 
   useEffect(() => {
-    if (!pageShow) setTopAc(0);
-  }, [pageShow]);
+    if (!pageShow) {
+      setTopAc(0);
+      const dom1 = document.querySelector(".tab3ITmain1");
+      if (dom1) dom1.scrollTop = 0;
+    } else closeAudioFu();
+  }, [closeAudioFu, pageShow]);
 
   // 顶部的状态 3-问答 4-知识 2-留言
   const [topAc, setTopAc] = useState(0);
@@ -65,9 +74,11 @@ function Tab3InfoMtxt({
     // 判断 问答 和 知识 是否显示
     if (wdFlag) arr[1].flag = true;
     if (zsFlag) arr[2].flag = true;
-    return arr;
+    return arr.filter((v) => v.flag);
   }, [wdFlag, zsFlag]);
 
+  // ------------------------留言 ----------------------------
+
   return (
     <div
       className={classNames(
@@ -134,6 +145,16 @@ function Tab3InfoMtxt({
             ) : null}
           </div>
         ) : null}
+
+        {/* --------------------问答-------------------- */}
+        {topAc === 3 ? (
+          <Tab4S3 questionList={questionList} closeFu={() => {}} isApp={true} />
+        ) : null}
+
+        {/* --------------------知识-------------------- */}
+        {topAc === 4 ? (
+          <Tab4S4 type={info.tagType} closeFu={() => {}} isApp={true} />
+        ) : null}
       </div>
     </div>
   );

pc/src/pages/App/MainM/Tab3/Tab3InfoM/index.tsx

@@ -317,6 +317,8 @@ function Tab3InfoM({ isOpen, id, closePage }: Props) {
         barrageList={barrage}
         btnOkFlag={right2}
         goodsId={id}
+        // 关闭音频
+        closeAudioFu={() => audioCutFu(false)}
       />
     </div>
   );

pc/src/pages/App/MainM/Tab5/Info/index.module.scss

@@ -54,6 +54,7 @@
       height: 46px;
       display: flex;
       justify-content: space-between;
+      color: black;
 
       &>div {
         height: 100%;

pc/src/pages/App/MainM/Tab5/Info/index.tsx

@@ -18,11 +18,14 @@ import Menu from "../Menu";
 type Props = {
   sId: string;
   closeFu: () => void;
+  // 单独打开的链接
   isOpen?: boolean;
   title?: string;
+  // 从馆藏进来
+  isGoodsRu?: boolean;
 };
 
-function Info({ sId, closeFu, isOpen, title }: Props) {
+function Info({ sId, closeFu, isOpen, title, isGoodsRu }: Props) {
   // 顶部的标题
   const [titleTxt, setTitleTxt] = useState("");
 
@@ -94,10 +97,12 @@ function Info({ sId, closeFu, isOpen, title }: Props) {
     if (dom) {
       const num = dom.offsetHeight + 30;
       const numRes =
-        document.documentElement.clientHeight - (isOpen ? 40 : 100) - num;
+        document.documentElement.clientHeight -
+        (isOpen || isGoodsRu ? 40 : 100) -
+        num;
       setIfrHeight(numRes);
     }
-  }, [isOpen]);
+  }, [isGoodsRu, isOpen]);
 
   // 过滤出有详情的 数据
   const dataFilter = useMemo(() => {
@@ -136,9 +141,10 @@ function Info({ sId, closeFu, isOpen, title }: Props) {
   const [menuFlag, setMenuFlag] = useState(false);
 
   return (
-    <div className={styles.Info}>
+    <div className={styles.Info} style={{ paddingTop: isGoodsRu ? 0 : 20 }}>
       {/* 返回按钮 */}
       <img
+        style={{ top: isGoodsRu ? -2 : 18 }}
         className="tab5Iback"
         hidden={isOpen}
         onClick={closeFu}
@@ -166,7 +172,10 @@ function Info({ sId, closeFu, isOpen, title }: Props) {
       </div>
 
       {/* 底部固定的 操作按钮 */}
-      <div className="tab5Ibtn" style={{ bottom: isOpen ? 10 : 100 }}>
+      <div
+        className="tab5Ibtn"
+        style={{ bottom: isOpen || isGoodsRu ? 10 : 100 }}
+      >
         <div
           onClick={() => cutAcIdFu(-1, acIndex)}
           className={classNmaes("tab5Ibtn1", acIndex === 0 ? "tab5IbtnNo" : "")}