up

code/src/components/Z1titie/index.module.scss

@@ -3,13 +3,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 
   :global {
-    img {
+    .Z1_1 {
       width: auto;
       height: 34px;
     }
-    div {
+    .Z1txt {
       margin: 0 10px;
       font-size: 22px;
       background-size: 130% 130%;
@@ -17,5 +18,14 @@
       color: var(--themeColor);
       letter-spacing: 2px;
     }
+
+    .Z1_2 {
+      position: absolute;
+      top: 30px;
+      left: 15px;
+      z-index: 10;
+      height: 34px;
+      width: auto;
+    }
   }
 }

code/src/components/Z1titie/index.tsx

@@ -3,14 +3,29 @@ import styles from './index.module.scss'
 
 type Props = {
   title: string
+  toHome?: () => void
 }
 
-function Z1titie({ title }: Props) {
+function Z1titie({ title, toHome }: Props) {
   return (
     <div className={styles.Z1titie}>
       <img className='Z1_1' src={`${serverUrl}home/titlel.png`} alt='' />
-      <div style={{ backgroundImage: `url(${serverUrl}home/titleBac.png)` }}>{title}</div>
-      <img className='Z1_2' src={`${serverUrl}home/titler.png`} alt='' />
+      <div
+        className='Z1txt'
+        style={{ backgroundImage: `url(${serverUrl}home/titleBac.png)` }}
+      >
+        {title}
+      </div>
+      <img className='Z1_1' src={`${serverUrl}home/titler.png`} alt='' />
+
+      {toHome ? (
+        <img
+          className='Z1_2'
+          src={`${serverUrl}show/toHome.png`}
+          alt=''
+          onClick={() => toHome()}
+        />
+      ) : null}
     </div>
   )
 }

code/src/pages/A0model/A0btn/index.module.scss

@@ -4,8 +4,51 @@
   left: 0;
   right: 0;
   display: 'flex';
-  justify-content: center;
-  gap: '10px';
   :global {
+    .A0btnZhi {
+      width: 90%;
+      margin: 0 auto 15px;
+      height: auto;
+      position: relative;
+      .A0btnZhi1 {
+        position: absolute;
+        width: 15px;
+        left: 0%;
+        top: -13px;
+        z-index: 10;
+        height: auto;
+        transition: all 0.3s;
+      }
+    }
+
+    .A0btnBox {
+      display: flex;
+      justify-content: center;
+
+      & > div {
+        margin: 0 8px;
+        width: 84px;
+        height: 42px;
+        background-size: 100% 100%;
+        color: var(--themeColor2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+        letter-spacing: 2px;
+      }
+      .A0btnRow {
+        color: #2d0c05;
+      }
+    }
   }
 }
+
+.A0top {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  width: 100%;
+  color: red;
+}

code/src/pages/A0model/A0btn/index.tsx

@@ -1,26 +1,89 @@
-import React from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import classNames from 'classnames'
+import { myInfo1 } from '@/pages/A2show/data'
+
+const tabArr = [
+  { name: '玉镖', bs: 'yu_01', info: '玉镖（鞘尾）' },
+  { name: '剑身', bs: 'jian_02', info: '剑身' },
+  { name: '玉璏', bs: 'yu_03', info: '玉璏（鞘中部）' }
+]
+const objAc = myInfo1.find(v => v.title === '工艺')!.text!
 
 type Props = {
   cutModelFu: (val: string) => void
 }
 
 function A0btn({ cutModelFu }: Props) {
+  const [tab, setTab] = useState('')
+
+  const [zhiCss, setZhiCss] = useState('')
+
+  const cutFu = useCallback(
+    (bs: string) => {
+      if (tab === bs) {
+        setTab('')
+        cutModelFu('')
+      } else {
+        setZhiCss(bs === 'yu_01' ? '5%' : bs === 'yu_03' ? '56%' : '31%')
+        setTab(bs)
+        cutModelFu(bs)
+      }
+    },
+    [cutModelFu, tab]
+  )
+
+  const infoObj = useMemo(() => {
+    let obj = {
+      title: '玉柄铁剑',
+      text: ''
+    }
+    if (tab) {
+      const tabBs = tabArr.find(v => v.bs === tab)!.info
+
+      obj = {
+        title: tabBs,
+        text: Reflect.get(objAc, tabBs)
+      }
+    }
+    return obj
+  }, [tab])
+
   return (
-    <div className={styles.A0btn}>
-      <button onClick={() => cutModelFu('yu_01')} style={{ padding: '10px' }}>
-        显示 BS1
-      </button>
-      <button onClick={() => cutModelFu('jian_02')} style={{ padding: '10px' }}>
-        显示 BS2
-      </button>
-      <button onClick={() => cutModelFu('yu_03')} style={{ padding: '10px' }}>
-        显示 BS3
-      </button>
-      <button onClick={() => cutModelFu('')} style={{ padding: '10px' }}>
-        显示全部
-      </button>
-    </div>
+    <>
+      <div className={styles.A0top}>123</div>
+
+      <div className={styles.A0btn}>
+        {/* 指示图 */}
+        <div className='A0btnZhi'>
+          <img
+            className='A0btnZhi1'
+            style={{ opacity: tab ? 1 : 0, left: zhiCss }}
+            src={`${serverUrl}model/zhi.png`}
+            alt=''
+          />
+          <img src={`${serverUrl}model/jianYing.png`} alt='' />
+        </div>
+
+        {/* 按钮 */}
+        <div className='A0btnBox'>
+          {tabArr.map(item => (
+            <div
+              className={classNames(tab === item.bs ? 'A0btnRow' : '')}
+              key={item.name}
+              onClick={() => cutFu(item.bs)}
+              style={{
+                backgroundImage: `url(${serverUrl}model/btn${
+                  tab === item.bs ? 'Ac' : ''
+                }.png)`
+              }}
+            >
+              {item.name}
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
   )
 }
 

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

@@ -13,7 +13,7 @@
   :global {
     .A0main {
       width: 100%;
-      height: calc(100% - 100px);
+      height: calc(100% - 117px);
       & > div {
         pointer-events: none !important;
         & > div {

code/src/pages/A0model/index.tsx

@@ -9,7 +9,7 @@ import Model from './Model'
 import A0btn from './A0btn'
 
 function A0model() {
-  const { isShow } = useSelector((state: RootState) => state.A0model)
+  const { pageKey } = useSelector((state: RootState) => state.A0model)
 
   const modelRef = useRef<any>(null)
 
@@ -22,7 +22,10 @@ function A0model() {
   return (
     <div
       style={{ backgroundImage: `url(${serverUrl}model/bac.jpg)` }}
-      className={classNames(styles.A0model, isShow ? styles.A0modelShow : '')}
+      className={classNames(
+        styles.A0model,
+        pageKey === 'model' ? styles.A0modelShow : ''
+      )}
     >
       <div className='A0main'>
         <Canvas

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

@@ -12,7 +12,7 @@
       padding: 10% 0;
       display: flex;
       justify-content: center;
-      transition: all 1s;
+      transition: all 2s;
       opacity: 1;
       pointer-events: auto;
 
@@ -52,6 +52,7 @@
       text-align: center;
       letter-spacing: 10px;
       font-size: 18px;
+      color: #e7e3c5;
     }
 
     .A1jian {

code/src/pages/A2show/data.ts

@@ -0,0 +1,13 @@
+export type A2RrBtnType = '简介' | '工艺' | '价值' | '背景'
+
+export type MyInfo1Type = {
+  id: number
+  title: A2RrBtnType
+  imgArr?: string[]
+  text?: {
+    [x: string]: string
+  }
+  otherTxt: string
+}
+
+export const myInfo1: MyInfo1Type[] = myInfoTemp1

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

@@ -1,4 +1,143 @@
 .A2show {
+  background-size: 100% 100%;
+  color: var(--themeColor);
+  perspective: 1500px;
+  overflow: hidden;
   :global {
+    .A2txt {
+      margin-top: 8px;
+      text-align: center;
+      letter-spacing: 2px;
+      font-size: 14px;
+      color: #e7e3c5;
+      & > p {
+        margin-bottom: 5px;
+      }
+    }
+
+    .A2rBtn {
+      position: absolute;
+      right: 15px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+      .A2rBtnRow {
+        margin-bottom: 15px;
+        color: var(--themeColor2);
+        & > img {
+          width: 50px;
+          height: auto;
+        }
+        & > p {
+          margin-top: 3px;
+          text-align: center;
+          font-size: 12px;
+        }
+      }
+    }
+    .A2rotate {
+      margin-top: 20px;
+      width: 100%;
+      height: calc(100% - 220px);
+      position: relative;
+      transform-style: preserve-3d;
+      transition: transform 1s ease-in-out;
+      /* 触发GPU加速 */
+      transform: translate3d(0, 0, 0) rotateY(0deg);
+      /* 提示浏览器优化变换 */
+      will-change: transform;
+      /* 避免隐藏元素背面可能引起的渲染问题 */
+      -webkit-backface-visibility: hidden; /* 修复闪烁问题，有时能辅助加速 */
+      backface-visibility: hidden;
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+      .A2rotate1 {
+        position: absolute;
+        top: 42%;
+        left: 50%;
+        width: 100%;
+        height: 60%;
+        transform: translate(-50%, -50%) rotateY(0deg) translateZ(300px);
+        text-align: center;
+      }
+      .A2rotate2 {
+        opacity: 0.3;
+        transform: translate(-50%, -50%) rotateY(195deg) translateZ(300px);
+      }
+    }
+    .A2rotateShow {
+      transform: translate3d(0, 0, 0) rotateY(-196deg);
+      -webkit-transform: translate3d(0, 0, 0) rotateY(-196deg); /* 增加Webkit前缀 */
+      .A2rotate1 {
+        opacity: 0.3;
+      }
+      .A2rotate2 {
+        opacity: 1;
+      }
+    }
+
+    .A2cut {
+      width: 60%;
+      left: 20%;
+      top: -15%;
+      position: relative;
+      z-index: 10;
+      height: 13%;
+      .A2cut2 {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: -20px;
+      }
+      .A2cut3 {
+        position: absolute;
+        left: -20px;
+        top: 53%;
+        transform: translateY(-50%);
+        width: 30px;
+        height: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--themeColor2);
+        img {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+        }
+      }
+      .A2cut4 {
+        left: auto;
+        right: -20px;
+      }
+
+      .A2cut3Ac {
+        color: var(--themeColor);
+      }
+    }
+    .A2btn {
+      position: absolute;
+      z-index: 20;
+      bottom: 3%;
+      left: 10%;
+      width: 80%;
+      height: 5%;
+      display: flex;
+      justify-content: space-between;
+      & > div {
+        width: 48%;
+        height: 100%;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #2d0c05;
+        font-size: 18px;
+        letter-spacing: 2px;
+      }
+    }
   }
 }

code/src/pages/A2show/index.tsx

@@ -1,9 +1,81 @@
-import React from 'react'
+import React, { useState } from 'react'
 import styles from './index.module.scss'
+import Z1titie from '@/components/Z1titie'
+import store from '@/store'
+import { myInfo1 } from './data'
+import classNames from 'classnames'
+
+const btnArr = [
+  { name: '三维模型', page: 'model' },
+  { name: '佩戴方式', page: 'wear' }
+]
+
 function A2show() {
+  const [rotate, setRotate] = useState(false)
+
   return (
-    <div className={styles.A2show}>
-      <h1>A2show</h1>
+    <div
+      className={styles.A2show}
+      style={{ backgroundImage: `url(${serverUrl}show/bac.jpg)` }}
+    >
+      <Z1titie
+        title='玉柄铁剑'
+        toHome={() => store.dispatch({ type: 'A1/pageKey', payload: 'home' })}
+      />
+
+      <div className='A2txt'>
+        <p>春秋中晚期 | 藏于十堰市博物馆</p>
+        <p>湖北省郧县五峰乡肖家河村乔家院墓地出土</p>
+      </div>
+
+      {/* 右侧图标 */}
+      <div className='A2rBtn'>
+        {myInfo1.map(item => (
+          <div className='A2rBtnRow' key={item.id}>
+            <img src={`${serverUrl}show/${item.id}.png`} alt='' />
+            <p>{item.title}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* 2张图片伪3D效果 */}
+      <div className={classNames('A2rotate', rotate ? 'A2rotateShow' : '')}>
+        <div className='A2rotate1'>
+          <img src={`${serverUrl}show/zheng.png`} alt='' />
+        </div>
+        <div className='A2rotate1 A2rotate2'>
+          <img src={`${serverUrl}show/fan.png`} alt='' />
+        </div>
+      </div>
+
+      {/* 切换 */}
+      <div className='A2cut' onClick={() => setRotate(!rotate)}>
+        <img className='A2cut1' src={`${serverUrl}show/xian2.png`} alt='' />
+        <img className='A2cut2' src={`${serverUrl}show/xian.png`} alt='' />
+        <div className={classNames('A2cut3', rotate ? 'A2cut3Ac' : '')}>
+          鞘
+          <img src={`${serverUrl}show/txtBac${rotate ? 'Ac' : ''}.png`} alt='' />
+        </div>
+        <div className={classNames('A2cut3 A2cut4', rotate ? '' : 'A2cut3Ac')}>
+          剑
+          <img src={`${serverUrl}show/txtBac${rotate ? '' : 'Ac'}.png`} alt='' />
+        </div>
+      </div>
+
+      {/* 底部按钮 */}
+      <div className='A2btn'>
+        {btnArr.map(item => (
+          <div
+            onClick={() =>
+              store.dispatch({ type: 'A1/pageKey', payload: item.page as 'home' })
+            }
+            style={{ backgroundImage: `url(${serverUrl}show/btn.png)` }}
+            key={item.name}
+          >
+            {item.name}
+          </div>
+        ))}
+      </div>
     </div>
   )
 }

code/src/store/reducer/A0model.ts

@@ -1,8 +1,6 @@
-export type PageKeyType = 'home' | 'show' | 'wear'
+export type PageKeyType = 'home' | 'show' | 'wear' | 'model'
 // 初始化状态
 const initState = {
-  // 是否显示模型页面
-  isShow: false,
   // 模型加载进度条
   plan: 0,
   // 当前页面
@@ -12,10 +10,6 @@ const initState = {
 // 定义 action 类型
 type Props =
   | {
-      type: 'A1/isShow'
-      payload: boolean
-    }
-  | {
       type: 'A1/plan'
       payload: number
     }
@@ -27,8 +21,6 @@ type Props =
 // reducer
 export default function Reducer(state = initState, action: Props) {
   switch (action.type) {
-    case 'A1/isShow':
-      return { ...state, isShow: action.payload }
     case 'A1/plan':
       return { ...state, plan: action.payload }
     case 'A1/pageKey':

code/src/types/declaration.d.ts

@@ -9,3 +9,5 @@ declare module 'js-export-excel'
 declare module 'braft-utils'
 
 declare const serverUrl: string
+declare const myInfoTemp1
+declare const myInfoTemp2