gx

public/myData/myData.js

@@ -889,7 +889,7 @@ const myDataTemp = {
           src: './myData/img/28.png',
           srcLine: './myData/img/29.png',
           txt: '',
-          picfrom: '图片来源：《云冈石窟全集》卷17 第19窟右壁胁侍菩萨',
+          picfrom: '图片来源：《云冈石窟全集》卷16 P156',
           direction: 'left',
           name: '菩萨',
           classNameCard: 'zzq3',

src/App.tsx

@@ -1052,10 +1052,10 @@ export default function App() {
               <img src={require('@/assets/img/closeWithTxt.png')} draggable='false' alt='' />
             ),
             imageRender: originalNode => (
-              <div className='previewImage'>
-                <TouchContainer className='Ori'>{originalNode}</TouchContainer>
+              < div className='previewImage'  >
+                <TouchContainer className='Ori' zoom={lookBigImg.zoom}>{originalNode}</TouchContainer>
                 <div className='ImgFromTxt'>{lookBigImg.fromTxt}</div>
-              </div>
+              </div >
             ),
             visible: lookBigImg.show,
             src: lookBigImg.url,
@@ -1063,7 +1063,7 @@ export default function App() {
               // 清除仓库信息
               store.dispatch({
                 type: 'layout/lookBigImg',
-                payload: { url: '', show: false, fromTxt: '' }
+                payload: { url: '', show: false, fromTxt: '', zoom: 1 }
               })
             }
           }}

src/assets/styles/base.css

@@ -61,7 +61,10 @@ body #A7Back > img {
   height: 100%;
   object-fit: contain;
 }
-.previewImage {
+.ant-image-preview-mask {
+  backdrop-filter: blur(10px);
+}
+.ant-image-preview-img-wrapper .previewImage {
   width: 100%;
   height: 100%;
   display: flex;
@@ -69,19 +72,19 @@ body #A7Back > img {
   align-items: center;
   justify-content: center;
 }
-.previewImage .Ori {
+.ant-image-preview-img-wrapper .previewImage .Ori {
   width: 80%;
   height: 74%;
   object-fit: contain;
 }
-.previewImage .Ori > .ant-image-preview-img {
+.ant-image-preview-img-wrapper .previewImage .Ori > .ant-image-preview-img {
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
 }
-.previewImage .ImgFromTxt {
+.ant-image-preview-img-wrapper .previewImage .ImgFromTxt {
   width: 80%;
   height: 3%;
   text-align: center;
@@ -227,11 +230,20 @@ textarea {
     transform-origin: left bottom;
   }
   .previewImage {
-    transform: rotate(90deg);
+    position: relative;
   }
   .previewImage .Ori {
     height: 40%;
   }
+  .previewImage .Ori .ant-image-preview-img {
+    transform: rotate(90deg) !important;
+  }
+  .previewImage .ImgFromTxt {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-107%, -50%) rotate(90deg) !important;
+  }
   #root .ant-tooltip {
     transform: rotate(0) !important;
     width: 410px !important;
@@ -516,6 +528,14 @@ textarea {
     opacity: 1;
   }
 }
+@keyframes fade_in2 {
+  0% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 @keyframes fadeOut {
   0% {
     opacity: 1;

src/assets/styles/base.less

@@ -79,39 +79,47 @@ body #A7Back {
   }
 }
 
+.ant-image-preview-mask {
+  backdrop-filter: blur(10px);
+}
+.ant-image-preview-img-wrapper {
 
-.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%;
+  .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;
     }
-  }
-  .ImgFromTxt {
-    width: 80%;
-    height: 3%;
-    text-align: center;
-    font-size: 14px;
-    color: #fff;
-    margin-top: 10px;
   }
 }
 
 
 
+
+
 #root {
   overflow: hidden;
   margin: auto;
@@ -293,9 +301,18 @@ textarea {
   }
 
   .previewImage {
-    transform: rotate(90deg);
+    position: relative;
     .Ori {
       height: 40%;
+      .ant-image-preview-img {
+        transform: rotate(90deg) !important;
+      }
+    }
+    .ImgFromTxt {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-107%, -50%) rotate(90deg) !important;
     }
   }
 
@@ -680,6 +697,15 @@ textarea {
   }
 }
 
