gx

src/assets/styles/base.css

@@ -508,7 +508,7 @@ textarea {
     height: 290px;
   }
 }
-@keyframes fadeIn {
+@keyframes fade_in {
   0% {
     opacity: 0;
   }

src/assets/styles/base.less

@@ -671,7 +671,7 @@ textarea {
   }
 }
 
-@keyframes fadeIn {
+@keyframes fade_in {
   0% {
     opacity: 0;
   }

src/components/FlipContainner/index.module.scss

@@ -10,7 +10,7 @@
       position: relative;
       width: 100%;
       height: 100%;
-      transform-style: 'preserve-3d';
+      transform-style: preserve-3d;
     }
     .frontFace,
     .backFace {

src/components/FlipContainner/index.tsx

@@ -13,7 +13,7 @@ type FlipContainerProps = {
   perspective?: number;
   onClick?: () => void
 }
-function FlipContainer({ frontContent, backContent, style, axis = 'y', duration = 0.5, isFlipped, onClick, perspective = 1000 }: FlipContainerProps) {
+function FlipContainer({ frontContent, backContent, style, axis = 'y', duration = 0.5, isFlipped, onClick, perspective = 1900 }: FlipContainerProps) {
 
   const containerStyle: CSSProperties = {
     perspective: `${perspective}px`, // 3D透视核心
@@ -25,7 +25,14 @@ function FlipContainer({ frontContent, backContent, style, axis = 'y', duration
     transform: isFlipped ? `rotate${axis.toUpperCase()}(180deg)` : "none",
   };
 
+  const frontFaceStyle: CSSProperties = {
+    zIndex: isFlipped ? 0 : 1,
+    opacity: isFlipped ? 0.5 : 1,
+  };
+
   const backFaceStyle: CSSProperties = {
+    zIndex: isFlipped ? 1 : 0,
+    opacity: isFlipped ? 1 : 0.5,
     transform: `rotate${axis.toUpperCase()}(180deg)`,
   };
 
@@ -33,7 +40,7 @@ function FlipContainer({ frontContent, backContent, style, axis = 'y', duration
     <div className={styles.FlipContainner} style={containerStyle} onClick={onClick}>
       <div style={flipWrapperStyle} className="flipWrapper">
         {/* 正面元素 */}
-        <div className="frontFace">
+        <div className="frontFace" style={frontFaceStyle}>
           {frontContent}
         </div>
         {/* 背面元素 */}

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

@@ -15,7 +15,6 @@
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      gap: 10px;
       padding-right: 10px;
       position: relative;
 
@@ -109,25 +108,31 @@
       }
 
       .intro {
+        background-image: url(../../../../assets/img/A2_back.png);
+        background-position: center;
+        background-size: 100% 100%;
         width: 100%;
         padding-left: 40px;
         padding-right: 20px;
-        height: 15%;
+        padding-top: 40px;
+        padding-bottom: 20px;
+        height: fit-content;
         text-align: justify;
         font-size: 15px;
         line-height: 24px;
         font-weight: 400;
-        color: #504e40;
+        color: rgba(69, 68, 55, 1);
         // transition: opacity 0.1s ease-out;
         display: flex;
         flex-direction: column;
         justify-content: center;
 
         .intro_title {
-          height: 40px;
+          height: 30px;
           font-size: 22px;
           line-height: 30px;
-          color: rgba(255, 255, 255, 1);
+          color: rgba(124, 75, 54, 1);
+          font-weight: bold;
         }
         .intro_txt {
           margin-top: 10px;
@@ -135,39 +140,85 @@
           max-height: calc(100% - 110px);
           overflow-y: auto;
           margin-bottom: 10px;
+          mask-image: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 95%,
+            /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
+          );
+          -webkit-mask-image: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 95%,
+            rgba(0, 0, 0, 0) 100%
+          );
           &::-webkit-scrollbar {
             width: 0px;
           }
         }
         .intro_btn {
-          width: 180px;
-          height: 50px;
-          background-image: url(../../../../assets/img/A6_sangzang_btn2.png);
+          width: 150px;
+          height: 30px;
+          background-image: url(../../../../assets/img/A2_ywyw_btn.png);
           background-position: center;
           background-size: 100% 100%;
-          line-height: 50px;
-          font-size: 17px;
-          text-align: center;
+          padding-left: 35px;
+          line-height: 30px;
+          font-size: 15px;
+          color: rgba(175, 135, 100, 1);
+          align-self: flex-end;
+          animation: fadeInOut 3s linear infinite;
+          display: flex;
+          align-items: center;
+          .intro_btn_dot {
+            width: 6px;
+            height: 2px;
+            margin-left: 4px;
+            text-align: center;
+            border-left: 2px solid rgba(175, 135, 100, 1);
+          }
+          .intro_btn_arrow {
+            width: 26px;
+            height: 30px;
+            text-align: center;
+            font-size: 25px;
+          }
         }
       }
 
       .translateModal {
-        width: 80%;
-        height: 86%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
+        background-image: url(../../../../assets/img/A2_front.png);
+        background-position: center;
+        background-size: 100% 100%;
+        width: 100%;
+        height: 82%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         .txtWithTrans {
-          margin-left: 30px;
           font-size: 16px !important;
           line-height: 22px !important;
           letter-spacing: 2px;
-          height: 100%;
+          height: 90%;
+          width: 100%;
           text-align: justify;
           font-weight: 500;
           color: rgba(94, 52, 34, 1); // 原始颜色
           overflow: auto;
-          padding-bottom: 10px;
+          padding: 20px 30px;
+
+          mask-image: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
+          );
+          -webkit-mask-image: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 1) 0%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0) 100%
+          );
 
           &::-webkit-scrollbar {
             width: 0px;
@@ -325,11 +376,12 @@
         .shufaBtn {
           width: 180px;
           height: 50px;
-          background-image: url(../../../../assets/img/A6_sangzang_btn2.png);
+          background-image: url(../../../../assets/img/A2_sfjs_btn.png);
           background-position: center;
           background-size: 100% 100%;
           line-height: 50px;
           font-size: 17px;
+          margin-top: 11px;
           text-align: center;
           cursor: pointer;
         }

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

@@ -23,7 +23,6 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
 
   const [isFlipped, setIsFlipped] = useState(false)
   const [selectedTab, setSelectedTab] = useState(0)
-  const [isOpenTrans, setIsOpenTrans] = useState(false)
   const [isShowShufa, setIsShowShufa] = useState(false)
   const selectedTabRef = useRef(0)
 
@@ -56,7 +55,10 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
   }, [selectedTab, setIsShowMzmTitle, setIsShowTabBar])
 
   useEffect(() => {
-    if (selectedTab === 0) setIsOpenTrans(false)
+    if (selectedTab === 0) {
+      setIsFlipped(false)
+    }
+    setShowTooltip(-1)
     localStorage.setItem('selectedBeiwen', selectedTab.toString())
   }, [selectedTab])
 
@@ -130,12 +132,17 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
           onTouchStart={() => (dragFlag.current = false)} // 触摸开始时重置标志位
           onTouchMove={() => (dragFlag.current = true)} // 检测到移动时标记为拖拽
           onTouchEnd={e => {
+            e.preventDefault()
+            e.stopPropagation()
             if (!dragFlag.current) {
-              // 只有非拖拽操作才处理
               handleClick()
             }
           }}
-          onClick={handleClick}
+          onClick={(e: React.MouseEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+            handleClick()
+          }}
         >
           {word}
         </a>
@@ -226,7 +233,6 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
     [setBottomTxt, setIsShowMzmTitle]
   )
 
-
   const gaiShuEn =
     'The inscription on the Cheng Zhe Stele consists of 31 lines of regular script,<br/>with 45 characters per line at maximum.<br/>The characters are approximately 2 cm in size, set within square grids, totaling 1,404 characters.<br/>No formal title of the stele is engraved. <br/>The entire text praises the historical achievements of the Cheng family.'
   const gaiShu =
@@ -239,48 +245,52 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
         id='modalTxt'
       >
         <div className='modalTxtContainner'>
-          {/* <FlipContainer
-            style={{ position: 'absolute', right: '50px', top: '50%', transform: 'translateY(-50%)' }}
+          {selectedTab !== 0 && <FlipContainer
+            style={{
+              width: '82%',
+              height: '100%'
+            }}
             isFlipped={isFlipped}
-            onClick={() => setIsFlipped(!isFlipped)}
             frontContent={
               <div
-                className='aaaa'
-                onClick={() => setIsFlipped(true)}
-                style={{ width: '300px', height: '300px', background: '#ccc' }}
-              ></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='aaaa'
-                onClick={() => setIsFlipped(false)}
-                style={{ width: '300px', height: '300px', background: '#6d1e1eff' }}
-              ></div>
-            }
-          /> */}
-
-          {!isOpenTrans && (
-            <div
-              className='intro'
-              id='introContent'
-              style={{
-                opacity: selectedTab !== 0 ? '1' : '0',
-                height: selectedTab !== 0 ? '78%' : '0%',
-                width: selectedTab !== 0 ? '100%' : '0%'
-              }}
-            >
-              <div className='intro_title songFont'>
-                {selectedTab !== 0 && modalTxtTab[selectedTab - 1].name}
-              </div>
-              <div className='intro_txt'>
-                {selectedTab !== 0 && myData.readDetail[selectedTab - 1].intro}
-              </div>
 
-              <div className='intro_btn' onClick={() => setIsOpenTrans(true)}>
-                原文 | 译文
+              <div className='translateModal'>
+                {(
+                  <div className='txtWithTrans' onClick={() => setIsFlipped(false)} onTouchMove={() => setShowTooltip(-1)}>
+                    {CommentText({
+                      str: myData.readDetail[selectedTab - 1].translate_v2,
+                      index: selectedTab - 1
+                    })}
+                  </div>
+                )}
               </div>
-            </div>
-          )}
+            }
+          />}
 
           {selectedTab === 0 && (
             <div className='content'>
@@ -328,18 +338,6 @@ function ModalTxt({ setIsShowTabBar, setIsShowMzmTitle, setBottomTxt }: Props, r
               </div>
             ))}
           </div>
