更新

src/pages/A6ybwx/Sangzang/components/Policy/index.module.scss

@@ -6,7 +6,8 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: #ccc;
+  background: url(../../../../../assets/img/A6_policy_detail_bg.png) no-repeat center center;
+  background-size: 100% 100%;
   :global {
     .back {
       width: 80px;
@@ -61,8 +62,11 @@
           .bottom {
             width: 100%;
             height: 54%;
-            background: url(../../../../../assets/img/A6_policy_tab1.png) no-repeat center center;
-            background-size: 100% 100%;
+            & > img {
+              width: 100%;
+              height: 100%;
+              object-fit: fill;
+            }
           }
         }
         .historyDetail {
@@ -70,7 +74,7 @@
           height: 100%;
           background: url(../../../../../assets/img/A6_policy_detail_bg.png) no-repeat center center;
           background-size: 100% 100%;
-          transition: all 0.3s ease-in-out;
+          transition: all 0.3s ease-in-out 0.3s;
           display: flex;
           align-items: center;
           gap: 10px;
@@ -191,6 +195,8 @@
         }
         .historyDetail_hide {
           width: 0;
+          opacity: 0;
+          transition: all 0.3s ease-in-out;
         }
       }
     }
@@ -213,7 +219,7 @@
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        margin: 0 50px;
+        margin: 0 20px;
         .txt {
           width: 100%;
           height: 15px;

src/pages/A6ybwx/Sangzang/components/Policy/index.tsx

@@ -37,38 +37,40 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
       </div>
       <div className='containner' ref={originRef} onWheel={handleWheel}>
         {myData.policy.map((item, index) => (
-          <div className='tabItem' ref={itemRef}>
+          <div className='tabItem' ref={itemRef} key={item.title}>
             <div className={`history1`} onClick={() => handleItemClick(index + 1)}>
               <div className='txt'> {item.title}</div>
-              <div className='bottom'></div>
+              <div className='bottom'><img src={item.bottomPic} alt="" /></div>
             </div>
-            <div className={`historyDetail ${currentItem !== 1 ? 'historyDetail_hide' : ''}`}>
-              <div className='part1'>{item.part1}</div>
-              <div className='part2'>
-                <div className='part2txt'>{item.part2.txt} </div>
-                <div className='from'>
-                  <div className='fromtxt'>{item.part2.from} </div>
-                  <div className='author'>{item.part2.author}</div>
+            <div className={`historyDetail ${currentItem !== index + 1 ? 'historyDetail_hide' : ''}`}>
+              {currentItem === index + 1 && <>
+                <div className='part1'>{item.part1}</div>
+                <div className='part2'>
+                  <div className='part2txt'>{item.part2.txt} </div>
+                  <div className='from'>
+                    <div className='fromtxt'>{item.part2.from} </div>
+                    <div className='author'>{item.part2.author}</div>
+                  </div>
                 </div>
-              </div>
-              <div className='part3'>
-                <div className='imgBox'>
-                  <img src={item.part3.img} alt='' />
-                  <div className='from'>{item.part3.from}</div>
-                  <div className='name'>{item.part3.name}</div>
-                  <div className='time'>{item.part3.time}</div>
+                <div className='part3'>
+                  <div className='imgBox'>
+                    <img src={item.part3.img} alt='' />
+                    <div className='from'>{item.part3.from}</div>
+                    <div className='name'>{item.part3.name}</div>
+                    <div className='time'>{item.part3.time}</div>
+                  </div>
+                  <div className='desc'>{item.part3.desc}</div>
                 </div>
-                <div className='desc'>{item.part3.desc}</div>
-              </div>
-              <div className='part4'>
-                <div className='imgBox'>
-                  <img src={item.part4.img} alt='' />
-                  <div className='from'>{item.part4.from}</div>
-                  <div className='name'>{item.part4.name}</div>
-                  <div className='time'>{item.part4.time}</div>
+                <div className='part4'>
+                  <div className='imgBox'>
+                    <img src={item.part4.img} alt='' />
+                    <div className='from'>{item.part4.from}</div>
+                    <div className='name'>{item.part4.name}</div>
+                    <div className='time'>{item.part4.time}</div>
+                  </div>
+                  <div className='desc'>{item.part4.desc}</div>
                 </div>
-                <div className='desc'>{item.part4.desc}</div>
-              </div>
+              </>}
             </div>
           </div>
         ))}

src/types/declaration.d.ts

@@ -116,6 +116,7 @@ type MyDataType = {
   }[]
   policy: {
       title: string
+      bottomPic: string
     part1:string
     part2: {
       txt: string