+@keyframes fade_in2 {
+  0% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes fadeOut {
   0% {
     opacity: 1;

src/components/TouchContainer/index.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import styles from './index.module.scss'
 
-type TCProps = { className?: string; children?: React.ReactNode }
+type TCProps = { className?: string; children?: React.ReactNode; zoom?: number }
 function TouchContainer(props: TCProps) {
   // 缩放比例 和 偏移量
-  const [zoom, setZoom] = useState(1)
+  const [zoom, setZoom] = useState(props.zoom || 1)
   const [offsetX, setOffsetX] = useState(0)
   const [offsetY, setOffsetY] = useState(0)
   const touchDataRef = useRef({
@@ -13,11 +13,12 @@ function TouchContainer(props: TCProps) {
     startOffsetX: 0, // 元素起始偏移 X
     startOffsetY: 0, // 元素起始偏移 Y
     initialDistance: 0, // 两指缩放的初始距离
-    initialZoom: 1, // 初始缩放比例
+    initialZoom: 2, // 初始缩放比例
     midX: 0, // 两指缩放的中点 X 坐标
     midY: 0 // 两指缩放的中点 Y 坐标
   })
 
+
   // useEffect(() => {
   //   const touchContainer = document.getElementById('touch-container')
   //   if (!touchContainer) return
@@ -55,8 +56,8 @@ function TouchContainer(props: TCProps) {
   const handleTouchMove = (e: TouchEvent | React.TouchEvent) => {
     console.log('touch move')
     const touch = e.touches[0]
-    const dx = touch.clientY - touchDataRef.current.startY
-    const dy = -touch.clientX + touchDataRef.current.startX
+    const dx = touch.clientX - touchDataRef.current.startX
+    const dy = touch.clientY - touchDataRef.current.startY
     if (e.touches.length === 1) {
       setOffsetX(prev => {
         const newX = touchDataRef.current.startOffsetX - dx * 0.5
@@ -72,18 +73,18 @@ function TouchContainer(props: TCProps) {
       // 计算当前两指之间的距离
       const distance = Math.hypot(touch2.clientX - touch.clientX, touch2.clientY - touch.clientY)
       // 根据距离调整缩放比例
-      const newZoom = Math.max(0.8, Math.min(3, distance / touchDataRef.current.initialDistance * touchDataRef.current.initialZoom))
+      const newZoom = Math.max(0.8, Math.min(4, distance / touchDataRef.current.initialDistance * touchDataRef.current.initialZoom))
       setZoom(newZoom)
-      setOffsetX(prev => {
-        const deltaMidX = (touch2.clientX + touch.clientX) / 2 - touchDataRef.current.midX
-        const newX = touchDataRef.current.startOffsetX + deltaMidX - dx * 0.5
-        return newX
-      })
-      setOffsetY(prev => {
-        const deltaMidY = (touch2.clientY + touch.clientY) / 2 - touchDataRef.current.midY
-        const newY = touchDataRef.current.startOffsetY + deltaMidY - dy * 0.5
-        return newY
-      })
+      // setOffsetX(prev => {
+      //   const deltaMidX = (touch2.clientX + touch.clientX) / 2 - touchDataRef.current.midX
+      //   const newX = touchDataRef.current.startOffsetX + deltaMidX - dx * 0.5
+      //   return -newX
+      // })
+      // setOffsetY(prev => {
+      //   const deltaMidY = (touch2.clientY + touch.clientY) / 2 - touchDataRef.current.midY
+      //   const newY = touchDataRef.current.startOffsetY + deltaMidY - dy * 0.5
+      //   return -newY
+      // })
     }
   }
 

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

@@ -39,7 +39,7 @@
           justify-content: center;
           align-items: center;
 
-          &>img {
+          & > img {
             width: 100%;
             height: 100%;
             object-fit: contain;
@@ -191,7 +191,7 @@
               height: 24px;
               cursor: pointer;
 
-              &>img {
+              & > img {
                 width: 100%;
                 height: 100%;
                 object-fit: contain;
@@ -215,7 +215,7 @@
           // background-size: 100% 100%;
           transition: opacity 0.3s ease-in-out;
 
-          &>img {
+          & > img {
             width: 100%;
             height: 100%;
             object-fit: contain;
@@ -244,7 +244,8 @@
           }
 
           .normal {
-            animation: fade_in 3s linear;
+            width: 167px;
+            height: 167px;
           }
 
           .itemAC {
@@ -273,6 +274,11 @@
             object-fit: fill;
             animation: bei_xia 3s steps(35) forwards;
           }
+
+          .normal {
+            width: 167px;
+            height: 167px;
+          }
         }
       }
 
@@ -387,4 +393,4 @@
       }
     }
   }
-}
+}

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

@@ -3,6 +3,8 @@ import styles from './index.module.scss'
 import Zback from '@/components/Zback'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+import shufaLian from '@/assets/img/A2_shufa_lian.png'
+import shufaBei from '@/assets/img/A2_shufa_bei.png'
 import lian1 from '@/assets/img/frame_lian1.png'
 import lian2 from '@/assets/img/frame_lian2.png'
 import bei1 from '@/assets/img/frame_bei1.png'
@@ -28,6 +30,13 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
   }
 
   useEffect(() => {
+    [shufaLian, shufaBei, lian1, lian2, bei1, bei2].forEach((item) => {
+      const img = new Image();
+      img.src = item;
+    })
+  }, [])
+
+  useEffect(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current)
     }
@@ -73,10 +82,10 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
       >
         <div className='sLeft'>
           <div className='zi' onClick={() => setName('shufa2')}>
-            <img src={require('@/assets/img/A2_shufa_lian.png')} alt='' />
+            <img src={shufaLian} alt='' />
           </div>
           <div className='zi' onClick={() => setName('shufa2')}>
-            <img src={require('@/assets/img/A2_shufa_bei.png')} alt='' />
+            <img src={shufaBei} alt='' />
           </div>
           <div className='leftTxt1'>{myData?.shufa?.lIntro}</div>
         </div>
@@ -135,8 +144,8 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
                 activeItem === 'lian1'
                   ? lian1
                   : activeItem === 'lian2'
-                  ? lian2
-                  : require('@/assets/img/A2_shufa_lian.png')
+                    ? lian2
+                    : shufaLian
               }
               alt=''
             />
@@ -151,8 +160,8 @@ function Shufa({ setIsShowShufa }: { setIsShowShufa: (isShowShufa: boolean) => v
                 activeItem === 'bei1'
                   ? bei1
                   : activeItem === 'bei2'
-                  ? bei2
-                  : require('@/assets/img/A2_shufa_bei.png')
+                    ? bei2
+                    : shufaBei
               }
               alt=''
             />

src/pages/A5wenwu/index.tsx

@@ -146,7 +146,7 @@ function A5wenwu() {
         <div className='TContainner' onClick={() => {
           store.dispatch({
             type: 'layout/lookBigImg',
-            payload: { url: require('@/assets/sgImg/img_tapian.png'), show: true, fromTxt: '' }
+            payload: { url: require('@/assets/sgImg/img_tapian.png'), show: true, fromTxt: '', zoom: 2 }
           })
         }}>
           <img src={require('@/assets/sgImg/img_tapian.png')} alt='' />
@@ -168,7 +168,7 @@ function A5wenwu() {
         <div className='TContainner' onClick={() => {
           store.dispatch({
             type: 'layout/lookBigImg',
-            payload: { url: require('@/assets/sgImg/img_xiantu.png'), show: true, fromTxt: '' }
+            payload: { url: require('@/assets/sgImg/img_xiantu.png'), show: true, fromTxt: '', zoom: 2 }
           })
         }}>
           <img src={require('@/assets/sgImg/img_xiantu.png')} alt='' />

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, fromTxt: item.fromTxt }
+                    payload: { url: item.src, show: true, fromTxt: item.fromTxt, zoom: 1 }
                   })
                 }>
                   <div className='pic'>

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

@@ -108,6 +108,16 @@
             background-position: top right;
             background-size: contain;
           }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
           & > img {
             height: 100%;
             object-fit: contain;
@@ -204,6 +214,16 @@
             background-position: right;
             background-size: contain;
           }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
           .bq1 {
             transform: translate(-121%, -8%);
             .main {
@@ -229,6 +249,9 @@
               left: -76%;
             }
           }
+          .Fbq2 {
+            transform: translateX(117px);
+          }
           .bq2 {
             transform: translate(-77%, 40%);
             .main {
@@ -255,6 +278,9 @@
               left: -91%;
             }
           }
+          .Fbq3 {
+            transform: translateX(79px);
+          }
           .bq3 {
             transform: translate(-75%, -82%);
             .main {
@@ -297,7 +323,9 @@
               left: -77%;
             }
           }
-
+          .Fbq4 {
+            transform: translateX(-43px);
+          }
           .bq4 {
             transform: translate(-15%, 19%);
             .main {
@@ -327,7 +355,9 @@
               width: 334px;
             }
           }
-
+          .Fbq5 {
+            transform: translateX(-58px);
+          }
           .bq5 {
             transform: translate(-18%, -49%);
             .main {
@@ -361,6 +391,14 @@
         }
         .item:nth-child(2) {
           width: 560px;
+          .pic {
+            height: calc(100% - 10px);
+          }
+        }
+        .item:nth-child(3) {
+          .pic {
+            height: calc(100% - 10px);
+          }
         }
         .item:nth-child(4) {
           width: 420px;
@@ -369,6 +407,9 @@
         .item:nth-child(5) {
           width: 520px;
           padding-right: 170px;
+          .pic {
+            height: calc(100% - 10px);
+          }
         }
       }
 

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

@@ -36,6 +36,7 @@ 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} />
                 ) : (

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

@@ -213,12 +213,22 @@
           position: relative;
           .pic {
             width: 100%;
-            height: 100%;
+            height: calc(100% - 15px);
             transition: all 0.6s ease-in-out;
             background-repeat: no-repeat;
             background-position: center center;
             background-size: contain;
           }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
           .wq1 {
             transform: translate(-110%, 24%);
             width: 360px;

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

@@ -37,6 +37,7 @@ function Bwwq({ sItem, selectedTime, index, isShowLine, setIsShowLine }: yearTyp
                     }
                     className={`pic ${isShowLine[index2]?.isShow ? 'picLine' : ''}`}
                   />
+                  <div className={`imgFromTxt`}>{!isShowLine[index2]?.isShow ? i.picfrom : ''}</div>
                   {!isShowLine[index2]?.isShow ? (
                     <InfoCard {...i} />
                   ) : (

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

@@ -101,12 +101,19 @@
           height: 100%;
           .pic {
             width: 100%;
-            height: 100%;
+            height: calc(100% - 20px);
             transition: all 0.6s ease-in-out;
             background-repeat: no-repeat;
             background-position: top right;
             background-size: contain;
           }
+          .imgFromTxt {
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
           & > img {
             height: 100%;
             object-fit: contain;
@@ -191,7 +198,7 @@
         gap: 10px;
 
         .item {
-          width: 595px;
+          width: 522px;
           height: 100%;
           position: relative;
 
@@ -203,6 +210,19 @@
             background-position: left;
             background-size: contain;
           }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          .Fzwq1 {
+            transform: translateX(-9px);
+          }
           .zwq1 {
             transform: translate(-114%, 39%);
             width: 420px;
@@ -247,6 +267,9 @@
               }
             }
           }
+          .Fzwq3 {
+            transform: translateX(-137px);
+          }
           .zwq3 {
             transform: translate(-13%, -12%);
             width: 420px;
@@ -292,6 +315,12 @@
         .item:nth-child(1) {
           width: 290px;
         }
+        .item:nth-child(3) {
+          width: 595px;
+          .pic {
+            height: calc(100% - 5px);
+          }
+        }
       }
       .lInfo {
         pointer-events: none;

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

@@ -40,6 +40,7 @@ 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} />
                   ) : (

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

@@ -100,12 +100,19 @@
           height: 100%;
           .pic {
             width: 100%;
-            height: 100%;
+            height: calc(100% - 20px);
             transition: all 0.6s ease-in-out;
             background-repeat: no-repeat;
             background-position: center;
             background-size: contain;
           }
+          .imgFromTxt {
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
           & > img {
             height: 100%;
             object-fit: contain;
@@ -222,12 +229,22 @@
           position: relative;
           .pic {
             width: 100%;
-            height: 100%;
+            height: calc(100% - 20px);
             transition: all 0.6s ease-in-out;
             background-repeat: no-repeat;
             background-position: left;
             background-size: contain;
           }
+          .imgFromTxt {
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
+          .Fzzq2 {
+            transform: translateX(-59px);
+          }
           .zzq2 {
             transform: translate(-14%, -61%);
             width: 450px;
@@ -266,6 +283,9 @@
               width: 232px;
             }
           }
+          .Fzzq3 {
+            transform: translateX(-124px);
+          }
           .zzq3 {
             transform: translate(-24%, 6%);
             width: 450px;

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

@@ -59,6 +59,7 @@ 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]} />
               ) : (
@@ -92,6 +93,7 @@ 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} />
                   ) : (

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

@@ -199,6 +199,16 @@
             background-position: left;
             background-size: contain;
           }
+          .imgFromTxt {
+            position: absolute;
+            bottom: 5px;
+            left: 0;
+            width: 100%;
+            height: 15px;
+            font-size: 11px;
+            color: rgba(151, 151, 151, 1);
+            text-align: center;
+          }
           .bz1 {
             transform: translate(-112%, 34%);
             width: 320px;
@@ -229,6 +239,9 @@
             }
           }
 
+          .Fbz2 {
+            transform: translateX(-59px);
+          }
           .bz2 {
             transform: translate(-8%, -43%);
             width: 350px;
@@ -259,6 +272,9 @@
             }
           }
 
+          .Fbz3 {
+            transform: translateX(79px);
+          }
           .bz3 {
             transform: translate(-138%, 42%);
             width: 320px;
@@ -291,10 +307,16 @@
         }
         .item:nth-child(2) {
           width: 440px;
+          .pic {
+            height: calc(100% - 5px);
+          }
         }
         .item:nth-child(3) {
           width: 665px;
           padding-left: 80px;
+          .pic {
+            height: calc(100% - 20px);
+          }
         }
       }
 

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

@@ -47,6 +47,7 @@ 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} />
                   ) : (

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

@@ -69,6 +69,7 @@
         }
       }
       .from {
+        display: none;
         font-size: 11px;
         color: rgba(151, 151, 151, 1);
       }

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

