upp

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

@@ -1,6 +1,6 @@
 .HomeM {
   position: relative;
-
+  background-color: #554a3e;
   :global {
     .HomeBac {
       width: 100%;

pc/src/pages/App/MainM/Tab1/ImgLook/data.ts

@@ -5,17 +5,17 @@ export const tab1IObj = {
       id: 1,
       name: "虎门销烟陈列",
       code: '1194',
-      top: "4%",
-      left: "22%",
+      top: "17%",
+      left: "12%",
       right: "auto",
     },
     {
       id: 2,
       name: "虎门故事陈列",
       code: '1194',
-      top: "12%",
+      top: "9%",
       left: "auto",
-      right: "1%",
+      right: "20%",
     },
   ],
   3: [
@@ -23,9 +23,9 @@ export const tab1IObj = {
       id: 3,
       name: "海战馆",
       code: '1194',
-      top: "30%",
-      left: "37%",
-      right: "auto",
+      top: "17%",
+      left: "auto",
+      right: "-45%",
     },
   ],
 };

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

@@ -1,25 +1,43 @@
-.ImgLook{
+.ImgLook {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 9999;
   width: 100%;
   height: 100%;
-  :global{
-    .tab1Iimg{
+  background-color: #554a3e;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  :global {
+
+
+    .tab1IBox {
       width: 100%;
       height: 100%;
-      object-fit: fill;
+
+      .tab1Iimg {
+        height: 100%;
+        max-width: 100000px;
+        object-fit: fill;
+      }
     }
-    .tab1Iback{
-      position: absolute;
-      bottom: 10px;
+
+
+
+    .tab1Iback {
+      position: fixed;
+      bottom: 100px;
       right: 10px;
       z-index: 10;
     }
-    .tab1Itab{
+
+    .tab1Itab {
+      min-width: 100px;
+      min-height: 40px;
       position: absolute;
-      &>div{
+
+      &>div {
         height: 40px;
         padding: 0 30px;
         border-radius: 20px;
@@ -29,7 +47,8 @@
         line-height: 40px;
         font-weight: 700;
       }
-      &>img{
+
+      &>img {
         position: absolute;
         top: 40px;
         left: 50%;

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
 import { envUrl } from "@/utils/env";
 import ImgLoding from "@/components/ImgLoding";
@@ -12,7 +12,6 @@ type Props = {
 };
 
 function ImgLook({ closeFu, imgId }: Props) {
-
   const list = useMemo(() => {
     let arr = [] as tab1IObjType;
     arr = Reflect.get(tab1IObj, imgId) || [];
@@ -21,17 +20,38 @@ function ImgLook({ closeFu, imgId }: Props) {
 
   const [code, setCode] = useState("");
 
+  useEffect(() => {
+    if (imgId === 3) {
+      // 海战馆，默认移动到中间
+      const dom = document.querySelector("#ImgLook") as HTMLDivElement;
+
+      const imgDom = document.querySelector("#tab1ImgId") as HTMLImageElement;
+
+      setTimeout(() => {
+        if (dom && imgDom) {
+          console.log(123, imgDom.clientWidth);
+
+          const num = imgDom.clientWidth * 0.3;
+          dom.scrollLeft = num;
+        }
+      }, 50);
+    }
+  }, [imgId]);
+
   return (
-    <div className={styles.ImgLook}>
+    <div className={styles.ImgLook} id="ImgLook">
       {/* 大图片加载中 */}
       <ImgLoding id={imgId} />
 
-      <img
-        className="tab1Iimg"
-        onLoad={() => imgLodingFu(imgId)}
-        src={`${envUrl}/App/main1/bg${imgId}.jpg`}
-        alt=""
-      />
+      <div className="tab1IBox">
+        <img
+          id="tab1ImgId"
+          className="tab1Iimg"
+          onLoad={() => imgLodingFu(imgId)}
+          src={`${envUrl}/App/main1/bg${imgId}.jpg`}
+          alt=""
+        />
+      </div>
 
       {/* 返回按钮 */}
       <div className="tab1Iback" onClick={closeFu}>

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

@@ -1,6 +1,6 @@
 .Tab1 {
   position: relative;
-
+  background-color: #554a3e;
   :global {
     .tab1Btn {
       position: absolute;

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

@@ -61,7 +61,7 @@ function Tab1() {
       <ImgLoding id={1} />
 
       {/* 大图盒子 */}
-      <div className="tab1ImgBox">
+      <div className="tab1ImgBox" style={{ opacity: lookImgId ? 0 : 1 }}>
         <div className="tab1ImgBoxSon">
           <img
             className="tab1Img"
@@ -86,7 +86,7 @@ function Tab1() {
           {/* 旧址的点位 */}
           {appTab1Loc2.map((v) => (
             <div
-              onClick={()=>setCode(v.code)}
+              onClick={() => setCode(v.code)}
               key={v.id}
               style={{
                 top: v.top,

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

@@ -213,7 +213,6 @@ function Tab3() {
             <div
               className="tab3Mrow"
               key={v.id}
-              title={v.name}
               onClick={() => setInfoId(v.id)}
             >
               <div className="tab3MrowImg">