更新

src/App.tsx

@@ -1025,13 +1025,20 @@ export default function App() {
       {lookBigImg.show ? (
         <Image
           preview={{
+            closeIcon: <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />,
+            imageRender: (originalNode) => (
+              <div className='previewImage'>
+                <div className='Ori'>{originalNode}</div>
+                <div className="ImgFromTxt">{lookBigImg.fromTxt}</div>
+              </div>
+            ),
             visible: lookBigImg.show,
             src: lookBigImg.url,
             onVisibleChange: value => {
               // 清除仓库信息
               store.dispatch({
                 type: 'layout/lookBigImg',
-                payload: { url: '', show: false }
+                payload: { url: '', show: false, fromTxt: '' }
               })
             }
           }}

src/assets/styles/base.css

@@ -61,6 +61,34 @@ body #A7Back > img {
   height: 100%;
   object-fit: contain;
 }
+.previewImage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.previewImage .Ori {
+  width: 80%;
+  height: 74%;
+  object-fit: contain;
+}
+.previewImage .Ori > .ant-image-preview-img {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+.previewImage .ImgFromTxt {
+  width: 80%;
+  height: 3%;
+  text-align: center;
+  font-size: 14px;
+  color: #fff;
+  margin-top: 10px;
+}
 #root {
   overflow: hidden;
   margin: auto;
@@ -193,9 +221,17 @@ textarea {
     transform: rotate(90deg) !important;
   }
   .ant-image-preview-footer {
+    display: none !important;
     transform: scale(0.7) rotate(90deg) translate(-178%, -50%);
     transform-origin: left bottom;
   }
+  .ant-image-preview-close {
+    transform: scale(0.7) rotate(90deg) translate(785px, -203%);
+    transform-origin: left bottom;
+  }
+  .previewImage .Ori {
+    height: 40%;
+  }
   #root .ant-tooltip {
     transform: rotate(0) !important;
     inset: 4.331px auto auto 417.25px !important;

src/assets/styles/base.less

@@ -79,6 +79,39 @@ body #A7Back {
   }
 }
 
+
+.previewImage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .Ori {
+    width: 80%;
+    height: 74%;
+    object-fit: contain;
+    & > .ant-image-preview-img {
+      width: 100%;
+      height: 100%;
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+
+    }
+  }
+  .ImgFromTxt {
+    width: 80%;
+    height: 3%;
+    text-align: center;
+    font-size: 14px;
+    color: #fff;
+    margin-top: 10px;
+  }
+}
+
+
+
 #root {
   overflow: hidden;
   margin: auto;
@@ -253,10 +286,21 @@ textarea {
   }
 
   .ant-image-preview-footer {
+    display: none !important;
     transform: scale(0.7) rotate(90deg) translate(-178%, -50%);
     transform-origin: left bottom;
   }
 
+  .ant-image-preview-close {
+    transform: scale(0.7) rotate(90deg) translate(785px, -203%);
+    transform-origin: left bottom;
+  }
+
+  .previewImage {
+    .Ori {
+      height: 40%;
+    }
+  }
 
 
   #root .ant-tooltip {

src/pages/A6ybwx/A6_1_zxys/index.tsx

@@ -79,7 +79,7 @@ function Zaoxiang({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div className='previewItem' key={index} onClick={() =>
                   store.dispatch({
                     type: 'layout/lookBigImg',
-                    payload: { url: item.src, show: true }
+                    payload: { url: item.src, show: true, fromTxt: item.fromTxt }
                   })
                 }>
                   <div className='pic'>

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

@@ -86,6 +86,10 @@
         line-height: 22px;
         font-weight: 400;
         color: rgba(93, 96, 96, 1);
+        & > span {
+          font-size: 20px;
+          color: rgba(169, 135, 99, 1);
+        }
       }
       .lContent {
         width: 100%;
@@ -379,11 +383,14 @@
         padding-left: 20px;
         width: 250px;
         height: 50px;
-        font-size: 16px;
-        line-height: 24px;
-        letter-spacing: 2px;
+        font-size: 15px;
+        line-height: 22px;
         font-weight: 400;
-        color: #504e40;
+        color: rgba(93, 96, 96, 1);
+        & > span {
+          font-size: 20px;
+          color: rgba(169, 135, 99, 1);
+        }
       }
 
       .lInfo1,

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

@@ -13,7 +13,7 @@ function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
       {/* {selectedTime === index && ( */}
       <>
         <div className='left'>
-          <div className='lTop'>{sItem.desc}</div>
+          <div className='lTop' dangerouslySetInnerHTML={{ __html: sItem.desc }}></div>
         </div>
         <div className='right'>
           <div className='RItems'>
@@ -51,7 +51,7 @@ function Bq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType)
           </div>
 
           <div className='itme2Txt'>
