fix

Scene/public/css/edit.css

@@ -3729,8 +3729,8 @@ a.hasHover:hover, a:active {
 
 #volume > a, #gui-fullscreen > a, #gui-fullscreen-exit > a {
   display: flex;
-  width: 48px;
-  height: 48px;
+  width: 35px;
+  height: 35px;
   justify-content: center;
   align-items: center;
 }

Scene/public/css/main.css

@@ -4244,8 +4244,8 @@ a.tag-link {
 #gui-fullscreen > a,
 #gui-fullscreen-exit > a {
   display: flex;
-  width: 48px;
-  height: 48px;
+  width: 35px;
+  height: 35px;
   justify-content: center;
   align-items: center;
 }

Scene/src/pages/A2main/index.module.scss

@@ -12,7 +12,7 @@
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      top: 48px;
+      top: 30px;
       width: 80px;
       height: 37px;
       line-height: 30px;
@@ -25,7 +25,7 @@
     .pinBottom.left {
       width: 1400px;
       margin-right: 350px;
-      height: 80px;
+      height: 65px;
       border-radius: 0 40px 40px 0;
       left: 50%;
       transform: translateX(-50%);
@@ -40,7 +40,7 @@
         position: relative;
         bottom: -10px;
         left: 20px;
-        height: 75px;
+        height: 60px;
         & img {
           height: 100%;
           object-fit: contain;
@@ -65,15 +65,15 @@
       #gui-modes-inside,
       #gui-modes-dollhouse,
       #gui-modes-floorplan {
-        width: var(--pcIconWidth);
-        height: var(--pcIconWidth);
+        width: 35px;
+        height: 35px;
         margin-left: 58px;
         background-color: transparent !important;
         position: relative;
 
         img {
-          width: 48px;
-          height: 48px;
+          width: 35px;
+          height: 35px;
         }
       }
 
@@ -96,8 +96,8 @@
       #gui-fullscreen-exit,
       .A2_share_box,
       .A2_view_box {
-        width: 48px;
-        height: 48px;
+        width: 35px;
+        height: 35px;
         margin: 0;
         background-color: transparent !important;
         position: relative;
@@ -235,7 +235,7 @@
          top: 225px;
     right: 10px;
       .sectionIndexImg {
-        width: 170px;
+        width: 125px;
         height: 100%;
         object-fit: cover;
         cursor: pointer;
@@ -268,10 +268,12 @@
         width: fit-content;
         overflow: auto;
         height: 85%;
+        width: 100%;
         display: flex;
         flex-wrap: nowrap;
         scroll-behavior: smooth;
         justify-content: flex-start;
+        align-items: center;
         gap: 20px;
         ::-webkit-scrollbar {
           display: none; /* Chrome, Safari, Edge */
@@ -281,8 +283,8 @@
 
         & > div {
           flex: 0 0 auto;
-          width: 420px;
-          height: 100%;
+          width: 19%;
+          height: 70%;
           background-size: contain;
           cursor: pointer;
           p {
@@ -340,7 +342,7 @@
     @media screen and (max-width: 1000px) {
       .hoveImg {
         height: 20px;
-        top: 30px;
+        top: 24px;
         font-size: 10px;
         color: #fff;
         text-shadow: 0 0 5px rgba(253, 251, 178, 0.8), 0 0 10px rgba(253, 251, 178, 0.6);
@@ -355,7 +357,7 @@
         gap: 30px;
         margin-left: 10px;
         padding: 30px 0px;
-        width: 55px;
+        width: 45px;
         #play,
         #pause,
         #next,
@@ -365,8 +367,8 @@
         #gui-modes-dollhouse,
         #gui-modes-floorplan {
           margin: 0;
-          width: 35px;
-          height: 35px;
+          width: 30px;
+          height: 30px;
           background-color: transparent !important;
           position: relative;
           img {
@@ -395,7 +397,7 @@
         background-color:#23362F ;
         border-radius: 25px;
         margin-right: 10px;
-        width: 55px;
+        width: 45px;
         display: flex;
         justify-content: flex-end;
         flex-direction: column;
@@ -408,17 +410,17 @@
         #gui-fullscreen-exit,
         .A2_share_box,
         .A2_view_box {
-          width: 35px;
-          height: 35px;
+          width: 30px;
+          height: 30px;
           margin: 0;
           background-color: transparent !important;
           position: relative;
           a {
-            width: 35px;
-            height: 35px;
+            width: 30px;
+            height: 30px;
             img {
-              width: 35px;
-              height: 35px;
+              width: 30px;
+              height: 30px;
             }
           }
         }

Scene/src/pages/A2main/index.tsx

@@ -307,8 +307,8 @@ function A2main() {
         pointerEvents: isShowSection ? 'auto' : 'none',
         opacity: isShowSection ? '1' : '0'
       }}>
-        <div className="arrL" style={{ opacity: isActive ? '0.1' : '1', cursor: isActive ? 'not-allowed' : 'pointer' }} onClick={scrollToLeft}><img src={require('../../assets/img/preP.png')} alt="" /></div>
-        <div className="arrR" style={{ opacity: isActive ? '1' : '0.1', cursor: isActive ? 'pointer' : 'not-allowed' }} onClick={scrollToRight}><img src={require('../../assets/img/nextP.png')} alt="" /></div>
+        {/* <div className="arrL" style={{ opacity: isActive ? '0.1' : '1', cursor: isActive ? 'not-allowed' : 'pointer' }} onClick={scrollToLeft}><img src={require('../../assets/img/preP.png')} alt="" /></div> */}
+        {/* <div className="arrR" style={{ opacity: isActive ? '1' : '0.1', cursor: isActive ? 'pointer' : 'not-allowed' }} onClick={scrollToRight}><img src={require('../../assets/img/nextP.png')} alt="" /></div> */}
         <div className='sectionBox' ref={sectionBoxRef} onClick={() => setIsShowSection(false)}>
           <div className='section1 sectionCont' >
           </div>

Scene/src/pages/A3hotList/index.module.scss

@@ -20,7 +20,7 @@
       height: 100%;
       background: url('../../assets/img/hotlist_bg.png') no-repeat;
       background-size: 100% 100%;
-      color: #e6aa4a;
+      color: #d3a55cd6;
       font-size: 17px;
       font-weight: 500;
       padding-bottom: 70px;
@@ -40,7 +40,7 @@
         overflow: auto;
         display: flex;
         flex-direction: column;
-        gap: 10px;
+        gap: 28px;
         &::-webkit-scrollbar {
             display: none;
           }

Scene/src/pages/A4base/index.module.scss

@@ -36,7 +36,8 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      transform: translate(-130%, -325px);
+      opacity: 0;
+      transform: translate(-130%, -295px);
       .A4base-title2 {
         width: 68%;
         height: 100%;
@@ -52,21 +53,55 @@
     }
 
     .A4base-pic1 {
-     transform: translate(172%, 350px);
+      opacity: 0;
+     transform: translate(192%, 350px);
     width: 325px;
     }
     .A4base-pic2 {
+      opacity: 0.4;
       transform: translate(-870px, 340px);
     width: 400px;
     }
      .A4base-pic3 {
+      opacity: 0;
       transform: translate(-870px, -415px);
     width: 450px;
     }
     .A4base-button {
-      transform: translate(-350%, 220px);
+      opacity: 0;
+      transform: translate(-370%, 220px);
     width: 250px;
     cursor: pointer;
     }
   }
 }
+
+.animate {
+  :global {
+    .A4base-content{
+      opacity: 1;
+      transform: translate(-130%, -325px);
+      transition: all 1.2s ease-in;
+    }
+    .A4base-pic1 {
+      opacity: 1;
+      transform: translate(172%, 350px);
+      transition: all 3.2s 2s;
+    }
+    .A4base-pic2 {
+      opacity: 1;
+      transition: all 4s;
+    }
+    .A4base-pic3 {
+      opacity: 1;
+      transform: translate(-870px, -415px);
+      transition: all 2.2s 0.5s;
+    }
+    .A4base-button {
+      opacity: 1;
+      transform: translate(-350%, 220px);
+      transition: all 1s ease-in-out 1.5s;
+    }
+  }
+}
+

Scene/src/pages/A4base/index.tsx

@@ -1,10 +1,16 @@
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import styles from './index.module.scss'
 import { useHistory } from 'react-router-dom'
 function A4base({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
   const history = useHistory()
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    setTimeout(() => {
+      ref.current?.classList.add(styles.animate)
+    }, 500);
+  }, [])
   return (
-    <div className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
+    <div ref={ref} className={styles.A4base} style={{ display: show ? 'block' : 'none' }}>
       <div className='A4base-content'>
         <div className='A4base-title1'>
           <img src={require('./image/title.png')} alt='' />

Scene/src/pages/A5Mobile/index.module.scss

@@ -21,29 +21,62 @@
   }
   :global {
     .title {
+      opacity: 0;
       transform: translate(-58%, 0);
-      top: 70px;
+      top: 90px;
       width: 80%;
     }
-    .A4base-pic1 {
-      transform: translate(-75%, 0);
+    .A5-pic1 {
+      opacity: 0;
+      transform: translate(-55%, 0);
       top: auto;
       bottom: 25px;
       width: 230px;
     }
-    .A4base-pic2 {
+    .A5-pic2 {
+      opacity: 0;
       transform: translate(-73%, -50px);
       width: 255px;
     }
-    .A4base-pic3 {
+    .A5-pic3 {
+      opacity: 0;
       transform: translate(-60%, 0);
       top: 30px;
       width: 290px;
     }
     .button {
+      opacity: 0;
       cursor: pointer;
-      transform: translate(-87%, 640%);
+      transform: translate(-107%, 640%);
       width: 200px;
     }
   }
 }
+
+.animate {
+  :global {
+    .title{
+      opacity: 1;
+      top: 70px;
+      transition: all 1.2s ease-in;
+    }
+    .A5-pic1 {
+      opacity: 1;
+      transform: translate(-75%, 0);
+      transition: all 3.2s 2s;
+    }
+    .A5-pic2 {
+      opacity: 1;
+      transition: all 4s;
+    }
+    .A5-pic3 {
+      opacity: 1;
+      transition: all 2.2s 0.5s;
+    }
+    .button {
+      opacity: 1;
+      transform: translate(-87%, 640%);
+      transition: all 0.8s ease-in-out 1.5s;
+    }
+  }
+}

Scene/src/pages/A5Mobile/index.tsx

@@ -1,20 +1,26 @@
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 import styles from './index.module.scss'
 import { useHistory } from 'react-router-dom'
 function A5Mobile({ show, setShow }: { show: boolean; setShow: (show: boolean) => void }) {
   const history = useHistory()
+  const ref = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    setTimeout(() => {
+      ref.current?.classList.add(styles.animate)
+    }, 500);
+  }, [])
   return (
-    <div className={styles.A5Mobile} style={{ display: show ? 'block' : 'none' }}>
+    <div ref={ref} className={styles.A5Mobile} style={{ display: show ? 'block' : 'none' }}>
       <div className='title'>
         <img src={require('./image/title.png')} alt='' />
       </div>
-      <div className="A4base-pic1">
+      <div className="A5-pic1">
         <img src={require('./image/other.png')} alt='' />
       </div>
-      <div className="A4base-pic2">
+      <div className="A5-pic2">
         <img src={require('./image/time.png')} alt='' />
       </div>
-      <div className="A4base-pic3">
+      <div className="A5-pic3">
         <img src={require('./image/title_1.png')} alt='' />
       </div>
       <div