云气图-难写😭

Code/public/myData/myData.js

@@ -495,6 +495,134 @@ const myDataTemp = {
     // 背景图
     bjImg: 'yun/bg.png',
     name: '四神云气图',
-    tit: '墓室壁画'
+    tit: '墓室壁画',
+    iconArr: [
+      {
+        // 这里id不要自己修改！
+        id: 1,
+        title: '青龙',
+        dian: [
+          {
+            id: '1_1',
+            // 热点定位百分比
+            loc: {
+              top: '44%',
+              left: '24%'
+            }
+          },
+          {
+            id: '1_2',
+            // 热点定位百分比
+            loc: {
+              top: '45%',
+              left: '10%'
+            }
+          },
+          {
+            id: '1_3',
+            // 热点定位百分比
+            loc: {
+              top: '26%',
+              left: '59%'
+            }
+          }
+        ]
+      },
+      {
+        id: 2,
+        title: '白虎',
+        dian: [
+          {
+            id: '2_1',
+            // 热点定位百分比
+            loc: {
+              top: '27%',
+              left: '11%'
+            },
+            change: 'scale(2) translate(88px, 25px)'
+          }
+        ]
+      },
+      {
+        id: 3,
+        title: '朱雀',
+        dian: [
+          {
+            id: '3_1',
+            // 热点定位百分比
+            loc: {
+              top: '9%',
+              left: '51%'
+            },
+            change: 'scale(1.5) translate(-54px, 47px)'
+          },
+          {
+            id: '3_2',
+            // 热点定位百分比
+            loc: {
+              top: '49%',
+              left: '71%'
+            },
+            change: 'scale(1.5) translate(-54px, 47px)'
+          }
+        ]
+      },
+      {
+        id: 4,
+        title: '怪兽',
+        dian: [
+          {
+            id: '4_1',
+            // 热点定位百分比
+            loc: {
+              top: '44%',
+              left: '54%'
+            },
+            change: 'scale(1.3) translate(-37px, 1px)'
+          },
+          {
+            id: '4_2',
+            // 热点定位百分比
+            loc: {
+              top: '66%',
+              left: '60%'
+            },
+            change: 'scale(1.3) translate(-37px, 1px)'
+          },
+          {
+            id: '4_3',
+            // 热点定位百分比
+            loc: {
+              top: '70%',
+              left: '50%'
+            },
+            change: 'scale(1.3) translate(-37px, 1px)'
+          }
+        ]
+      },
+      {
+        id: 5,
+        title: '云纹',
+        dian: [
+          {
+            id: '5_1',
+            // 热点定位百分比
+            loc: {
+              top: '4%',
+              left: '0.88%'
+            }
+          },
+          {
+            id: '5_2',
+            // 热点定位百分比
+            loc: {
+              top: '4%',
+              left: '42.2%'
+            },
+            change: 'scale(2) translate(12px, 58px)'
+          }
+        ]
+      }
+    ]
   }
 }

Code/src/assets/styles/base.css