-            北齐造像更多受到印度笈多风格影响，造像风格趋于写实与人性化、理想并重。
+            <span>北齐</span>造像更多受到印度笈多风格影响，造像风格趋于写实与人性化、理想化并重。
           </div>
 
           {/* 佛像 */}

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

@@ -80,12 +80,34 @@
         padding-right: 0;
         padding-bottom: 0;
         width: 100%;
-        height: 160px;
+        height: 110px;
         font-size: 15px;
         line-height: 22px;
         font-weight: 400;
         color: rgba(93, 96, 96, 1);
       }
+      .itemHotBtn {
+        width: 100%;
+        height: 90px;
+        color: rgba(124, 75, 54, 1);
+        font-size: 22px;
+        cursor: pointer;
+        position: relative;
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        & > img {
+          position: absolute;
+          z-index: -1;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 240px;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
       .lContent {
         width: 100%;
         height: calc(100% - 100px);
@@ -204,6 +226,9 @@
               width: 230px;
               text-align: right;
               white-space: normal;
+              .Cardtext {
+                text-align: right;
+              }
             }
             .dotRight {
               width: 160px;
@@ -225,42 +250,56 @@
             }
           }
         }
-        .itemHot {
-          width: 800px;
-          padding: 0 40px;
-          height: 400px;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          .itemHot_title {
-            width: 100%;
-            height: 30px;
-            font-size: 26px;
-            color: rgba(124, 75, 54, 1);
-            text-align: center;
-          }
-          .itemHot_line {
-            width: 100%;
-            height: 30px;
-            margin: 14px 0;
-            & > img {
-              width: 100%;
-              height: 20px;
-              object-fit: contain;
-            }
-          }
-          .itemHot_content {
-            width: 100%;
-            height: 50%;
-            font-size: 16px;
-            line-height: 24px;
-            color: rgba(93, 96, 96, 1);
-            white-space: normal;
-            text-align: center;
-          }
+      }
+    }
+    .itemHot {
+      background-color: rgba(33, 30, 26, 0.8);
+      backdrop-filter: blur(5px);
+      position: fixed;
+      z-index: 3;
+      top: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 40px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .closeItemHot {
+        position: absolute;
+        top: 33px;
+        right: 44px;
+        width: 80px;
+        height: 40px;
+        cursor: pointer;
+      }
+      .itemHot_title {
+        width: 100%;
+        height: 30px;
+        font-size: 26px;
+        color: rgba(255, 233, 182, 1);
+        text-align: center;
+      }
+      .itemHot_line {
+        width: 100%;
+        height: 30px;
+        margin: 14px 0;
+        & > img {
+          width: 100%;
+          height: 20px;
+          object-fit: contain;
         }
       }
+      .itemHot_content {
+        width: 100%;
+        height: 50%;
+        font-size: 15px;
+        line-height: 24px;
+        color: rgba(255, 255, 255, 1);
+        white-space: normal;
+        text-align: center;
+      }
     }
   }
 }

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

@@ -1,16 +1,22 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styles from './index.module.scss'
 import InfoCard from '../InfoCard'
 import InfoPoint from '../InfoPoint'
 import { yearType } from '../Bwzzq';
 
 function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearType) {
+  const [isShowHot, setIsShowHot] = useState(false)
   return (
     <div id='sinicizeDetail' className={`${styles.Bwwq} ${selectedTime === index ? 'detailShow' : 'detailHide'}`}>
       {/* {selectedTime === index && ( */}
       <>
         <div className='left'>
           <div className='lTop'>{sItem.desc}</div>
+          <div className="itemHotBtn" onClick={() => setIsShowHot(!isShowHot)}>
+
+            <img src={require('@/assets/img/A6_sangzang_btn2.png')} alt="" />
+            知识拓展
+          </div>
         </div>
         <div className='right'>
           <div className='RItems'>
@@ -43,13 +49,17 @@ function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTyp
                 </div>
               ))}
 
-            <div className='itemHot '>
-              <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>
+
           </div>
         </div>
+        {isShowHot && (
+          <div className='itemHot '>
+            <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>
+        )}
       </>
       {/* )} */}
     </div>

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

@@ -84,7 +84,7 @@
         padding-right: 0;
         padding-bottom: 0;
         width: 100%;
-        height: 160px;
+        height: 150px;
         font-size: 15px;
         line-height: 22px;
         font-weight: 400;