@@ -58,15 +58,15 @@
     .ffhybtn1 {
       cursor: pointer;
       height: 300px;
-      width: 230px;
+      width: 215px;
       transform: translate(-13%, -50%);
     }
 
     .ffhybtn2 {
       cursor: pointer;
       height: 300px;
-      width: 230px;
-      transform: translate(95%, -50%);
+      width: 215px;
+      transform: translate(90%, -50%);
     }
   }
 }

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

@@ -106,7 +106,7 @@
           letter-spacing: 2px;
           font-size: 16px;
           line-height: 28px;
-          font-family: 'SimSun' !important;
+          font-family: 'song' !important;
           text-shadow: 1px 1px 1px rgba(255, 233, 182, 0.5);
         }
       }

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

@@ -106,14 +106,15 @@
         flex-direction: row;
 
         .text {
-          height: 22px;
+          height: 36px;
+          line-height: 36px;
         }
       }
 
       .record5 {
         width: 102px;
         height: 25px;
-        transform: translate(-139%, -220%);
+        transform: translate(-139%, -254%);
         background: url('../../../../assets/img/A7_discover_record5.png') no-repeat center center;
         background-size: 100% 100%;
         display: flex;
@@ -126,8 +127,8 @@
       }
 
       .point {
-        height: 15px;
-        width: 15px;
+        height: 40px;
+        width: 40px;
         position: absolute;
         top: 50%;
         left: 50%;
@@ -140,11 +141,11 @@
       }
 
       .point1 {
-        transform: translate(17%, -82%);
+        transform: translate(-45%, -54%);
       }
 
       .point2 {
-        transform: translate(69%, 482%);
+        transform: translate(-26%, 176%);
       }
     }
 
