gx

src/pages/A2layout/components/Look/index.module.scss

@@ -145,6 +145,22 @@
           width: 100%;
           height: 100%;
         }
+        .bgMusic {
+          position: absolute;
+          bottom: 60px;
+          right: 15px;
+          width: 38px;
+          height: 38px;
+          cursor: pointer;
+          & > audio {
+            visibility: hidden;
+          }
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
       }
       .right {
         width: 500px;
@@ -152,6 +168,7 @@
         display: flex;
         flex-direction: column;
         gap: 20px;
+        position: relative;
         .oreTitle {
           font-weight: 600;
           font-size: 30px;
@@ -171,6 +188,22 @@
             background: #55555556;
           }
         }
+        .bgMusic {
+          position: absolute;
+          bottom: 10px;
+          right: 10px;
+          width: 50px;
+          height: 50px;
+          cursor: pointer;
+          & > audio {
+            visibility: hidden;
+          }
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+        }
       }
     }
     .back {

src/pages/A2layout/components/Look/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import styles from './index.module.scss'
 import { isMobileFu } from '@/utils/history'
 import { Swiper, SwiperSlide } from 'swiper/react'
@@ -18,6 +18,9 @@ function Look({
 }) {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
   const [selectIndex, setSelectIndex] = useState<number | null>(null)
+  const [isMusicPlay, setIsMusicPlay] = useState<boolean>(false)
+  const audioRef = useRef<HTMLAudioElement>(null)
+
   const swiperRef = useRef<any>(null)
   const iframeRef = useRef<HTMLIFrameElement>(null)
 
@@ -51,6 +54,15 @@ function Look({
     }
   }
 
+  // 添加音乐播放
+  useEffect(() => {
+    if (isMusicPlay && audioRef.current) {
+      audioRef.current.play()
+    } else if (!isMusicPlay && audioRef.current) {
+      audioRef.current.pause()
+    }
+  }, [isMusicPlay])
+
   return (
     <div className={styles.look} style={style}>
       {/* 顶部仅在pc端显示 */}
@@ -104,6 +116,7 @@ function Look({
                     }}
                   >
                     <div className='itemImage'>
+
                       <img
                         src={hoveredIndex === index ? item.activeImg : item.img}
                         alt={item.title}
@@ -146,6 +159,7 @@ function Look({
             onClick={() => {
               setSelectIndex(null)
               setIsHideSider(false)
+              setIsMusicPlay(false)
             }}
           >
             <img src={require('@/assets/img/back.png')} alt='' />
@@ -162,6 +176,15 @@ function Look({
                 src={selectIndex !== null ? oreData[selectIndex].modelSrc : ''}
                 allow='src'
               />
+              {isMobileFu() && <div className="bgMusic">
+                <audio src={oreData[selectIndex].musicSrc} ref={audioRef} loop />
+                <img
+                  src={isMusicPlay ? require('@/assets/img/Volume btn_on.png') : require('@/assets/img/Volume btn_off.png')}
+                  draggable="false"
+                  alt=""
+                  onClick={() => setIsMusicPlay(!isMusicPlay)}
+                />
+              </div>}
             </div>
             <div className='right'>
               <div className='oreTitle'>
@@ -169,6 +192,15 @@ function Look({
               </div>
               <div className='intro' dangerouslySetInnerHTML={{ __html: selectIndex !== null ? oreData[selectIndex].text : '' }}>
               </div>
+              {!isMobileFu() && <div className="bgMusic">
+                <audio src={oreData[selectIndex].musicSrc} ref={audioRef} loop />
+                <img
+                  src={isMusicPlay ? require('@/assets/img/Volume btn_on.png') : require('@/assets/img/Volume btn_off.png')}
+                  draggable="false"
+                  alt=""
+                  onClick={() => setIsMusicPlay(!isMusicPlay)}
+                />
+              </div>}
             </div>
           </div>
         </>

src/types/declaration.d.ts

@@ -14,6 +14,7 @@ declare const oreData: {
   activeImg: string
   modelSrc: string
   text: string
+  musicSrc: string
 }[]
 declare const sceneData: {
   title: string