@@ -164,7 +164,6 @@
               height: fit-content;
               text-align: justify;
               margin-top: 5px;
-              max-height: 90px;
               overflow: auto;
               &::-webkit-scrollbar {
                 width: 0px;

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

@@ -232,6 +232,7 @@
               width: 164px;
               white-space: normal;
               .Cardtext {
+                max-height: 140px;
                 margin-top: 12px;
               }
             }

src/pages/A6ybwx/A6_2_zxzgh/index.tsx

@@ -107,20 +107,25 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
     }
   }
 
-  // 处理触摸移动事件
-  // const handleOriTouchMove = (e: any) => {
-  //   e.preventDefault()
-  //   const deltaX = e.touches[0].clientY - ori_touchStartX.current
-  //   if (originRef.current) {
-  //     originRef.current.scrollLeft -= deltaX
-  //   }
-  //   ori_touchStartX.current = e.touches[0].clientY
-  // }
-
-  // // 处理触摸开始事件
-  // const handleTouchStart = (e: any) => {
-  //   ori_touchStartX.current = e.touches[0].clientY
-  // }
+  useEffect(() => {
+    const jieyu = document.getElementById('jieyu')
+    jieyu?.addEventListener('wheel', (e: any) => {
+      if (e.deltaY > 0) {
+        // 向下滚
+        if (jieyu.scrollHeight - (jieyu.scrollTop || 0) === jieyu.clientHeight) {
+          // console.log('滚到底了')
+        } else {
+          e.preventDefault()
+          e.stopPropagation()
+          jieyu.scrollTop += e.deltaY / 2
+        }
+      } else {
+        e.preventDefault()
+        e.stopPropagation()
+        jieyu.scrollTop += e.deltaY / 2
+      }
+    })
+  }, [])
 
   return (
     <>
@@ -316,7 +321,7 @@ function Sinicize({ setGotopage }: { setGotopage: (page: number) => void }) {
                 <div className='year year-zongjie'>
                   <div className='yearContainner'>
                     <div className='txt songFont'>{myData.sinicizeDataStatic.zongjie.title}</div>
-                    <div className='front'>{myData.sinicizeDataStatic.zongjie.txt}</div>
+                    <div className='front' id='jieyu'>{myData.sinicizeDataStatic.zongjie.txt}</div>
                   </div>
                 </div>
               </div>

src/pages/A6ybwx/Sangzang/components/Policy/index.tsx

@@ -59,8 +59,6 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
     const part1TXT = document.querySelectorAll('#part1TXT')
     part1TXT.forEach((v: any) => {
       v.addEventListener('wheel', (e: any) => {
-        // const aa =document.querySelector('.xxx') as HTMLDivElement
-
         if (e.deltaY > 0) {
           // 向下滚
           if (v.scrollHeight - (v.scrollTop || 0) === v.clientHeight) {
@@ -80,15 +78,9 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
             v.scrollTop += e.deltaY / 2
           }
         }
-
-        // console.log(v.scrollHeight, v.scrollTop, v.clientHeight)
-
-        // e.preventDefault()
-        // e.stopPropagation()
-        // console.log('part1TXT', (v.scrollTop += e.deltaY))
       })
     })
-  }, [currentItem])
+  }, [])
 
   return (
     <div className={styles.Policy}>
@@ -158,6 +150,14 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
               </div>
             </div>
           ))}
+          {/* <div className='tabItem' >
+            <div className={`history1`} >
+              <div className='txt songFont'>结语</div>
+              <div className='bottom'>
+                123
+              </div>
+            </div>
+          </div> */}
         </div>
       </div>
       <div className='timeLine'>
