upp

src/pages/A1HomeM/index.module.scss

@@ -1,50 +1,84 @@
 .A1HomeM {
   background-size: 100% 100%;
   position: relative;
+  overflow: hidden;
 
   :global {
-    .nameImg {
-      position: absolute;
-      z-index: 3;
-      top: 10px;
-      left: 10px;
-      width: 40px;
-    }
 
-    .txtImg {
+    .A1HomeMBtn {
       position: absolute;
-      z-index: 3;
-      top: 70px;
+      bottom: 40px;
       left: 50%;
       transform: translateX(-50%);
-      width: 94%;
-      margin: 0 auto;
-    }
 
-    .txt2Img {
-      position: absolute;
-      z-index: 3;
-      bottom: 150px;
-      left: 20px;
-      width: 80%;
+      .A1HomeMBtnRow {
+        width: 181px;
+        height: 57px;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 2px;
+        color: #fff;
+        font-size: 20px;
+        letter-spacing: 2px;
+        margin-top: 15px;
+      }
     }
 
-    .rightBacBox {
+    .A1HomeShow {
       position: absolute;
+      transition: all .3s;
+      top: 100%;
       left: 0;
       width: 100%;
-      bottom: 0;
-      height: 150px;
-      background-size: 100% 100%;
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-around;
-      padding-bottom: 10px;
-
-      &>div {
-        width: 80px;
-        height: 80px;
+      height: 100%;
+      z-index: 10;
+
+      .A1HomeShow1 {
+        width: 100%;
+        height: 10%;
       }
+
+      .A1HomeShow2 {
+        border-radius: 20px 20px 0 0;
+        width: 100%;
+        height: 90%;
+        background-color: rgba(187, 12, 12, 0.80);
+        backdrop-filter: blur(4px);
+
+        .A1HomeShow2_down {
+          text-align: center;
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .home1Hover {
+          margin-top: 6px;
+          height: calc(100% - 40px);
+
+          .home1HoverRow {
+            text-align: center;
+            height: 33%;
+            margin-bottom: 2px;
+
+            &>img {
+              width: 60%;
+              height: calc(100% - 40px);
+            }
+
+            &>p {
+              font-size: 16px;
+              color: #fff;
+              margin-top: 2px;
+            }
+          }
+        }
+      }
+    }
+
+    .A1HomeShowBox {
+      top: 0;
     }
   }
 }

src/pages/A1HomeM/index.tsx

@@ -1,34 +1,73 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import styles from "./index.module.scss";
 import { baseURL } from "@/utils/http";
 import history from "@/utils/history";
+import { CaretDownOutlined } from "@ant-design/icons";
+import classNames from "classnames";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
 
 const rightList = [
-  { id: 1, name: "实景VR", path: "/vr" },
-  { id: 2, name: "文物赏析", path: "/goods" },
-  { id: 3, name: "场馆介绍", path: "/intro" },
+  { id: 1, name: "线上展厅" },
+  { id: 2, name: "航拍建筑" },
+  { id: 3, name: "文物鉴赏" },
 ];
 
 function A1HomeM() {
+  const clickBtnFu = useCallback((id: number) => {
+    if (id === 1) setIsShow(true);
+    else if (id === 2) history.push("/vr?id=4");
+    else if (id === 3) history.push("/goods");
+  }, []);
+
+  // 点击线上展厅出来的dom
+  const [isShow, setIsShow] = useState(false);
+
+  const btnData = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.Home.scene
+  );
+
   return (
     <div
       className={styles.A1HomeM}
       style={{ backgroundImage: `url(${baseURL}/Home/mobile/bac.jpg)` }}
     >
-      <img className="nameImg" src={`${baseURL}/Home/pc/name.png`} alt="" />
-      <img className="txtImg" src={`${baseURL}/Home/mobile/txt.png`} alt="" />
-      <img className="txt2Img" src={`${baseURL}/Home/mobile/txt2.png`} alt="" />
-
-      <div
-        className="rightBacBox"
-        style={{ backgroundImage: `url(${baseURL}/Home/mobile/rightBac.png)` }}
-      >
+      {/* 底部按钮 */}
+      <div className="A1HomeMBtn">
         {rightList.map((v) => (
-          <div onClick={() => history.push(v.path)} key={v.id}>
-            <img src={`${baseURL}/Home/pc/icon${v.id}.png`} alt="" />
+          <div
+            onClick={() => clickBtnFu(v.id)}
+            key={v.id}
+            className="A1HomeMBtnRow"
+            style={{ backgroundImage: `url(${baseURL}/Home/btn.png)` }}
+          >
+            {v.name}
           </div>
         ))}
       </div>
+
+      {/* 线上展厅 */}
+
+      <div className={classNames("A1HomeShow", isShow ? "A1HomeShowBox" : "")}>
+        <div className="A1HomeShow1" onClick={() => setIsShow(false)}></div>
+        <div className="A1HomeShow2">
+          <div className="A1HomeShow2_down" onClick={() => setIsShow(false)}>
+            <CaretDownOutlined rev={undefined} />
+          </div>
+          <div className="home1Hover">
+            {btnData.map((v) => (
+              <div
+                key={v.id}
+                className="home1HoverRow"
+                onClick={() => history.push(`/vr?id=${v.id}`)}
+              >
+                <img src={`${baseURL}/Home/scene/${v.id}.jpg`} alt="" />
+                <p>{v.name}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

src/pages/A3Goods/GoodsInfo/index.module.scss

@@ -27,7 +27,7 @@
 
       .A3Ileft {
         width: 54%;
-        background-color: #8e9596;
+        // background-color: #8e9596;
         border-radius: 30px;
         position: relative;
 

src/pages/A3Goods/GoodsInfo/index.tsx

@@ -1,5 +1,11 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
 import { Goods } from "@/types";
 import { baseURL } from "@/utils/http";
@@ -16,7 +22,8 @@ import classNames from "classnames";
 import name1Img from "@/assets/img/name1.png";
 import name2Img from "@/assets/img/name2.png";
 import ImageLazy from "@/components/ImageLazy";
-import store from "@/store";
+import store, { RootState } from "@/store";
+import { useSelector } from "react-redux";
 
 type Props = {
   info: Goods;
@@ -47,6 +54,15 @@ function GoodsInfo({ info, colseFu, type }: Props) {
   // 当前显示的模型
   const [modelShow, setModelShow] = useState(1);
 
+  // 在查看图片页面 切换 图片 对应的 详情页也要切换图片
+  const lookImgInfo = useSelector(
+    (state: RootState) => state.A0Layout.lookBigImg
+  );
+
+  useEffect(() => {
+    if (lookImgInfo.show) setModelShow(lookImgInfo.current + 1);
+  }, [lookImgInfo]);
+
   // 模型的全屏
   const [full, setFull] = useState(false);
 
@@ -106,6 +122,7 @@ function GoodsInfo({ info, colseFu, type }: Props) {
               {showNum.map((v, i) =>
                 modelShow === v ? (
                   <div
+                    key={v}
                     className="A3IsimgBox"
                     onClick={() =>
                       store.dispatch({
@@ -121,7 +138,6 @@ function GoodsInfo({ info, colseFu, type }: Props) {
                     <ImageLazy
                       width="100%"
                       height="100%"
-                      key={v}
                       src={`${baseURL}/3Goods/${info.id}/main${v}.jpg`}
                       offline
                       noLook

src/pages/A3GoodsM/GoodsInfoM/index.module.scss

@@ -71,7 +71,7 @@
       .ifrBoxson {
         width: 100%;
         height: 100%;
-        background-color: #8e9596;
+        // background-color: #8e9596;
         position: relative;
 
         iframe {
@@ -79,6 +79,16 @@
           height: 100%;
         }
 
+        .A3IsimgBox {
+          width: 100%;
+          height: 100%;
+
+          img {
+            object-fit: contain !important;
+          }
+        }
+
+
         .A3IleftBtn {
           position: absolute;
           bottom: 10px;
@@ -118,20 +128,25 @@
         top: 50%;
         transform: translateY(-50%);
         left: 0px;
-        width: 30px;
+        width: 45px;
         height: 60px;
-        background-size: 100% 100%;
-
+        padding-right: 15px;
+        &>div{
+          width: 100%;
+          height: 100%;
+          background-size: 100% 100%;
+        }
       }
 
       .A3ItoRight {
         left: auto;
         right: 0px;
+        padding-right: 0px;
+        padding-left: 15px;
       }
 
       .noneToBtn {
         opacity: .5;
-        pointer-events: none;
       }
     }
 

src/pages/A3GoodsM/GoodsInfoM/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React, { useMemo, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { Goods } from "@/types";
 import { type1Arr1M } from "../data";
@@ -14,6 +14,8 @@ import {
   FullscreenOutlined,
   FullscreenExitOutlined,
 } from "@ant-design/icons";
+import ImageLazy from "@/components/ImageLazy";
+import { ImageViewer } from "antd-mobile";
 
 type Props = {
   info: Goods;
@@ -59,6 +61,31 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
     }
   };
 
+  // 点击查看图片
+
+  const lookArr = useCallback(() => {
+    const arr = [] as string[];
+
+    showNum.forEach((v, i) => {
+      arr.push(`${baseURL}/3Goods/${info.id}/main${i + 1}.jpg`);
+    });
+
+    return arr;
+  }, [info.id, showNum]);
+
+  const lookBigImgFu = useCallback(
+    (i: number) => {
+      ImageViewer.Multi.show({
+        images: lookArr(),
+        defaultIndex: i,
+        onIndexChange: (index) => {
+          setModelShow(index + 1);
+        },
+      });
+    },
+    [lookArr]
+  );
+
   return (
     <div
       className={styles.GoodsInfoM}
@@ -80,64 +107,101 @@ function GoodsInfoM({ info, colseFu, type }: Props) {
         <div className="A3IRtit2">存放于{info.type1}</div>
 
         {/* 模型盒子 */}
-
         <div className="ifrBox">
           <div
             className={classNames("ifrBoxson", full ? "A3IleftFull" : "")}
             key={modelShow}
           >
-            {showNum.map((v) =>
-              modelShow === v ? (
-                <iframe
-                  key={v}
-                  ref={ifrBoxRef}
-                  src={`model.html?m=${info.id}&n=${v}`}
-                  frameBorder="no"
-                ></iframe>
-              ) : null
+            {info.showType === "model" ? (
+              <>
+                {showNum.map((v) =>
+                  modelShow === v ? (
+                    <iframe
+                      key={v}
+                      ref={ifrBoxRef}
+                      src={`model.html?m=${info.id}&n=${v}`}
+                      frameBorder="no"
+                    ></iframe>
+                  ) : null
+                )}
+              </>
+            ) : (
+              <>
+                {showNum.map((v, i) =>
+                  modelShow === v ? (
+                    <div
+                      className="A3IsimgBox"
+                      onClick={() => lookBigImgFu(i)}
+                      key={v}
+                    >
+                      <ImageLazy
+                        width="100%"
+                        height="100%"
+                        src={`${baseURL}/3Goods/${info.id}/main${v}.jpg`}
+                        offline
+                        noLook
+                      ></ImageLazy>
+                    </div>
+                  ) : null
+                )}
+              </>
             )}
 
             {/* 右下角的按钮 */}
-            <div className="A3IleftBtn">
-              <div onClick={() => modelChangeFu(1)}>
-                <PlusOutlined rev={undefined} />
-              </div>
-              <div onClick={() => modelChangeFu(2)}>
-                <MinusOutlined rev={undefined} />
-              </div>
-              {full ? (
-                <div onClick={() => setFull(false)}>
-                  <FullscreenExitOutlined rev={undefined} />
+            {info.showType === "model" ? (
+              <div className="A3IleftBtn">
+                <div onClick={() => modelChangeFu(1)}>
+                  <PlusOutlined rev={undefined} />
                 </div>
-              ) : (
-                <div onClick={() => setFull(true)}>
-                  <FullscreenOutlined rev={undefined} />
+                <div onClick={() => modelChangeFu(2)}>
+                  <MinusOutlined rev={undefined} />
                 </div>
-              )}
-            </div>
+                {full ? (
+                  <div onClick={() => setFull(false)}>
+                    <FullscreenExitOutlined rev={undefined} />
+                  </div>
+                ) : (
+                  <div onClick={() => setFull(true)}>
+                    <FullscreenOutlined rev={undefined} />
+                  </div>
+                )}
+              </div>
+            ) : null}
           </div>
 
           {/* 左右按钮 */}
           <div
-            onClick={() => setModelShow(modelShow - 1)}
+            onClick={() => {
+              if (modelShow === 1) return;
+              setModelShow(modelShow - 1);
+            }}
             hidden={showNum.length <= 1}
-            style={{ backgroundImage: `url(${baseURL}/Home/left.png)` }}
             className={classNames(
               "A3ItoBtn",
               "A3ItoLeft",
               modelShow === 1 ? "noneToBtn" : ""
             )}
-          ></div>
+          >
+            <div
+              style={{ backgroundImage: `url(${baseURL}/Home/left.png)` }}
+            ></div>
+          </div>
           <div
-            onClick={() => setModelShow(modelShow + 1)}
+            onClick={() => {
+              if (modelShow === showNum.length) return;
+              setModelShow(modelShow + 1);
+            }}
             hidden={showNum.length <= 1}
-            style={{ backgroundImage: `url(${baseURL}/Home/right.png)` }}
             className={classNames(
               "A3ItoBtn",
               "A3ItoRight",
               modelShow === showNum.length ? "noneToBtn" : ""
             )}
-          ></div>
+          >
+            <div
+              style={{ backgroundImage: `url(${baseURL}/Home/right.png)` }}
+            ></div>
+          </div>
         </div>
 
         {/* 下面简介 */}

src/pages/A3GoodsM/data.ts

@@ -1,7 +1,6 @@
 export const type1Arr1M = [
   { id: 0, name: "全部馆藏" },
-  { id: 1, name: "董必武纪念馆" },
-  { id: 2, name: "李先念纪念馆" },
-  { id: 3, name: "历史馆" },
-  { id: 4, name: "烈士馆" },
+  { id: 1, name: "陈毅旧居" },
+  { id: 2, name: "张云逸旧居" },
+  { id: 3, name: "新四军军部旧址纪念馆" },
 ];

src/pages/A3GoodsM/index.module.scss

@@ -76,7 +76,7 @@
       .A3Gtop1 {
         margin-top: 10px;
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         height: 32px;
 
         .A3Gtop1_1 {
@@ -108,6 +108,12 @@
               color: var(--themeColor);
             }
           }
+
+          margin-right: 2%;
+
+          &:last-child {
+            margin-right: 0;
+          }
         }
       }
 

src/pages/A3GoodsM/index.tsx

@@ -10,7 +10,7 @@ import { baseURL } from "@/utils/http";
 import { type1Arr1M } from "./data";
 import { Input, Select } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
-import backImg from "@/assets/img/back.png";
+import backImg from "@/assets/img/back2.png";
 import history from "@/utils/history";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
@@ -50,7 +50,7 @@ function A3GoodsM() {
   const type2Arr = useMemo(() => {
     const arr = ["全部类别"];
     data.forEach((v) => {
-      if (!arr.includes(v.type2)) arr.push(v.type2);
+      if (!arr.includes(v.type2) && v.type2) arr.push(v.type2);
     });
     return arr;
   }, [data]);
@@ -170,7 +170,7 @@ function A3GoodsM() {
               }))}
             />
           </div>
-          <div className="A3Gtop1_1">
+          <div className="A3Gtop1_1" hidden={type2Arr.length <= 1}>
             <Select
               style={{ width: "100%" }}
               value={type2}
@@ -187,7 +187,7 @@ function A3GoodsM() {
           {dataRes.map((v) => (
             <div className="A3Row" key={v.id} onClick={() => setGoodsInfo(v)}>
               <ImageLazy
-                src={`${baseURL}/3Goods/${v.id}/main.jpg`}
+                src={`${baseURL}/3Goods/${v.id}/main1.jpg`}
                 width="100%"
                 height={160}
                 noLook