jieyu

public/myData/myData.js

@@ -977,7 +977,7 @@ const myDataTemp = {
       ]
     },
     {
-      time: '东魏--北齐',
+      time: '东魏—北齐',
       bgPath: './myData/img/sinicize_bq.jpg',
       desc: '<span>东魏</span>国祚仅十六年，佛教造像风格继承北魏晚期遗风，造型端正、雕刻技法更加成熟，整体造像和佛面相稍显丰满。',
       items: [
@@ -1054,7 +1054,7 @@ const myDataTemp = {
       ]
     },
     {
-      time: '西魏--北周',
+      time: '西魏—北周',
       bgPath: './myData/img/sinicize_bz.jpg',
       desc: '西魏、北周整体造像风格一脉相承，面相逐渐圆润丰满。',
       items: [

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

@@ -268,6 +268,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
                       className='intro_btn'
                       onClick={() => {
                         setIsFlipped(true)
+                        setShowTooltip(-1)
                       }}
                     >
                       {/* 原文<span className='intro_btn_dot'></span>译文
@@ -281,7 +282,10 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
 
               <div className='translateModal'>
                 {(
-                  <div className='txtWithTrans' onClick={() => setIsFlipped(false)} onTouchMove={() => setShowTooltip(-1)}>
+                  <div className='txtWithTrans' onClick={() => {
+                    setIsFlipped(false)
+                    setShowTooltip(-1)
+                  }} onTouchMove={() => setShowTooltip(-1)}>
                     {CommentText({
                       str: myData.readDetail[selectedTab - 1].translate_v2,
                       index: selectedTab - 1

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

@@ -319,15 +319,13 @@
         .year-zongjie {
           background: url(../../../assets/img/sinicize_jy.jpg) no-repeat center center;
           background-size: 100% 100%;
-          width: 210px;
-          white-space: normal;
+          width: 100px;
           .yearContainner {
             .txt {
               padding: 20px 40%;
               padding-top: 50px;
               letter-spacing: 2px;
               height: 35%;
-              line-height: 45px;
             }
             .front {
               height: 65%;
@@ -337,6 +335,37 @@
             }
           }
         }
+        .jieyuDetail {
+          background-image: url(../../../assets/img/A6_sinicize_jieyuBg.png);
+          background-size: 100% 100%;
+          background-position: center center;
+          width: auto;
+          height: 100%;
+          display: inline-block;
+          vertical-align: top;
+          overflow: hidden;
+          transition: all 0.6s ease-in-out;
+          .jieyuDetailtxt {
+            width: 500px;
+            height: 100%;
+            padding: 80px 160px 0 40px;
+            font-size: 15px;
+            font-weight: 400;
+            color: rgba(93, 96, 96, 1);
+            transition: opacity 1s ease-in-out, width 0.1s ease-in-out;
+            line-height: 30px;
+            text-indent: 2em;
+            text-align: justify;
+            white-space: normal;
+          }
+        }
+        .jieyuDetailHide {
+          .jieyuDetailtxt {
+            width: 0;
+            opacity: 0;
+            padding: 0;
+          }
+        }
       }
     }
   }

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -75,9 +75,9 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
       return
     }
     setSelectedTime(index)
-
+    if (index === 5) return
     setIsShowLine(
-      myData.sinicizeData[index].imgItems.map((item, index) => ({
+      myData.sinicizeData[index]?.imgItems.map((item, index) => ({
         index,
         isShow: true
       }))
@@ -87,6 +87,16 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
   useEffect(() => {
     if (selectedTime >= 0 && sinicize1Ref.current && originRef.current) {
       console.log(123, selectedTime)
+      // 最右边的年份项滚动到最左边
+      if (selectedTime === 5) {
+        requestAnimationFrame(() => {
+          if (originRef.current) {
+            originRef.current.scrollLeft = originRef.current.scrollWidth
+            console.log(originRef.current.scrollLeft)
+          }
+        })
+        return
+      }
       // 依次排列，如果不需要就是[0,100,200,300,400]
       const scrollPosition = [0, 100, 200, 300, 400][selectedTime] + sinicize1Ref.current.offsetWidth
       console.log(123, scrollPosition)
@@ -318,12 +328,16 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
 
               {/* 结语 */}
               <div className='yearItem'>
-                <div className='year year-zongjie'>
-                  <div className='yearContainner'>
+                <div className='year year-zongjie'
+                >
+                  <div className='yearContainner' onClick={(e) => handleYearItemClick(e, 5)}>
                     <div className='txt songFont'>{myData.sinicizeDataStatic.zongjie.title}</div>
-                    <div className='front' id='jieyu'>{myData.sinicizeDataStatic.zongjie.txt}</div>
+                    <div className='front' id='jieyu'></div>
                   </div>
                 </div>
+                <div id='jieyuDetail' className={`jieyuDetail ${selectedTime === 5 ? '' : 'jieyuDetailHide'}`}>
+                  <div className="jieyuDetailtxt">{myData.sinicizeDataStatic.zongjie.txt}</div>
+                </div>
               </div>
             </div>
           </div>

src/pages/A6ybwx/Genealogy/index.tsx

@@ -78,7 +78,7 @@ function Genealogy({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
                 return (
                   <div className='infoitem' key={index}>
                     <div className='title songFont'>{item?.title}</div>
-                    <div className='txt'>{item?.content}</div>
+                    <div className='txt' dangerouslySetInnerHTML={{ __html: item?.content }}></div>
                   </div>
                 )
               } else {