替换一波数据

code/public/myData/base.js

@@ -66,6 +66,10 @@ const myDataTemp = {
                 {
                   name: '刘裕初宁陵石兽',
                   url: 'main/liuchao/7_0.png'
+                },
+                {
+                  name: '刘裕初宁陵石兽',
+                  url: 'main/liuchao/7_1.png'
                 }
               ]
             },
@@ -78,18 +82,22 @@ const myDataTemp = {
               条更显流畅，体态匀称自然，可见当时审美与石刻技术的提升，且齐朝石刻中，石兽头颈均微侧，以威慑外人。</p>
               `,
               imgArr: [
-                // {
-                //   name: '水经山村南朝失名墓石兽',
-                //   url: 'main/liuchao/7_1.png'
-                // },
                 {
-                  name: '烂石弄南齐失名墓石兽',
+                  name: '水经山村南朝失名墓石兽',
                   url: 'main/liuchao/8_0.png'
+                },
+                {
+                  name: '烂石弄南齐失名墓石兽',
+                  url: 'main/liuchao/8_1.png'
+                },
+                {
+                  name: '萧道生修安陵石兽',
+                  url: 'main/liuchao/8_2.png'
+                },
+                {
+                  name: '萧道生修安陵石兽',
+                  url: 'main/liuchao/8_3.png'
                 }
-                // {
-                //   name: '萧道生修安陵石兽',
-                //   url: 'main/liuchao/8_0.png'
-                // }
               ]
             },
             {
@@ -103,17 +111,21 @@ const myDataTemp = {
               `,
               imgArr: [
                 {
-                  name: '萧恢墓石兽',
+                  name: '萧顺之建陵石兽',
                   url: 'main/liuchao/9_0.png'
+                },
+                {
+                  name: '萧衍修陵石兽',
+                  url: 'main/liuchao/9_1.png'
+                },
+                {
+                  name: '萧恢墓石兽',
+                  url: 'main/liuchao/9_2.png'
+                },
+                {
+                  name: '萧恢墓石兽',
+                  url: 'main/liuchao/9_3.png'
                 }
-                // {
-                //   name: '萧顺之建陵石兽',
-                //   url: 'main/liuchao/xxx_1.png'
-                // },
-                //  {
-                //   name: '萧衍修陵石兽',
-                //   url: 'main/liuchao/xxx_1.png'
-                // },
               ]
             },
             {
@@ -140,6 +152,10 @@ const myDataTemp = {
                 {
                   name: '陈蒨永宁陵石兽',
                   url: 'main/liuchao/11_0.png'
+                },
+                {
+                  name: '陈蒨永宁陵石兽',
+                  url: 'main/liuchao/11_1.png'
                 }
               ]
             }

code/src/pages/A2main/index.module.scss

