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

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

@@ -124,7 +124,7 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
         trigger='contextMenu'
         placement='topLeft'
         align={{ offset: [-25, -10] }}
-        // arrow={false}
+      // arrow={false}
       >
         <a
           key={index}
@@ -245,52 +245,56 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
         id='modalTxt'
       >
         <div className='modalTxtContainner'>
-          {selectedTab !== 0 && (
-            <FlipContainer
-              style={{
-                width: '82%',
-                height: '100%'
-              }}
-              isFlipped={isFlipped}
-              frontContent={
-                <div className='intro' id='introContent'>
-                  {
-                    <>
-                      <div className='intro_title songFont'>
-                        {modalTxtTab[selectedTab - 1].name}
-                      </div>
-                      <div className='intro_txt'>{myData.readDetail[selectedTab - 1].intro}</div>
-                      <div
-                        className='intro_btn'
-                        onClick={() => {
-                          setIsFlipped(true)
-                        }}
-                      >
-                        {/* 原文<span className='intro_btn_dot'></span>译文
-                      <span className='intro_btn_dot'></span> */}
-                      </div>
-                    </>
-                  }
-                </div>
-              }
-              backContent={
-                <div className='translateModal'>
-                  {
+          {selectedTab !== 0 && <FlipContainer
+            style={{
+              width: '82%',
+              height: '100%'
+            }}
+            isFlipped={isFlipped}
+            frontContent={
+              <div
+                className='intro'
+                id='introContent'
+              >
+                {(
+                  <>
+                    <div className='intro_title songFont'>
+                      {modalTxtTab[selectedTab - 1].name}
+                    </div>
+                    <div className='intro_txt'>
+                      {myData.readDetail[selectedTab - 1].intro}
+                    </div>
                     <div
-                      className='txtWithTrans'
-                      onClick={() => setIsFlipped(false)}
-                      onTouchMove={() => setShowTooltip(-1)}
+                      className='intro_btn'
+                      onClick={() => {
+                        setIsFlipped(true)
+                        setShowTooltip(-1)
+                      }}
                     >
-                      {CommentText({
-                        str: myData.readDetail[selectedTab - 1].translate_v2,
-                        index: selectedTab - 1
-                      })}
+                      {/* 原文<span className='intro_btn_dot'></span>译文
+                      <span className='intro_btn_dot'></span> */}
                     </div>
-                  }
-                </div>
-              }
-            />
-          )}
+                  </>
+                )}
+              </div>
+            }
+            backContent={
+
+              <div className='translateModal'>
+                {(
+                  <div className='txtWithTrans' onClick={() => {
+                    setIsFlipped(false)
+                    setShowTooltip(-1)
+                  }} onTouchMove={() => setShowTooltip(-1)}>
+                    {CommentText({
+                      str: myData.readDetail[selectedTab - 1].translate_v2,
+                      index: selectedTab - 1
+                    })}
+                  </div>
+                )}
+              </div>
+            }
+          />}
 
           {selectedTab === 0 && (
             <div className='content'>
@@ -322,9 +326,8 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
                 onClick={() => handleTabClick(item.key, myData.readDetail[index]?.mzmtz?.title)}
               >
                 <img
-                  src={require(`@/assets/img/btn_ModalTxt_bg${
-                    selectedTab === item.key ? '_ac' : ''
-                  }.png`)}
+                  src={require(`@/assets/img/btn_ModalTxt_bg${selectedTab === item.key ? '_ac' : ''
+                    }.png`)}
                   alt=''
                 />
                 <div className={`tabNub songFont ${selectedTab === item.key ? 'tabNubAc' : ''}`}>

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 {