app-场景

pc/src/pages/App/MainM/Tab1/index.tsx

@@ -10,7 +10,7 @@ import { appTab1Loc1, appTab1Loc2 } from "./data";
 import ImgLook from "./ImgLook";
 import Scene from "./Scene";
 
-const btnObj = [
+export const btnObj = [
   {
     id: 2,
     name: "展陈",

pc/src/pages/App/MainM/Tab2/index.module.scss

@@ -1,5 +1,65 @@
-.Tab2{
-  :global{
-    
+.Tab2 {
+  background-color: #554a3e;
+  padding: 10px 0px 20px 20px;
+
+  :global {
+    .tab2Top {
+      height: 40px;
+      display: flex;
+
+      .tab2TopRow {
+        height: 40px;
+        line-height: 40px;
+        color: #F0D99C;
+        font-size: 18px;
+        margin-right: 20px;
+      }
+
+      .tab2TopRowAc {
+        color: #fff;
+        font-weight: 700;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          bottom: 6px;
+          left: 0;
+          width: 100%;
+          height: 4px;
+          background-color: #F0D99C;
+        }
+      }
+    }
+
+    .tab2Main {
+      padding-top: 1px;
+      margin-top: 10px;
+      width: 100%;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+      padding-right: 20px;
+      
+      .tab2Row {
+        border: 1px solid #F0D99C;
+        border-radius: 6px;
+        margin-bottom: 20px;
+        overflow: hidden;
+        position: relative;
+        &>p{
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          height: 40px;
+          line-height: 40px;
+          width: 100%;
+          color: #fff;
+          font-size: 16px;
+          padding: 0 5px 0 15px;
+          letter-spacing: 2px;
+          background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6));
+        }
+      }
+    }
   }
 }

pc/src/pages/App/MainM/Tab2/index.tsx

@@ -1,12 +1,76 @@
-import React from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import styles from "./index.module.scss";
- function Tab2() {
-  
+import { btnObj } from "../Tab1";
+import classNames from "classnames";
+import { tab1IObj, tab1IObjType } from "../Tab1/ImgLook/data";
+import { appTab1Loc2 } from "../Tab1/data";
+import ImageLazy from "@/components/ImageLazy";
+import { baseURL } from "@/utils/http";
+import Scene from "../Tab1/Scene";
+
+function Tab2() {
+  // 切换 展陈 和 旧址
+  const [acId, setAcId] = useState(2);
+
+  const tab2MainRef = useRef<HTMLDivElement>(null);
+
+  // 切换的时候滚动到顶部
+  useEffect(() => {
+    // 兼容苹果手机
+    setTimeout(() => {
+      if (tab2MainRef.current) tab2MainRef.current.scrollTop = 1;
+    }, 100);
+  }, [acId]);
+
+  const list = useMemo(() => {
+    // 展陈数据
+    let arr = [] as tab1IObjType;
+    arr = [...tab1IObj[2], ...tab1IObj[3]];
+
+    // 旧址数据
+    return acId === 2 ? arr : appTab1Loc2;
+  }, [acId]);
+
+  const [code, setCode] = useState("");
+
   return (
     <div className={styles.Tab2}>
-      <h1>Tab2</h1>
+      {/* 展陈 旧址的切换 */}
+      <div className="tab2Top">
+        {btnObj.map((v) => (
+          <div
+            key={v.id}
+            onClick={() => setAcId(v.id)}
+            className={classNames(
+              "tab2TopRow",
+              acId === v.id ? "tab2TopRowAc" : ""
+            )}
+          >
+            {v.name}
+          </div>
+        ))}
+      </div>
+
+      <div className="tab2Main" ref={tab2MainRef}>
+        {list.map((v) => (
+          <div className="tab2Row" key={v.id} onClick={() => setCode(v.code)}>
+            <ImageLazy
+              // 图片直接放在测试服务器
+              src={`${baseURL}/backstage/sceneCover/${v.code}.jpg`}
+              width="100%"
+              height={180}
+              offline={true}
+              noLook={true}
+            />
+            <p>{v.name}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* 点击出来的场景 */}
+      {code ? <Scene closeFu={() => setCode("")} code={code} /> : null}
     </div>
-  )
+  );
 }
 
 const MemoTab2 = React.memo(Tab2);

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

@@ -34,7 +34,7 @@
       }
 
       .mainFlloRowAc {
-        pointer-events: none;
+        // pointer-events: none;
         &>p {
           color: #47392C;
           font-weight: 700;