-
-          {isOpenTrans && selectedTab !== 0 && (
-            <div className='translateModal'>
-              <div className='txtWithTrans' onTouchMove={() => setShowTooltip(-1)}>
-                {' '}
-                {CommentText({
-                  str: myData.readDetail[selectedTab - 1].translate_v2,
-                  index: selectedTab - 1
-                })}
-              </div>
-            </div>
-          )}
         </div>
       </div>
       {/* 书法赏析 */}

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

@@ -188,6 +188,9 @@
           width: 167px;
           height: 167px;
           overflow: hidden;
+          // background-image: url(../../../../assets/img/A2_shufa_mzg.png);
+          // background-position: center;
+          // background-size: 100% 100%;
           transition: opacity 0.3s ease-in-out;
           & > img {
             width: 100%;
@@ -196,6 +199,7 @@
           }
         }
         .zi1 {
+          position: relative;
           .lian1 {
             max-width: none;
             max-height: none;
@@ -212,6 +216,15 @@
             object-fit: fill;
             animation: lian_zou 3s steps(31) forwards;
           }
+          .normal {
+            animation: fade_in 3s linear;
+          }
+          .itemAC {
+            position: absolute;
+            top: 0;
+            left: 0;
+            animation: fadeOut 3s linear;
+          }
         }
         .zi2 {
           .bei1 {

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

@@ -9,10 +9,10 @@ import bei1 from '@/assets/img/frame_bei1.png'
 import bei2 from '@/assets/img/frame_bei2.png'
 
 
-type ActiveItem = 'lian1' | 'lian2' | 'bei1' | 'bei2' | ''
+type ActiveItem = 'lian1' | 'lian2' | 'bei1' | 'bei2' | 'normal'
 function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => void }) {
   const [showName, setName] = useState('shufa1')
-  const [activeItem, setActiveItem] = useState<ActiveItem>('')
+  const [activeItem, setActiveItem] = useState<ActiveItem>('normal')
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const { myData, myLangue } = useSelector((state: RootState) => state.A0Layout)
   const Line = ({ index }: { index: number }) => {
@@ -39,9 +39,9 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
       bei2: 4000,
     };
 
-    if (activeItem && delayMap.hasOwnProperty(activeItem)) {
+    if (activeItem && activeItem !== 'normal' && delayMap.hasOwnProperty(activeItem)) {
       timerRef.current = setTimeout(() => {
-        setActiveItem('');
+        setActiveItem('normal');
         // 定时器执行后清空 ref
         timerRef.current = null;
       }, delayMap[activeItem]);
@@ -56,7 +56,7 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
 
   const backClick = () => {
     if (showName === 'shufa2') {
-      setActiveItem('')
+      setActiveItem('normal')
       setName('shufa1')
     }
     if (showName === 'shufa1') setIsShowShufa(false)
@@ -73,10 +73,10 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
         }}
       >
         <div className='sLeft'>
-          <div className='zi'>
+          <div className='zi' onClick={() => setName('shufa2')}>
             <img src={require('@/assets/img/A2_shufa_lian.png')} alt='' />
           </div>
-          <div className='zi'>
+          <div className='zi' onClick={() => setName('shufa2')}>
             <img src={require('@/assets/img/A2_shufa_bei.png')} alt='' />
           </div>
           <div className='leftTxt1'>{myData?.shufa?.lIntro}</div>

src/pages/A4quanwen/index.module.scss

@@ -7,7 +7,6 @@
   justify-content: flex-end;
 
   :global {
-
     .highlight {
       width: 40px;
       height: 40px;
@@ -17,7 +16,7 @@
       left: 2%;
       cursor: pointer;
 
-      &>img {
+      & > img {
         height: 100%;
         object-fit: contain;
       }
@@ -27,16 +26,29 @@
       position: relative;
       z-index: 1;
       width: 50%;
-      height: 100%;
-      padding: 20px 30px;
+      height: 88%;
+      padding: 0px 30px;
       display: flex;
       align-items: center;
       flex-direction: column;
       color: rgba(69, 68, 55, 1);
       overflow: auto;
 
+      mask-image: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 1) 0%,
+        rgba(0, 0, 0, 1) 95%,
+        /* 保留顶部70%不透明 */ rgba(0, 0, 0, 0) 100% /* 底部30%完全透明 */
+      );
+      -webkit-mask-image: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 1) 0%,
+        rgba(0, 0, 0, 1) 95%,
+        rgba(0, 0, 0, 0) 100%
+      );
+
       &::-webkit-scrollbar {
-        width: 2px;
+        width: 0;
         height: 0;
       }
 
@@ -66,7 +78,7 @@
             width: 100%;
             height: 24px;
 
-            &>img {
+            & > img {
               width: 100%;
               object-fit: contain;
             }
@@ -97,8 +109,7 @@
 }
 
 // -------------英文版
-.A4quanwenEn{
+.A4quanwenEn {
   :global {
-  
   }
-}
+}

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

@@ -260,7 +260,7 @@
       top: 0;
       left: 0;
       width: 100%;
-      padding: 0 40px;
+      padding: 0 20px;
       height: 100%;
       display: flex;
       align-items: center;
@@ -272,6 +272,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        gap: 20px;
         .closeItemHot {
           position: absolute;
           top: 33px;
@@ -286,6 +287,15 @@
           font-size: 26px;
           color: rgba(255, 233, 182, 1);
           text-align: center;
+          line-height: 24px;
+          & > img {
+            width: 20px;
+            height: 20px;
+            object-fit: contain;
+            margin: 0 10px;
+            display: inline-block;
+            vertical-align: top;
+          }
         }
         .itemHot_line {
           width: 100%;
@@ -299,12 +309,30 @@
         }
         .itemHot_content {
           width: 100%;
-          height: 50%;
+          height: 69%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
           font-size: 15px;
           line-height: 24px;
           color: rgba(255, 255, 255, 1);
           white-space: normal;
-          text-align: center;
+          gap: 20px;
+          .itemHotL {
+            width: 45%;
+            height: 100%;
+            & > img {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+          }
+          .itemHotR {
+            width: 55%;
+            height: 100%;
+            display: inline-block;
+            vertical-align: top;
+          }
         }
       }
     }

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

