数据更新

src/components/MenuSider/index.module.scss

@@ -2,13 +2,13 @@
 .menu {
   width: 50px;
   height: 50px;
-  position: absolute;
+  position: fixed;
   z-index: 3;
   top: 3%;
   right: 3%;
   cursor: pointer;
 
-  &>img {
+  & > img {
     height: 100%;
     object-fit: contain;
   }
@@ -18,7 +18,7 @@
 .menuSider {
   opacity: 0;
   pointer-events: none;
-  transition: all 0.3s ease-in-out;
+  transition: all 0.6s ease-in-out;
   width: 100%;
   height: 100%;
   position: absolute;
@@ -32,10 +32,11 @@
   &:global(.show) {
     opacity: 1;
     pointer-events: auto;
-
-    .sider {
-      transition: all 0.3s ease-in-out;
-      transform: translate(0, -50%);
+    :global {
+      .sider {
+        transition: all 0.3s ease-in-out 0.3s;
+        transform: translate(0, -50%);
+      }
     }
   }
 
@@ -47,13 +48,13 @@
       top: 50%;
       right: 0%;
       transition: all 0.3s ease-in-out;
-      transform: translate(0, -50%);
+      transform: translate(100%, -50%);
       background: url(../../assets/img/menuSider.png) no-repeat center center;
       background-size: 100% 100%;
       display: flex;
       justify-content: flex-end;
 
-      &>img {
+      & > img {
         position: absolute;
         height: 20px;
         top: 50%;
@@ -95,7 +96,7 @@
             align-items: center;
             justify-content: center;
 
-            &>img {
+            & > img {
               width: 60%;
               height: 100%;
               object-fit: contain;
@@ -122,7 +123,7 @@
           justify-content: space-between;
           gap: 10px;
 
-          &>div {
+          & > div {
             font-size: 10px;
             font-weight: lighter;
             color: #fff;
@@ -131,7 +132,7 @@
             align-items: center;
             justify-content: center;
 
-            &>img {
+            & > img {
               width: 30px;
               object-fit: contain;
             }
@@ -142,17 +143,14 @@
   }
 }
 
-
 // ------------移动端页面---------
 .menuMo {
   top: 2%;
   right: 2%;
-  ;
   width: 66px;
   height: 66px;
 }
 
-
 .menuSiderMo {
   :global {
     .sider {
@@ -169,7 +167,7 @@
         .icon {
           width: 65%;
 
-          &>div {
+          & > div {
             img {
               width: 34px;
             }
@@ -183,4 +181,4 @@
       }
     }
   }
-}
+}

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

@@ -38,7 +38,7 @@
       left: 5%;
     }
 
-    .hide {
+    .hideD {
       opacity: 0;
       pointer-events: none;
       transition: all 0.3s ease-in-out 0.3s;
@@ -47,7 +47,7 @@
         transform: translateX(-100%);
       }
     }
-    .show {
+    .showD {
       opacity: 1;
       pointer-events: auto;
       transition: all 0.3s ease-in-out;

src/pages/A6ybwx/Genealogy/index.tsx

@@ -50,7 +50,7 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
       }
 
 
-      <div className={`${styles.nodeDetail} ${currentNodeIndex !== -1 ? 'show' : 'hide'}`}>
+      <div className={`${styles.nodeDetail} ${currentNodeIndex !== -1 ? 'showD' : 'hideD'}`}>
         <div className='sider'>
           <div className='name'>程周</div>
           <div className='info'>

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

@@ -14,7 +14,7 @@
       left: 4%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -22,13 +22,14 @@
 
     .ffhyTitle,
     .ffhybtn1,
-    .ffhybtn2 {
+    .ffhybtn2,
+    .text {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -40,6 +41,16 @@
       transform: translate(-255%, -47%);
     }
 
+    .text {
+      width: 150px;
+      height: 200px;
+      font-size: 11px;
+      line-height: 22px;
+      font-weight: lighter;
+      color: rgba(255, 255, 255, 0.8);
+      transform: translate(-95%, -55%);
+    }
+
     .ffhybtn1 {
       cursor: pointer;
       height: 40px;
@@ -56,14 +67,17 @@
   }
 }
 
-
 // ------------移动端
 .StatueArtMo {
   :global {
-    .ffhyTitle{
+    .ffhyTitle {
       height: 90%;
       width: 120px;
     }
+    .text {
+      width: 177px;
+      font-size: 15px;
+    }
     .back {
       width: 80px;
       height: 40px;
@@ -73,13 +87,14 @@
       }
     }
 
-    .ffhybtn1,.ffhybtn2{
+    .ffhybtn1,
+    .ffhybtn2 {
       left: 40%;
       width: 323px;
       height: 50px;
-      &>img{
+      & > img {
         object-fit: cover !important;
       }
     }
   }
-}
+}

src/pages/A6ybwx/StatueArt/index.tsx

@@ -12,6 +12,9 @@ function StatueArt({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
       <div className='ffhyTitle'>
         <img src={require('@/assets/img/A6_ffhy_title.png')} draggable={false} alt='' />
       </div>
+      <div className="text">
+        两汉之际，佛教传入中原，开始出现以金铜、石刻佛像形式宣传佛教神祇和经典的活动。魏晋南北朝时期，随着佛教的发展，佛教造像行为达到顶峰，皇家石窟如云冈石窟、龙门石窟相继开凿，石塔、造像碑、单体造像、背屏式造像等石刻表现形式多样，并随着社会发展呈现出不同的社会物质面貌。
+      </div>
       <div className='ffhybtn1' onClick={() => window.location.replace('#/zxys')}>
         <img src={require('@/assets/img/A6_ffhy_btn1.png')} draggable={false} alt='' />
       </div>