@@ -168,9 +168,8 @@ function Policy({ setShowTab }: { setShowTab: (tab: number) => void }) {
               {item.title}
             </div>
             <img
-              src={require(`@/assets/img/A7base3_icon${
-                currentItem - 1 === index ? 'A' : '_n'
-              }.png`)}
+              src={require(`@/assets/img/A7base3_icon${currentItem - 1 === index ? 'A' : '_n'
+                }.png`)}
               alt=''
             />
           </div>

src/pages/A6ybwx/Sangzang/components/Sangzangys/index.module.scss

@@ -107,8 +107,8 @@
 
             .txt {
               line-height: 16px;
-              font-size: 14px;
-              height: 40px;
+              font-size: 11px;
+              height: 19px;
               color: #9d9a90;
               position: relative;
               top: -8px;
@@ -233,10 +233,9 @@
           .txt {
             position: relative;
             top: -8px;
-            line-height: 16px;
-            font-size: 13px;
+            line-height: 11px;
+            font-size: 11px;
             color: #9d9a90;
-            margin-bottom: 8px;
           }
 
           .title {
@@ -917,6 +916,18 @@
           max-height: 80%;
           color: rgba(255, 255, 255, 1);
           overflow: auto;
+          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;

src/pages/A6ybwx/Sangzang/components/Sangzangys/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import styles from './index.module.scss'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
@@ -42,6 +42,25 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
     setIsShowMzwHot(true)
   }
 
+  const lHiddingRightFrom = useMemo(() => {
+    if (currentTab === 'tab0') return myData.sangzangLeftInfo2[1].from
+    if (currentTab === 'tab1') return myData.sangzangLeftInfo[0].from
+    if (currentTab === 'tab2') return myData.sangzangLeftInfo[1].from
+    return ''
+  }, [currentTab, myData.sangzangLeftInfo2, myData.sangzangLeftInfo])
+
+  const lHiddingRightTitle = useMemo(() => {
+    if (currentTab === 'tab0') return myData.sangzangLeftInfo2[1].name
+    if (currentTab === 'tab1') return myData.sangzangLeftInfo[0].name
+    if (currentTab === 'tab2') return myData.sangzangLeftInfo[1].name
+  }, [currentTab, myData.sangzangLeftInfo2, myData.sangzangLeftInfo])
+
+  const lHiddingRightTxt = useMemo(() => {
+    if (currentTab === 'tab0') return myData.sangzangLeftInfo2[1].txt
+    if (currentTab === 'tab1') return myData.sangzangLeftInfo[0].time
+    if (currentTab === 'tab2') return myData.sangzangLeftInfo[1].time
+  }, [currentTab, myData.sangzangLeftInfo2, myData.sangzangLeftInfo])
+
   return (
     <div className={styles.sang}>
       <Zback
@@ -96,10 +115,10 @@ function Sangzangys({ setShowTab }: { setShowTab: (tab: number) => void }) {
             </div>
             <div
               className='txt'
-              dangerouslySetInnerHTML={{ __html: myData.sangzangLeftInfo2[1].from }}
+              dangerouslySetInnerHTML={{ __html: lHiddingRightFrom }}
             ></div>
-            <div className='title songFont'>{myData.sangzangLeftInfo2[1].name}</div>
-            <div className='time'>{myData.sangzangLeftInfo2[1].txt}</div>
+            <div className='title songFont'>{lHiddingRightTitle}</div>
+            <div className='time'>{lHiddingRightTxt}</div>
           </div>
           <div
             className='open'

src/pages/A6ybwx/Sangzang/index.tsx

@@ -29,17 +29,6 @@ function SangzangHome({ setGotoTab }: { setGotoTab: (tab: number) => void }) {
               <div className='lastTxt'>《中国石碑：一种象征形式在佛教传入之前和之后的运用》</div>
             </div>
 
-            <div className='hitem'>
-              <div className='htxt'>程哲碑应该立于家族墓地。</div>
-              <div className='hfrom'>——胡春涛《山西五至八世纪造像碑的图像志研究》</div>
-              {/* <div className='lastTxt'></div> */}
-            </div>
-
-            <div className='hitem'>
-              <div className='htxt'>程哲碑应是包含了佛教造像的墓碑。</div>
-              <div className='hfrom'>——周桂香、郭志成《试论程哲碑及其历史艺术价值》</div>
-              {/* <div className='lastTxt'></div> */}
-            </div>
           </div>
         </div>
       </div>

src/store/reducer/layout.ts

@@ -8,7 +8,8 @@ const initState = {
   // 所有图片点击预览查看大图
   lookBigImg: {
     url: '',
-    show: false
+    show: false,
+    fromTxt: ''
   },
   // 查看视频、音频、模型
   lookDom: {
@@ -38,7 +39,7 @@ const initState = {
 type LayoutActionType =
   | { type: 'layout/isHH'; payload: boolean }
   | { type: 'layout/style'; payload: any }
-  | { type: 'layout/lookBigImg'; payload: { url: string; show: boolean } }
+  | { type: 'layout/lookBigImg'; payload: { url: string; show: boolean; fromTxt: string } }
   | { type: 'layout/lookDom'; payload: LookDomType }
   | { type: 'layout/message'; payload: MessageType }
   | { type: 'layout/myData'; payload: MyDataType }

src/types/declaration.d.ts

@@ -78,6 +78,7 @@ type MyDataType = {
     imgItems: {
       src: string
       title: string
+      fromTxt: string
     }[]
   }[]
   // 家族谱系