@@ -56,9 +56,11 @@ function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTyp
           <div className='itemHot '>
             <div className="containner">
               <div className="closeItemHot" onClick={() => setIsShowHot(!isShowHot)}><img src={require('@/assets/img/closeWithTxt.png')} alt="" /></div>
-              <div className="itemHot_title songFont">{sItem.items[0].title}</div>
-              <div className="itemHot_line"><img src={require('@/assets/img/A6_sinicize_bwwq_line.png')} alt="" /></div>
-              <div className="itemHot_content" dangerouslySetInnerHTML={{ __html: sItem.items[0].txt }}></div>
+              <div className="itemHot_title songFont"><img src={require('@/assets/img/A6_sinicize_hotdot.png')} alt="" />{sItem.items[0].title}<img src={require('@/assets/img/A6_sinicize_hotdot.png')} alt="" /></div>
+              <div className="itemHot_content" >
+                <div className="itemHotL"><img src={require('@/assets/img/A6_sinicize_timeLine.png')} alt="" /></div>
+                <div className="itemHotR" dangerouslySetInnerHTML={{ __html: sItem.items[0].txt }}></div>
+              </div>
             </div>
 
           </div>

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

@@ -101,7 +101,7 @@
           .pic {
             width: 100%;
             height: 100%;
-            transition: all 0.3s ease-in-out;
+            transition: all 0.6s ease-in-out;
             background-repeat: no-repeat;
             background-position: center;
             background-size: contain;
@@ -115,6 +115,7 @@
             transform: translate(-79%, -13%);
             width: 450px;
             .main {
+              text-align: right;
               .Cardtext {
                 text-align: justify;
                 max-height: 110px;
@@ -232,6 +233,7 @@
             width: 450px;
             .main {
               width: 164px;
+              text-align: left;
               white-space: normal;
               .Cardtext {
                 max-height: 140px;

src/pages/A7wjwj/conponents/Content/index.module.scss

@@ -38,7 +38,7 @@
         left: 4%;
         cursor: pointer;
 
-        &>img {
+        & > img {
           height: 100%;
           object-fit: contain;
         }
@@ -61,10 +61,10 @@
           width: 60px;
           font-size: 26px;
           font-weight: 600;
-          color: rgba(255, 233, 182, 1);
+          color: rgba(255, 255, 255, 1);
         }
 
-        &>img {
+        & > img {
           height: 100%;
           object-fit: contain;
         }
@@ -98,7 +98,6 @@
             letter-spacing: 2px;
             line-height: 28px;
             font-weight: 700;
-            color: rgba(255, 233, 182, 1);
           }
         }
 
@@ -108,10 +107,9 @@
           font-size: 16px;
           line-height: 28px;
           font-family: 'SimSun' !important;
-          text-shadow: 1px 1px 1px #f3b46d;
-
+          text-shadow: 1px 1px 1px rgba(255, 233, 182, 0.5);
         }
       }
     }
   }
-}
+}