upp

code/package.json

@@ -68,4 +68,4 @@
     "react-app-rewired": "^2.2.1"
   },
   "homepage": "."
-}
+}

code/src/assets/styles/base.css

@@ -234,3 +234,23 @@ textarea {
     opacity: 1;
   }
 }
+.A3img2 {
+  animation: A3img2 3s linear infinite;
+}
+@keyframes A3img2 {
+  0% {
+    opacity: 1;
+  }
+  25% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.2;
+  }
+  70% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}

code/src/assets/styles/base.less

@@ -354,3 +354,29 @@ textarea {
     opacity: 1;
   }
 }
+
+// 重复透明度动画
+.A3img2 {
+  animation: A3img2 3s linear infinite;
+}
+@keyframes A3img2 {
+  0% {
+    opacity: 1;
+  }
+
+  25% {
+    opacity: 0.5;
+  }
+
+  50% {
+    opacity: 0.2;
+  }
+
+  70% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

code/src/components/Z1titie/index.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 function Z1titie({ title, toHome, backFu }: Props) {
   return (
-    <div className={styles.Z1titie}>
+    <div className={styles.Z1titie} id='Z1titie'>
       <img className='Z1_1' src={`${serverUrl}home/titlel.png`} alt='' />
       <div
         className='Z1txt'

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

@@ -28,7 +28,7 @@
       & > div {
         margin: 0 8px;
         width: 84px;
-        height: 42px;
+        height: 34px;
         background-size: 100% 100%;
         color: var(--themeColor2);
         display: flex;

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

@@ -22,6 +22,7 @@
       height: calc(100% - 120px);
       background-size: 100% 100%;
       padding-top: 55px;
+
       .A2It1 {
         width: 100%;
         height: 180px;
@@ -38,6 +39,35 @@
           font-size: 16px;
           letter-spacing: 4px;
         }
+        .adm-page-indicator-dot-active {
+          background-color: var(--themeColor);
+        }
+      }
+      // 顶部文字
+      .A2Itxt {
+        width: 100%;
+        height: calc(100% - 30px);
+        padding: 0 20px;
+        color: #2d0c05;
+        overflow-y: auto;
+
+        .A2ItxtRow {
+          font-size: 16px;
+          margin-bottom: 8px;
+          letter-spacing: 2px;
+          word-wrap: break-word;
+          text-align: justify;
+          & > p {
+            margin-bottom: 8px;
+          }
+          .A2ItxtRow1 {
+            font-weight: 700;
+          }
+        }
+      }
+      .A2ItxtBan {
+        margin-top: 15px;
+        height: calc(100% - 225px);
       }
     }
 

code/src/pages/A2show/A2info/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { A2RrBtnType, myInfo1, MyInfo1Type } from '../data'
 import classNames from 'classnames'
@@ -19,12 +19,40 @@ function A2info({ acKey, closeFu }: Props) {
   // 筛选出选中的数据
   const dataRes = useMemo(() => {
     let obj = {} as MyInfo1Type
-    if (tabAc) obj = myInfo1.find(v => v.title === tabAc)!
+    if (tabAc) obj = { ...myInfo1.find(v => v.title === tabAc)! }
+    if (obj.text) {
+      const objSon: any = { ...obj.text }
+
+      let arr: { key: string; value: string }[] = []
+      for (const k in objSon) {
+        arr.push({ key: k, value: objSon[k] })
+      }
+      obj.text = arr
+    }
+
     return obj
   }, [tabAc])
 
+  const [lookImg, setLookImg] = useState('')
+
+  const sorrlDom = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (sorrlDom.current) {
+      sorrlDom.current.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }, [tabAc])
+
   return (
     <div className={styles.A2info} id='pageShow'>
+      <ImageViewer
+        image={lookImg}
+        visible={!!lookImg}
+        onClose={() => {
+          setLookImg('')
+        }}
+      />
+
       {/* 返回按钮 */}
       <img
         onClick={closeFu}
@@ -38,28 +66,50 @@ function A2info({ acKey, closeFu }: Props) {
         className='A2Itop'
         style={{ backgroundImage: `url(${serverUrl}show/info/bac.png)` }}
       >
-        {/* 图片 */}
-        {dataRes.imgArr && dataRes.imgArr.length ? (
-          <div className='A2It1'>
-            <Swiper slideSize={80} trackOffset={10} stuckAtBoundary={false}>
-              {dataRes.imgArr.map(item => (
-                <Swiper.Item
-                  key={item}
-                  onClick={() => {
-                    ImageViewer.show({ image: serverUrl + item })
-                  }}
-                >
-                  <Image
-                    src={`${serverUrl}${item}`}
-                    height={180}
-                    lazy
-                    fit='cover'
-                    placeholder={<div className='imLoing'>加载中...</div>}
-                  />
-                </Swiper.Item>
-              ))}
-            </Swiper>
-          </div>
+        {dataRes.id ? (
+          <>
+            {/* 图片 */}
+            {dataRes.imgArr && dataRes.imgArr.length ? (
+              <div className='A2It1'>
+                <Swiper slideSize={80} trackOffset={10} stuckAtBoundary={false}>
+                  {dataRes.imgArr.map(item => (
+                    <Swiper.Item key={item} onClick={() => setLookImg(serverUrl + item)}>
+                      <Image
+                        src={`${serverUrl}${item}`}
+                        height={180}
+                        lazy
+                        fit='cover'
+                        placeholder={<div className='imLoing'>加载中...</div>}
+                      />
+                    </Swiper.Item>
+                  ))}
+                </Swiper>
+              </div>
+            ) : null}
+
+            {/* 下面文字 */}
+            <div
+              ref={sorrlDom}
+              className={classNames(
+                'A2Itxt',
+                dataRes.imgArr && dataRes.imgArr.length ? 'A2ItxtBan' : ''
+              )}
+            >
+              {dataRes.text &&
+                dataRes.text.map(item => (
+                  <div className='A2ItxtRow' key={item.key}>
+                    &emsp;&emsp;
+                    <span className='A2ItxtRow1'>{item.key}</span>：
+                    <span dangerouslySetInnerHTML={{ __html: item.value }}></span>
+                  </div>
+                ))}
+
+              <div
+                className='A2ItxtRow'
+                dangerouslySetInnerHTML={{ __html: dataRes.otherTxt }}
+              ></div>
+            </div>
+          </>
         ) : null}
       </div>
 

code/src/pages/A2show/data.ts

@@ -4,9 +4,7 @@ export type MyInfo1Type = {
   id: number
   title: A2RrBtnType
   imgArr?: string[]
-  text?: {
-    [x: string]: string
-  }
+  text?: { key: string; value: string }[]
   otherTxt: string
 }
 

code/src/pages/A3wear/A3info/index.module.scss

@@ -0,0 +1,63 @@
+.A3info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-size: 100% 100%;
+  padding-top: 90px;
+  :global {
+    .A3It1 {
+      width: 100%;
+      height: 180px;
+      position: relative;
+      z-index: 3;
+      img {
+        border-radius: 6px;
+      }
+      .imLoing {
+        width: 100%;
+        height: 180px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: black;
+        font-size: 16px;
+        letter-spacing: 4px;
+      }
+      .adm-page-indicator-dot-active {
+        background-color: var(--themeColor);
+      }
+    }
+
+    // 文字
+    .A3Itxt {
+      width: 100%;
+      height: calc(100% - 167px);
+      color: #2d0c05;
+      background-size: 100% 100%;
+      position: relative;
+      top: -130px;
+      padding-top: 40px;
+
+      .A3ItxtRow {
+        width: 100%;
+        height: calc(100% - 40px);
+        padding: 0 20px;
+        font-size: 16px;
+        margin-bottom: 8px;
+        letter-spacing: 2px;
+        word-wrap: break-word;
+        text-align: justify;
+        overflow-y: auto;
+        & > p {
+          margin-bottom: 8px;
+        }
+      }
+    }
+    .A3ItxtBan {
+      padding-top: 150px;
+    }
+  }
+}

code/src/pages/A3wear/A3info/index.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import styles from './index.module.scss'
+import { A3BtnType, myInfo2, MyInfo2Type } from '../data'
+import classNames from 'classnames'
+import { Swiper, Image, ImageViewer } from 'antd-mobile'
+
+type Props = {
+  acKey: A3BtnType
+}
+
+function A3info({ acKey }: Props) {
+  // 筛选出选中的数据
+  const dataRes = useMemo(() => {
+    let obj = {} as MyInfo2Type
+    if (acKey) obj = { ...myInfo2.find(v => v.title === acKey)! }
+
+    return obj
+  }, [acKey])
+
+  const [lookImg, setLookImg] = useState('')
+
+  const sorrlDom = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (sorrlDom.current) {
+      sorrlDom.current.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }, [acKey])
+
+  return (
+    <div
+      className={styles.A3info}
+      id='pageShow'
+      style={{ backgroundImage: `url(${serverUrl}home/bac.jpg)` }}
+    >
+      <ImageViewer
+        image={lookImg}
+        visible={!!lookImg}
+        onClose={() => {
+          setLookImg('')
+        }}
+      />
+
+      {dataRes.id ? (
+        <>
+          {/* 图片 */}
+          {dataRes.imgArr && dataRes.imgArr.length ? (
+            <div className='A3It1'>
+              <Swiper slideSize={80} trackOffset={10} stuckAtBoundary={false}>
+                {dataRes.imgArr.map(item => (
+                  <Swiper.Item key={item} onClick={() => setLookImg(serverUrl + item)}>
+                    <Image
+                      src={`${serverUrl}${item}`}
+                      height={180}
+                      lazy
+                      fit='cover'
+                      placeholder={<div className='imLoing'>加载中...</div>}
+                    />
+                  </Swiper.Item>
+                ))}
+              </Swiper>
+            </div>
+          ) : (
+            <div className='A3It1'></div>
+          )}
+
+          {/* 下面文字 */}
+          <div
+            style={{ backgroundImage: `url(${serverUrl}wear/info/bac.png)` }}
+            className={classNames(
+              'A3Itxt',
+              dataRes.imgArr && dataRes.imgArr.length ? 'A3ItxtBan' : ''
+            )}
+          >
+            <div
+              ref={sorrlDom}
+              className='A3ItxtRow'
+              dangerouslySetInnerHTML={{ __html: dataRes.otherTxt }}
+            ></div>
+          </div>
+        </>
+      ) : null}
+
+      <div className=''></div>
+    </div>
+  )
+}
+
+const MemoA3info = React.memo(A3info)
+
+export default MemoA3info

code/src/pages/A3wear/data.ts

@@ -0,0 +1,10 @@
+export type A3BtnType = '概述' | '佩戴' | '结构' | '步骤'
+
+export type MyInfo2Type = {
+  id: number
+  title: A3BtnType
+  otherTxt: string
+  imgArr?: string[]
+}
+
+export const myInfo2: MyInfo2Type[] = myInfoTemp2

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

@@ -1,4 +1,110 @@
 .A3wear {
+  background-size: 100% 100%;
+  position: relative;
+  overflow: hidden;
   :global {
+    #Z1titie {
+      position: relative;
+      z-index: 101;
+    }
+
+    // 底部按钮
+    .A3btnBox {
+      position: absolute;
+      z-index: 101;
+      bottom: 5%;
+      width: 90%;
+      left: 5%;
+      display: flex;
+      justify-content: center;
+      transition: all 0.3s;
+
+      & > div {
+        margin: 0 5px;
+        width: 84px;
+        height: 34px;
+        background-size: 100% 100%;
+        color: var(--themeColor2);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 16px;
+        letter-spacing: 2px;
+        transition: all 0.3s;
+      }
+    }
+    .A3btnRow {
+      color: #2d0c05;
+    }
+    .A3img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      opacity: 1;
+      pointer-events: auto;
+      transition: opacity 1s;
+      .A3img1 {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        height: 63%;
+        width: auto;
+      }
+      .A3img2 {
+        position: absolute;
+        top: 40%;
+        left: 2%;
+        z-index: 2;
+        height: auto;
+        width: 37%;
+      }
+    }
+
+    .A3imgHide {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .A3video {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 1s;
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .A3Vbtn {
+        position: absolute;
+        bottom: 3%;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 2;
+        width: 38%;
+        height: 5%;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #2d0c05;
+        font-size: 18px;
+        letter-spacing: 2px;
+      }
+    }
+    .A3videoAc {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }

code/src/pages/A3wear/index.tsx

@@ -1,9 +1,89 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
+import Z1titie from '@/components/Z1titie'
+import history from '@/utils/history'
+import classNames from 'classnames'
+import { myInfo2 } from './data'
+import A3info from './A3info'
+
 function A3wear() {
+  const [move, setMove] = useState(false)
+
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (videoRef.current && move) {
+      videoRef.current.currentTime = 0
+      videoRef.current.play()
+    }
+  }, [move])
+
+  const [tab, setTab] = useState('')
+
   return (
-    <div className={styles.A3wear}>
-      <h1>A3wear</h1>
+    <div
+      className={styles.A3wear}
+      style={{ backgroundImage: `url(${serverUrl}show/bac.jpg)` }}
+    >
+      <Z1titie
+        title={move || tab ? '璏式佩剑法' : '佩带方式'}
+        backFu={() => {
+          if (tab) setTab('')
+          else history.push('/show')
+        }}
+      />
+      {/* 底部按钮 */}
+      <div className='A3btnBox' hidden={move}>
+        {myInfo2.map(item => (
+          <div
+            className={classNames(tab === item.title ? 'A3btnRow' : '')}
+            key={item.id}
+            onClick={() => setTab(item.title)}
+            style={{
+              backgroundImage: `url(${serverUrl}model/btn${
+                tab === item.title ? 'ac' : ''
+              }.png)`
+            }}
+          >
+            {item.title}
+          </div>
+        ))}
+      </div>
+
+      {/* 外层图片 */}
+      <div className={classNames('A3img', move ? 'A3imgHide' : '')}>
+        <img className='A3img1' src={`${serverUrl}wear/ren.png`} alt='' />
+        <img
+          className='A3img2'
+          src={`${serverUrl}wear/bs.png`}
+          alt=''
+          onClick={() => setMove(true)}
+        />
+      </div>
+
+      {/* 视频盒子 */}
+      <div className={classNames('A3video', move ? 'A3videoAc' : '')}>
+        <video
+          ref={videoRef}
+          playsInline
+          muted={true}
+          webkit-playsinline='true'
+          x5-video-player-type='h5'
+        >
+          <source type='video/mp4' src={serverUrl + 'wear/video.mp4'} />
+          Your browser does not support the video tag.
+        </video>
+
+        {/* 底部按钮 */}
+        <div
+          onClick={() => setMove(false)}
+          className='A3Vbtn'
+          style={{ backgroundImage: `url(${serverUrl}show/btn.png)` }}
+        >
+          返回
+        </div>
+      </div>
+      {tab ? <A3info acKey={tab as '概述'} /> : null}
     </div>
   )
 }