@@ -153,14 +154,14 @@
       transition: opacity 0.5s;
 
       .arrow1 {
-        width: 13px;
-        height: 62px;
+        width: 20px;
+        height: 66px;
         position: absolute;
         top: 50%;
         left: 50%;
-        transform: translate(53%, 21%);
+        transform: translate(47%, 3%);
         background: url('../../../../assets/img/A7_discover_arrow1.png') no-repeat center center;
-        background-size: 100% 100%;
+        background-size: contain;
       }
 
       .leftImg {
@@ -190,15 +191,15 @@
       position: relative;
 
       .point3 {
-        transform: translate(412%, 117%);
+        transform: translate(101%, 27%);
       }
 
       .point4 {
-        transform: translate(-248%, 292%);
+        transform: translate(-147%, 111%);
       }
 
       .point5 {
-        transform: translate(-412%, -170%);
+        transform: translate(-208%, -106%);
       }
 
       .arrow2 {
@@ -408,7 +409,7 @@
       .record1 {
         width: 230px;
         height: 120px;
-        transform: translate(-79%, -112%);
+        transform: translate(-79%, -118%);
 
         .text {
           font-size: 14px;
@@ -450,7 +451,7 @@
         padding-top: 2px;
         width: 156px;
         height: 36px;
-        transform: translate(-119%, -168%);
+        transform: translate(-119%, -206%);
 
         .text {
           font-size: 14px;
@@ -464,7 +465,7 @@
       .record3 {
         width: 181px;
         height: 60px;
-        transform: translate(16.5%, -63%);
+        transform: translate(16.5%, -84%);
         padding-top: 2px;
 
         .text {
@@ -479,7 +480,7 @@
       .record4 {
         width: 192px;
         height: 36px;
-        transform: translate(-89.5%, 186%);
+        transform: translate(-89.5%, 210%);
         padding-top: 16px;
 
         .text {

src/pages/A7wjwj/conponents/Discover/index.tsx

@@ -84,13 +84,13 @@ function Discover(props: { style?: React.CSSProperties }) {
           </div>
         ))}
         <div className='point point3'>
-          <img src={require('@/assets/img/A7_point2.png')} alt='' />
+          <img src={require('@/assets/img/A7_point1.png')} alt='' />
         </div>
         <div className='point point4'>
-          <img src={require('@/assets/img/A7_point2.png')} alt='' />
+          <img src={require('@/assets/img/A7_point1.png')} alt='' />
         </div>
         <div className='point point5'>
-          <img src={require('@/assets/img/A7_point2.png')} alt='' />
+          <img src={require('@/assets/img/A7_point1.png')} alt='' />
         </div>
         <div className='arrow2'></div>
         <div className='arrow3'></div>

src/store/reducer/layout.ts

@@ -9,7 +9,8 @@ const initState = {
   lookBigImg: {
     url: '',
     show: false,
-    fromTxt: ''
+    fromTxt: '',
+    zoom: 1
   },
   // 查看视频、音频、模型
   lookDom: {
@@ -47,7 +48,10 @@ const initState = {
 type LayoutActionType =
   | { type: 'layout/isHH'; payload: boolean }
   | { type: 'layout/style'; payload: any }
-  | { type: 'layout/lookBigImg'; payload: { url: string; show: boolean; fromTxt: string } }
+  | {
+      type: 'layout/lookBigImg'
+      payload: { url: string; show: boolean; fromTxt: string; zoom: number }
+    }
   | { type: 'layout/lookDom'; payload: LookDomType }
   | { type: 'layout/message'; payload: MessageType }
   | { type: 'layout/myData'; payload: MyDataType }

src/utils/util.ts

@@ -0,0 +1,8 @@
+const exChangeHW = (id: string) => {
+  const element = document.getElementById(id)
+  if (!element) return
+  const { width, height } = element.getBoundingClientRect()
+  element.style.transform = `translate(${-width / 2}px, ${-height / 2}px)`
+}
+
+export default exChangeHW