upp

code/src/App.tsx

@@ -11,6 +11,7 @@ import classNames from "classnames";
 import B1Card from "./pages/B1Card";
 import { useSelector } from "react-redux";
 import store, { RootState } from "./store";
+import { AppTabList } from "./utils/data";
 const A1Home = React.lazy(() => import("./pages/A1Home"));
 const B1Village = React.lazy(() => import("./pages/B1Village"));
 const C1Architec = React.lazy(() => import("./pages/C1Architec"));
@@ -20,13 +21,6 @@ const D2BuildInfo = React.lazy(() => import("./pages/D2BuildInfo"));
 const Z2Scene = React.lazy(() => import("./pages/Z2Scene"));
 const Z1Search = React.lazy(() => import("./pages/Z1Search"));
 
-const tabList = [
-  { id: 1, name: "总览", pathUrl: "/", path: "/" },
-  { id: 2, name: "村落", pathUrl: "/village", path: "/village" },
-  { id: 3, name: "建筑", pathUrl: "/architec?id=1", path: "/architec" },
-  { id: 4, name: "构件", pathUrl: "/build", path: "/build" },
-];
-
 export default function App() {
   const [routerAc, setRouterAc] = useState("/");
 
@@ -115,7 +109,7 @@ export default function App() {
         style={{ backgroundImage: `url(${baseUrl}/A1Home/pc/tab.png)` }}
         hidden={!homeTabShow}
       >
-        {tabList.map((v) => (
+        {AppTabList.map((v) => (
           <div
             onClick={() => cutTab(v.id, v.pathUrl)}
             className={classNames(

code/src/AppM.tsx

@@ -0,0 +1,165 @@
+import "@/assets/styles/base.css";
+// 关于路由
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Router, Route, Switch } from "react-router-dom";
+import history from "./utils/history";
+import SpinLoding from "./components/SpinLoding";
+import MessageCom from "./components/Message";
+import NotFound from "./components/NotFound";
+import { baseUrl } from ".";
+import classNames from "classnames";
+import { useSelector } from "react-redux";
+import { RootState } from "./store";
+import { AppTabList } from "./utils/data";
+import screenImg from "@/assets/img/landtip.png";
+import fillTitImg from "@/assets/img/tab2/btn_normal.png";
+import fillTitAcImg from "@/assets/img/tab2/btn_active.png";
+import B1CardM from "./pages/B1CardM";
+
+const A1HomeM = React.lazy(() => import("./pages/A1HomeM"));
+
+export default function AppM() {
+  const setFullFu = useCallback(() => {
+    clearTimeout(time.current);
+    time.current = window.setTimeout(() => {
+      const dom: HTMLDivElement | null = document.querySelector("#root");
+      if (dom) {
+        dom.style.height = document.documentElement.clientHeight + "px";
+      }
+    }, 100);
+  }, []);
+
+  const time = useRef(-1);
+
+  useEffect(() => {
+    const dom: HTMLDivElement | null = document.querySelector("#root");
+    if (dom) {
+      dom.style.width = "100vw";
+      dom.style.minHeight = "auto";
+      dom.style.height = document.documentElement.clientHeight + "px";
+      dom.style.minWidth = "auto";
+    }
+    window.addEventListener("resize", setFullFu, true);
+
+    return () => {
+      window.removeEventListener("resize", setFullFu);
+    };
+  }, [setFullFu]);
+
+  const [routerAc, setRouterAc] = useState("/");
+
+  // 开场视频的配置
+  const { isVideoFlag } = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.home
+  );
+
+  // 视频的播放
+  const [videoShow, setVideoShow] = useState(true);
+
+  // 是否需要显示视频
+  const [isVideoShow, setIsVideoShow] = useState(false);
+  useEffect(() => {
+    if (window.location.hash === "#/") setIsVideoShow(true);
+
+    setRouterAc(window.location.hash);
+
+    window.addEventListener(
+      "hashchange",
+      () => {
+        setRouterAc(window.location.hash);
+      },
+      true
+    );
+  }, []);
+
+  // tab的切换
+  const cutTab = useCallback((id: number, pathUrl: string) => {
+    if (id !== 2) {
+      history.push(pathUrl);
+      setTab2Show(false);
+    } else setTab2Show(true);
+  }, []);
+
+  const [tab2Show, setTab2Show] = useState(false);
+
+  return (
+    <div id="AppM">
+      {/* 关于路由 */}
+      <Router history={history}>
+        <React.Suspense fallback={<SpinLoding />}>
+          <Switch>
+            {/* 总览 */}
+            <Route path="/" exact component={A1HomeM} />
+            {/* 村落 */}
+            {/* 找不到页面 */}
+            <Route path="*" component={NotFound} />
+          </Switch>
+        </React.Suspense>
+      </Router>
+
+      {/* 视频加载中 */}
+      {videoShow && isVideoShow ? (
+        <div className="Appvideo" hidden={isVideoFlag === "隐藏"}>
+          <video
+            onEnded={() => setVideoShow(false)}
+            src={`${baseUrl}/A1Home/mobile/start.mp4`}
+            autoPlay
+            muted
+          ></video>
+        </div>
+      ) : null}
+
+      {/* 底部tab */}
+      <div className="AppMtab">
+        {AppTabList.map((v) => (
+          <div
+            onClick={() => cutTab(v.id, v.pathUrl)}
+            className={classNames(
+              "AppMtabRow",
+              (routerAc === "#/" && v.id === 1 && !tab2Show) ||
+                (routerAc.includes("#" + v.path) && v.id !== 1 && !tab2Show) ||
+                (tab2Show && v.id === 2)
+                ? "AppMtabRowAc"
+                : ""
+            )}
+            key={v.id}
+          >
+            <img
+              src={
+                (routerAc === "#/" && v.id === 1 && !tab2Show) ||
+                (routerAc.includes("#" + v.path) && v.id !== 1 && !tab2Show) ||
+                (tab2Show && v.id === 2)
+                  ? fillTitAcImg
+                  : fillTitImg
+              }
+              alt=""
+            />
+            <div className="AppMtabRowName">
+              {v.name[0]}&emsp;{v.name[1]}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* 点击村落出来的选择卡 */}
+      <B1CardM
+        isShow={!tab2Show}
+        closeFu={() => setTab2Show(false)}
+        clickCardFu={(id) => {
+          // 从卡片里面点击 进入村落
+          setTab2Show(false);
+          history.push(`/village?id=${id}`);
+        }}
+      />
+
+      {/* antd 轻提示 ---兼容360浏览器 */}
+      <MessageCom />
+
+      {/* 横屏提示 */}
+      <div id="ScreenChange">
+        <img src={screenImg} alt="" />
+        <p>请在竖屏模式浏览</p>
+      </div>
+    </div>
+  );
+}

code/src/assets/styles/base.css

@@ -70,7 +70,7 @@ textarea {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 20;
+  z-index: 40;
   overflow: hidden;
   background-color: #eae6e1;
 }
@@ -157,6 +157,73 @@ textarea {
   width: 100%;
   height: 100%;
 }
+#root #AppM {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+#root #AppM .noFindPage {
+  padding-top: 0;
+}
+#root #AppM > div {
+  width: 100%;
+  height: 100%;
+}
+#root #AppM .Appvideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 40;
+  overflow: hidden;
+  background-color: #eae6e1;
+}
+#root #AppM .Appvideo video {
+  width: 100%;
+}
+#root #AppM .AppMtab {
+  position: absolute;
+  bottom: 30px;
+  width: 100%;
+  height: auto;
+  z-index: 32;
+  left: 0;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-around;
+}
+#root #AppM .AppMtab .AppMtabRow {
+  padding: 0 10px;
+  width: 25%;
+  position: relative;
+  max-width: 100px;
+  max-height: 95px;
+}
+#root #AppM .AppMtab .AppMtabRow > img {
+  width: 100%;
+}
+#root #AppM .AppMtab .AppMtabRow .AppMtabRowName {
+  position: absolute;
+  top: 48%;
+  left: 54%;
+  transform: translate(-50%, -50%);
+  width: 30px;
+  z-index: 3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--themeColor2);
+  text-shadow: 1px 1px black;
+  font-size: 16px;
+  text-align: center;
+  line-height: 18px;
+}
+#root #AppM .AppMtab .AppMtabRowAc .AppMtabRowName {
+  text-shadow: 1px 1px var(--themeColor);
+}
 #root .ant-image {
   display: none;
 }

