up

src/assets/base.css

@@ -210,4 +210,7 @@ body {
 
 .viewer-navbar {
   display: none !important;
+}
+.txtt p {
+  text-indent: 2em;
 }

src/components/son2.vue

@@ -54,7 +54,7 @@ export default {
   //方法集合
   methods: {
     toInfo(id) {
-      window.lodingGoods=false
+      window.lodingGoods = false;
       this.$router.push(`/info/${id}`);
     },
   },
@@ -80,14 +80,14 @@ export default {
         },
         {
           id: 2,
-          name: "清光绪二十三年广彩十三行四方瓷瓶",
+          name: "清道光广彩人物故事纹瓷碗",
           ww: "244px",
           hh: "131px",
           move: false,
         },
         {
           id: 3,
-          name: "清道光广彩人物故事纹瓷碗",
+          name: "清光绪二十三年广彩十三行四方瓷瓶",
           ww: "169px",
           hh: "80px",
           move: false,

src/components/son3.vue

@@ -132,48 +132,41 @@ export default {
         },
         {
           id: 13,
-          name: "1854年广州和香港的鸦片售卖报告",
-          ww: "194px",
-          hh: "305px",
-          move: false,
-        },
-        {
-          id: 14,
           name: "1865年香港鸦片交换支票",
           ww: "200px",
           hh: "181px",
           move: false,
         },
         {
-          id: 15,
+          id: 14,
           name: "1855年印度比尔把鸦片运至中国的运单",
           ww: "194px",
           hh: "207px",
           move: false,
         },
         {
-          id: 16,
+          id: 15,
           name: "1856年印度比尔把鸦片运至中国WOOSUNG的运单",
           ww: "200px",
           hh: "181px",
           move: false,
         },
         {
-          id: 17,
+          id: 16,
           name: "1858年香港鸦片交换支票",
           ww: "193px",
           hh: "188px",
           move: false,
         },
         {
-          id: 18,
+          id: 17,
           name: "1859年印度比尔把鸦片运至香港的运单",
           ww: "195px",
           hh: "307px",
           move: false,
         },
         {
-          id: 19,
+          id: 18,
           name: "1855年从印度运送鸦片到香港的保险单",
           ww: "194px",
           hh: "300px",

src/components/son4.vue

@@ -95,6 +95,13 @@ export default {
     if (window.lodingGoods) {
       this.data = [
         {
+          id: 19,
+          name: "1854年广州和香港的鸦片售卖报告",
+          ww: "194px",
+          hh: "305px",
+          move: false,
+        },
+        {
           id: 20,
           name: "罂粟壳",
           ww: "166px",

src/components/son6.vue

@@ -124,7 +124,7 @@ export default {
     if (window.lodingGoods) {
       this.data = [
         {
-          id: 37,
+          id: 38,
           name: "林则徐画像",
           ww: "273px",
           hh: "322px",

src/components/son7.vue

@@ -95,14 +95,14 @@ export default {
     if (window.lodingGoods) {
       this.data = [
         {
-          id: 38,
+          id: 39,
           name: "销烟池木桩",
           ww: "267px",
           hh: "149px",
           move: false,
         },
         {
-          id: 39,
+          id: 40,
           name: "（油画）销烟壮举",
           ww: "257px",
           hh: "190px",

src/views/Home.vue

@@ -213,9 +213,11 @@ export default {
     pointer-events: none;
     position: fixed;
     width: 100vw;
+    max-width: 480px;
+    transform: translateX(-50%);
     height: 100vh;
     top: 0;
-    left: 0;
+    left: 50%;
   }
   .myMenucAc {
     opacity: 1;

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/${audioUrl}`"></audio>
     <div class="audiocon">
       <!-- 左侧按钮 -->
       <div class="leftBtn">
@@ -38,6 +38,49 @@ export default {
       isPlay: this.isMobile,
       currentPosi: 0,
       allTime: 0,
+      audioUrl:'',
+      dataChange:{
+        1:'1.mp3',
+        2:'1.mp3',
+        3:'1.mp3',
+        4:'2.mp3',
+        5:'2.mp3',
+        6:'6.mp3',
+        7:'7.mp3',
+        8:'8.mp3',
+        9:'9.mp3',
+        10:'10.mp3',
+        11:'11.mp3',
+        12:'11.mp3',
+        13:'11.mp3',
+        14:'11.mp3',
+        15:'11.mp3',
+        16:'11.mp3',
+        17:'11.mp3',
+        18:'11.mp3',
+        19:'19.mp3',
+        20:'20.mp3',
+        21:'21.mp3',
+        22:'21.mp3',
+        23:'21.mp3',
+        24:'21.mp3',
+        25:'25.mp3',
+        26:'25.mp3',
+        27:'25.mp3',
+        28:'25.mp3',
+        29:'25.mp3',
+        30:'25.mp3',
+        31:'25.mp3',
+        32:'32.mp3',
+        33:'32.mp3',
+        34:'32.mp3',
+        35:'32.mp3',
+        36:'36.mp3',
+        37:'37.mp3',
+        38:'38.mp3',
+        39:'39.mp3',
+        40:'40.mp3',
+      }
     };
   },
   methods: {
@@ -113,6 +156,7 @@ export default {
   },
   activated() {
     this.isPlay = this.isMobile;
+    this.audioUrl = this.dataChange[this.$route.params.id]
   },
 };
 </script>

src/views/info/index.vue

@@ -18,21 +18,28 @@
           >
             <img :src="`data/${$route.params.id}_${item}.png`" alt="" />
           </div>
-          <!-- <div class="swiper-slide">
-            <iframe
-              src="http://4dscene.4dage.com/culturalrelics/WZSBWG/Model2.html?m=wzs02"
-              frameborder="0"
-            ></iframe>
-          </div> -->
+          <template v-if="data.url && data.url.length > 0">
+            <div
+              class="swiper-slide"
+              v-for="(url, index) in modelUrl"
+              :key="index"
+            >
+              <iframe class="iframeBox" :src="url" frameborder="0"></iframe>
+            </div>
+          </template>
         </div>
       </div>
     </div>
-    <!-- 索引 -->
 
     <div class="indexBs">
       <div class="swiper-pagination"></div>
       <!-- <div>1/{{ data.img + 1 }}</div> -->
     </div>
+    <!-- 左右箭头 -->
+    <div class="nextTo">
+      <div class="swiper-button-next">下一件</div>
+      <div class="swiper-button-prev">上一件</div>
+    </div>
     <!-- 音乐 -->
     <div class="myMusic">
       <Audio />
@@ -58,6 +65,7 @@ export default {
     return {
       data: {},
       lookPics: [],
+      modelUrl: [],
     };
   },
   //监听属性 类似于data概念
@@ -89,14 +97,38 @@ export default {
     this.data = info.find((v) => v.id == this.$route.params.id);
     this.$nextTick(() => {
       setTimeout(() => {
-        new Swiper(`.model${this.$route.params.id} .swiper-container`, {
-          pagination: {
-            el: ".swiper-pagination",
-            type: "fraction",
-          },
-        });
+        let aaa = new Swiper(
+          `.model${this.$route.params.id} .swiper-container`,
+          {
+            navigation: {
+              nextEl: ".swiper-button-next",
+              prevEl: ".swiper-button-prev",
+            },
+            pagination: {
+              el: ".swiper-pagination",
+              type: "fraction",
+            },
+            on: {
+              slideChange: () => {
+                let ind = aaa.activeIndex;
+                if (this.modelUrl[ind] == "") {
+                  let dom = document.querySelectorAll(".iframeBox");
+                  dom[ind].src = this.data.url[ind];
+                  console.log("-----", dom[ind].src);
+                  this.modelUrl[ind] = this.data.url[ind];
+                }
+              },
+            },
+          }
+        );
       }, 100);
     });
+    let temp = [];
+    this.data.url.forEach((v, i) => {
+      if (i === 0) temp.push(v);
+      else temp.push("");
+    });
+    this.modelUrl = temp;
   }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
@@ -175,7 +207,7 @@ export default {
     }
   }
   .myMusic {
-    padding: 35px 20px 40px 30px;
+    padding: 10px 20px 40px 30px;
     border-bottom: 2px dashed rgba(235, 223, 191, 0.2);
   }
   .txtt {
@@ -187,5 +219,47 @@ export default {
       margin-bottom: 30px;
     }
   }
+  .nextTo {
+    margin-top: 15px;
+    position: relative;
+    width: 100%;
+    height: 50px;
+    z-index: 999;
+    .swiper-button-next {
+      z-index: 999;
+      width: 100px;
+      height: 50px;
+      background-color: #e7dbbc;
+      right: 24px;
+      bottom: 0px;
+      top: auto;
+      background: url("../../assets/img/right.png") right center no-repeat;
+      background-size: 20px 20px;
+      color: #e7dbbc;
+      font-size: 16px;
+
+      &::after {
+        opacity: 0;
+      }
+    }
+    .swiper-button-prev {
+      padding-left: 36px;
+      width: 110px;
+      z-index: 999;
+      height: 50px;
+      background-color: #e7dbbc;
+      left: 30px;
+      top: auto;
+      background: url("../../assets/img/left.png") left center no-repeat;
+      background-size: 20px 20px;
+      bottom: 0px;
+      color: #e7dbbc;
+      font-size: 16px;
+
+      &::after {
+        opacity: 0;
+      }
+    }
+  }
 }
 </style>

src/views/menuc/index.vue

@@ -132,7 +132,7 @@ export default {
       width: 100%;
       align-items: flex-end;
       > li {
-        width: 80vw;
+        width: 80%;
         height: auto;
         // max-height: 56vh;
         border-radius: 5px 5px 5px 5px;