Startseite Erkunden Hilfe
Registrieren Anmelden
shaogen1995
/
quanGuoZongGongHui
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

差小人动画和首页svg

shaogen1995 vor 3 Wochen
Ursprung
bde81da2da
Commit
cc34ed00e8
16 geänderte Dateien mit 583 neuen und 90 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 15 1
      public/tttt.html
  2. BIN
      src/assets/img/openEgg.png
  3. BIN
      src/assets/img/search.png
  4. 7 22
      src/assets/styles/base.css
  5. 8 25
      src/assets/styles/base.less
  6. 70 0
      src/components/ImagePreview.tsx
  7. 1 1
      src/index.tsx
  8. 4 4
      src/pages/A1home/data.ts
  9. 4 0
      src/pages/A2danList/index.module.scss
  10. 34 11
      src/pages/A2danList/index.tsx
  11. 76 4
      src/pages/A2openEgg/index.module.scss
  12. 80 8
      src/pages/A2openEgg/index.tsx
  13. 5 1
      src/pages/A2scene/index.module.scss
  14. 40 13
      src/pages/A2scene/index.tsx
  15. 147 0
      src/pages/A2search/index.module.scss
  16. 92 0
      src/pages/A2search/index.tsx

+ 15 - 1
public/tttt.html
Datei anzeigen 

@@ -7,6 +7,10 @@
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <button id="btn">子页面按钮-触发彩蛋</button>
 
     <button id="btn">子页面按钮-触发彩蛋</button>
 
+
 
+    <button id="hidden">隐藏右测图标</button>
 
+
 
+    <button id="show">显示右测图标</button>
 
   </body>
 
   </body>
 
 
 
   <script>
 
   <script>
 
@@ -33,7 +37,17 @@
 
     const btnDom = document.querySelector('#btn')
 
     const btnDom = document.querySelector('#btn')
 
     btnDom.onclick = () => {
 
     btnDom.onclick = () => {
 
       // 传sort
 
       // 传sort
 
-      window.parent.FaStrikeEggFu(1)
 
+      window.parent.FaStrikeEggFu(5)
 
+    }
 
+
 
+    const hiddenDom = document.querySelector('#hidden')
 
+    hiddenDom.onclick = () => {
 
+      window.parent.FaIconStateFu(false)
 
+    }
 
+
 
+    const showDom = document.querySelector('#show')
 
+    showDom.onclick = () => {
 
+      window.parent.FaIconStateFu(true)
 
     }
 
     }
 
   </script>
 
   </script>
 
 </html>
 
 </html>

BIN
src/assets/img/openEgg.png
Datei anzeigen


BIN
src/assets/img/search.png
Datei anzeigen


+ 7 - 22
src/assets/styles/base.css
Datei anzeigen 