code/src/assets/styles/base.less

@@ -75,6 +75,7 @@ textarea {
   overflow: auto;
   overflow-y: overlay;
 
+  // pc端App组件的样式
   #App {
     width: 100%;
     height: 100%;
@@ -86,7 +87,7 @@ textarea {
       left: 0;
       width: 100%;
       height: 100%;
-      z-index: 20;
+      z-index: 40;
       overflow: hidden;
       background-color: #eae6e1;
 
@@ -190,6 +191,89 @@ textarea {
     }
   }
 
+  // 移动端AppM组件的样式
+  #AppM {
+    overflow: hidden;
+    .noFindPage {
+      padding-top: 0;
+    }
+
+    &>div {
+      width: 100%;
+      height: 100%;
+    }
+
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .Appvideo {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 40;
+      overflow: hidden;
+      background-color: #eae6e1;
+
+      video {
+        width: 100%;
+        // height: 100%;
+      }
+    }
+
+    .AppMtab {
+      position: absolute;
+      bottom: 30px;
+      width: 100%;
+      height: auto;
+      z-index: 32;
+      left: 0;
+      padding: 0 10px;
+      display: flex;
+      justify-content: space-around;
+
+      .AppMtabRow {
+        padding: 0 10px;
+        width: 25%;
+        position: relative;
+        max-width: 100px;
+        max-height: 95px;
+
+        &>img {
+          width: 100%;
+        }
+
+        .AppMtabRowName {
+          position: absolute;
+          top: 48%;
+          left: 54%;
+          transform: translate(-50%, -50%);
+          width: 30px;
+          z-index: 3;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-wrap: wrap;
+          color: var(--themeColor2);
+          text-shadow: 1px 1px black;
+          font-size: 16px;
+          text-align: center;
+          line-height: 18px;
+        }
+      }
+
+      .AppMtabRowAc {
+        .AppMtabRowName {
+
+          text-shadow: 1px 1px var(--themeColor);
+        }
+      }
+    }
+
+  }
+
 
 
   // a {
