Merge branch 'master' of http://192.168.0.115:3000/lanxin/Chengzhebei

src/pages/A2yblm/components/Detail/index.module.scss

@@ -26,6 +26,10 @@
         height: 84%;
 
         &>img {
+          transition: all 0.5s;
+          position: absolute;
+          top: 0;
+          left: 0;
           width: 100%;
           height: 100%;
           object-fit: contain;
@@ -57,6 +61,7 @@
             color: rgba(255, 233, 182, 1);
             cursor: pointer;
             position: relative;
+            transition: all 0.5s;
 
             .selectedBg {
               width: 120px;
@@ -65,6 +70,7 @@
               top: -30%;
               left: 31%;
               z-index: -1;
+              transition: all 0.5s;
 
               &>img {
                 width: 100%;
@@ -97,11 +103,13 @@
             writing-mode: vertical-rl;
             text-orientation: upright;
             text-align: right;
-            color: rgba(255, 233, 182, 1);
+            color: rgba(255, 252, 246, 0.8);
+            transition: all 0.5s;
           }
 
           .txtActive {
-            color: rgba(255, 252, 246, 0.8);
+           
+             color: rgba(255, 233, 182, 1);
           }
         }
       }

src/pages/A2yblm/components/Detail/index.tsx

@@ -34,9 +34,13 @@ function Detail({ currentTagIndex, setCurrentTagIndex, setIsShowTag }: DetailPro
       <div className='selectContainner'>
         <div className='detail_line'>
           <img
-            src={require(`@/assets/img/A2_line_${
-              currentTagIndex >= myData.detail_modal.top.length ? 'beice.png' : 'beiyang.png'
-            }`)}
+            style={{ opacity: currentTagIndex >= myData.detail_modal.top.length ? 0.4 : 1 }}
+            src={require(`@/assets/img/A2_line_beiyang.png`)}
+            alt=''
+          />
+          <img
+            style={{ opacity: currentTagIndex >= myData.detail_modal.top.length ? 1 : 0.4 }}
+            src={require(`@/assets/img/A2_line_beice.png`)}
             alt=''
           />
         </div>
@@ -59,7 +63,13 @@ function Detail({ currentTagIndex, setCurrentTagIndex, setIsShowTag }: DetailPro
           </div>
           <div className='topR'>
             <div className='split'></div>
-            <div className='txt'>{myLangue==='EN'?'front':'碑阳'}</div>
+            <div
+              className={`txt ${
+                currentTagIndex < myData.detail_modal.top.length ? 'txtActive' : ''
+              }`}
+            >
+              {myLangue === 'EN' ? 'front' : '碑阳'}
+            </div>
           </div>
         </div>
         <div className='detail_bottom'>
@@ -74,11 +84,14 @@ function Detail({ currentTagIndex, setCurrentTagIndex, setIsShowTag }: DetailPro
                 key={index}
               >
                 {item.title}
-                {currentTagIndex === index + myData.detail_modal.top.length && (
-                  <div className='selectedBg'>
-                    <img src={require('@/assets/img/hotSelected_bg.png')} alt='' />
-                  </div>
-                )}
+                <div
+                  className='selectedBg'
+                  style={{
+                    opacity: currentTagIndex === index + myData.detail_modal.top.length ? 1 : 0
+                  }}
+                >
+                  <img src={require('@/assets/img/hotSelected_bg.png')} alt='' />
+                </div>
               </div>
             ))}
           </div>
@@ -89,8 +102,7 @@ function Detail({ currentTagIndex, setCurrentTagIndex, setIsShowTag }: DetailPro
                 currentTagIndex >= myData.detail_modal.top.length ? 'txtActive' : ''
               }`}
             >
-              
-              {myLangue==='EN'?'side':'碑侧'}
+              {myLangue === 'EN' ? 'side' : '碑侧'}
             </div>
           </div>
         </div>