移动端样式

scene/public/static/js/manage.js

@@ -1745,10 +1745,10 @@ var SoundManager = {//暂不支持同时播放
     
     play:function(name, src, currentTime){
         var object = this.list.find(e=>e.name == name)
+        console.log('SoundManagerPlay',name)
         if(object){
             if(this.currentAudio){ 
                 this.pause(this.currentAudio.name, false, true)
-                
             }
             
             {//将当前要播放的播放历史中清除
@@ -1778,6 +1778,8 @@ var SoundManager = {//暂不支持同时播放
     
     
     pause:function(name, autoReplayLast, isInterrupt){//需要能自动恢复上一个被打算的音频。恢复前判断是否还需要播放
+        console.log('SoundManagerPause',name)
+        
         var object = this.list.find(e=>e.name == name)
         if(object && this.currentAudio == object){
             this.currentAudio = null
@@ -1961,10 +1963,9 @@ Manage.prototype.switchBgmState = function(state){//按钮的状态完全代表
     
     
     if(state){
-        
+
         SoundManager.play('bgm')
     }else{
-        
         SoundManager.pause('bgm')
     }
     

scene/src/components/info/index.vue

@@ -93,7 +93,7 @@ export default {
 @media screen and (max-width: 1000px) {
   .info-box {
     height: 58px;
-    width: 326px;
+    width: 300px;
     min-width: 0px;
 
     .title-box {

scene/src/views/gui/menu.vue

@@ -8,6 +8,12 @@
     <div class="pinBottom center">
       <div id="view-controllers"></div>
     </div>
+    <audio
+      id="musicAudio"
+      src="https://super.4dage.com/data/KJ-d4y5kwj5mvW/edit/20231102_120549642.mp3"
+      autoplay
+      style="display: none"
+    ></audio>
     <div class="pinBottom left">
       <div>
         <div class="viewContainer">
@@ -45,13 +51,7 @@
             <div class="btmText">自动漫游</div>
           </div>
           <div id="pause" class="ui-icon" style="display: none">
-            <a
-              style="
-                width: 100%;
-                display: flex;
-                justify-content: center;
-              "
-            >
+            <a style="width: 100%; display: flex; justify-content: center">
               <img
                 rel="tooltip"
                 title=""
@@ -59,7 +59,6 @@
                 width="24"
                 height="24"
                 data-original-title="暂停"
-
               />
             </a>
             <div class="btmText">自动漫游</div>
@@ -286,6 +285,7 @@
 import axios from "axios";
 import HotList from "./components/hotList.vue";
 import Share from "./components/share.vue";
+import { version } from "vue-awesome-swiper";
 
 export default {
   components: { HotList, Share },
@@ -305,6 +305,7 @@ export default {
           name: 0,
         },
       ],
+      isBg: true,
     };
   },
   watch: {},
@@ -314,6 +315,17 @@ export default {
     this.onVisit();
     setTimeout(() => {
       this.getVisit();
+      const _this = this;
+
+      window.addEventListener("click", function () {
+        if (_this.isBg) {
+          const audio = document.getElementById("musicAudio");
+          audio.play();
+          _this.isBg = false;
+          document.querySelector("#openMusic").style.display = "none";
+          document.querySelector("#closeMusic").style.display = "block";
+        }
+      });
     }, 50);
   },
   methods: {
@@ -355,12 +367,21 @@ export default {
     },
     switchBGM(flag) {
       this.musicState = flag;
+
       if (flag) {
-        window.manage.switchBgmState(true);
+        const audio = document.getElementById("musicAudio");
+        audio.play();
+        console.log("音乐打开");
+        // window.manage.switchBgmState(true);
         document.querySelector("#openMusic").style.display = "none";
         document.querySelector("#closeMusic").style.display = "block";
       } else {
-        window.manage.switchBgmState(false);
+        const audio = document.getElementById("musicAudio");
+
+        audio.pause();
+        console.log("音乐关闭");
+
+        // window.manage.switchBgmState(false);
         document.querySelector("#openMusic").style.display = "block";
         document.querySelector("#closeMusic").style.display = "none";
       }

yangjiagou/components.d.ts

@@ -7,10 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    AudioBox: typeof import('./src/components/AudioBox.vue')['default']
     BorderBox: typeof import('./src/components/BorderBox/index.vue')['default']
     Button: typeof import('./src/components/Button/index.vue')['default']
-    Progress: typeof import('./src/components/progress.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

yangjiagou/src/view/home/components/scene/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import dataList from "@/data/data";
-const getAssetsFile = (image: string) => {
-  const url = `../../../../assets/img/home/scenes/${image}`;
-  return new URL(url, import.meta.url).href;
+const getAssetURL = (image: string) => {
+  return new URL(`../../../../assets/img/home/scenes/${image}`, import.meta.url)
+    .href;
 };
 
 const emit = defineEmits(["close"]);
@@ -30,13 +30,13 @@ const goDetail = (name: string) => {
         class="list-item"
         v-for="(item, index) in dataList.scene"
         :style="{
-          backgroundImage: 'url(' + getAssetsFile(item.bgImg) + ')',
+          backgroundImage: 'url(' + getAssetURL(item.bgImg) + ')',
         }"
         @click="goDetail(item.name)"
       >
         <div class="item-con">
-          <img class="thumbnail-box" :src="getAssetsFile(item.img)" alt="" />
-          <img class="name-box" :src="getAssetsFile(item.titleImg)" alt="" />
+          <img class="thumbnail-box" :src="getAssetURL(item.img)" alt="" />
+          <img class="name-box" :src="getAssetURL(item.titleImg)" alt="" />
           <div class="disc-box">{{ item.disc }}</div>
         </div>
       </div>

yangjiagou/src/view/introduceM/appreciate/index.vue

@@ -1,12 +1,137 @@
-<script setup lang='ts'>
+<script setup lang="ts">
+import dataList from "@/data/data";
+import titleImg from "@/assets/img/home/introduceM/title.png";
+import IconRight from "@/assets/img/home/introduceM/right.png";
+import ItemBG from "@/assets/img/home/introduceM/itemBg.png";
+import backIcon from "@/assets/img/home/introduceM/back.png";
+
+const getAssetURL = (image: string) => {
+  return new URL(
+    `../../../assets/img/home/introduceM/${image}`,
+    import.meta.url
+  ).href;
+};
+
+const router = useRouter();
+const goDetail = (name: string) => {
+  router.push({
+    name: "detail",
+    query: {
+      name: name,
+    },
+  });
+};
 </script>
 
 <template>
-<div class=''>
-  文物鉴赏
-</div>
+  <div class="all">
+    <img class="title" :src="titleImg" alt="" />
+    <div class="grid-box">
+      <div
+        class="box-item"
+        v-for="(item, index) in dataList.produces"
+        @click="goDetail(item.name)"
+      >
+        <img :src="ItemBG" alt="" />
+        <div class="title-box">
+          <div class="left"></div>
+          <div class="right">{{ item.name }}</div>
+        </div>
+        <div class="look-box">
+          <div class="text">查看</div>
+          <img :src="IconRight" alt="" />
+        </div>
+      </div>
+    </div>
+    <img
+      class="back"
+      :src="backIcon"
+      alt=""
+      @click="
+        () => {
+          router.back();
+        }
+      "
+    />
+  </div>
 </template>
 
-<style lang='less' scoped>
+<style lang="less" scoped>
+::-webkit-scrollbar {
+  display: none;
+}
+.all {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: url("@/assets/img/home/introduceM/bg.png");
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 10px 70px;
 
-</style>
+  .title {
+    width: 75%;
+  }
+  .grid-box {
+    // width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-gap: 5px;
+    margin-top: 10px;
+    .box-item {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      img {
+        width: 100%;
+      }
+      .title-box {
+        display: flex;
+        padding-left: 10px;
+        margin-bottom: 25px;
+        // align-items: center;
+        .left {
+          width: 6%;
+          height: 20px;
+          background: #b43a16;
+          margin-right: 2px;
+        }
+        .right {
+          width: 94%;
+          font-size: 14px;
+          line-height: 20px;
+          color: #6b2119;
+          font-family: "AlimamaShuHeiTi-Bold";
+        }
+      }
+      .look-box {
+        padding: 0 20px;
+        font-size: 12px;
+        color: #727272;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+        position: absolute;
+        bottom: 0;
+        img {
+          width: 15px;
+          height: 15px;
+        }
+      }
+    }
+  }
+  .back {
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    right: 15px;
+    bottom: 20px;
+    cursor: pointer;
+  }
+}
+</style>

yangjiagou/src/view/introduceM/index.vue

@@ -63,7 +63,7 @@ const router = useRouter();
   background: url("../../assets/img/home/introduceM/bg.png");
   background-size: cover;
   // padding: 20px;
-  padding: 20px 0;
+  padding: 20px 0 70px;
   box-sizing: border-box;
 
   img {

yangjiagou/src/view/introduceM/scene/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import dataList from "@/data/data";
 import titleImg from "@/assets/img/home/introduceM/title.png";
+import backIcon from "@/assets/img/home/introduceM/back.png";
+
 const getAssetURL = (image: string) => {
   return new URL(
     `../../../assets/img/home/introduceM/${image}`,
@@ -35,6 +37,16 @@ const goDetail = (name: string) => {
         </div>
       </div>
     </div>
+    <img
+      class="back"
+      :src="backIcon"
+      alt=""
+      @click="
+        () => {
+          router.back();
+        }
+      "
+    />
   </div>
 </template>
 
@@ -51,7 +63,7 @@ const goDetail = (name: string) => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px 10px;
+  padding: 20px 10px 70px;
 
   .title {
     width: 75%;
@@ -62,7 +74,7 @@ const goDetail = (name: string) => {
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     grid-gap: 5px;
-    height: 80%;
+    // height: 80%;
     margin-top: 10px;
     .box-item {
       width: 100%;
@@ -90,5 +102,13 @@ const goDetail = (name: string) => {
       }
     }
   }
+  .back {
+    width: 40px;
+    height: 40px;
+    position: fixed;
+    right: 15px;
+    bottom: 20px;
+    cursor: pointer;
+  }
 }
 </style>

yangjiagou/src/view/product/detail/index.vue

@@ -93,7 +93,7 @@ onMounted(() => {
 }
 @media screen and (max-width: 480px) {
   .all {
-    padding: 20px;
+    padding: 20px 20px 60px;
     .back-btn {
       left: 85%;
       top: 90%;