gx

public/myData/myData.js

@@ -904,7 +904,7 @@ const myDataTemp = {
       items: [
         {
           title: '佛像',
-          txt: '<span>面容方圆适中</span>，秀丽温柔而不失庄严，衣饰变化反映了<span>太和服饰改制的社会背景</span>，袈裟式样由厚重的通肩式演变为轻盈的“<span>褒衣博带</span>”式，衣褶层叠流畅，富有节奏感，体现出<span>汉地士人崇尚的飘逸风度。</span>'
+          txt: '<span>面容方圆适中</span>，既秀丽温柔而不失庄严，衣饰变化反映了<span>太和服饰改制的社会背景</span>，袈裟式样由厚重的通肩式演变为轻盈的“<span>褒衣博带</span>”式，衣褶层叠流畅，富有节奏感，体现出<span>汉地士人崇尚的飘逸风度。</span>'
         },
         {
           title: '菩萨像',

src/assets/styles/base.css

@@ -63,6 +63,7 @@ body #A7Back > img {
 }
 .ant-image-preview-mask {
   backdrop-filter: blur(10px);
+  background-color: rgba(0, 0, 0, 0.9) !important;
 }
 .ant-image-preview-img-wrapper .previewImage {
   width: 100%;
@@ -73,8 +74,8 @@ body #A7Back > img {
   justify-content: center;
 }
 .ant-image-preview-img-wrapper .previewImage .Ori {
-  width: 80%;
-  height: 74%;
+  height: 83%;
+  width: 100%;
   object-fit: contain;
 }
 .ant-image-preview-img-wrapper .previewImage .Ori > .ant-image-preview-img {
@@ -159,6 +160,19 @@ textarea {
 .ant-image-preview-operations {
   background-color: rgba(0, 0, 0, 0.8) !important;
 }
+.ant-image-preview-operations-wrapper {
+  position: fixed;
+  width: 100%;
+  height: auto;
+  z-index: 1081;
+  top: 80%;
+  left: 50%;
+  transform: scale(0.7) rotate(90deg);
+}
+.ant-image-preview-operations-wrapper .ant-image-preview-close {
+  border-radius: 0;
+  background-color: transparent;
+}
 .sizeNo {
   font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
 }
@@ -225,20 +239,17 @@ textarea {
     transform: scale(0.7) rotate(90deg) translate(-178%, -50%);
     transform-origin: left bottom;
   }
-  .ant-image-preview-close {
-    transform: scale(0.7) rotate(90deg) translate(755px, -203%);
-    transform-origin: left bottom;
-  }
-  .previewImage {
+  .ant-image-preview-img-wrapper .previewImage {
     position: relative;
   }
-  .previewImage .Ori {
-    height: 40%;
+  .ant-image-preview-img-wrapper .previewImage .Ori {
+    width: 80%;
+    height: 74%;
   }
-  .previewImage .Ori .ant-image-preview-img {
+  .ant-image-preview-img-wrapper .previewImage .Ori .ant-image-preview-img {
     transform: rotate(90deg) !important;
   }
-  .previewImage .ImgFromTxt {
+  .ant-image-preview-img-wrapper .previewImage .ImgFromTxt {
     position: absolute;
     top: 50%;
     left: 50%;

src/assets/styles/base.less

@@ -81,6 +81,7 @@ body #A7Back {
 
 .ant-image-preview-mask {
   backdrop-filter: blur(10px);
+  background-color: rgba(0, 0, 0, 0.9) !important;
 }
 .ant-image-preview-img-wrapper {
 
@@ -93,8 +94,8 @@ body #A7Back {
     justify-content: center;
 
     .Ori {
-      width: 80%;
-      height: 74%;
+      height: 83%;
+      width: 100%;
       object-fit: contain;
       & > .ant-image-preview-img {
         width: 100%;
@@ -203,6 +204,20 @@ textarea {
   background-color: rgba(0, 0, 0, 0.8) !important;
 }
 
+.ant-image-preview-operations-wrapper {
+  position: fixed;
+  width: 100%;
+  height: auto;
+  z-index: 1081;
+  top: 80%;
+  left: 50%;
+  transform: scale(0.7) rotate(90deg);
+  .ant-image-preview-close {
+    border-radius: 0;
+    background-color: transparent;
+  }
+}
+
 // 默认字体
 .sizeNo {
   font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
@@ -295,28 +310,28 @@ textarea {
     transform-origin: left bottom;
   }
 
-  .ant-image-preview-close {
-    transform: scale(0.7) rotate(90deg) translate(755px, -203%);
-    transform-origin: left bottom;
-  }
 
-  .previewImage {
-    position: relative;
-    .Ori {
-      height: 40%;
-      .ant-image-preview-img {
-        transform: rotate(90deg) !important;
+  .ant-image-preview-img-wrapper {
+    .previewImage {
+      position: relative;
+      .Ori {
+        width: 80%;
+        height: 74%;
+        .ant-image-preview-img {
+          transform: rotate(90deg) !important;
+        }
+      }
+      .ImgFromTxt {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-107%, -50%) rotate(90deg) !important;
       }
-    }
-    .ImgFromTxt {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-107%, -50%) rotate(90deg) !important;
     }
   }
 
 
+
   #root .ant-tooltip {
     transform: rotate(0) !important;
     width: 410px !important;

src/pages/A5wenwu/index.tsx

@@ -12,8 +12,6 @@ function A5wenwu() {
 
   const [currentTab, setCurrentTab] = useState('tab0')
   const [isShowGesture, setIsShowGesture] = useState(true)
-  const [isShowTapianModal, setIsShowTapianModal] = useState(false)
-  const [isShowLineModal, setIsShowLineModal] = useState(false)
 
   const [gestureState1, setGestureState1] = useState('')
 
@@ -43,14 +41,18 @@ function A5wenwu() {
   }
 
   const handleTapian = () => {
-    setCurrentTab('tab2')
-    setIsShowTapianModal(true)
+    store.dispatch({
+      type: 'layout/lookBigImg',
+      payload: { url: require('@/assets/sgImg/img_tapian.png'), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
+    })
     console.log('showTapian')
   }
 
   const handleLine = () => {
-    setCurrentTab('tab3')
-    setIsShowLineModal(true)
+    store.dispatch({
+      type: 'layout/lookBigImg',
+      payload: { url: require('@/assets/sgImg/img_xiantu.png'), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
+    })
     console.log('showLine')
   }
 
@@ -132,7 +134,7 @@ function A5wenwu() {
       </div>
 
       {/* 拓片弹窗 */}
-      <div
+      {/* <div
         className={classNames(styles.tapianModal)}
         style={{ display: isShowTapianModal ? 'flex' : 'none' }}
       >
@@ -151,10 +153,10 @@ function A5wenwu() {
         }}>
           <img src={require('@/assets/sgImg/img_tapian.png')} alt='' />
         </div>
-      </div>
+      </div> */}
 
       {/* 线图弹窗 */}
-      <div
+      {/* <div
         className={classNames(styles.lineModal)}
         style={{ display: isShowLineModal ? 'flex' : 'none' }}
       >
@@ -166,14 +168,11 @@ function A5wenwu() {
         />
 
         <div className='TContainner' onClick={() => {
-          store.dispatch({
-            type: 'layout/lookBigImg',
-            payload: { url: require('@/assets/sgImg/img_xiantu.png'), show: true, fromTxt: '', zoom: isMobiileFu() ? 2 : 1 }
-          })
+
         }}>
           <img src={require('@/assets/sgImg/img_xiantu.png')} alt='' />
         </div>
-      </div>
+      </div> */}
     </div >
   )
 }

src/pages/A6ybwx/A6_2_zxzgh/components/Bq/index.module.scss

@@ -69,7 +69,7 @@
       }
     }
     .left {
-      width: 255px;
+      width: 190px;
       height: 100%;
       display: inline-block;
       vertical-align: top;
@@ -225,13 +225,13 @@
             text-align: center;
           }
           .bq1 {
-            transform: translate(-121%, -8%);
+            transform: translate(-118%, 3%);
             .main {
               text-align: right;
               white-space: normal;
             }
             .dotRight {
-              width: 80px;
+              width: 100px;
               top: 7%;
               .card_arrowR {
                 .line {
@@ -242,11 +242,12 @@
             }
           }
           .point8 {
-            transform: translate(-113%, 50%);
+            transform: translate(-131%, 55%);
             .pPoint {
-              width: 500px;
+              width: 250px;
               position: relative;
-              left: -76%;
+              left: -44px;
+              text-align: right;
             }
           }
           .Fbq2 {
@@ -271,39 +272,39 @@
             }
           }
           .point9 {
-            transform: translate(-80%, 153%);
+            transform: translate(-81%, 114%);
             .pPoint {
-              width: 500px;
+              width: 320px;
               position: relative;
-              left: -91%;
+              left: -110px;
+              text-align: right;
             }
           }
           .Fbq3 {
             transform: translateX(79px);
           }
           .bq3 {
-            transform: translate(-75%, -82%);
+            transform: translate(-66%, -82%);
             .main {
               width: 174px;
               text-align: right;
               white-space: normal;
-              .time::after {
+              .location::after {
                 content: '';
                 width: 6px;
                 height: 1px;
                 position: absolute;
                 z-index: -1;
-                top: 5%;
+                top: 14%;
                 border-bottom: 1px dashed rgba(93, 96, 96, 1);
               }
             }
             .dotRight {
               width: 110px;
-              height: 184px;
-              top: 7%;
-              border-left: 1px dashed rgba(93, 96, 96, 1);
-              padding-top: 153px;
-              top: 7%;
+              height: 152px;
+              border-left: 1px dashed rgb(93, 96, 96);
+              padding-top: 128px;
+              top: 17%;
               .name {
                 padding-right: 17px;
               }
@@ -316,11 +317,12 @@
             }
           }
           .point10 {
-            transform: translate(-93%, -83%);
+            transform: translate(-50%, -309%);
             .pPoint {
-              width: 500px;
+              width: 250px;
               position: relative;
-              left: -77%;
+              left: -38px;
+              text-align: right;
             }
           }
           .Fbq4 {
@@ -350,9 +352,12 @@
             }
           }
           .point11 {
-            transform: translate(-14%, 105%);
+            transform: translate(15%, 105%);
             .pPoint {
-              width: 334px;
+              width: 234px;
+              white-space: normal;
+              position: relative;
+              top: -7px;
             }
           }
           .Fbq5 {
@@ -361,7 +366,7 @@
           .bq5 {
             transform: translate(-18%, -49%);
             .main {
-              width: 138px;
+              width: 94px;
               white-space: normal;
             }
             .dotLeft {
@@ -380,9 +385,11 @@
             }
           }
           .point12 {
-            transform: translate(-18%, -147%);
+            transform: translate(-8%, -147%);
             .pPoint {
-              width: 280px;
+              width: 180px;
+              white-space: normal;
+              padding-left: 64px;
             }
           }
         }
@@ -401,8 +408,8 @@
           }
         }
         .item:nth-child(4) {
-          width: 420px;
-          padding-right: 100px;
+          width: 450px;
+          padding-right: 120px;
         }
         .item:nth-child(5) {
           width: 520px;
@@ -419,11 +426,11 @@
         right: 75%;
         pointer-events: none;
         white-space: normal;
-        text-align: justify;
+        text-align: left;
         padding-top: 30px;
         padding-left: 20px;
         width: 250px;
-        height: 50px;
+        height: auto;
         font-size: 15px;
         line-height: 22px;
         font-weight: 400;

src/pages/A6ybwx/A6_2_zxzgh/components/Bq/index.tsx

@@ -37,16 +37,18 @@ function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
                   className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
                 />
                 <div className={`imgFromTxt F${i.classNameCard}`}>{!isShowLine[index2]?.isShow ? i.picfrom : ''}</div>
-                {!isShowLine[index2]?.isShow ? (
-                  <InfoCard {...i} />
-                ) : (
-                  <InfoPoint
-                    time={i.time}
-                    title={i.title}
-                    classNamePoint={i?.classNamePoint}
-                    direction={i?.direction}
-                  />
-                )}
+
+                <InfoCard {...i} style={{ opacity: !isShowLine[index2]?.isShow ? '1' : '0' }} />
+
+                <InfoPoint
+                  style={{ opacity: !isShowLine[index2]?.isShow ? '0' : '0.3', animation: !isShowLine[index2]?.isShow ? '' : 'fadeInOut 2s linear  infinite' }}
+
+                  time={i.time}
+                  title={i.title}
+                  classNamePoint={i?.classNamePoint}
+                  direction={i?.direction}
+                />
+
               </div>
             ))}
           </div>

src/pages/A6ybwx/A6_2_zxzgh/components/Bwwq/index.module.scss

@@ -68,14 +68,14 @@
       }
     }
     .left {
-      width: 255px;
+      width: 242px;
       height: 100%;
       display: inline-block;
       vertical-align: top;
       position: relative;
       white-space: normal;
       .lTop {
-        text-align: justify;
+        text-align: left;
         padding: 20px;
         padding-right: 0;
         padding-bottom: 0;
@@ -87,8 +87,10 @@
         color: rgba(93, 96, 96, 1);
       }
       .itemHotBtn {
-        width: 100%;
-        height: 90px;
+        margin-top: 17px;
+        margin-left: 15px;
+        width: 80%;
+        height: 56px;
         color: rgba(124, 75, 54, 1);
         font-size: 20px;
         cursor: pointer;
@@ -105,7 +107,12 @@
           transform: translate(-50%, -50%);
           width: 180px;
           height: 100%;
-          object-fit: contain;
+          object-fit: fill;
+        }
+        .hotFocu {
+          width: 35px;
+          height: 35px;
+          transform: translate(143%, -116%);
         }
       }
       .lContent {
@@ -208,7 +215,7 @@
         align-items: center;
         gap: 10px;
         .item {
-          width: 400px;
+          width: 344px;
           height: 100%;
           position: relative;
           .pic {
@@ -230,10 +237,10 @@
             text-align: center;
           }
           .wq1 {
-            transform: translate(-110%, 24%);
+            transform: translate(-93%, 24%);
             width: 360px;
             .main {
-              width: 230px;
+              width: 160px;
               text-align: right;
               white-space: normal;
               .Cardtext {
@@ -241,7 +248,7 @@
               }
             }
             .dotRight {
-              width: 160px;
+              width: 85px;
               top: 7%;
               .card_arrowR {
                 .line {
@@ -252,11 +259,12 @@
             }
           }
           .point7 {
-            transform: translate(-113%, 121%);
+            transform: translate(-142%, 121%);
             .pPoint {
               width: 417px;
               position: relative;
-              left: -51%;
+              top: -11px;
+              left: -15px;
             }
           }
         }

src/pages/A6ybwx/A6_2_zxzgh/components/Bwwq/index.tsx

@@ -13,8 +13,8 @@ function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTyp
         <div className='left'>
           <div className='lTop'>{sItem.desc}</div>
           <div className="itemHotBtn songFont" onClick={() => setIsShowHot(!isShowHot)}>
-
             <img src={require('@/assets/img/A6_sangzang_btn2.png')} alt="" />
+            <img className='hotFocu' src={require('@/assets/img/A6_sinicize_focus.png')} alt="" />
             知识拓展
           </div>
         </div>
@@ -39,9 +39,10 @@ function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTyp
                   />
                   <div className={`imgFromTxt`}>{!isShowLine[index2]?.isShow ? i.picfrom : ''}</div>
                   {!isShowLine[index2]?.isShow ? (
-                    <InfoCard {...i} />
+                    <InfoCard {...i} style={{ opacity: !isShowLine[index2]?.isShow ? '1' : '0' }} />
                   ) : (
                     <InfoPoint
+                      style={{ opacity: !isShowLine[index2]?.isShow ? '0' : '0.3', animation: !isShowLine[index2]?.isShow ? '' : 'fadeInOut 2s linear  infinite' }}
                       time={i.time}
                       title={i.title}
                       classNamePoint={i.classNamePoint}

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzwq/index.module.scss

@@ -16,7 +16,7 @@
         transition: all 1s ease-in-out;
       }
       .left {
-        width: 380px;
+        width: 396px;
       }
     }
   }
@@ -72,7 +72,7 @@
       }
     }
     .left {
-      width: 380px;
+      width: 408px;
       height: 100%;
       display: inline-block;
       vertical-align: top;
@@ -122,7 +122,7 @@
         .lInfo {
           padding-left: 20px;
           padding-top: 10px;
-          width: 90%;
+          width: 100%;
           height: 48%;
           display: flex;
           align-items: center;
@@ -158,7 +158,7 @@
                 z-index: -1;
                 top: 50%;
                 left: 50%;
-                transform: translate(-384%, 65%);
+                transform: translate(-441%, 65%);
                 background-color: rgb(197, 185, 144);
                 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
               }
@@ -169,13 +169,8 @@
               font-weight: 400;
               color: rgb(93, 96, 96);
               height: fit-content;
-              text-align: justify;
+              text-align: left;
               margin-top: 5px;
-              overflow: auto;
-              &::-webkit-scrollbar {
-                width: 0px;
-                height: 0px;
-              }
               & > span {
                 color: rgb(169, 135, 99);
               }
@@ -224,10 +219,10 @@
             transform: translateX(-9px);
           }
           .zwq1 {
-            transform: translate(-114%, 39%);
+            transform: translate(-105%, 39%);
             width: 420px;
             .main {
-              width: 300px;
+              width: 247px;
               text-align: right;
               white-space: normal;
               .Cardtext {
@@ -235,7 +230,7 @@
               }
             }
             .dotRight {
-              width: 105px;
+              width: 90px;
               top: -5%;
               .card_arrowR {
                 .line {
@@ -293,30 +288,40 @@
             }
           }
           .point4 {
-            transform: translate(-120%, 182%);
+            transform: translate(-152%, 182%);
             .pPoint {
               width: 350px;
               position: relative;
-              left: -51%;
+              left: -141px;
+              text-align: right;
             }
           }
           .point5 {
-            transform: translate(17%, 130%);
+            transform: translate(40%, -260%);
             .pPoint {
               width: 158px;
             }
           }
           .point6 {
+            transform: translate(-2%, 96%);
             .pPoint {
-              width: 364px;
+              width: 272px;
+              flex-wrap: wrap;
+              position: relative;
+              top: -7px;
+              .pointTitle {
+                white-space: normal;
+              }
             }
           }
         }
         .item:nth-child(1) {
-          width: 290px;
+          width: 383px;
+          padding-left: 20px;
         }
         .item:nth-child(3) {
           width: 595px;
+          padding-left: 15px;
           .pic {
             height: calc(100% - 5px);
           }
@@ -325,12 +330,12 @@
       .lInfo {
         pointer-events: none;
         position: absolute;
-        top: 0;
-        right: 1%;
+        top: 14px;
+        right: 2.4%;
         white-space: normal;
         padding-left: 20px;
         padding-top: 30px;
-        width: 250px;
+        width: 212px;
         height: 60%;
         display: flex;
         align-items: center;
@@ -366,7 +371,7 @@
               z-index: -1;
               top: 50%;
               left: 50%;
-              transform: translate(-223%, 65%);
+              transform: translate(-166%, 65%);
               background-color: rgb(197, 185, 144);
               box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
             }

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzwq/index.tsx

@@ -41,16 +41,18 @@ function Bwzwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTy
                     className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
                   />
                   <div className={`imgFromTxt F${i.classNameCard}`}>{!isShowLine[index2]?.isShow ? i.picfrom : ''}</div>
-                  {!isShowLine[index2]?.isShow ? (
-                    <InfoCard {...i} />
-                  ) : (
-                    <InfoPoint
-                      time={i.time}
-                      title={i.title}
-                      classNamePoint={i?.classNamePoint}
-                      direction={i?.direction}
-                    />
-                  )}
+
+                  <InfoCard {...i} style={{ opacity: !isShowLine[index2]?.isShow ? '1' : '0' }} />
+
+                  <InfoPoint
+                    style={{ opacity: !isShowLine[index2]?.isShow ? '0' : '0.3', animation: !isShowLine[index2]?.isShow ? '' : 'fadeInOut 2s linear  infinite' }}
+
+                    time={i.time}
+                    title={i.title}
+                    classNamePoint={i?.classNamePoint}
+                    direction={i?.direction}
+                  />
+
                 </div>
               ))}
           </div>

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzzq/index.module.scss

@@ -23,6 +23,7 @@
         width: 0;
         opacity: 0;
         transition: all 0.6s ease-in-out;
+        margin: 0;
       }
     }
   }
@@ -68,8 +69,9 @@
       }
     }
     .left {
-      width: 745px;
+      width: 830px;
       height: 100%;
+      margin-right: 30px;
       display: inline-block;
       vertical-align: top;
       position: relative;
@@ -77,6 +79,7 @@
       .lTop {
         text-align: justify;
         padding: 20px;
+        padding-right: 110px;
         padding-bottom: 0;
         width: 100%;
         height: 130px;
@@ -90,11 +93,11 @@
       }
       .lContent {
         width: 100%;
-        height: calc(100% - 100px);
+        height: calc(100% - 60px);
         display: flex;
         gap: 5px;
         position: relative;
-        margin-top: 100px;
+        margin-top: 60px;
         .lImgBox {
           width: 550px;
           height: 100%;
@@ -103,7 +106,7 @@
             height: calc(100% - 20px);
             transition: all 0.6s ease-in-out;
             background-repeat: no-repeat;
-            background-position: center;
+            background-position: right;
             background-size: contain;
           }
           .imgFromTxt {
@@ -119,20 +122,23 @@
           }
 
           .zzq1 {
-            transform: translate(-79%, -13%);
-            width: 450px;
+            transform: translate(-76%, -13%);
+            width: 520px;
             .main {
               text-align: right;
+              width: 304px;
               .Cardtext {
-                text-align: justify;
                 max-height: 110px;
                 margin-top: 6px;
                 line-height: 22px;
               }
             }
             .dotRight {
-              width: 180px;
+              width: 198px;
               top: 38%;
+              .name {
+                padding-right: 10px;
+              }
             }
           }
           .point1 {
@@ -141,14 +147,15 @@
               font-size: 18px;
               width: 250px;
               position: relative;
-              left: -26px;
+              left: -39px;
+              text-align: right;
             }
           }
         }
         .lInfo {
           padding-left: 20px;
-          padding-top: 30px;
-          width: 290px;
+          padding-top: 65px;
+          width: 336px;
           height: 48%;
           display: flex;
           align-items: center;
@@ -184,7 +191,7 @@
                 z-index: -1;
                 top: 50%;
                 left: 50%;
-                transform: translate(-341%, 65%);
+                transform: translate(-402%, 65%);
                 background-color: rgb(197, 185, 144);
                 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
               }
@@ -249,7 +256,7 @@
             transform: translate(-14%, -61%);
             width: 450px;
             .main {
-              width: 164px;
+              width: 190px;
               text-align: left;
               white-space: normal;
               .Cardtext {
@@ -287,15 +294,15 @@
             transform: translateX(-124px);
           }
           .zzq3 {
-            transform: translate(-24%, 6%);
+            transform: translate(-20%, 6%);
             width: 450px;
             .main {
-              width: 260px;
+              width: 150px;
               white-space: normal;
             }
             .dotLeft {
-              width: 107px;
-              top: 7%;
+              width: 129px;
+              top: 3%;
               .card_arrowR,
               .card_arrowL {
                 .line {
@@ -328,11 +335,11 @@
         pointer-events: none;
         position: absolute;
         top: 0;
-        right: 5%;
+        right: 8%;
         white-space: normal;
         padding-left: 20px;
         padding-top: 30px;
-        width: 250px;
+        width: 193px;
         height: 60%;
         display: flex;
         align-items: center;
@@ -368,7 +375,7 @@
               z-index: -1;
               top: 50%;
               left: 50%;
-              transform: translate(-223%, 65%);
+              transform: translate(-144%, 65%);
               background-color: rgb(197, 185, 144);
               box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
             }

src/pages/A6ybwx/A6_2_zxzgh/components/Bwzzq/index.tsx

@@ -60,16 +60,17 @@ function Bwzzq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTy
                 }
               />
               <div className="imgFromTxt">{!isShowLine[0]?.isShow ? sItem.imgItems[0].picfrom : ''}</div>
-              {!isShowLine[0]?.isShow ? (
-                <InfoCard {...sItem.imgItems[0]} />
-              ) : (
-                <InfoPoint
-                  direction={sItem.imgItems[0].direction}
-                  time={sItem.imgItems[0].time}
-                  title={sItem.imgItems[0].title}
-                  classNamePoint={sItem.imgItems[0].classNamePoint}
-                />
-              )}
+
+              <InfoCard {...sItem.imgItems[0]} style={{ opacity: !isShowLine[0]?.isShow ? 1 : 0 }} />
+
+              <InfoPoint
+                style={{ opacity: !isShowLine[0]?.isShow ? '0' : '0.3', animation: !isShowLine[0]?.isShow ? '' : 'fadeInOut 2s linear  infinite' }}
+                direction={sItem.imgItems[0].direction}
+                time={sItem.imgItems[0].time}
+                title={sItem.imgItems[0].title}
+                classNamePoint={sItem.imgItems[0].classNamePoint}
+              />
+
             </div>
           </div>
         </div>
@@ -94,16 +95,17 @@ function Bwzzq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTy
                     className={`pic ${isShowLine[index2 + 1]?.isShow ? 'picLine' : ''}`}
                   />
                   <div className={`imgFromTxt F${i.classNameCard}`}>{!isShowLine[index2 + 1]?.isShow ? i.picfrom : ''}</div>
-                  {!isShowLine[index2 + 1]?.isShow ? (
-                    <InfoCard {...i} />
-                  ) : (
-                    <InfoPoint
-                      direction={i.direction}
-                      time={i.time}
-                      title={i.title}
-                      classNamePoint={i.classNamePoint}
-                    />
-                  )}
+
+                  <InfoCard {...i} style={{ opacity: !isShowLine[index2 + 1]?.isShow ? 1 : 0 }} />
+
+                  <InfoPoint
+                    style={{ opacity: !isShowLine[index2 + 1]?.isShow ? '0' : '0.3', animation: !isShowLine[index2 + 1]?.isShow ? '' : 'fadeInOut 2s linear  infinite' }}
+                    direction={i.direction}
+                    time={i.time}
+                    title={i.title}
+                    classNamePoint={i.classNamePoint}
+                  />
+
                 </div>
               ))}
           </div>

src/pages/A6ybwx/A6_2_zxzgh/components/Bz/index.module.scss

@@ -68,7 +68,7 @@
       }
     }
     .left {
-      width: 300px;
+      width: 218px;
       height: 100%;
       display: inline-block;
       vertical-align: top;
@@ -111,7 +111,7 @@
         .lInfo {
           padding-left: 20px;
           padding-top: 10px;
-          width: 90%;
+          width: 100%;
           height: 48%;
           display: flex;
           align-items: center;
@@ -210,7 +210,7 @@
             text-align: center;
           }
           .bz1 {
-            transform: translate(-112%, 34%);
+            transform: translate(-105%, 34%);
             width: 320px;
             height: 170px;
             .main {
@@ -219,7 +219,7 @@
               white-space: normal;
             }
             .dotRight {
-              width: 132px;
+              width: 100px;
               top: 5%;
               .name {
                 padding-right: 0;
@@ -233,17 +233,18 @@
             }
           }
           .point13 {
-            transform: translate(-119%, 105%);
+            transform: translate(-142%, 180%);
             .pPoint {
-              width: 200px;
+              width: 213px;
+              text-align: right;
             }
           }
 
           .Fbz2 {
-            transform: translateX(-59px);
+            transform: translateX(-38px);
           }
           .bz2 {
-            transform: translate(-8%, -43%);
+            transform: translate(-7%, -43%);
             width: 350px;
             height: 170px;
             .main {
@@ -266,7 +267,7 @@
             }
           }
           .point14 {
-            transform: translate(-31%, -59%);
+            transform: translate(30%, -59%);
             .pPoint {
               width: 271px;
             }
@@ -276,7 +277,7 @@
             transform: translateX(79px);
           }
           .bz3 {
-            transform: translate(-138%, 42%);
+            transform: translate(-142%, 42%);
             width: 320px;
             height: 170px;
             .main {
@@ -296,9 +297,12 @@
             }
           }
           .point15 {
-            transform: translate(-165%, 111%);
+            transform: translate(-165%, 149%);
             .pPoint {
-              width: 148px;
+              width: 268px;
+              position: relative;
+              left: -59px;
+              text-align: right;
             }
           }
         }
@@ -306,7 +310,8 @@
           width: 340px;
         }
         .item:nth-child(2) {
-          width: 440px;
+          width: 460px;
+          padding-left: 20px;
           .pic {
             height: calc(100% - 5px);
           }
@@ -324,7 +329,7 @@
         pointer-events: none;
         position: absolute;
         top: 0;
-        right: 32.2%;
+        right: 30.2%;
         white-space: normal;
         padding-left: 20px;
         padding-top: 30px;

src/pages/A6ybwx/A6_2_zxzgh/components/Bz/index.tsx

@@ -48,16 +48,18 @@ function Bz({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
                     className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
                   />
                   <div className={`imgFromTxt F${i.classNameCard}`}>{!isShowLine[index2]?.isShow ? i.picfrom : ''}</div>
-                  {!isShowLine[index2]?.isShow ? (
-                    <InfoCard {...i} />
-                  ) : (
-                    <InfoPoint
-                      time={i.time}
-                      title={i.title}
-                      direction={i.direction}
-                      classNamePoint={i.classNamePoint}
-                    />
-                  )}
+
+                  <InfoCard {...i} style={{ opacity: !isShowLine[index2]?.isShow ? '1' : '0' }} />
+
+                  <InfoPoint
+                    style={{ opacity: !isShowLine[index2]?.isShow ? '0' : '0.3', animation: !isShowLine[index2]?.isShow ? '' : 'fadeInOut 2s linear  infinite' }}
+
+                    time={i.time}
+                    title={i.title}
+                    direction={i.direction}
+                    classNamePoint={i.classNamePoint}
+                  />
+
                 </div>
               ))}
           </div>

src/pages/A6ybwx/A6_2_zxzgh/components/InfoCard/index.module.scss

@@ -8,6 +8,7 @@
   height: 200px;
   display: flex;
   pointer-events: none;
+  transition: all 0.6s ease-in-out;
   :global {
     .dotLeft,
     .dotRight,
@@ -57,7 +58,7 @@
         font-weight: 600;
       }
       .Cardtext {
-        text-align: justify;
+        text-align: left;
         max-height: 110px;
         margin-top: 6px;
         line-height: 22px;

src/pages/A6ybwx/A6_2_zxzgh/components/InfoCard/index.tsx

@@ -10,6 +10,7 @@ type InfoCardProps = {
   direction?: string
   classNameCard?: string
   extraName?: string
+  style?: React.CSSProperties
 }
 function InfoCard({
   time,
@@ -19,10 +20,11 @@ function InfoCard({
   name = '主尊',
   direction = 'left',
   classNameCard = '',
-  extraName = ''
+  extraName = '',
+  style = {}
 }: InfoCardProps) {
   return (
-    <div className={`${styles.InfoCard} ${classNameCard}`}>
+    <div className={`${styles.InfoCard} ${classNameCard}`} style={style}>
       {direction === 'left' && (
         <div className='dotLeft'>
           <div className='name'>{name}</div>
@@ -34,7 +36,7 @@ function InfoCard({
       )}
       <div className='main'>
         <div className='time'>{time}</div>
-        <div className='location'>{title}</div>
+        <div className='location' dangerouslySetInnerHTML={{ __html: title || '' }}></div>
         <div className='Cardtext' dangerouslySetInnerHTML={{ __html: txt || '' }}></div>
         <div className='from'>{picfrom}</div>
       </div>

src/pages/A6ybwx/A6_2_zxzgh/components/InfoPoint/index.module.scss

@@ -6,8 +6,8 @@
   width: 225px;
   height: 60px;
   pointer-events: none;
-  animation: fadeIn 2s linear infinite;
-  @keyframes fadeIn {
+  transition: all 0.6s ease-in-out;
+  @keyframes fadeInOut {
     0% {
       opacity: 0.3;
       scale: 0.98;
@@ -54,16 +54,14 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-
+      text-align: left;
       .pointTime,
       .pointTitle {
         padding-left: 10px;
-        width: fit-content;
+        width: 100%;
         height: 50%;
-
         font-weight: 500;
         color: rgba(124, 75, 54, 1);
-        text-align: center;
       }
     }
   }

src/pages/A6ybwx/A6_2_zxzgh/components/InfoPoint/index.tsx

@@ -6,12 +6,14 @@ type InfoPointProps = {
   title: string
   direction?: string
   classNamePoint?: string
+  style?: React.CSSProperties
 }
-function InfoPoint({ time, title, direction = 'right', classNamePoint = '' }: InfoPointProps) {
+function InfoPoint({ time, title, direction = 'right', classNamePoint = '', style = {} }: InfoPointProps) {
 
   return (
     <div
       className={`${styles.point} point${direction} ${classNamePoint}`}
+      style={style}
     >
       <img className="pointBg" src={require('@/assets/img/A6_pointBg.png')} alt="" />
       <div className="pPoint">