仙居

Code/public/myData/myData.js

@@ -758,5 +758,35 @@ const myDataTemp = {
         ]
       }
     ]
-  }
+  },
+  // 仙居(静态资源目录位置：staticData/HH/xian)
+  xian: [
+    // 这里id不要自己修改！
+    {
+      id: 1,
+      name: '四神云气图',
+      tit: '墓室壁画',
+      txt: `
+      <p>1986年发现于河南省商丘市永城县砀山 · 梁孝王之子梁共王刘买之墓</p>
+      <br />
+      <p>中部一条7米长巨龙飞腾，东朱雀，西白虎，四周由怪兽、灵芝及云气纹图案装饰。填补了我国西汉时期壁画的空白，比敦煌壁画要早600多年，被誉为“敦煌之前的敦煌”的四神云气图</p>`
+    },
+
+    {
+      id: 2,
+      name: '卜千秋墓中的升仙图',
+      tit: '墓室壁画',
+      txt: `
+      <p>壁画长4.15米，宽0.32米</p>
+      <br />
+      <p>它“讲述”了西汉一对夫妇死后升仙的“故事”。“壁画距今已2000多年了，是国内发现最完整的西汉壁画，被学术界和文物考古界誉为“国宝级文物”。</p>`
+    },
+    {
+      id: 3,
+      name: '汉代先民的神仙信仰',
+      tit: '墓室壁画',
+      txt: `
+      <p>资料待完善</p>`
+    }
+  ]
 }

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

@@ -1,4 +1,151 @@
 .B2hots {
+  position: relative;
+  display: flex;
+  padding: 70px 80px 60px;
+  justify-content: space-between;
+  background-size: 100% 100%;
   :global {
+    .B2ll {
+      width: 280px;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .B2lRow {
+        cursor: pointer;
+        position: relative;
+        width: 100%;
+        height: 60px;
+        overflow: hidden;
+        transition: height 0.3s;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: fill !important;
+        }
+        .B2lRowTxt {
+          transition: opacity 0.3s;
+          opacity: 0.5;
+          position: absolute;
+          color: #d2c2ad;
+          left: 20px;
+          bottom: 18px;
+          font-size: 16px;
+          & > img {
+            display: inline-block;
+            margin-left: 10px;
+            width: 12px;
+            opacity: 0;
+          }
+        }
+        &:hover {
+          .B2lRowTxt {
+            opacity: 1;
+          }
+        }
+      }
+      .B2lRowAc {
+        height: 170px;
+        .B2lRowTxt {
+          width: 100%;
+          padding-left: 20px;
+          left: 0;
+          bottom: 0;
+          height: 34px;
+          opacity: 1;
+          line-height: 34px;
+          background-color: rgba(0, 0, 0, 0.6);
+          & > img {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    // 右侧
+    .B2rr {
+      width: 320px;
+      color: #fff;
+
+      .B2rr1 {
+        width: calc(100% + 30px);
+        position: relative;
+        display: flex;
+        & > h2 {
+          font-weight: 400;
+          font-size: 26px;
+        }
+        & > div {
+          margin-left: 10px;
+          position: relative;
+          bottom: -6px;
+          display: inline-block;
+          background-size: 100% 100%;
+          padding: 8px 12px;
+        }
+      }
+
+      .B2rr2 {
+        margin-top: 20px;
+        width: 100%;
+        height: calc(100% - 110px);
+        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;
+              // }
+            }
+          }
+        }
+      }
+
+      .B2rr3 {
+        cursor: pointer;
+        padding: 15px;
+        display: inline-block;
+        background-size: 100% 100%;
+      }
+    }
+
+    // 返回按钮
+    .B2back {
+      position: absolute;
+      z-index: 10;
+      right: 25px;
+      bottom: 25px;
+      background-image: url('../../assets/img/icon-back.png');
+      cursor: pointer;
+      width: 50px;
+      height: 50px;
+      background-size: 100% 100%;
+    }
   }
 }

Code/src/pages/B2hots/index.tsx

@@ -1,9 +1,70 @@
-import React from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import history from '@/utils/history'
+import useDataUrl from '@/components/ownUse/useDataUrl'
+import { myData } from '@/utils/http'
+import classNames from 'classnames'
+
+const pushObj = {
+  1: '/yun',
+  2: '/xian'
+}
+
 function B2hots() {
+  const { dataUrlSame } = useDataUrl()
+
+  const [acId, setAcId] = useState(1)
+
+  const info = useMemo(() => {
+    return myData.xian.find(v => v.id === acId)!
+  }, [acId])
+
+  const toDetailsFu = useCallback(() => {
+    const path = Reflect.get(pushObj, acId)
+    history.push(path)
+  }, [acId])
+
   return (
-    <div className={styles.B2hots}>
-      <h1>B2hots</h1>
+    <div className={styles.B2hots} style={{ backgroundImage: `url(${dataUrlSame}xian/bg.jpg)` }}>
+      <div className='B2ll'>
+        {myData.xian.map(item => (
+          <div
+            className={classNames('B2lRow', acId === item.id ? 'B2lRowAc' : '')}
+            key={item.id}
+            onClick={() => setAcId(item.id)}
+          >
+            <img src={`${dataUrlSame}xian/${item.id}${acId === item.id ? 'ac' : ''}.png`} alt='' />
+            <div className='B2lRowTxt'>
+              {item.name}
+              <img src={`${dataUrlSame}xian/right.png`} alt='' />
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* 右侧文字 */}
+      <div className='B2rr'>
+        <div className='B2rr1'>
+          <h2>{info.name}</h2>
+          <div style={{ backgroundImage: `url(${dataUrlSame}yun/titLiang.png)` }}>{info.tit}</div>
+        </div>
+
+        <div className='B2rr2'>
+          <div dangerouslySetInnerHTML={{ __html: info.txt }}></div>
+        </div>
+
+        {acId === 3 ? null : (
+          <div
+            onClick={toDetailsFu}
+            className='B2rr3 sizeNo hoverD'
+            style={{ backgroundImage: `url(${dataUrlSame}xian/duo.png)` }}
+          >
+            了解更多
+          </div>
+        )}
+      </div>
+
+      {/* 返回按钮 */}
+      <div className='B2back hoverD' title='返回' onClick={() => history.go(-1)}></div>
     </div>
   )
 }

Code/src/pages/B3yun/index.tsx

@@ -135,8 +135,12 @@ function B3yun() {
 
       {/* 右下角的图标 */}
       <div className='yunBtn'>
-        <div className='yunBtn1' title='仙居世界' onClick={() => history.push('/hots')}></div>
-        <div className='yunBtn2' title='返回' onClick={() => history.go(-1)}></div>
+        <div
+          className='yunBtn1 hoverD'
+          title='仙居世界'
+          onClick={() => history.push('/hots')}
+        ></div>
+        <div className='yunBtn2 hoverD' title='返回' onClick={() => history.go(-1)}></div>
       </div>
     </div>
   )

Code/src/types/declaration.d.ts

@@ -82,4 +82,10 @@ type MyDataType = {
       }[]
     }[]
   }
+  xian: {
+    id: number
+    name: string
+    tit: string
+    txt: string
+  }[]
 }