@@ -99,3 +99,18 @@ textarea {
 .hoverD:hover {
   transform: scale(1.1);
 }
+.yunShan {
+  animation: yunShan 2s infinite linear;
+  color: #f1e39e;
+}
+@keyframes yunShan {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

Code/src/assets/styles/base.less

@@ -122,3 +122,22 @@ textarea {
     transform: scale(1.1);
   }
 }
+
+// 云气图闪动
+.yunShan {
+  animation: yunShan 2s infinite linear;
+  color: #f1e39e;
+}
+@keyframes yunShan {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

Code/src/pages/B3yun/B3txt.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo } from 'react'
+import classNames from 'classnames'
+
+type Props = {
+  ac1: number
+  ac2: string
+  setAc2Fu: (val: string) => void
+}
+
+function B3txt({ ac1, ac2, setAc2Fu }: Props) {
+  // 选中的文字dom
+  const acTxt = useMemo(() => {
+    if (ac1 === 0)
+      return (
+        <>
+          <p>1986年发现于河南省商丘市永城县砀山 · 梁孝王之子梁共王刘买之墓</p>
+          <br />
+          <p>
+            中部一条7米长巨龙飞腾，东朱雀，西白虎，四周由怪兽、灵芝及云气纹图案装饰。填补了我国西汉时期壁画的空白，比敦煌壁画要早600多年，被誉为“敦煌之前的敦煌”的四神云气图
+          </p>
+        </>
+      )
+    else if (ac1 === 1)
+      return (
+        <>
+          <div>
+            <span>壁画正中绘</span>
+            <i
+              className={classNames('1_1' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('1_1')}
+            >
+              长须飘摆骄首蜿蜒青龙，龙眼圆瞪，角似鹿角
+            </i>
+          </div>
+          <div>
+            <span>脊背处有一对翼，</span>
+          </div>
+          <div>
+            <i
+              className={classNames('1_2' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('1_2')}
+            >
+              前两足踏云纹、长枝花朵，
+            </i>
+          </div>
+          <div>
+            <i
+              className={classNames('1_3' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('1_3')}
+            >
+              后两足踏朱雀尾和长枝花朵，
+            </i>
+          </div>
+          <div>
+            <span>造型动感十足犹如疾驰于云中</span>
+          </div>
+        </>
+      )
+    else if (ac1 === 2)
+      return (
+        <>
+          <div>
+            <span>巨龙张口卷舌，钩住</span>
+            <i
+              className={classNames('2_1' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('2_1')}
+            >
+              一鸭首、鳞身、鱼尾的怪兽。
+            </i>
+          </div>
+          <div>
+            <span>有学者认为是《山海经》中的“鱼妇”，具有灵魂转化死而复生的美好愿望</span>
+          </div>
+        </>
+      )
+    else if (ac1 === 3)
+      return (
+        <>
+          <div>
+            <span>龙背有一朱雀，</span>
+          </div>
+          <div>
+            <i
+              className={classNames('3_1' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('3_1')}
+            >
+              两脚一前一后踩于壁画顶部
+            </i>
+          </div>
+          <div>
+            <span>长喙衔龙角，细颈生花朵，</span>
+          </div>
+          <div>
+            <i
+              className={classNames('3_2' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('3_2')}
+            >
+              长尾与云纹相连
+            </i>
+          </div>
+        </>
+      )
+    else if (ac1 === 4)
+      return (
+        <>
+          <div>
+            <span>龙腹下绘</span>
+            <i
+              className={classNames('4_1' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('4_1')}
+            >
+              腾跃状白虎，
+            </i>
+          </div>
+          <div>
+            <span>前爪攀神树，后足踏云纹，</span>
+          </div>
+          <div>
+            <i
+              className={classNames('4_2' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('4_2')}
+            >
+              身绘条纹状斑
+            </i>
+          </div>
+          <div>
+            <span>长喙衔龙角，细颈生花朵，</span>
+          </div>
+          <div>
+            <i
+              className={classNames('4_3' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('4_3')}
+            >
+              口衔长枝花朵仰头而上，有吞食前方灵芝之势，
+            </i>
+            <span>体态矫健</span>
+          </div>
+        </>
+      )
+    else if (ac1 === 5)
+      return (
+        <>
+          <div>
+            <i
+              className={classNames('5_1' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('5_1')}
+            >
+              云气纹绘
+            </i>
+            <span>于壁画四周边缘，</span>
+          </div>
+          <div>
+            <i
+              className={classNames('5_2' === ac2 ? 'yunShan' : '')}
+              onClick={() => setAc2Fu('5_2')}
+            >
+              直线穿过圆璧，
+            </i>
+            <span>配以云纹填充其间</span>
+          </div>
+        </>
+      )
+  }, [ac1, ac2, setAc2Fu])
+
+  return <>{acTxt}</>
+}
+
+const MemoB3txt = React.memo(B3txt)
+
+export default MemoB3txt

Code/src/pages/B3yun/index.module.scss

@@ -1,5 +1,236 @@
 .B3yun {
   background-size: 100% 100%;
+  position: relative;
+  padding: 70px 30px 40px;
+  display: flex;
+  justify-content: space-between;
+
   :global {
+    // 左侧
+    .yunll {
+      width: 530px;
+      height: 100%;
+      display: flex;
+      .yunllCon {
+        width: 400px;
+        height: 250px;
+        overflow: hidden;
+        .yunll1 {
+          width: 100%;
+          height: 100%;
+          background-size: 100% 100%;
+          position: relative;
+          transition: transform 0.3s;
+          // transform: scale(2) translate(10px, 10px);
+
+          // 高亮白色
+          .yunll1Ac {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 10;
+            width: 100%;
+            height: 100%;
+            background-size: 100% 100%;
+            opacity: 1;
+
+            // 闪光点
+            .yunDian {
+              position: absolute;
+              cursor: pointer;
+              width: 30px;
+            }
+          }
+
+          // 二级高亮
+          .yunAc2Box {
+            position: absolute;
+            z-index: 20;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            pointer-events: none;
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: fill !important;
+              opacity: 1;
+              // transition: all 0.5s;
+            }
+          }
+          .yunAc2BoxAc {
+            opacity: 1;
+            pointer-events: auto;
+          }
+        }
+      }
+      .yunll2 {
+        width: 80px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .yunll2Row {
+          cursor: pointer;
+          width: 42px;
+          height: 42px;
+          background-size: 100% 100%;
+          margin-bottom: 8px;
+          position: relative;
+          transition: all 0.3s;
+          &::before {
+            content: '·';
+            position: absolute;
+            bottom: -16px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 20px;
+            color: #805a40;
+          }
+
+          &:nth-of-type(1) {
+            background-image: url('../../assets/img/yun/1.png');
+          }
+          &:nth-of-type(2) {
+            background-image: url('../../assets/img/yun/2.png');
+          }
+          &:nth-of-type(3) {
+            background-image: url('../../assets/img/yun/3.png');
+          }
+          &:nth-of-type(4) {
+            background-image: url('../../assets/img/yun/4.png');
+          }
+          &:nth-of-type(5) {
+            background-image: url('../../assets/img/yun/5.png');
+            &::before {
+              display: none;
+            }
+          }
+          &:hover {
+            &:nth-of-type(1) {
+              background-image: url('../../assets/img/yun/1ac.png');
+            }
+            &:nth-of-type(2) {
+              background-image: url('../../assets/img/yun/2ac.png');
+            }
+            &:nth-of-type(3) {
+              background-image: url('../../assets/img/yun/3ac.png');
+            }
+            &:nth-of-type(4) {
+              background-image: url('../../assets/img/yun/4ac.png');
+            }
+            &:nth-of-type(5) {
+              background-image: url('../../assets/img/yun/5ac.png');
+            }
+          }
+        }
+        .yunll2RowAc {
+          &:nth-of-type(1) {
+            background-image: url('../../assets/img/yun/1ac.png');
+          }
+          &:nth-of-type(2) {
+            background-image: url('../../assets/img/yun/2ac.png');
+          }
+          &:nth-of-type(3) {
+            background-image: url('../../assets/img/yun/3ac.png');
+          }
+          &:nth-of-type(4) {
+            background-image: url('../../assets/img/yun/4ac.png');
+          }
+          &:nth-of-type(5) {
+            background-image: url('../../assets/img/yun/5ac.png');
+          }
+        }
+      }
+    }
+
+    // 右侧
+    .yunrr {
+      width: calc(100% - 480px);
+      height: calc(100% - 40px);
+      color: #fff;
+
+      .yunrr1 {
+        position: relative;
+        & > h2 {
+          font-weight: 400;
+          font-size: 26px;
+        }
+        & > div {
+          position: absolute;
+          left: 130px;
+          bottom: -6px;
+          display: inline-block;
+          background-size: 100% 100%;
+          padding: 8px 12px;
+        }
+      }
+
+      .yunrr2 {
+        margin-top: 20px;
+        width: 100%;
+        height: calc(100% - 57px);
+        padding-bottom: 15px;
+        & > div {
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+          p {
+            line-height: 24px;
+            font-size: 14px;
+            font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+              'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+          }
+          span,
+          i {
+            line-height: 24px;
+            font-size: 14px;
+
+            font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
+              'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
+          }
+          div {
+            margin-bottom: 5px;
+            span {
+              opacity: 0.5;
+            }
+            i {
+              cursor: pointer;
+              opacity: 1;
+              // &:hover {
+              //   color: #f1e39e;
+              // }
+            }
+          }
+        }
+      }
+    }
+
+    .yunBtn {
+      position: absolute;
+      z-index: 10;
+      right: 25px;
+      bottom: 25px;
+      display: flex;
+
+      & > div {
+        cursor: pointer;
+        width: 50px;
+        height: 50px;
+        background-size: 100% 100%;
+      }
+      .yunBtn1 {
+        background-image: url('../../assets/img/icon-xuanju.png');
+        margin-right: 5px;
+      }
+      .yunBtn2 {
+        background-image: url('../../assets/img/icon-back.png');
+      }
+    }
   }
 }

Code/src/pages/B3yun/index.tsx

@@ -1,19 +1,143 @@
-import React from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import useDataUrl from '@/components/ownUse/useDataUrl'
 import { myData } from '@/utils/http'
+import history from '@/utils/history'
+import classNames from 'classnames'
+import B3txt from './B3txt'
+
 function B3yun() {
   const { dataUrlSame } = useDataUrl()
+
+  // 一级图标id
+  const [ac1, setAc1] = useState(0)
+
+  useEffect(() => {
+    ac2FlagRef.current = true
+    setAc2('')
+  }, [ac1])
+
+  // 热点点位数组
+  const hotArr = useMemo(() => {
+    if (myData.yun.iconArr[ac1 - 1]) return myData.yun.iconArr[ac1 - 1].dian || []
+    else return []
+  }, [ac1])
+
+  // 是否进入二级状态
+  const ac2Time = useRef(-1)
+
+  const ac2FlagRef = useRef(true)
+
+  const [ac2, setAc2] = useState('')
+
+  // 图片的放大和位移
+  const [imgChange, setImgChange] = useState('')
+
+  const setAc2Fu = useCallback(
+    (id: string) => {
+      if (!ac2FlagRef.current) return
+
+      setAc2(id)
+
+      // 控制图片放大
+      const chage = hotArr.find(v => v.id === id)?.change
+
+      if (chage) setImgChange(chage)
+      // else setImgChange('')
+
+      ac2FlagRef.current = false
+
+      clearTimeout(ac2Time.current)
+
+      ac2Time.current = window.setTimeout(() => {
+        ac2FlagRef.current = true
+        setImgChange('')
+        setAc2('')
+      }, 4000)
+    },
+    [hotArr]
+  )
+
+  useEffect(() => {
+    console.log('---', ac2)
+  }, [ac2])
+
   return (
     <div
       className={styles.B3yun}
       style={{ backgroundImage: `url(${dataUrlSame + myData.yun.bjImg})` }}
     >
       {/* 左侧主体 */}
-      <div className='yunll'></div>
+      <div className='yunll' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
+        {/* 主要 */}
+        <div className='yunllCon'>
+          <div
+            className='yunll1'
+            style={{ backgroundImage: `url(${dataUrlSame}yun/di.jpg)`, transform: imgChange }}
+          >
+            {/* 高亮白色盒子 */}
+            {ac1 > 0 && !ac2 ? (
+              <div
+                style={{ backgroundImage: `url(${dataUrlSame}yun/liang${ac1}.png)` }}
+                className='yunll1Ac'
+              >
+                {/* 点 */}
+                {hotArr.map(v => (
+                  <div
+                    className='yunDian'
+                    onClick={() => setAc2Fu(v.id)}
+                    key={v.id}
+                    style={{ top: v.loc.top, left: v.loc.left }}
+                  >
+                    <img src={`${dataUrlSame}yun/hot.png`} alt='' />
+                  </div>
+                ))}
+              </div>
+            ) : null}
+
+            {/* 二级别高亮 */}
+
+            <div className={classNames('yunAc2Box', ac2 ? 'yunAc2BoxAc' : '')}>
+              {ac2 ? <img className='yunShan' src={`${dataUrlSame}yun/${ac2}.png`} alt='' /> : null}
+            </div>
+
+            {/* {ac1 > 0 && ac2 ? <div className=''></div> : null} */}
+          </div>
+        </div>
+
+        <div className='yunll2'>
+          {myData.yun.iconArr.map(item => (
+            <div
+              onClick={() => setAc1(item.id)}
+              className={classNames('yunll2Row', ac1 === item.id ? 'yunll2RowAc' : '')}
+              key={item.id}
+              title={item.title}
+            ></div>
+          ))}
+        </div>
+      </div>
 
       {/* 右侧文字 */}
-      <div className='yunrr'></div>
+      <div className='yunrr' style={{ pointerEvents: ac2 ? 'none' : 'auto' }}>
+        <div className='yunrr1'>
+          <h2>{myData.yun.name}</h2>
+          <div style={{ backgroundImage: `url(${dataUrlSame}yun/titLiang.png)` }}>
+            {myData.yun.tit}
+          </div>
+        </div>
+
+        <div className='yunrr2'>
+          <div>
+            <B3txt ac1={ac1} ac2={ac2} setAc2Fu={val => setAc2Fu(val)} />
+          </div>
+        </div>
+      </div>
+
+      {/* 右下角的图标 */}
+      <div className='yunBtn'>
+        <div className='yunBtn1' title='仙居世界' onClick={() => history.push('/hots')}></div>
+        <div className='yunBtn2' title='返回' onClick={() => history.go(-1)}></div>
+      </div>
     </div>
   )
 }

Code/src/types/declaration.d.ts

@@ -69,5 +69,17 @@ type MyDataType = {
     bjImg: string
     name: string
     tit: string
+    iconArr: {
+      id: number
+      title: string
+      dian: {
+        id: string
+        loc: {
+          top: string
+          left: string
+        }
+        change?: string
+      }[]
+    }[]
   }
 }