@@ -8,6 +8,36 @@
 
   :global {
 
+    // 石刻分布图查看
+    .fenBig {
+      position: absolute;
+      z-index: 100;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, .7);
+      backdrop-filter: blur(4px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &>img {
+        max-width: 96%;
+        max-height: 96%;
+      }
+
+      .A5LX {
+        position: absolute;
+        z-index: 200;
+        top: 70px;
+        right: 46px;
+        cursor: pointer;
+        font-size: 40px;
+      }
+    }
+
+
     // 左右按钮
     .A2y1Left {
       cursor: pointer;
@@ -316,7 +346,7 @@
           .A2y1_1Txt {
             text-align: justify;
             width: 100%;
-            height: 240px;
+            height: 260px;
             overflow-y: auto;
             font-size: 24px;
             line-height: 36px;
@@ -328,7 +358,7 @@
             display: block;
             width: 257px;
             height: 76px;
-            margin: 63px auto 0;
+            margin: 43px auto 0;
             animation: yunShan 2s infinite linear;
 
             &:hover {
@@ -429,7 +459,42 @@
         .A2x2_1 {
           width: 100%;
           height: 100%;
-          background-color: #b39c4e;
+          background-size: 100% 100%;
+          position: relative;
+
+          &>div {
+            cursor: pointer;
+            position: absolute;
+            animation: yunShan 2s infinite linear;
+
+            .anticon-zoom-in {
+              position: absolute;
+              right: -20px;
+              top: 50%;
+              transform: translateY(-50%);
+              z-index: 2;
+              font-size: 30px;
+            }
+
+            &:hover {
+              animation: none
+            }
+          }
+
+          .A2x2_1_1 {
+            top: 66px;
+            left: 261px;
+          }
+
+          .A2x2_1_2 {
+            bottom: 48px;
+            left: 287px;
+          }
+
+          .A2x2_1_3 {
+            bottom: 125px;
+            right: 81px;
+          }
         }
 
         .A2x2_2 {

code/src/pages/A2main/index.tsx

@@ -14,6 +14,7 @@ import 'swiper/css'
 import 'swiper/css/effect-creative'
 import { isMobiileFu } from '@/utils/history'
 import A7duiHua from '../A7duiHua'
+import { ZoomInOutlined, CloseOutlined } from '@ant-design/icons'
 
 function A2main() {
   // 从首页进来才需要平滑滚动
@@ -73,6 +74,8 @@ function A2main() {
     return myData.main.yiZheng.arr.find(v => v.id === yiZhengId)!.sonArr[0]
   }, [yiZhengId])
 
+  const [fenBig, setFenBig] = useState('')
+
   // ----------科技守护 古今对话---------
   const [guInd, setGuInd] = useState(1)
   const [guShow, setGuShow] = useState(false)
@@ -233,7 +236,19 @@ function A2main() {
         ></div>
 
         <div className='A2x2' style={{ backgroundImage: `url(${baseUrl}main/x3.png)` }}>
-          <div className='A2x2_1'></div>
+          <div className='A2x2_1' style={{ backgroundImage: `url(${baseUrl}main/xl.png)` }}>
+            {/* 3个图 */}
+            {[1, 2, 3].map(num => (
+              <div
+                key={num}
+                className={`A2x2_1_${num}`}
+                onClick={() => setFenBig(`${baseUrl}main/xlAc${num}.png`)}
+              >
+                <img src={`${baseUrl}main/xl${num}.png`} alt='' />
+                <ZoomInOutlined rev={undefined} />
+              </div>
+            ))}
+          </div>
           <div className='A2x2_2 kaiFont'>江苏六朝石刻分布</div>
           <img className='A2x2_3' src={`${baseUrl}main/x4.png`} alt='' />
         </div>
@@ -368,6 +383,14 @@ function A2main() {
       {/* ----------------遗珍巡礼 现存石刻详情页--- */}
       {yiZhengShow ? <A6yiZheng id={yiZhengId} closeFu={() => setYiZhengShow(false)} /> : null}
 
+      {/* 分布图查看大图 */}
+      {fenBig ? (
+        <div className='fenBig' id='opacityCss'>
+          <img src={fenBig} alt='' />
+          <CloseOutlined onClick={() => setFenBig('')} rev={undefined} className='A5LX' />
+        </div>
+      ) : null}
+
       {/* ---------科技守护 古今对话 详情页 */}
       {guShow ? <A7duiHua ind={guInd} closeFu={() => setGuShow(false)} /> : null}
     </div>

code/src/pages/A3liuChao2/index.module.scss

@@ -82,6 +82,7 @@
             height: 710px;
             display: block;
             margin-bottom: 26px;
+            object-fit: contain;
           }
 
           .A3ZimgBtn {

code/src/pages/A6yiZheng/index.module.scss

@@ -5,8 +5,10 @@
   width: 100%;
   height: 100%;
   z-index: 10;
-  background-size: 100% 100%;
   overflow: auto;
+  background-position: 0 -1500px;
+  background-size: 100% auto;
+  background-repeat: no-repeat;
 
   :global {
     .A6main {
@@ -17,7 +19,7 @@
       background-size: 100% auto;
       background-position: 0 0;
       background-repeat: no-repeat;
-      background-color: #3c1f11;
+      // background-color: #3c1f11;
       padding-bottom: 60px;
 
 

code/src/pages/A6yiZheng/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { baseUrl, myData } from '@/utils/http'
 import classNames from 'classnames'
@@ -15,13 +15,36 @@ function A6yiZheng({ id, closeFu }: Props) {
     return myData.main.yiZheng.arr.find(v => v.id === id)!.sonArr
   }, [id])
 
+  const sorrlRef = useRef<HTMLDivElement>(null)
+
+  const [yNum, setYNum] = useState(false)
+
+  useEffect(() => {
+    if (sorrlRef.current) {
+      sorrlRef.current.addEventListener('scroll', () => {
+        const num = sorrlRef.current!.scrollTop
+        // 1500
+        setYNum(num >= 1500)
+      })
+    }
+  }, [])
+
   return (
     <div
       id='opacityCss'
+      ref={sorrlRef}
       className={classNames(styles.A6yiZheng, 'hideSorrl', isMo ? styles.A6yiZhengMo : '')}
+      style={{
+        backgroundImage: `url(${baseUrl}main/yiZheng/bg.jpg)`
+      }}
     >
       <Ztop backFu={closeFu} />
-      <div className='A6main' style={{ backgroundImage: `url(${baseUrl}main/yiZheng/bg.jpg)` }}>
+      <div
+        className='A6main'
+        style={{
+          backgroundImage: yNum ? 'none' : `url(${baseUrl}main/yiZheng/bg.jpg)`
+        }}
+      >
         <img className='A6top1' src={`${baseUrl}main/yiZheng/txt${id}.png`} alt='' />
         <div className={`A6top2 A6top2${id}`}>
           <img src={`${baseUrl}main/yiZheng/${id}.png`} alt='' />