dataUp

src/components/son3.vue

@@ -2,14 +2,14 @@
   <div class="son3">
     <!-- 点击视频播放的盒子 -->
     <div class="videoPlayBox" v-if="videoId">
-      <video controls autoplay :src="`/data/${videoId}.mp4`"></video>
+      <video controls autoplay :src="`data/${videoId}.mp4`"></video>
       <!-- 关闭按钮 -->
       <div class="close" @click="videoId = null"></div>
     </div>
     <!-- 视频 -->
     <div class="videoBox">
       <div class="vidPlay" @click="videoId = '1'"></div>
-      <!-- <video src="/data/1.mp4" autoplay loop muted></video> -->
+      <!-- <video src="data/1.mp4" autoplay loop muted></video> -->
       <img src="../assets/img/vid1.png" alt="" />
     </div>
     <div class="shuming">《鸦片成瘾机制》</div>

src/components/son4.vue

@@ -2,7 +2,7 @@
   <div class="son4">
     <!-- 点击视频播放的盒子 -->
     <div class="videoPlayBox" v-if="videoId">
-      <video controls autoplay :src="`/data/${videoId}.mp4`"></video>
+      <video controls autoplay :src="`data/${videoId}.mp4`"></video>
       <!-- 关闭按钮 -->
       <div class="close" @click="videoId = null"></div>
     </div>

src/components/son5.vue

@@ -86,19 +86,12 @@ export default {
         {
           id: 34,
           name: "1850年吸食鸦片的中国人彩色印刷铜版画",
-          ww: "223px",
-          hh: "229px",
-          pad: true,
-        },
-        {
-          id: 35,
-          name: "1850年吸食鸦片的中国人彩色印刷铜版画",
           ww: "251px",
           hh: "226px",
           pad: true,
         },
         {
-          id: 36,
+          id: 35,
           name: "19世纪鸦片危害漫画",
           ww: "227px",
           hh: "316px",
@@ -106,7 +99,7 @@ export default {
           centen: true,
         },
         {
-          id: 37,
+          id: 36,
           name: "1922年陈乐琴愁城十二景四条屏",
           ww: "100%",
           hh: "auto",

src/components/son6.vue

@@ -2,7 +2,7 @@
   <div class="son6">
     <!-- 点击视频播放的盒子 -->
     <div class="videoPlayBox" v-if="videoId">
-      <video controls autoplay :src="`/data/${videoId}.mp4`"></video>
+      <video controls autoplay :src="`data/${videoId}.mp4`"></video>
       <!-- 关闭按钮 -->
       <div class="close" @click="videoId = null"></div>
     </div>
@@ -64,18 +64,11 @@ export default {
       modelId: null,
       data: [
         {
-          id: 38,
+          id: 37,
           name: "林则徐画像",
-          ww: "155px",
-          hh: "183px",
-          pad: true,
-        },
-        {
-          id: 39,
-          name: "（油画）销烟壮举",
-          ww: "257px",
-          hh: "190px",
-        },
+          ww: "273px",
+          hh: "322px",
+        }
       ],
     };
   },
@@ -188,6 +181,7 @@ export default {
     padding: 0;
     margin-bottom: 50px;
     display: flex;
+    justify-content: center;
     .row {
       & > img {
         width: 100%;
@@ -201,12 +195,7 @@ export default {
         line-height: 24px;
       }
     }
-    &:nth-of-type(2n) {
-      justify-content: flex-end 
-    }
-  }
-  .noPad {
-    padding: 0 24px;
   }
+
 }
 </style>

src/components/son7.vue

@@ -2,7 +2,7 @@
   <div class="son7">
     <!-- 点击视频播放的盒子 -->
     <div class="videoPlayBox" v-if="videoId">
-      <video controls autoplay :src="`/data/${videoId}.mp4`"></video>
+      <video controls autoplay :src="`data/${videoId}.mp4`"></video>
       <!-- 关闭按钮 -->
       <div class="close" @click="videoId = null"></div>
     </div>
@@ -43,11 +43,17 @@ export default {
       videoId: null,
       data: [
         {
-          id: 40,
+          id: 38,
           name: "销烟池木桩",
           ww: "267px",
           hh: "149px",
         },
+        {
+          id: 39,
+          name: "（油画）销烟壮举",
+          ww: "257px",
+          hh: "190px",
+        },
       ],
     };
   },

src/views/info/audio.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="images">
-    <audio id="audioTag" class="noshow" autoplay :src="`/data/${$route.params.id}.mp3`"></audio>
+    <audio id="audioTag" class="noshow" autoplay :src="`data/${$route.params.id}.mp3`"></audio>
     <div class="audiocon">
       <!-- 左侧按钮 -->
       <div class="leftBtn">

src/views/info/index.vue

@@ -4,7 +4,7 @@
     <!-- 标题 -->
     <div class="title">
       <div class="back" @click="$router.go(-1)"></div>
-      <h3>清“乾隆”款珐琅蓝彩十三行通景画瓷碗</h3>
+      <h3>{{ data.name }}</h3>
     </div>
     <!-- 模型 -->
     <div class="model">
@@ -19,14 +19,15 @@
     </div>
     <!-- 音乐 -->
     <div class="myMusic">
-      <Audio/>
+      <Audio />
     </div>
     <!-- 文字介绍 -->
-    <div class="txtt" v-html="txtx"></div>
+    <div class="txtt" v-html="data.txt"></div>
   </div>
 </template>
 
 <script>
+import { info } from "../../components/data.js";
 import Audio from "./audio.vue";
 export default {
   name: "info",
@@ -34,8 +35,8 @@ export default {
   data() {
     //这里存放数据
     return {
-      txtx:`<p>文物尺寸：高8.6厘米，口径21厘米，足径8.5厘米，重753克。</p><p>文物说明：口沿镶金边，碗面通篇用珐琅蓝彩描绘广州十三行景色，画工精细，碗内中心绘帆船纹，碗底有方框篆书乾隆款，在清代广州出口瓷中极为少见。</p>`
-      };
+      data: {},
+    };
   },
   //监听属性 类似于data概念
   computed: {},
@@ -54,7 +55,8 @@ export default {
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {
-    window.scrollTo({ top: 0});
+    window.scrollTo({ top: 0 });
+    this.data = info.find((v) => v.id == this.$route.params.id);
   }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
@@ -110,12 +112,12 @@ export default {
     padding: 35px 20px 40px 30px;
     border-bottom: 2px dashed rgba(235, 223, 191, 0.2);
   }
-  .txtt{
+  .txtt {
     padding: 30px 20px 40px 30px;
-    color: #E7DBBC;
+    color: #e7dbbc;
     font-size: 16px;
     line-height: 24px;
-    /deep/p{
+    /deep/p {
       margin-bottom: 30px;
     }
   }