@@ -295,6 +379,4 @@ textarea {
     transform: translateY(6px);
   }
 
-}
-
-
+}

code/src/index.tsx

@@ -16,7 +16,7 @@ import {
 import "dayjs/locale/zh-cn";
 import locale from "antd/locale/zh_CN";
 import { isMobileFu } from "./utils/history";
-// import AppM from "./AppM";
+import AppM from "./AppM";
 
 const container = document.getElementById("root") as HTMLElement;
 const root = createRoot(container);
@@ -44,8 +44,7 @@ if (isMobileFu()) {
           hashPriority="high"
           transformers={[legacyLogicalPropertiesTransformer]}
         >
-          {/* <AppM /> */}
-          <App />
+          <AppM />
         </StyleProvider>
       </Provider>
     </ConfigProvider>

code/src/pages/A1Home/index.module.scss

@@ -35,12 +35,24 @@
         transition: all .3s;
       }
 
+      .A1locGuang {
+        position: relative;
+        left: -3%;
+        margin: -50px auto 0;
+        width: 100px;
+        height: 100px;
+        background-image: url('../../assets/img/img_light.png');
+        background-size: 100% 100%;
+
+      }
+
     }
 
     .A1locBoxHide {
 
       .A1locBoxName,
-      .A1locBoxLoc {
+      .A1locBoxLoc,
+      .A1locGuang {
         opacity: 0;
       }
     }
@@ -142,6 +154,19 @@
           background-image: url('../../assets/img/homeB.png');
           background-size: 100% 100%;
           margin: 0 auto 0px;
+          transition: all .3s;
+        }
+
+        .A1mapRowDianGuang {
+          opacity: 0;
+          transition: all .3s;
+          position: relative;
+          left: -30px;
+          margin: -80px auto 0;
+          width: 100px;
+          height: 100px;
+          background-image: url('../../assets/img/img_light.png');
+          background-size: 100% 100%;
         }
 
         &>p {
@@ -151,12 +176,13 @@
 
         &:hover {
           .A1mapRowDian {
-
             background-image: url('../../assets/img/homeBAc.png');
           }
+          .A1mapRowDianGuang{
+            opacity: 1;
+          }
 
           &>P {
-
             color: var(--themeColor2);
           }
         }

code/src/pages/A1Home/index.tsx

@@ -40,6 +40,8 @@ function A1Home() {
           <div className="A1locBoxName">{v.name}</div>
           {/* 标点 */}
           <div className="A1locBoxLoc"></div>
+          {/* 光点 */}
+          <div className="A1locGuang"></div>
         </div>
       ))}
 