@@ -35,8 +35,8 @@ textarea {
 
 }
 
 }
 
 /* 主题色 */
 
 /* 主题色 */
 
 :root {
 
 :root {
 
-  --themeColor: #042b8f;
 
-  --themeColor2: #69c690;
 
+  --themeColor: #ff9203;
 
+  --themeColor2: #fffab3;
 
 }
 
 }
 
 /* 找不到页面 */
 
 /* 找不到页面 */
 
 .noFindPage {
 
 .noFindPage {
 
@@ -128,25 +128,6 @@ textarea {
 
 #upInputAudio {
 
 #upInputAudio {
 
   display: none;
 
   display: none;
 
 }
 
 }
 
-.pageTitle {
 
-  font-size: 18px;
 
-  font-weight: 700;
 
-  position: absolute;
 
-  z-index: 11;
 
-  top: -56px;
 
-  left: -18px;
 
-  padding-left: 40px;
 
-}
 
-.pageTitle::before {
 
-  position: absolute;
 
-  left: 20px;
 
-  top: 50%;
 
-  transform: translateY(-50%);
 
-  content: '';
 
-  width: 6px;
 
-  height: 20px;
 
-  background-color: var(--themeColor);
 
-}
 
 .mySorrl::-webkit-scrollbar {
 
 .mySorrl::-webkit-scrollbar {
 
   /*滚动条整体样式*/
 
   /*滚动条整体样式*/
 
   width: 5px;
 
   width: 5px;
 
@@ -157,7 +138,7 @@ textarea {
 
   /*滚动条里面小方块*/
 
   /*滚动条里面小方块*/
 
   border-radius: 10px;
 
   border-radius: 10px;
 
   -webkit-box-shadow: inset 0 0 5px transparent;
 
   -webkit-box-shadow: inset 0 0 5px transparent;
 
-  background: var(--themeColor);
 
+  background: var(--themeColor2);
 
 }
 
 }
 
 .mySorrl::-webkit-scrollbar-track {
 
 .mySorrl::-webkit-scrollbar-track {
 
   /*滚动条里面轨道*/
 
   /*滚动条里面轨道*/
 
@@ -230,3 +211,7 @@ textarea {
 
     opacity: 1;
 
     opacity: 1;
 
   }
 
   }
 
 }
 
 }
 
+.ant-image-preview-mask {
 
+  background-color: rgba(0, 0, 0, 0.6) !important;
 
+  backdrop-filter: blur(6px);
 
+}

+ 8 - 25
src/assets/styles/base.less
Datei anzeigen 

@@ -46,8 +46,8 @@ textarea {
 
 /* 主题色 */
 
 /* 主题色 */
 
 :root {
 
 :root {
 
   // --themeColor: #69c790;
 
   // --themeColor: #69c790;
 
-  --themeColor: #042b8f;
 
-  --themeColor2: #69c690;
 
+  --themeColor: #ff9203;
 
+  --themeColor2: #fffab3;
 
 }
 
 }
 
 
 
 /* 找不到页面 */
 
 /* 找不到页面 */
 
@@ -227,28 +227,6 @@ textarea {
 
   display: none;
 
   display: none;
 
 }
 
 }
 
 
 
-// 页面标题
 
-.pageTitle {
 
-  font-size: 18px;
 
-  font-weight: 700;
 
-  position: absolute;
 
-  z-index: 11;
 
-  top: -56px;
 
-  left: -18px;
 
-  padding-left: 40px;
 
-
 
-  &::before {
 
-    position: absolute;
 
-    left: 20px;
 
-    top: 50%;
 
-    transform: translateY(-50%);
 
-    content: '';
 
-    width: 6px;
 
-    height: 20px;
 
-    background-color: var(--themeColor);
 
-  }
 
-}
 
-
 
 // 滚动条
 
 // 滚动条
 
 .mySorrl::-webkit-scrollbar {
 
 .mySorrl::-webkit-scrollbar {
 
   /*滚动条整体样式*/
 
   /*滚动条整体样式*/
 
@@ -261,7 +239,7 @@ textarea {
 
   /*滚动条里面小方块*/
 
   /*滚动条里面小方块*/
 
   border-radius: 10px;
 
   border-radius: 10px;
 
   -webkit-box-shadow: inset 0 0 5px transparent;
 
   -webkit-box-shadow: inset 0 0 5px transparent;
 
-  background: var(--themeColor);
 
+  background: var(--themeColor2);
 
 }
 
 }
 
 
 
 .mySorrl::-webkit-scrollbar-track {
 
 .mySorrl::-webkit-scrollbar-track {
 
@@ -351,3 +329,8 @@ textarea {
 
     opacity: 1;
 
     opacity: 1;
 
   }
 
   }
 
 }
 
 }
 
+
 
+.ant-image-preview-mask {
 
+  background-color: rgba(0, 0, 0, 0.6) !important;
 
+  backdrop-filter: blur(6px);
 
+}

+ 70 - 0
src/components/ImagePreview.tsx
Datei anzeigen 

@@ -0,0 +1,70 @@
 
+import React, { useState, useImperativeHandle, forwardRef } from 'react'
 
+import { Image } from 'antd'
 
+
 
+export interface ImagePreviewRef {
 
+  openPreview: (imageList: string[], startIndex?: number) => void
 
+}
 
+
 
+const ImagePreview = forwardRef<ImagePreviewRef>((props, ref) => {
 
+  const [previewVisible, setPreviewVisible] = useState(false)
 
+  const [previewCurrent, setPreviewCurrent] = useState(0)
 
+  const [previewImages, setPreviewImages] = useState<string[]>([])
 
+
 
+  // 暴露命令式方法给外部组件
 
+  useImperativeHandle(ref, () => ({
 
+    openPreview: (imageList, startIndex = 0) => {
 
+      if (!imageList || imageList.length === 0) return
 
+
 
+      setPreviewImages(imageList)
 
+      setPreviewCurrent(startIndex) // 设置从哪张图片开始预览
 
+      setPreviewVisible(true) // 打开预览
 
+    }
 
+  }))
 
+
 
+  const handlePreviewChange = (current: number, prevCurrent: number) => {
 
+    // 当用户在预览图中切换时，更新当前索引
 
+    setPreviewCurrent(current)
 
+  }
 
+
 
+  const handleVisibleChange = (visible: boolean) => {
 
+    // 当用户关闭预览时，重置状态
 
+    if (!visible) {
 
+      setPreviewVisible(false)
 
+      setPreviewCurrent(0)
 
+    }
 
+  }
 
+
 
+  return (
 
+    <>
 
+      {/* 
+        渲染一个预览组。
 
+        Ant Design 5.10.0+ 支持通过 `items` 属性直接传入图片 URL 数组进行预览。
 
+        对于更早的版本，你可能需要映射 previewImages 来渲染多个隐藏的 Image 组件。
 
+      */}
 
+      <Image.PreviewGroup
 
+        preview={{
 
+          visible: previewVisible,
 
+          current: previewCurrent,
 
+          onVisibleChange: handleVisibleChange,
 
+          onChange: handlePreviewChange
 
+          // 其他预览配置项，如缩放工具栏、旋转等
 
+        }}
 
+        items={previewImages} // AntD 5.10.0+ 支持
 
+      >
 
+        {/* 
+          对于 AntD < 5.10.0 的版本，可以这样渲染（但通常隐藏这些图片）：
 
+          {previewImages.map((src, index) => (
 
+            <Image
 
+              key={index}
 
+              src={src}
 
+              style={{ display: 'none' }}
 
+              // 或者 width: 0, height: 0
 
+            />
 
+          ))}
 
+        */}
 
+      </Image.PreviewGroup>
 
+    </>
 
+  )
 
+})
 
+
 
+export default ImagePreview

+ 1 - 1
src/index.tsx
Datei anzeigen 

@@ -22,7 +22,7 @@ root.render(
 
     locale={locale}
 
     locale={locale}
 
     theme={{
 
     theme={{
 
       token: {
 
       token: {
 
-        colorPrimary: '#042b8f'
 
+        colorPrimary: '#ff9203'
 
       }
 
       }
 
     }}
 
     }}
 
   >
 
   >

+ 4 - 4
src/pages/A1home/data.ts
Datei anzeigen 

@@ -2,25 +2,25 @@ export const idChangeArr = [
 
   {
 
   {
 
     id: 'id_河南',
 
     id: 'id_河南',
 
     code: 'SG-lyCYX1XvV5b',
 
     code: 'SG-lyCYX1XvV5b',
 
-    name: '',
 
+    name: 'tag_河南name',
 
     tabName: 'tag_河南'
 
     tabName: 'tag_河南'
 
   },
 
   },
 
   {
 
   {
 
     id: 'id_山东',
 
     id: 'id_山东',
 
     code: 'SG-nmH57yoIjAK',
 
     code: 'SG-nmH57yoIjAK',
 
-    name: '',
 
+    name: 'tag_山东name',
 
     tabName: 'tag_山东'
 
     tabName: 'tag_山东'
 
   },
 
   },
 
   {
 
   {
 
     id: 'id_国防邮电',
 
     id: 'id_国防邮电',
 
     code: 'SG-S3nHAkNO0Lc',
 
     code: 'SG-S3nHAkNO0Lc',
 
-    name: '',
 
+    name: 'tag_国防邮电tag_国防邮电tag_国防邮电tag_国防邮电tag_国防邮电tag_国防邮电name',
 
     tabName: 'tag_国防邮电'
 
     tabName: 'tag_国防邮电'
 
   },
 
   },
 
   {
 
   {
 
     id: 'id_铁路',
 
     id: 'id_铁路',
 
     code: 'SG-4cOtHp4T3Ax',
 
     code: 'SG-4cOtHp4T3Ax',
 
-    name: '',
 
+    name: 'tag_铁路',
 
     tabName: 'tag_铁路'
 
     tabName: 'tag_铁路'
 
   },
 
   },
 
   {
 
   {

+ 4 - 0
src/pages/A2danList/index.module.scss
Datei anzeigen 

@@ -18,6 +18,9 @@
 
         width: 49%;
 
         width: 49%;
 
         height: 100px;
 
         height: 100px;
 
         margin-bottom: 10px;
 
         margin-bottom: 10px;
 
+        .adm-image {
 
+          cursor: pointer;
 
+        }
 
         img {
 
         img {
 
           width: 100%;
 
           width: 100%;
 
           height: 100px;
 
           height: 100px;
 
@@ -60,6 +63,7 @@
 
     }
 
     }
 
 
 
     .A2Dclose {
 
     .A2Dclose {
 
+      cursor: pointer;
 
       width: 36px;
 
       width: 36px;
 
       height: 36px;
 
       height: 36px;
 
       color: #fff;
 
       color: #fff;

+ 34 - 11
src/pages/A2danList/index.tsx
Datei anzeigen 

@@ -1,10 +1,13 @@
 
-import React, { useMemo, useRef, useState } from 'react'
 
+import React, { useCallback, useMemo, useRef } from 'react'
 
 import styles from './index.module.scss'
 
 import styles from './index.module.scss'
 
 import { useSelector } from 'react-redux'
 
 import { useSelector } from 'react-redux'
 
 import { RootState } from '@/store'
 
 import { RootState } from '@/store'
 
 import { CloseOutlined } from '@ant-design/icons'
 
 import { CloseOutlined } from '@ant-design/icons'
 
 import nullDanImg from '@/assets/img/nullDan.png'
 
 import nullDanImg from '@/assets/img/nullDan.png'
 
 import { Image, ImageViewer } from 'antd-mobile'
 
 import { Image, ImageViewer } from 'antd-mobile'
 
+import { isMobileFu } from '@/utils/history'
 
+import ImagePreview, { ImagePreviewRef } from '@/components/ImagePreview'
 
+import classNames from 'classnames'
 
 
 
 type Props = {
 
 type Props = {
 
   closeFu: () => void
 
   closeFu: () => void
 
@@ -18,22 +21,42 @@ function A2danList({ closeFu }: Props) {
 
     return list.filter(v => v.flag)
 
     return list.filter(v => v.flag)
 
   }, [list])
 
   }, [list])
 
 
 
+  // 查看图片
 
+  const imagePreviewRef = useRef<ImagePreviewRef>(null)
 
+
 
+  const lookImgFu = useCallback(
 
+    (id: string) => {
 
+      const ind = listRes.findIndex(v => v.id === id)
 
+
 
+      const imgList = listRes.map(v => v.imgUrl)
 
+
 
+      if (ind >= 0) {
 
+        if (isMobileFu()) {
 
+          ImageViewer.Multi.show({
 
+            images: imgList,
 
+            defaultIndex: ind
 
+          })
 
+        } else {
 
+          if (imagePreviewRef.current) {
 
+            // 命令式调用，预览第二张图片（索引为1）
 
+            imagePreviewRef.current.openPreview(imgList, ind)
 
+          }
 
+        }
 
+      }
 
+    },
 
+    [listRes]
 
+  )
 
+
 
   return (
 
   return (
 
     <div className={styles.A2danList} id='A2openHome'>
 
     <div className={styles.A2danList} id='A2openHome'>
 
-      <div className='A2Dmain'>
 
+      {isMobileFu() ? null : <ImagePreview ref={imagePreviewRef} />}
 
+
 
+      <div className={classNames('A2Dmain', isMobileFu() ? '' : 'mySorrl')}>
 
         {list.map(item => (
 
         {list.map(item => (
 
           <div className='A2Drow' key={item.id}>
 
           <div className='A2Drow' key={item.id}>
 
             {item.flag ? (
 
             {item.flag ? (
 
               <Image
 
               <Image
 
-                onClick={() => {
 
-                  const ind = listRes.findIndex(v => v.id === item.id)
 
-                  if (ind >= 0) {
 
-                    ImageViewer.Multi.show({
 
-                      images: listRes.map(v => v.imgUrl),
 
-                      defaultIndex: ind
 
-                    })
 
-                  }
 
-                }}
 
+                onClick={() => lookImgFu(item.id)}
 
                 lazy
 
                 lazy
 
                 src={item.imgUrl}
 
                 src={item.imgUrl}
 
                 placeholder={<div className='imgLoding'>加载中...</div>}
 
                 placeholder={<div className='imgLoding'>加载中...</div>}

+ 76 - 4
src/pages/A2openEgg/index.module.scss
Datei anzeigen 

@@ -1,5 +1,77 @@
 
-.AAAAA{
 
-  :global{
 
-    
+.A2openEgg {
 
+  background-color: rgba(0, 0, 0, 0.6);
 
+  backdrop-filter: blur(4px);
 
+
 
+  :global {
 
+    .A2Omain {
 
+      width: 100%;
 
+      height: 100%;
 
+      position: relative;
 
+      max-width: 500px;
 
+      margin: 0 auto;
 
+      // 关闭按钮
 
+      .A2ObtnX {
 
+        cursor: pointer;
 
+        position: absolute;
 
+        z-index: 10;
 
+        bottom: 38px;
 
+        left: 50%;
 
+        transform: translateX(-50%);
 
+        width: 36px;
 
+        height: 36px;
 
+        color: #fff;
 
+        border-radius: 18px;
 
+        border: 1px solid #fff;
 
+        font-size: 22px;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+      }
 
+
 
+      .A2OimgShow {
 
+        cursor: pointer;
 
+        position: absolute;
 
+        top: 0;
 
+        left: 0;
 
+        z-index: 20;
 
+        width: 100%;
 
+        height: calc(100% - 90px);
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        padding: 0 20px;
 
+        transition: all 0.3s;
 
+
 
+        // 加载中
 
+        .imgLoding {
 
+          width: 100%;
 
+          height: 200px;
 
+          display: flex;
 
+          justify-content: center;
 
+          align-items: center;
 
+          color: #fff674;
 
+        }
 
+
 
+        .adm-image {
 
+          width: 100%;
 
+          min-height: 200px;
 
+          // 图片加载失败
 
+          .adm-image-tip {
 
+            height: 200px;
 
+          }
 
+        }
 
+      }
 
+
 
+      .A2OimgMove {
 
+        width: 100%;
 
+        height: calc(100% - 90px);
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        & > img {
 
+          transition: all 0.3s;
 
+        }
 
+      }
 
+    }
 
   }
 
   }
 
-}
 
+}

+ 80 - 8
src/pages/A2openEgg/index.tsx
Datei anzeigen 

@@ -1,14 +1,86 @@
 
-import React from "react";
 
-import styles from "./index.module.scss";
 
- function AAAAA() {
 
-  
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 
+import styles from './index.module.scss'
 
+import { Image, ImageViewer } from 'antd-mobile'
 
+import { CloseOutlined } from '@ant-design/icons'
 
+import { isMobileFu } from '@/utils/history'
 
+import { domShowFu } from '@/utils/domShow'
 
+import ImagePreview, { ImagePreviewRef } from '@/components/ImagePreview'
 
+
 
+type Props = {
 
+  closeFu: () => void
 
+  url: string
 
+}
 
+
 
+function A2openEgg({ closeFu, url }: Props) {
 
+  // 先隐藏图片，等图片loding完
 
+  const [imgShow, setImgShow] = useState(false)
 
+
 
+  useEffect(() => {
 
+    if (imgShow) {
 
+      domShowFu('#AsyncSpinLoding', false)
 
+      setTimeout(() => {
 
+        setMoveEnd(true)
 
+      }, 2200)
 
+    } else {
 
+      domShowFu('#AsyncSpinLoding', true)
 
+    }
 
+  }, [imgShow])
 
+
 
+  const [moveEnd, setMoveEnd] = useState(false)
 
+
 
+  const imagePreviewRef = useRef<ImagePreviewRef>(null)
 
+
 
+  // 查看图片
 
+  const lookImgFu = useCallback(() => {
 
+    if (isMobileFu()) {
 
+      ImageViewer.show({
 
+        image: url
 
+      })
 
+    } else {
 
+      if (imagePreviewRef.current) {
 
+        // 命令式调用，预览第二张图片（索引为1）
 
+        imagePreviewRef.current.openPreview([url], 0)
 
+      }
 
+    }
 
+  }, [url])
 
+
 
   return (
 
   return (
 
-    <div className={styles.AAAAA}>
 
-      <h1>AAAAA</h1>
 
+    <div className={styles.A2openEgg} id='A2openHome'>
 
+      {isMobileFu() ? null : <ImagePreview ref={imagePreviewRef} />}
 
+
 
+      <div className='A2Omain'>
 
+        {/* 先进行一段动画，然后显示图片。待完善 */}
 
+        {moveEnd ? null : (
 
+          <div className='A2OimgMove'>
 
+            <img
 
+              style={{ opacity: imgShow ? 1 : 0 }}
 
+              onLoad={() => setImgShow(true)}
 
+              src={require('@/assets/img/openEgg.png')}
 
+              alt=''
 
+            />
 
+          </div>
 
+        )}
 
+
 
+        {imgShow ? (
 
+          <div className='A2OimgShow' style={{ opacity: moveEnd ? 1 : 0 }}>
 
+            <Image
 
+              onClick={lookImgFu}
 
+              lazy
 
+              src={url}
 
+              placeholder={<div className='imgLoding'>加载中...</div>}
 
+            />
 
+          </div>
 
+        ) : null}
 
+
 
+        {/* 关闭按钮 */}
 
+        <div className='A2ObtnX' onClick={closeFu} hidden={!moveEnd}>
 
+          <CloseOutlined rev={undefined} />
 
+        </div>
 
+      </div>
 
     </div>
 
     </div>
 
   )
 
   )
 
 }
 
 }
 
 
 
-const MemoAAAAA = React.memo(AAAAA);
 
+const MemoA2openEgg = React.memo(A2openEgg)
 
 
 
-export default MemoAAAAA;
 
+export default MemoA2openEgg

+ 5 - 1
src/pages/A2scene/index.module.scss
Datei anzeigen 

@@ -12,6 +12,7 @@
 
       }
 
       }
 
       // 右下角数字人
 
       // 右下角数字人
 
       .A2Ren {
 
       .A2Ren {
 
+        cursor: pointer;
 
         position: absolute;
 
         position: absolute;
 
         bottom: 10px;
 
         bottom: 10px;
 
         right: 20px;
 
         right: 20px;
 
@@ -27,6 +28,7 @@
 
       }
 
       }
 
 
 
       .A2showRen {
 
       .A2showRen {
 
+        cursor: pointer;
 
         position: absolute;
 
         position: absolute;
 
         bottom: 80px;
 
         bottom: 80px;
 
         right: 0px;
 
         right: 0px;
 
@@ -93,6 +95,7 @@
 
         }
 
         }
 
       }
 
       }
 
       .A2RenCaoShow {
 
       .A2RenCaoShow {
 
+        cursor: pointer;
 
         opacity: 1;
 
         opacity: 1;
 
         pointer-events: auto;
 
         pointer-events: auto;
 
       }
 
       }
 
@@ -110,8 +113,9 @@
 
       height: 100%;
 
       height: 100%;
 
       z-index: 20;
 
       z-index: 20;
 
     }
 
     }
 
-    // 打开彩蛋
 
+    // 打开彩蛋列表
 
     .openDan {
 
     .openDan {
 
+      cursor: pointer;
 
       position: absolute;
 
       position: absolute;
 
       top: 40%;
 
       top: 40%;
 
       right: 15px;
 
       right: 15px;

+ 40 - 13
src/pages/A2scene/index.tsx
Datei anzeigen 

@@ -10,6 +10,8 @@ import A2danList from '../A2danList'
 
 import { addDanAPI, getDanListApi } from '@/store/action/A1list'
 
 import { addDanAPI, getDanListApi } from '@/store/action/A1list'
 
 import { CloseOutlined, CaretRightOutlined } from '@ant-design/icons'
 
 import { CloseOutlined, CaretRightOutlined } from '@ant-design/icons'
 
 import classNames from 'classnames'
 
 import classNames from 'classnames'
 
+import A2openEgg from '../A2openEgg'
 
+import A2search from '../A2search'
 
 
 
 function A2scene() {
 
 function A2scene() {
 
   const dispatch = useDispatch()
 
   const dispatch = useDispatch()
 
@@ -97,6 +99,9 @@ function A2scene() {
 
     [dispatch, taskId, userPhone]
 
     [dispatch, taskId, userPhone]
 
   )
 
   )
 
 
 
+  // 右侧图标控制显示和隐藏
 
+  const [sonState, setSonState] = useState(true)
 
+
 
   // 子页面调用我的方法 触发彩蛋
 
   // 子页面调用我的方法 触发彩蛋
 
   useEffect(() => {
 
   useEffect(() => {
 
     if (isNumFlag.opc === 1 && isNumFlag.flag) {
 
     if (isNumFlag.opc === 1 && isNumFlag.flag) {
 
@@ -109,6 +114,9 @@ function A2scene() {
 
 
 
         if (obj) addDanFu(obj.id)
 
         if (obj) addDanFu(obj.id)
 
       }
 
       }
 
+      ;(window as any).FaIconStateFu = (flag: boolean) => {
 
+        setSonState(flag)
 
+      }
 
     }
 
     }
 
   }, [addDanFu, isNumFlag])
 
   }, [addDanFu, isNumFlag])
 
 
 
@@ -121,8 +129,26 @@ function A2scene() {
 
   // 解锁彩蛋
 
   // 解锁彩蛋
 
   const [openEgg, setOpenEgg] = useState('')
 
   const [openEgg, setOpenEgg] = useState('')
 
 
 
+  // 搜索场景页面
 
+  const [searchShow, setSearchShow] = useState(false)
 
+
 
   return (
 
   return (
 
     <div className={styles.A2scene}>
 
     <div className={styles.A2scene}>
 
+      <h1
 
+        style={{
 
+          position: 'absolute',
 
+          top: 100,
 
+          left: 0,
 
+          zIndex: 10
 
+        }}
 
+        onClick={() =>
 
+          setOpenEgg(
 
+            'https://sit-yunnanguqiao.4dage.com/bridge/A1record/img/20250829_145201542176.JPG'
 
+          )
 
+        }
 
+      >
 
+        111111
 
+      </h1>
 
       {isNumFlag.flag ? (
 
       {isNumFlag.flag ? (
 
         <div className='A2main' style={{ opacity: isNumFlag.opc }}>
 
         <div className='A2main' style={{ opacity: isNumFlag.opc }}>
 
           <iframe key={code} src='/tttt.html' ref={iframeRef} title='0'></iframe>
 
           <iframe key={code} src='/tttt.html' ref={iframeRef} title='0'></iframe>
 
@@ -135,8 +161,8 @@ function A2scene() {
 
           ></iframe> */}
 
           ></iframe> */}
 
 
 
           {/* 右下角数字人 */}
 
           {/* 右下角数字人 */}
 
-
 
           <div
 
           <div
 
+            hidden={!sonState}
 
             className={classNames('A2showRen', renShow ? '' : 'A2showRenZhuan')}
 
             className={classNames('A2showRen', renShow ? '' : 'A2showRenZhuan')}
 
             onClick={() => setRenShow(!renShow)}
 
             onClick={() => setRenShow(!renShow)}
 
           >
 
           >
 
@@ -144,24 +170,16 @@ function A2scene() {
 
           </div>
 
           </div>
 
 
 
           <div
 
           <div
 
+            hidden={!sonState}
 
             className={classNames('A2Ren', renShow ? '' : 'A2RenHide')}
 
             className={classNames('A2Ren', renShow ? '' : 'A2RenHide')}
 
             onClick={() => setRenCaoShow(!renCaoShow)}
 
             onClick={() => setRenCaoShow(!renCaoShow)}
 
           >
 
           >
 
             <img src={require('@/assets/img/ren.png')} alt='' />
 
             <img src={require('@/assets/img/ren.png')} alt='' />
 
-            {/* <div onClick={isHomeFu}>去首页</div>
 
-            <div
 
-              onClick={() =>
 
-                history.replace(
 
-                  `/scene/SG-4cOtHp4T3Ax?k=${ttsxsysid}&n=${myPhone}&t=${taskId}`
 
-                )
 
-              }
 
-            >
 
-              跳场景
 
-            </div> */}
 
           </div>
 
           </div>
 
 
 
           {/* 点击数字人之后出来的 */}
 
           {/* 点击数字人之后出来的 */}
 
           <div
 
           <div
 
+            hidden={!sonState}
 
             className={classNames(
 
             className={classNames(
 
               'A2RenCao',
 
               'A2RenCao',
 
               renCaoShow ? 'A2RenCaoShow' : '',
 
               renCaoShow ? 'A2RenCaoShow' : '',
 
@@ -175,12 +193,12 @@ function A2scene() {
 
             </div>
 
             </div>
 
             {/* 去首页 */}
 
             {/* 去首页 */}
 
             <div className='A2RenTo' onClick={isHomeFu}></div>
 
             <div className='A2RenTo' onClick={isHomeFu}></div>
 
-            <div className='A2RenTo A2RenTo2'></div>
 
+            <div className='A2RenTo A2RenTo2' onClick={() => setSearchShow(true)}></div>
 
             {/* 进搜索页 */}
 
             {/* 进搜索页 */}
 
           </div>
 
           </div>
 
 
 
           {/* 打开彩蛋 */}
 
           {/* 打开彩蛋 */}
 
-          <div className='openDan' onClick={() => setListShow(true)}>
 
+          <div className='openDan' onClick={() => setListShow(true)} hidden={!sonState}>
 
             <img src={require('@/assets/img/tag.png')} alt='' />
 
             <img src={require('@/assets/img/tag.png')} alt='' />
 
             <div className='openDan1'>{userPhoneNum}</div>
 
             <div className='openDan1'>{userPhoneNum}</div>
 
             <div className='openDan2'>{eggList.filter(v => v.flag).length}</div>
 
             <div className='openDan2'>{eggList.filter(v => v.flag).length}</div>
 
@@ -195,7 +213,16 @@ function A2scene() {
 
         <ErrPage />
 
         <ErrPage />
 
       )}
 
       )}
 
 
 
+      {/* 触发彩蛋成功 */}
 
+      {openEgg ? <A2openEgg closeFu={() => setOpenEgg('')} url={openEgg} /> : null}
 
+
 
+      {/* 打开首页 */}
 
       {isHome ? <A1svgBox id='A2openHome' closeFu={() => setIsHome(false)} /> : null}
 
       {isHome ? <A1svgBox id='A2openHome' closeFu={() => setIsHome(false)} /> : null}
 
+
 
+      {/* 搜索场景页面 */}
 
+      {searchShow ? (
 
+        <A2search closeFu={() => setSearchShow(false)} faCode={code} />
 
+      ) : null}
 
     </div>
 
     </div>
 
   )
 
   )
 
 }
 
 }

+ 147 - 0
src/pages/A2search/index.module.scss
Datei anzeigen 

@@ -0,0 +1,147 @@
 
+.A2search {
 
+  background-color: rgba(0, 0, 0, 0.6);
 
+  backdrop-filter: blur(4px);
 
+  :global {
 
+    // 关闭按钮
 
+    .A2SbtnX {
 
+      cursor: pointer;
 
+      position: absolute;
 
+      z-index: 10;
 
+      bottom: 38px;
 
+      left: 50%;
 
+      transform: translateX(-50%);
 
+      width: 36px;
 
+      height: 36px;
 
+      color: #fff;
 
+      border-radius: 18px;
 
+      border: 1px solid #fff;
 
+      font-size: 22px;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+    }
 
+
 
+    .A2Smain {
 
+      width: 100%;
 
+      height: 100%;
 
+      max-width: 500px;
 
+      padding: 40px 40px 0;
 
+      position: relative;
 
+      margin: 0 auto;
 
+      // 输入框
 
+      .A2SInput {
 
+        width: 100%;
 
+        height: calc(100% - 100px);
 
+
 
+        .A2SInput1 {
 
+          width: 100%;
 
+          height: 36px;
 
+          background-image: url('../../assets/img/search.png');
 
+          background-size: 100% 100%;
 
+          position: relative;
 
+
 
+          input::-webkit-input-placeholder {
 
+            /* WebKit browsers */
 
+            color: #ccc;
 
+          }
 
+
 
+          input:-moz-placeholder {
 
+            /* Mozilla Firefox 4 to 18 */
 
+            color: #ccc;
 
+          }
 
+
 
+          input::-moz-placeholder {
 
+            /* Mozilla Firefox 19+ */
 
+            color: #ccc;
 
+          }
 
+
 
+          input:-ms-input-placeholder {
 
+            /* Internet Explorer 10+ */
 
+            color: #ccc;
 
+          }
 
+
 
+          input {
 
+            font-size: 16px;
 
+            width: 100%;
 
+            padding: 0 20px;
 
+            color: #fff;
 
+            height: 36px;
 
+            line-height: 36px;
 
+            background-color: transparent;
 
+            border: none !important;
 
+            &:focus-visible {
 
+              outline: none;
 
+            }
 
+          }
 
+
 
+          // 点击按钮
 
+          .A2SInputBtn {
 
+            cursor: pointer;
 
+            position: absolute;
 
+            right: 0;
 
+            top: 0;
 
+            width: 15%;
 
+            height: 100%;
 
+          }
 
+        }
 
+
 
+        // pc
 
+        .A2SInput1Pc {
 
+          height: 45px;
 
+          input {
 
+            height: 45px;
 
+            line-height: 45px;
 
+          }
 
+        }
 
+
 
+        // 列表
 
+        .A2Slist {
 
+          width: 100%;
 
+          height: calc(100% - 36px);
 
+          padding: 0 5px;
 
+          & > div {
 
+            width: 100%;
 
+            height: 100%;
 
+            background-color: rgba(0, 0, 0, 0.6);
 
+            padding: 15px 5px 0px 10px;
 
+
 
+            & > div {
 
+              width: 100%;
 
+              height: 100%;
 
+              overflow-y: auto;
 
+
 
+              .A2Srow {
 
+                cursor: pointer;
 
+                background-color: rgba(0, 0, 0, 0.6);
 
+                width: calc(100% - 10px);
 
+                padding: 10px 15px;
 
+                color: #fff;
 
+                font-size: 14px;
 
+                margin-bottom: 10px;
 
+                border-radius: 4px;
 
+                &:hover {
 
+                  color: var(--themeColor);
 
+                }
 
+              }
 
+              .A2SrowAc {
 
+                color: var(--themeColor);
 
+              }
 
+              .A2SrowNull {
 
+                padding: 0 20px;
 
+                width: 100%;
 
+                height: 90%;
 
+                display: flex;
 
+                justify-content: center;
 
+                align-items: center;
 
+                color: #fff;
 
+                font-size: 18px;
 
+                letter-spacing: 4px;
 
+                text-align: center;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 92 - 0
src/pages/A2search/index.tsx
Datei anzeigen 

@@ -0,0 +1,92 @@
 
+import React, { useCallback, useMemo, useState } from 'react'
 
+import styles from './index.module.scss'
 
+import { CloseOutlined } from '@ant-design/icons'
 
+import { Input } from 'antd'
 
+import { idChangeArr } from '../A1home/data'
 
+import history, { isMobileFu } from '@/utils/history'
 
+import { useSelector } from 'react-redux'
 
+import store, { RootState } from '@/store'
 
+import classNames from 'classnames'
 
+
 
+type Props = {
 
+  closeFu: () => void
 
+  faCode: string
 
+}
 
+
 
+function A2search({ closeFu, faCode }: Props) {
 
+  const { ttsxsysid, taskId, myPhone } = useSelector((state: RootState) => state.A0Layout)
 
+
 
+  const [value, setValue] = useState('')
 
+  const [value2, setValue2] = useState('')
 
+
 
+  const toSceneFu = useCallback(
 
+    (code: string) => {
 
+      store.dispatch({ type: 'layout/svgAcGlobal', payload: code })
 
+      history.replace(`/scene/${code}?k=${ttsxsysid}&n=${myPhone}&t=${taskId}`)
 
+      closeFu()
 
+    },
 
+    [closeFu, myPhone, taskId, ttsxsysid]
 
+  )
 
+
 
+  // 列表数据过滤
 
+  const liseRes = useMemo(() => {
 
+    let arr = [...idChangeArr]
 
+    if (value2) arr = arr.filter(v => v.name.includes(value2))
 
+    return arr
 
+  }, [value2])
 
+
 
+  return (
 
+    <div className={styles.A2search} id='A2openHome'>
 
+      <div className='A2Smain'>
 
+        <div className='A2SInput'>
 
+          <div
 
+            className={classNames('A2SInput1', isMobileFu() ? '' : 'A2SInput1Pc')}
 
+            onKeyUp={e => {
 
+              if (e.key === 'Enter') setValue2(value)
 
+            }}
 
+          >
 
+            <Input
 
+              value={value}
 
+              onChange={e => setValue(e.target.value.trim())}
 
+              placeholder='搜索场景'
 
+            />
 
+            {/* 搜索按钮 */}
 
+            <div className='A2SInputBtn' onClick={() => setValue2(value)}></div>
 
+          </div>
 
+
 
+          <div className='A2Slist'>
 
+            <div>
 
+              <div className={classNames(isMobileFu() ? '' : 'mySorrl')}>
 
+                <div className='A2SrowNull' hidden={liseRes.length !== 0}>
 
+                  没有找到相关场景，请检查关键字重新搜索。
 
+                </div>
 
+                {liseRes.map(item => (
 
+                  <div
 
+                    hidden={liseRes.length === 0}
 
+                    key={item.id}
 
+                    className={classNames(
 
+                      'A2Srow',
 
+                      item.code === faCode ? 'A2SrowAc' : ''
 
+                    )}
 
+                    onClick={() => toSceneFu(item.code)}
 
+                  >
 
+                    {item.name || '-'}
 
+                  </div>
 
+                ))}
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        {/* 关闭按钮 */}
 
+        <div className='A2SbtnX' onClick={closeFu}>
 
+          <CloseOutlined rev={undefined} />
 
+        </div>
 
+      </div>
 
+    </div>
 
+  )
 
+}
 
+
 
+const MemoA2search = React.memo(A2search)
 
+
 
+export default MemoA2search