upp

code/package.json

@@ -16,7 +16,7 @@
     "@types/three": "^0.180.0",
     "@zxing/library": "^0.21.3",
     "antd": "^5.27.4",
-    "antd-mobile": "^5.30.0",
+    "antd-mobile": "^5.41.1",
     "axios": "^1.1.3",
     "braft-editor": "^2.3.9",
     "braft-utils": "^3.0.12",

code/public/myData/data.js

@@ -6,7 +6,7 @@ const myInfoTemp1 = [
   {
     id: 1,
     title: '简介',
-    imgArr: [],
+    imgArr: ['show/info/1.jpg', 'show/info/2.jpg'],
     text: {
       名称: '玉柄铁剑（因工艺与规格被称为“楚国第一玉剑”）',
       时代: '春秋中晚期（约公元前6 世纪末至前 5 世纪初）',
@@ -21,7 +21,7 @@ const myInfoTemp1 = [
   {
     id: 2,
     title: '工艺',
-    imgArr: [],
+    imgArr: ['show/info/3.jpg'],
     text: {
       通长: '约 31 厘米',
       剑身: '铁质，长 19.8 厘米，宽 3.1 厘米，中起脊，截面菱形，嵌入玉格。',

code/src/assets/styles/base.css

@@ -223,3 +223,14 @@ textarea {
     pointer-events: auto;
   }
 }
+#pageShow {
+  animation: pageShow 0.5s linear forwards;
+}
+@keyframes pageShow {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

code/src/assets/styles/base.less

@@ -340,3 +340,17 @@ textarea {
     pointer-events: auto;
   }
 }
+
+// 热点页面打开透明的变化
+#pageShow {
+  animation: pageShow 0.5s linear forwards;
+}
+@keyframes pageShow {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,104 @@
+.A2info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-image: linear-gradient(#1a0202, #2d0c03);
+  :global {
+    .A2Iback {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      z-index: 10;
+      height: 34px;
+      width: auto;
+    }
+
+    // 顶部
+    .A2Itop {
+      width: 100%;
+      height: calc(100% - 120px);
+      background-size: 100% 100%;
+      padding-top: 55px;
+      .A2It1 {
+        width: 100%;
+        height: 180px;
+        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;
+        }
+      }
+    }
+
+    // 下面按钮
+    .A2Icut {
+      width: 100%;
+      height: 120px;
+      padding-top: 0px;
+      position: relative;
+      .A2IcutRow {
+        position: absolute;
+        top: 12%;
+        left: 9%;
+        text-align: center;
+        & > div {
+          width: 50px;
+          height: 50px;
+          position: relative;
+          & > img {
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            transition: opacity 0.3s;
+            opacity: 1;
+            position: absolute;
+            width: 46px;
+            height: 46px;
+            &:nth-of-type(2) {
+              width: 100%;
+              height: 100%;
+              opacity: 0;
+            }
+          }
+        }
+        .A2IcutAc {
+          & > img {
+            opacity: 0;
+            &:nth-of-type(2) {
+              opacity: 1;
+            }
+          }
+        }
+        & > p {
+          margin-top: 3px;
+          text-align: center;
+          font-size: 12px;
+          transition: all 0.3s;
+        }
+        &:nth-of-type(2) {
+          top: 26%;
+          left: 32%;
+        }
+        &:nth-of-type(3) {
+          top: 26%;
+          left: 55%;
+        }
+        &:nth-of-type(4) {
+          top: 12%;
+          left: 78%;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,89 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import styles from './index.module.scss'
+import { A2RrBtnType, myInfo1, MyInfo1Type } from '../data'
+import classNames from 'classnames'
+import { Swiper, Image, ImageViewer } from 'antd-mobile'
+
+type Props = {
+  acKey: A2RrBtnType
+  closeFu: () => void
+}
+
+function A2info({ acKey, closeFu }: Props) {
+  const [tabAc, setTabAc] = useState('' as A2RrBtnType)
+
+  useEffect(() => {
+    setTabAc(acKey)
+  }, [acKey])
+
+  // 筛选出选中的数据
+  const dataRes = useMemo(() => {
+    let obj = {} as MyInfo1Type
+    if (tabAc) obj = myInfo1.find(v => v.title === tabAc)!
+    return obj
+  }, [tabAc])
+
+  return (
+    <div className={styles.A2info} id='pageShow'>
+      {/* 返回按钮 */}
+      <img
+        onClick={closeFu}
+        className='A2Iback'
+        src={`${serverUrl}model/back.png`}
+        alt=''
+      />
+
+      {/* 上面介绍 */}
+      <div
+        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>
+        ) : null}
+      </div>
+
+      {/* 下面切换 */}
+      <div className='A2Icut'>
+        <img src={`${serverUrl}show/info/xian.png`} alt='' />
+
+        {myInfo1.map(item => (
+          <div key={item.id} className='A2IcutRow' onClick={() => setTabAc(item.title)}>
+            <div className={classNames(tabAc === item.title ? 'A2IcutAc' : '')}>
+              <img src={`${serverUrl}show/${item.id}.png`} alt='' />
+              <img src={`${serverUrl}show/${item.id}ac.png`} alt='' />
+            </div>
+
+            <p style={{ color: tabAc === item.title ? '#CAA956' : '#fffddc' }}>
+              {item.title}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const MemoA2info = React.memo(A2info)
+
+export default MemoA2info

code/src/pages/A2show/index.tsx

@@ -4,6 +4,7 @@ import Z1titie from '@/components/Z1titie'
 import { myInfo1 } from './data'
 import classNames from 'classnames'
 import history from '@/utils/history'
+import A2info from './A2info'
 
 const btnArr = [
   { name: '三维模型', page: 'model' },
@@ -13,6 +14,9 @@ const btnArr = [
 function A2show() {
   const [rotate, setRotate] = useState(false)
 
+  // 打开详情
+  const [open, setOpen] = useState('')
+
   return (
     <div
       className={styles.A2show}
@@ -28,7 +32,7 @@ function A2show() {
       {/* 右侧图标 */}
       <div className='A2rBtn'>
         {myInfo1.map(item => (
-          <div className='A2rBtnRow' key={item.id}>
+          <div className='A2rBtnRow' key={item.id} onClick={() => setOpen(item.title)}>
             <img src={`${serverUrl}show/${item.id}.png`} alt='' />
             <p>{item.title}</p>
           </div>
@@ -71,6 +75,9 @@ function A2show() {
           </div>
         ))}
       </div>
+
+      {/* 打开详情 */}
+      {open ? <A2info acKey={open as '简介'} closeFu={() => setOpen('')} /> : null}
     </div>
   )
 }

code/yarn.lock

@@ -1313,17 +1313,25 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@floating-ui/core@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.npmmirror.com/@floating-ui/core/-/core-1.3.0.tgz"
-  integrity sha512-vX1WVAdPjZg9DkDkC+zEx/tKtnST6/qcNpwcjeBgco3XRNHz5PUA+ivi/yr6G3o0kMR60uKBJcfOdfzOFI7PMQ==
+"@floating-ui/core@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.3.tgz#462d722f001e23e46d86fd2bd0d21b7693ccb8b7"
+  integrity sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==
+  dependencies:
+    "@floating-ui/utils" "^0.2.10"
 
-"@floating-ui/dom@^1.2.6":
-  version "1.3.0"
-  resolved "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.3.0.tgz"
-  integrity sha512-qIAwejE3r6NeA107u4ELDKkH8+VtgRKdXqtSPaKflL2S2V+doyN+Wt9s5oHKXPDo4E8TaVXaHT3+6BbagH31xw==
+"@floating-ui/dom@^1.4.2":
+  version "1.7.4"
+  resolved "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.4.tgz#ee667549998745c9c3e3e84683b909c31d6c9a77"
+  integrity sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==
   dependencies:
-    "@floating-ui/core" "^1.3.0"
+    "@floating-ui/core" "^1.7.3"
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/utils@^0.2.10":
+  version "0.2.10"
+  resolved "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.10.tgz#a2a1e3812d14525f725d011a73eceb41fef5bc1c"
+  integrity sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==
 
 "@humanwhocodes/config-array@^0.11.6":
   version "0.11.7"
@@ -1710,6 +1718,13 @@
   dependencies:
     "@babel/runtime" "^7.18.0"
 
+"@rc-component/mini-decimal@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz#7b7a362b14a0a54cb5bc6fd2b82731f29f11d9b0"
+  integrity sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==
+  dependencies:
+    "@babel/runtime" "^7.18.0"
+
 "@rc-component/mutate-observer@^1.1.0":
   version "1.1.0"
   resolved "https://registry.npmmirror.com/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz#ee53cc88b78aade3cd0653609215a44779386fd8"
@@ -2584,22 +2599,22 @@
     "@typescript-eslint/types" "5.41.0"
     eslint-visitor-keys "^3.3.0"
 
-"@use-gesture/core@10.2.20":
-  version "10.2.20"
-  resolved "https://registry.npmmirror.com/@use-gesture/core/-/core-10.2.20.tgz"
-  integrity sha512-4lFhHc8so4yIHkBEs641DnEsBxPyhJ5GEjB4PURFDH4p/FcZriH6w99knZgI63zN/MBFfylMyb8+PDuj6RIXKQ==
+"@use-gesture/core@10.3.0":
+  version "10.3.0"
+  resolved "https://registry.npmmirror.com/@use-gesture/core/-/core-10.3.0.tgz#9afd3777a45b2a08990a5dcfcf8d9ddd55b00db9"
+  integrity sha512-rh+6MND31zfHcy9VU3dOZCqGY511lvGcfyJenN4cWZe0u1BH6brBpBddLVXhF2r4BMqWbvxfsbL7D287thJU2A==
 
 "@use-gesture/core@10.3.1":
   version "10.3.1"
   resolved "https://registry.npmmirror.com/@use-gesture/core/-/core-10.3.1.tgz#976c9421e905f0079d49822cfd5c2e56b808fc56"
   integrity sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==
 
-"@use-gesture/react@10.2.20":
-  version "10.2.20"
-  resolved "https://registry.npmmirror.com/@use-gesture/react/-/react-10.2.20.tgz"
-  integrity sha512-KnJq9ZSqprWA6uNhWTUHZqTCh+rfa0j8ehTzqeBhktUPrmTj7yVOBvEQ/vSFU/7d72cGgWSsJ0f5T6GQCHXnvg==
+"@use-gesture/react@10.3.0":
+  version "10.3.0"
+  resolved "https://registry.npmmirror.com/@use-gesture/react/-/react-10.3.0.tgz#180534c821fd635c2853cbcfa813f92c94f27e3f"
+  integrity sha512-3zc+Ve99z4usVP6l9knYVbVnZgfqhKah7sIG+PS2w+vpig2v2OLct05vs+ZXMzwxdNCMka8B+8WlOo0z6Pn6DA==
   dependencies:
-    "@use-gesture/core" "10.2.20"
+    "@use-gesture/core" "10.3.0"
 
 "@use-gesture/react@^10.3.1":
   version "10.3.1"
@@ -2944,23 +2959,26 @@ antd-mobile-v5-count@^1.0.1:
   resolved "https://registry.npmmirror.com/antd-mobile-v5-count/-/antd-mobile-v5-count-1.0.1.tgz"
   integrity sha512-YGsiEDCPUDz3SzfXi6gLZn/HpeSMW+jgPc4qiYUr1fSopg3hkUie2TnooJdExgfiETHefH3Ggs58He0OVfegLA==
 
-antd-mobile@^5.30.0:
-  version "5.30.0"
-  resolved "https://registry.npmmirror.com/antd-mobile/-/antd-mobile-5.30.0.tgz"
-  integrity sha512-M42VrDvFNzTr1OovLa9HezkD2oXmkDERolha9292FNNTvF1QikIcLZA/o1PDP9+0oWvuz59PW1ZfhjTNx6rUyg==
+antd-mobile@^5.41.1:
+  version "5.41.1"
+  resolved "https://registry.npmmirror.com/antd-mobile/-/antd-mobile-5.41.1.tgz#77053503436c4576b140b1170454b38efa211d48"
+  integrity sha512-fS5sTRLKHca5qryEYLGiPDLANK0rbhx8f8xk0Olu6ef00tLe0P9iqHQm0U3UtEBd8S454cilw5uv2J3I79Tbgg==
   dependencies:
-    "@floating-ui/dom" "^1.2.6"
-    "@rc-component/mini-decimal" "^1.0.1"
+    "@floating-ui/dom" "^1.4.2"
+    "@rc-component/mini-decimal" "^1.1.0"
     "@react-spring/web" "~9.6.1"
-    "@use-gesture/react" "10.2.20"
+    "@use-gesture/react" "10.3.0"
     ahooks "^3.7.6"
     antd-mobile-icons "^0.3.0"
     antd-mobile-v5-count "^1.0.1"
     classnames "^2.3.2"
     dayjs "^1.11.7"
-    lodash "^4.17.21"
-    rc-field-form "~1.27.4"
-    rc-util "^5.30.0"
+    deepmerge "^4.3.1"
+    nano-memoize "^3.0.16"
+    rc-field-form "^1.34.2"
+    rc-segmented "~2.4.1"
+    rc-util "^5.44.4"
+    react-fast-compare "^3.2.2"
     react-is "^18.2.0"
     runes2 "^1.1.2"
     staged-components "^1.1.3"
@@ -4214,6 +4232,11 @@ deepmerge@^4.2.2:
   resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
+deepmerge@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 default-gateway@^6.0.3:
   version "6.0.3"
   resolved "https://registry.npmmirror.com/default-gateway/-/default-gateway-6.0.3.tgz"
@@ -7043,6 +7066,11 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+nano-memoize@^3.0.16:
+  version "3.0.16"
+  resolved "https://registry.npmmirror.com/nano-memoize/-/nano-memoize-3.0.16.tgz#454100602713973ac8639bde301e255dd54920ea"
+  integrity sha512-JyK96AKVGAwVeMj3MoMhaSXaUNqgMbCRSQB3trUV8tYZfWEzqUBKdK1qJpfuNXgKeHOx1jv/IEYTM659ly7zUA==
+
 nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz"
@@ -8236,14 +8264,14 @@ rc-dropdown@~4.2.0, rc-dropdown@~4.2.1:
     classnames "^2.2.6"
     rc-util "^5.44.1"
 
-rc-field-form@~1.27.4:
-  version "1.27.4"
-  resolved "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.27.4.tgz"
-  integrity sha512-PQColQnZimGKArnOh8V2907+VzDCXcqtFvHgevDLtqWc/P7YASb/FqntSmdS8q3VND5SHX3Y1vgMIzY22/f/0Q==
+rc-field-form@^1.34.2:
+  version "1.44.0"
+  resolved "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.44.0.tgz#a66548790fbcee8c5432e9f2efcd1b46b090984b"
+  integrity sha512-el7w87fyDUsca63Y/s8qJcq9kNkf/J5h+iTdqG5WsSHLH0e6Usl7QuYSmSVzJMgtp40mOVZIY/W/QP9zwrp1FA==
   dependencies:
     "@babel/runtime" "^7.18.0"
     async-validator "^4.1.0"
-    rc-util "^5.8.0"
+    rc-util "^5.32.2"
 
 rc-field-form@~2.7.0:
   version "2.7.0"
@@ -8418,6 +8446,16 @@ rc-resize-observer@^1.4.0, rc-resize-observer@^1.4.3:
     rc-util "^5.44.1"
     resize-observer-polyfill "^1.5.1"
 
+rc-segmented@~2.4.1:
+  version "2.4.1"
+  resolved "https://registry.npmmirror.com/rc-segmented/-/rc-segmented-2.4.1.tgz#b6bbdd6acf529c1e2ef30fb26fb3851d5966aa00"
+  integrity sha512-KUi+JJFdKnumV9iXlm+BJ00O4NdVBp2TEexLCk6bK1x/RH83TvYKQMzIz/7m3UTRPD08RM/8VG/JNjWgWbd4cw==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-motion "^2.4.4"
+    rc-util "^5.17.0"
+
 rc-segmented@~2.7.0:
   version "2.7.0"
   resolved "https://registry.npmmirror.com/rc-segmented/-/rc-segmented-2.7.0.tgz#f56c2044abf8f03958b3a9a9d32987f10dcc4fc4"
@@ -8545,7 +8583,7 @@ rc-upload@~4.9.2:
     classnames "^2.2.5"
     rc-util "^5.2.0"
 
-rc-util@^5.0.1, rc-util@^5.15.0, rc-util@^5.16.1, rc-util@^5.17.0, rc-util@^5.18.1, rc-util@^5.19.2, rc-util@^5.2.0, rc-util@^5.20.1, rc-util@^5.21.0, rc-util@^5.24.4, rc-util@^5.25.2, rc-util@^5.27.0, rc-util@^5.30.0, rc-util@^5.31.1, rc-util@^5.32.2, rc-util@^5.34.1, rc-util@^5.35.0, rc-util@^5.8.0:
+rc-util@^5.0.1, rc-util@^5.15.0, rc-util@^5.16.1, rc-util@^5.17.0, rc-util@^5.18.1, rc-util@^5.19.2, rc-util@^5.2.0, rc-util@^5.20.1, rc-util@^5.21.0, rc-util@^5.24.4, rc-util@^5.25.2, rc-util@^5.27.0, rc-util@^5.30.0, rc-util@^5.31.1, rc-util@^5.32.2, rc-util@^5.34.1, rc-util@^5.35.0:
   version "5.36.0"
   resolved "https://registry.npmmirror.com/rc-util/-/rc-util-5.36.0.tgz"
   integrity sha512-a4uUvT+UNHvYL+awzbN8H8zAjfduwY4KAp2wQy40wOz3NyBdo3Xhx/EAAPyDkHLoGm535jIACaMhIqExGiAjHw==
@@ -8649,6 +8687,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmmirror.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-fast-compare@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-is@^16.12.0, react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz"