upp

pc/src/pages/A1_Home/index.tsx

@@ -17,12 +17,14 @@ const sceneArr = [
   {
     id: 1,
     name: "精品文物展厅",
-    path: "/scene/index.html#/?m=KJ-ztJ9nPQyf64",
+    // path: "/scene/index.html#/?m=KJ-ztJ9nPQyf64",
+    path: "https://www.4dkankan.com/spg.html?m=KJ-ztJ9nPQyf64&lang=zh",
   },
   {
     id: 2,
     name: "书画厅",
-    path: "/scene/index.html#/?m=KJ-wlpyvYdFNXN",
+    // path: "/scene/index.html#/?m=KJ-wlpyvYdFNXN",
+    path: "https://www.4dkankan.com/spg.html?m=KJ-wlpyvYdFNXN&lang=zh",
   },
   {
     id: 3,
@@ -32,7 +34,8 @@ const sceneArr = [
   {
     id: 4,
     name: "中国仡佬族民族文化展厅",
-    path: "/scene/index.html#/?m=KJ-Rytmid9ku2a",
+    // path: "/scene/index.html#/?m=KJ-Rytmid9ku2a",
+    path: "https://www.4dkankan.com/spg.html?m=KJ-Rytmid9ku2a&lang=zh",
   },
 ];
 

pc/src/pages/A2_Goods/GoodsInfo/index.module.scss

@@ -19,6 +19,7 @@
       cursor: pointer;
       background-image: url('../../../assets/img/home/icon-close.png');
       background-size: 100% 100%;
+      z-index: 99;
     }
 
     .infoMain {
@@ -43,11 +44,27 @@
         background-image: url('../../../assets/img/goods/infoBac.jpg');
         background-size: 100% 100%;
 
+
+
         .title {
           font-size: 22px;
           font-weight: 700;
           color: var(--themeColor);
           margin-bottom: 24px;
+          position: relative;
+          padding-right: 140px;
+
+          .audioBox {
+            cursor: pointer;
+            position: absolute;
+            right: 100px;
+            top: -4px;
+            z-index: 99;
+
+            &>img {
+              width: 40px;
+            }
+          }
         }
 
         .infoP {

pc/src/pages/A2_Goods/GoodsInfo/index.tsx

@@ -1,8 +1,11 @@
 /* eslint-disable jsx-a11y/iframe-has-title */
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import { GoodsType } from "@/utils/data";
 import classNames from "classnames";
+import { audioUrl } from "@/utils/env";
+import musicImg from "@/assets/img/goods/icon-music.png";
+import musicImgX from "@/assets/img/goods/icon-musicX.png";
 
 type Props = {
   data: GoodsType;
@@ -10,6 +13,29 @@ type Props = {
 };
 
 function GoodsInfo({ data, closePageFu }: Props) {
+  // 音频的播放和暂停
+  const [audioSta, setAudioSta] = useState(false);
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  useEffect(() => {
+    const dom = audioRef.current;
+    if (dom) {
+      if (audioSta) {
+        dom.play();
+        dom.onended = () => {
+          // 音频播放结束
+          setAudioSta(false);
+        };
+      } else {
+        dom.pause();
+      }
+    }
+  }, [audioSta]);
+
+  useEffect(() => {
+    if (!data.id) setAudioSta(false);
+  }, [data.id]);
+
   return (
     <div
       className={classNames(
@@ -21,17 +47,33 @@ function GoodsInfo({ data, closePageFu }: Props) {
       <div className="close" onClick={() => closePageFu()}></div>
       {data.id ? (
         <div className="infoMain">
+          {/* 音频 */}
+          <audio ref={audioRef} src={`${audioUrl}${data.id}.mp3`}></audio>
+
           {/* 左边模型 */}
           <div className="infoL">
             <iframe src={data.link} frameBorder="0"></iframe>
           </div>
           {/* 右边信息 */}
           <div className="infoR">
-            <div className="title">{data.name}</div>
+            <div className="title">
+              {data.name}
+              <div
+                hidden
+                className="audioBox"
+                title={audioSta ? "关闭音频" : "打开音频"}
+                onClick={() => setAudioSta(!audioSta)}
+              >
+                <img src={audioSta ? musicImg : musicImgX} alt="" />
+              </div>
+            </div>
             <div className="infoP">年代：{data.age}</div>
             <div className="infoP">类别：{data.sort}</div>
             <div className="infoP">尺寸：{data.size}</div>
-            <div className="infoTxt" dangerouslySetInnerHTML={{__html:data.intro}}></div>
+            <div
+              className="infoTxt"
+              dangerouslySetInnerHTML={{ __html: data.intro }}
+            ></div>
           </div>
         </div>
       ) : null}

pc/src/utils/env.ts

@@ -0,0 +1,4 @@
+export const audioUrl =
+  process.env.NODE_ENV === "development"
+    ? "http://192.168.20.48:8080/audioAll/"
+    : "/audioAll/";