upp

src/pages/A6ybwx/StatueArt/index.module.scss

@@ -4,6 +4,7 @@
   height: 100%;
   background: url('../../../assets/img/A6_ffhy_bg.png') no-repeat center center;
   background-size: 100% 100%;
+
   :global {
     .back {
       width: 60px;
@@ -12,11 +13,13 @@
       top: 3%;
       left: 4%;
       cursor: pointer;
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     .ffhyTitle,
     .ffhybtn1,
     .ffhybtn2 {
@@ -24,22 +27,26 @@
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      & > img {
+
+      &>img {
         height: 100%;
         object-fit: contain;
       }
     }
+
     .ffhyTitle {
       height: 80%;
       width: 100px;
       transform: translate(-255%, -47%);
     }
+
     .ffhybtn1 {
       cursor: pointer;
       height: 40px;
       width: 265px;
       transform: translate(29%, -167%);
     }
+
     .ffhybtn2 {
       cursor: pointer;
       height: 40px;
@@ -48,3 +55,31 @@
     }
   }
 }
+
+
+// ------------移动端
+.StatueArtMo {
+  :global {
+    .ffhyTitle{
+      height: 90%;
+      width: 120px;
+    }
+    .back {
+      width: 80px;
+      height: 40px;
+
+      img {
+        object-fit: fill !important;
+      }
+    }
+
+    .ffhybtn1,.ffhybtn2{
+      left: 40%;
+      width: 323px;
+      height: 50px;
+      &>img{
+        object-fit: cover !important;
+      }
+    }
+  }
+}

src/pages/A6ybwx/StatueArt/index.tsx

@@ -1,18 +1,27 @@
-import React from "react";
-import styles from "./index.module.scss";
+import React from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import { isPc } from '@/utils/http'
+
 function StatueArt({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
   return (
-    <div className={styles.StatueArt}>
+    <div className={classNames(styles.StatueArt, isPc ? '' : styles.StatueArtMo)}>
       <div className='back' onClick={() => setGotoTab(0)}>
         <img src={require('@/assets/img/btn_back.png')} alt='' />
       </div>
-      <div className="ffhyTitle"><img src={require('@/assets/img/A6_ffhy_title.png')} draggable={false} alt="" /></div>
-      <div className="ffhybtn1" onClick={() => window.location.replace('#/zxys')}><img src={require('@/assets/img/A6_ffhy_btn1.png')} draggable={false} alt="" /></div>
-      <div className="ffhybtn2" onClick={() => window.location.replace('#/sinicize')}><img src={require('@/assets/img/A6_ffhy_btn2.png')} draggable={false} alt="" /></div>
+      <div className='ffhyTitle'>
+        <img src={require('@/assets/img/A6_ffhy_title.png')} draggable={false} alt='' />
+      </div>
+      <div className='ffhybtn1' onClick={() => window.location.replace('#/zxys')}>
+        <img src={require('@/assets/img/A6_ffhy_btn1.png')} draggable={false} alt='' />
+      </div>
+      <div className='ffhybtn2' onClick={() => window.location.replace('#/sinicize')}>
+        <img src={require('@/assets/img/A6_ffhy_btn2.png')} draggable={false} alt='' />
+      </div>
     </div>
   )
 }
 
-const MemoStatueArt = React.memo(StatueArt);
+const MemoStatueArt = React.memo(StatueArt)
 
-export default MemoStatueArt;
+export default MemoStatueArt

src/pages/A6ybwx/index.module.scss

@@ -3,11 +3,13 @@
   height: 100%;
   position: relative;
   z-index: 1;
+
   :global {
     .videoBox {
       width: 100%;
       height: 100%;
       position: relative;
+
       .back {
         width: 60px;
         height: 30px;
@@ -16,15 +18,18 @@
         top: 3%;
         left: 4%;
         cursor: pointer;
-        & > img {
+
+        &>img {
           height: 100%;
           object-fit: contain;
         }
       }
+
       .A6video {
         width: 100%;
         height: 100%;
       }
+
       .enterBtn {
         position: absolute;
         bottom: 0;
@@ -34,6 +39,7 @@
         height: 35px;
         cursor: pointer;
       }
+
       iframe {
         position: absolute;
         z-index: -1;
@@ -56,6 +62,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+
         .tab {
           width: 48%;
           height: 100%;
@@ -72,3 +79,30 @@
     }
   }
 }
+
+
+// --------移动端
+.A6ybwxMo {
+  :global {
+    .videoBox {
+      .back {
+        width: 80px;
+        height: 40px;
+
+        img {
+          object-fit: fill !important;
+        }
+      }
+      .tabBar {
+        width: 340px;
+        height: 45px;
+        .tab{
+          width: 46%;
+          font-size: 18px;
+          font-weight: 700;
+        }
+      }
+    }
+
+  }
+}

src/pages/A6ybwx/index.tsx

@@ -2,9 +2,11 @@ import React, { useState, useEffect, useRef } from "react";
 import styles from "./index.module.scss";
 import StatueArt from "./StatueArt";
 import Genealogy from "./Genealogy";
+import classNames from 'classnames'
+import { isPc } from "@/utils/http";
 
 function A6ybwx() {
-  const [isEnter, setIsEnter] = useState(false)
+  const [isEnter, setIsEnter] = useState(true)
   const [videoOk, setVideoOk] = useState(false)
   const [gotoTab, setGotoTab] = useState(0)
 
@@ -53,7 +55,7 @@ function A6ybwx() {
   }, [isEnter, videoOk])
 
   return (
-    <div className={styles.A6ybwx}>
+    <div className={classNames(styles.A6ybwx,isPc?'':styles.A6ybwxMo)}>
       {gotoTab === 0 && <div className="videoBox">
         <div className='back' onClick={() => window.location.replace('#/base')}>
           <img src={require('@/assets/img/btn_back.png')} alt='' />