@@ -89,6 +91,7 @@ function A1Home() {
           >
             <div className="A1mapRowDian"></div>
             <p>{v.name}</p>
+            <div className="A1mapRowDianGuang"></div>
 
             {/* 信息盒子 */}
             {v.txtLoc ? (

code/src/pages/A1HomeM/index.module.scss

@@ -0,0 +1,157 @@
+.A1HomeM {
+  background-size: 100% 100%;
+  position: relative;
+
+  :global {
+    .A1dian {
+      position: absolute;
+      z-index: 1;
+
+      .A1locBoxName {
+        text-align: center;
+        background-image: url('../../assets/img/btn_normal.png');
+        background-size: 100% 100%;
+        width: 130px;
+        height: 30px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        letter-spacing: 2px;
+        color: var(--themeColor2);
+        font-weight: 700;
+      }
+
+      .A1locBoxLoc {
+        margin: 10px auto 0;
+        width: 40px;
+        height: 40px;
+        background-image: url('../../assets/img/homeB.png');
+        background-size: 100% 100%;
+      }
+
+      .A1locGuang {
+        position: relative;
+        left: -2%;
+        margin: -40px auto 0;
+        width: 80px;
+        height: 80px;
+        background-image: url('../../assets/img/img_light.png');
+        background-size: 100% 100%;
+
+      }
+    }
+
+    .A1rightBtn {
+      position: absolute;
+      z-index: 2;
+      top: 20px;
+      right: 10px;
+      text-align: center;
+
+      &>p {
+        color: var(--themeColor2);
+        margin-top: 5;
+        letter-spacing: 2px;
+      }
+
+    }
+
+    .A1InDian {
+      opacity: 0;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3;
+      transition: all .3s;
+      background-size: 100% 100%;
+
+      .A1InClose {
+        position: absolute;
+        z-index: 10;
+        top: 20px;
+        right: 20px;
+      }
+
+      .A1InDianSon {
+        position: absolute;
+        z-index: 8;
+        text-align: center;
+
+        .A1InDian1 {
+          margin: 0 auto 5px;
+          width: 40px;
+          height: 40px;
+          background-image: url('../../assets/img/homeB.png');
+          background-size: 100% 100%;
+        }
+
+        .A1InDian2 {
+          color: #fff;
+        }
+
+        .A1InDian3 {
+          position: relative;
+          left: -3%;
+          margin: -66px auto 0;
+          width: 80px;
+          height: 80px;
+          background-image: url('../../assets/img/img_light.png');
+          background-size: 100% 100%;
+
+        }
+      }
+
+      .A1InTxtBox {
+        opacity: 0;
+        pointer-events: none;
+        transition: all .3s;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(28, 21, 12, 0.70);
+        backdrop-filter: blur(10px);
+        z-index: 9;
+        padding: 80px 40px 0;
+        color: var(--themeColor2);
+        letter-spacing: 4px;
+
+        &>h2{
+          text-align: center;
+          font-weight: 400;
+          font-size: 30px;
+        }
+
+        .A1InTxtBoxLine {
+          margin: 20px 0;
+          width: 100%;
+          height: 16px;
+          background-image: url('../../assets/img/line.png');
+          background-size: 100% 100%;
+        }
+        &>p{
+          height: calc(100% - 120px);
+          line-height: 40px;
+          overflow-y: auto;
+        }
+      }
+
+      .A1InTxtBoxAc {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+    }
+
+    .A1InDianAc {
+      background-color: black;
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}

code/src/pages/A1HomeM/index.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import styles from "./index.module.scss";
+import { baseUrl } from "@/index";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store";
+import classNames from "classnames";
+import history from "@/utils/history";
+function A1HomeM() {
+  const { dianOut, dianIn } = useSelector(
+    (state: RootState) => state.A0Layout.dataAll.home
+  );
+
+  // 控制 开发保护 页面的 显示和隐藏
+  const [isInShow, setIsInShow] = useState(false);
+
+  // 开发保护 里面的 详情 的显示
+  const [isTxtShow, setIsTxtShow] = useState("");
+
+  return (
+    <div
+      className={styles.A1HomeM}
+      style={{
+        backgroundImage: `url(${baseUrl}/A1Home/mobile/bg.jpg)`,
+        zIndex: isInShow ? "40" : "1",
+      }}
+    >
+      {/* 外层打点 */}
+      {dianOut.map((v) => (
+        <div
+          className="A1dian"
+          key={v.id}
+          style={{
+            top: v.topM,
+            left: v.leftM,
+            right: v.rightM,
+            bottom: v.bottomM,
+          }}
+          onClick={() => history.push(`/villageInfo?id=${v.id}`)}
+        >
+          {/* 名字 */}
+          <div className="A1locBoxName">{v.name}</div>
+          {/* 标点 */}
+          <div className="A1locBoxLoc"></div>
+          {/* 光点 */}
+          <div className="A1locGuang"></div>
+        </div>
+      ))}
+
+      {/* 右上角的开发保护 */}
+      <div className="A1rightBtn" onClick={() => setIsInShow(true)}>
+        <img src={`${baseUrl}/A1Home/mobile/icon_exploit.png`} alt="" />
+        <p>开发保护</p>
+      </div>
+
+      {/* 里层开发保护打点 */}
+      <div
+        className={classNames("A1InDian", isInShow ? "A1InDianAc" : "")}
+        style={{
+          backgroundImage: `url(${baseUrl}/A1Home/mobile/map.jpg)`,
+        }}
+      >
+        {/* 右上角的关闭按钮 */}
+        <div
+          className="A1InClose"
+          onClick={() => (isTxtShow ? setIsTxtShow("") : setIsInShow(false))}
+        >
+          <img src={`${baseUrl}/A1Home/mobile/icon_cancel.png`} alt="" />
+        </div>
+
+        {/* 里面的打点 */}
+        {dianIn.map((v) => (
+          <div
+            className="A1InDianSon"
+            key={v.id}
+            style={{
+              top: v.topM,
+              left: v.leftM,
+              right: v.rightM,
+              bottom: v.bottomM,
+            }}
+            onClick={() => setIsTxtShow(v.txt)}
+          >
+            {/* 标点 */}
+            <div className="A1InDian1"></div>
+            {/* 名字 */}
+            <div className="A1InDian2">{v.name}</div>
+            {/* 光点 */}
+            <div className="A1InDian3"></div>
+          </div>
+        ))}
+
+        {/* 里面ui */}
+        <div
+          className={classNames("A1InTxtBox", isTxtShow ? "A1InTxtBoxAc" : "")}
+        >
+          <h2>历史事件</h2>
+          <div className="A1InTxtBoxLine"></div>
+          <p dangerouslySetInnerHTML={{ __html: isTxtShow }}></p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoA1HomeM = React.memo(A1HomeM);
+
+export default MemoA1HomeM;

code/src/pages/B1CardM/index.module.scss

@@ -0,0 +1,20 @@
+.B1CardM {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 40;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(28, 21, 12, 0.70);
+  backdrop-filter: blur(10px);
+
+  :global {
+    .B1Cback {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+    }
+
+  }
+}

code/src/pages/B1CardM/index.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import styles from "./index.module.scss";
+import { baseUrl } from "@/index";
+
+// import Swiper from "./swiperCard/swiper-bundle.min.js";
+
+// import "./swiperCard/swiper-bundle.min.css";
+
+type Props = {
+  isShow: boolean;
+  closeFu: () => void;
+  clickCardFu: (id: number) => void;
+};
+
+function B1CardM({ isShow, closeFu, clickCardFu }: Props) {
+  useEffect(() => {
+    // new Swiper(".mySwiper", {
+    //   effect: "cards",
+    //   grabCursor: true,
+    //   // loop:true
+    // });
+  }, []);
+
+  return (
+    <div hidden={isShow} className={styles.B1CardM}>
+      {/* 右上角的按钮 */}
+      <div className="B1Cback" onClick={closeFu}>
+        <img src={`${baseUrl}/A1Home/mobile/icon_cancel.png`} alt="" />
+      </div>
+
+      {/* 卡片sw */}
+      {/* <div className="swiper mySwiper">
+        <div className="swiper-wrapper">
+          <div>1</div>
+          <div>2</div>
+        </div>
+      </div> */}
+    </div>
+  );
+}
+
+const MemoB1CardM = React.memo(B1CardM);
+
+export default MemoB1CardM;

code/src/types/api/layot.d.ts

@@ -31,6 +31,10 @@ export type DataAllType = {
         top: string;
         left: string;
       };
+      topM: string;
+      leftM: string;
+      rightM: string;
+      bottomM: string;
     }[];
   };
   // 待完善
@@ -57,10 +61,10 @@ export type Tab2InfoType = {
   label: string;
   atv: number;
   ath: number;
-  txt:string
+  txt: string;
   architecId: string;
-  zhen:number
-  buildArr:{id:string,name:string}[]
+  zhen: number;
+  buildArr: { id: string; name: string }[];
 };
 
 // 建筑和构件详情

code/src/utils/data.ts

@@ -0,0 +1,6 @@
+export const AppTabList = [
+  { id: 1, name: "总览", pathUrl: "/", path: "/" },
+  { id: 2, name: "村落", pathUrl: "/village", path: "/village" },
+  { id: 3, name: "建筑", pathUrl: "/architec?id=1", path: "/architec" },
+  { id: 4, name: "构件", pathUrl: "/build", path: "/build" },
+];

静态资源/staticData/dataTemp.js

@@ -48,7 +48,7 @@ const staticDataTemp = {
           left: '10%',
         },
         // 手机端的定位
-        topM: "10%",
+        topM: "30%",
         leftM: "20%",
         rightM: "auto",
         bottomM: "auto",
@@ -58,17 +58,23 @@ const staticDataTemp = {
     dianIn: [
       {
         id: 1,
+        // 电脑端的定位
         top: "53%",
         left: "25%",
         right: "auto",
         bottom: "auto",
-        name: '1983年',
+        name: '1983年12月31日',
         txt: '  2001年3月，开平市成立了开平碉楼申报世界文化遗产领导小组，市主要领导亲自挂帅，从各有关部门抽出精兵强将专职开展碉楼保护和申报工作。6月25日，开平碉楼被国务院批准列入第五批全国重点文物保护单位名单。',
-        // 历史事件的定位
+        // 电脑端历史事件的定位
         txtLoc: {
           top: "50px",
           left: "80px",
-        }
+        },
+        // 手机端的定位
+        topM: "30%",
+        leftM: "20%",
+        rightM: "auto",
+        bottomM: "auto",
       }
     ],