up

H5/src/assets/styles/base.css

@@ -227,12 +227,21 @@ textarea {
   0% {
     opacity: 1;
   }
-  100% {
+  25% {
     opacity: 0.3;
   }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0.8;
+  }
 }
 .A1rowAcMove {
-  animation: A1rowAcMove 1s infinite alternate;
+  animation: A1rowAcMove 1.5s forwards;
 }
 @keyframes A1info {
   0% {

H5/src/assets/styles/base.less

@@ -347,12 +347,21 @@ textarea {
   0% {
     opacity: 1;
   }
-  100% {
+  25% {
     opacity: 0.3;
   }
+  50% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 0.8;
+  }
 }
 .A1rowAcMove {
-  animation: A1rowAcMove 1s infinite alternate;
+  animation: A1rowAcMove 1.5s forwards;
 }
 
 // 详情页打开透明度停在最后

H5/src/pages/A1home/A1info/index.module.scss

@@ -4,7 +4,8 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #857662;
+  background-color: #5f5244;
+  // background: linear-gradient(#584735, #dfd4bb);
   z-index: 100;
   overflow: hidden;
   :global {
@@ -33,6 +34,7 @@
       left: 0;
       background-color: #f8f3e7;
       background-position: 0 100%;
+      background-size: 100% auto;
       background-repeat: no-repeat;
       border-radius: 20px 20px 0 0;
       z-index: 11;

H5/src/pages/A1home/A1info/index.tsx

@@ -30,12 +30,7 @@ function A1info({ info, closeFu }: Props) {
       <img className='A1Dclose' src={myUrl + 'img/close.png'} alt='' onClick={closeFu} />
 
       <div className='A1Dtop'>
-        <iframe
-          id='ifr'
-          src={`${myUrl}modelHtml/model.html?m=${info.modelName}`}
-          frameBorder='0'
-          title='model'
-        ></iframe>
+        <iframe id='ifr' src={info.modelUrl} frameBorder='0' title='model'></iframe>
       </div>
 
       {/* 内容主体 */}

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

@@ -33,7 +33,7 @@
           left: 0;
           width: 40%;
           height: 100%;
-          & > img {
+          .A1Rimg_1 {
             position: absolute;
             top: 50%;
             left: 50%;
@@ -41,6 +41,23 @@
             height: 120px;
             width: auto;
             max-width: 120px;
+            z-index: 11;
+          }
+          .A1Rimg_2 {
+            opacity: 0;
+            transition: all 0.5s;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            max-width: 9999px;
+            max-height: 9999px;
+            width: 130%;
+            height: 130%;
+            z-index: 10;
+          }
+          .A1Rimg_2Ac {
+            opacity: 1;
           }
         }
         .A1Rtxt {

H5/src/pages/A1home/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { HomeDataRow, myData, myUrl } from '@/utils/history'
 import classNmaes from 'classnames'
@@ -9,22 +9,8 @@ function A1home() {
 
   const [moveId, setMoveId] = useState(0)
 
-  const timeRef = useRef(-1)
-
-  const [time, setTime] = useState(false)
-  const timeValRef = useRef(false)
-
-  useEffect(() => {
-    timeValRef.current = time
-  }, [time])
-
-  useEffect(() => {
-    if (moveId) {
-      timeRef.current = window.setInterval(() => {
-        setTime(!timeValRef.current)
-      }, 500)
-    } else clearInterval(timeRef.current)
-  }, [moveId])
+  // apng动画展示
+  const [apng, setApng] = useState(false)
 
   useEffect(() => {
     const urlAll = window.location.href
@@ -37,8 +23,10 @@ function A1home() {
           setMoveId(id)
 
           setTimeout(() => {
-            setMoveId(0)
-          }, 5000)
+            // setMoveId(0)
+            setApng(true)
+            // console.log('xxxx')
+          }, 1500)
 
           domRef.current.scrollTo({
             top: (index - 1) * 190,
@@ -52,10 +40,19 @@ function A1home() {
   // 打开详情
   const [open, setOpen] = useState({} as HomeDataRow)
 
+  // 终止动画
+  const stopMoveFu = useCallback(() => {
+    // setMoveId(0)
+    setApng(false)
+  }, [])
+
   return (
     <div
       className={styles.A1home}
       style={{ backgroundImage: `url(${myUrl + myData.homeBg})` }}
+      onTouchEnd={() => {
+        stopMoveFu()
+      }}
     >
       <div className='homeTitleImg'>
         <img src={myUrl + myData.homeTitleImg} alt='' />
@@ -66,13 +63,21 @@ function A1home() {
           <div
             onClick={() => {
               setOpen(v)
-              setMoveId(0)
+              stopMoveFu()
             }}
             className={classNmaes('A1row', moveId === v.id ? 'A1rowAcMove' : '')}
             key={v.id}
           >
             <div className='A1Rimg'>
-              <img src={myUrl + v.cover} alt='' />
+              <img className='A1Rimg_1' src={myUrl + v.cover} alt='' />
+              <img
+                className={classNmaes(
+                  'A1Rimg_2',
+                  moveId === v.id && apng ? 'A1Rimg_2Ac' : ''
+                )}
+                src={myUrl + 'img/200.png'}
+                alt=''
+              />
             </div>
             <div className='A1Rtxt'>
               <div

H5/src/utils/history.ts

@@ -20,7 +20,7 @@ export type HomeDataRow = {
   id: number
   name: string
   cover: string
-  modelName: string
+  modelUrl: string
   txt: string
   text: string
   age: string

H5/src/utils/http.ts

@@ -99,6 +99,23 @@ http.interceptors.response.use(
           }
         } else MessageFu.error('响应错误，请联系管理员!')
       }
+
+      // 故障恢复
+      // 记录初始错误时间搓和错误返回值
+      // const errTime = Date.now()
+      // const errCode = err.response.data.code
+      // // 每次故障向服务器发送当前故障时间戳，当故障时间超过30分钟且是同一个错误码，刷新页面，并且告知后端重启服务器
+      // const res: any = http.post('cms/errCode', { errTime, errCode })
+      // if (res.code === 0) {
+      //   if (res.data) {
+      //     // 先通知后端重启服务器，
+      //     const res2: any = http.get('cms/refresh')
+      //     if (res2.code === 0) {
+      //       // 然后刷新页面
+      //       window.location.reload()
+      //     }
+      //   }
+      // }
     }, 100)
 
     return Promise.reject(err)

静态资源/myData/modelHtml/model.html

@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="./4dage.js"></script>
-  <title>Document</title>
-  <style>
-    html {
-      overflow: hidden;
-    }
-
-    .bacBox {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: #857662;
-      opacity: 1;
-      transition: all 0.3s;
-      z-index: 998;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="ui"></div>
-  <div class="bacBox"></div>
-  <script>
-    let m = getQueryVariable("m");
-
-
-    // window.autoRotate = true; // 是否自动旋转
-
-    // fdage.embed( number, {
-    fdage.embed(`../model/${m}`, {
-      transparentBackground: true,
-      width: 800,
-      height: 600,
-      autoStart: true,
-      fullFrame: true,
-      pagePreset: false
-    });
-  </script>
-</body>
-
-</html>