up

src/assets/base.css

@@ -193,7 +193,6 @@ body {
   max-width: 100%;
   max-height: 100%;
   background-color: #1d1e23;
-
 }
 
 .viewer-title {
@@ -213,4 +212,18 @@ body {
 }
 .txtt p {
   text-indent: 2em;
-}
+}
+.viewer-toolbar{
+  display: none;
+}
+.viewer-button{
+  top: 10px;
+  left: 10px;
+  width: 40px;
+  height: 40px;
+  background: url("./img/close.png") center center no-repeat black;
+  background-size: 24px 24px;
+}
+.viewer-button::before{
+  display: none;
+}

src/components/son3.vue

@@ -172,6 +172,13 @@ export default {
           hh: "300px",
           move: false,
         },
+        {
+          id: 19,
+          name: "1854年广州和香港的鸦片售卖报告",
+          ww: "194px",
+          hh: "305px",
+          move: false,
+        },
       ];
       this.$nextTick(() => {
         setTimeout(() => {
@@ -206,14 +213,14 @@ export default {
       transform: translateY(-50%);
     }
     .close {
+      z-index: 999;
       position: absolute;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 32px;
-      height: 32px;
-      background: url("../assets/img/close.png");
-      background-size: 100% 100%;
+      top: 10px;
+      left: 10px;
+      width: 40px;
+      height: 40px;
+      background: url("../assets/img/close.png") center center no-repeat;
+      background-size: 24px 24px;
     }
   }
   .videoBox {

src/components/son4.vue

@@ -95,13 +95,6 @@ export default {
     if (window.lodingGoods) {
       this.data = [
         {
-          id: 19,
-          name: "1854年广州和香港的鸦片售卖报告",
-          ww: "194px",
-          hh: "305px",
-          move: false,
-        },
-        {
           id: 20,
           name: "罂粟壳",
           ww: "166px",
@@ -172,14 +165,14 @@ export default {
       transform: translateY(-50%);
     }
     .close {
+      z-index: 999;
       position: absolute;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 32px;
-      height: 32px;
-      background: url("../assets/img/close.png");
-      background-size: 100% 100%;
+      top: 10px;
+      left: 10px;
+      width: 40px;
+      height: 40px;
+      background: url("../assets/img/close.png") center center no-repeat;
+      background-size: 24px 24px;
     }
   }
   .videoBox {

src/components/son6.vue

@@ -20,7 +20,7 @@
         class="modelPlay"
         @click="
           modelId =
-            'https://www.4dkankan.com/panorama/show.html?id=WK1526492643662524416&vr=fd720_JUXrSixwc'
+            'https://www.4dkankan.com/spc.html?m=KJ-Db5vr10oMd&lang=zh&firstView=pano:186,qua:-0.0144,-0.7512,-0.0164,0.6597'
         "
       ></div>
       <img src="../assets/img/mod1.png" alt="" />
@@ -163,14 +163,14 @@ export default {
       transform: translateY(-50%);
     }
     .close {
+      z-index: 999;
       position: absolute;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 32px;
-      height: 32px;
-      background: url("../assets/img/close.png");
-      background-size: 100% 100%;
+      top: 10px;
+      left: 10px;
+      width: 40px;
+      height: 40px;
+      background: url("../assets/img/close.png") center center no-repeat;
+      background-size: 24px 24px;
     }
     iframe {
       width: 100%;

src/components/son7.vue

@@ -141,14 +141,14 @@ export default {
       transform: translateY(-50%);
     }
     .close {
+      z-index: 999;
       position: absolute;
-      bottom: 20px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 32px;
-      height: 32px;
-      background: url("../assets/img/close.png");
-      background-size: 100% 100%;
+      top: 10px;
+      left: 10px;
+      width: 40px;
+      height: 40px;
+      background: url("../assets/img/close.png") center center no-repeat;
+      background-size: 24px 24px;
     }
   }
   .videoBox {

src/views/Home.vue

@@ -7,7 +7,11 @@
     </div>
 
     <!-- 中间内容---使用动态组件 -->
-    <div class="main" :class="{ mainAc: myMenucShow }">
+    <div
+      class="main"
+      :class="{ mainAc: myMenucShow }"
+      :style="`background:url('data/bg/${mainBg}.jpg');`"
+    >
       <keep-alive>
         <component
           :scrool="scrool"
@@ -18,7 +22,7 @@
     </div>
 
     <!-- 菜单图片 -->
-    <div class="menu" @click="myMenucShow = true">
+    <div class="menu" @click="menuOpen">
       <img src="../assets/img/menu.png" alt="" />
     </div>
 
@@ -41,7 +45,7 @@
     </div>
     <!-- 卡片 -->
     <div class="myMenuc" :class="{ myMenucAc: myMenucShow }">
-      <Menuc @upInfo="upInfo" />
+      <Menuc @upInfo="upInfo" ref="Menuc"/>
     </div>
   </div>
 </template>
@@ -60,6 +64,7 @@ export default {
   data() {
     //这里存放数据
     return {
+      mainBg: "bg",
       myMenucShow: false,
       data: [
         { id: 1, name: "序言" },
@@ -80,18 +85,26 @@ export default {
   computed: {},
   //监控data中的数据变化
   watch: {
-    topImgInd() {
-      window.scrollTo({ top: 0 });
+    topImgInd(val) {
+      if (val == 3 || val == 4) this.mainBg = "bg2";
+      else this.mainBg = "bg";
+      // window.scrollTo({ top: 0 });
+      document.body.scrollTop = document.documentElement.scrollTop = 0;
       // 给window一个变量，控制文物是否重新执行动画
-      window.lodingGoods = true
+      window.lodingGoods = true;
     },
   },
   //方法集合
   methods: {
+    menuOpen() {
+      this.myMenucShow = true;
+      this.$refs.Menuc.changeImgInd(this.topImgInd);
+    },
     upInfo(id) {
       this.myMenucShow = false;
       this.topImgInd = id;
-      if (id === this.topImgInd) window.scrollTo({ top: 0 });
+      if (id === this.topImgInd)
+        document.body.scrollTop = document.documentElement.scrollTop = 0;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -129,7 +142,6 @@ export default {
   }
   .main {
     overflow-x: hidden;
-    background: url("../assets/img/bg.jpg");
     background-size: cover;
     opacity: 1;
     transition: opacity 0.5s;
@@ -228,9 +240,9 @@ export default {
   padding-bottom: 80px;
 }
 @media screen and (min-width: 500px) {
- .Home .menu{
-  right: 50%;
-  transform: translateX(250px);
- }
+  .Home .menu {
+    right: 50%;
+    transform: translateX(250px);
+  }
 }
 </style>

src/views/info/index.vue

@@ -4,21 +4,30 @@
     <!-- 标题 -->
     <div class="title">
       <div class="back" @click="$router.go(-1)"></div>
-      <h3>{{ data.name }}</h3>
+      <h3 v-if="data.name&&data.name[imgInd]">{{ data.name[imgInd] }}</h3>
     </div>
     <!-- 模型 -->
     <div class="model" :class="`model${$route.params.id}`">
       <div class="swiper-container">
         <div class="swiper-wrapper" ref="mySwiper">
+          <template v-if="data.url && data.url.length > 0&&$route.params.id=='21'">
+            <div
+              class="swiper-slide"
+              v-for="(url, index) in modelUrl"
+              :key="index"
+            >
+              <iframe class="iframeBox" :src="url" frameborder="0"></iframe>
+            </div>
+          </template>
           <div
             class="swiper-slide"
             v-for="item in data.img"
             :key="item"
-            @click="lookImg(`data/${$route.params.id}_${item}.png`)"
+            @click="lookImg(`data/${item}.png`)"
           >
-            <img :src="`data/${$route.params.id}_${item}.png`" alt="" />
+            <img :src="`data/${item}.png`" alt="" />
           </div>
-          <template v-if="data.url && data.url.length > 0">
+          <template v-if="data.url && data.url.length > 0&&$route.params.id!='21'">
             <div
               class="swiper-slide"
               v-for="(url, index) in modelUrl"
@@ -36,7 +45,7 @@
       <!-- <div>1/{{ data.img + 1 }}</div> -->
     </div>
     <!-- 左右箭头 -->
-    <div class="nextTo">
+    <div class="nextTo" v-show="nextToFlag">
       <div class="swiper-button-next">下一件</div>
       <div class="swiper-button-prev">上一件</div>
     </div>
@@ -66,6 +75,8 @@ export default {
       data: {},
       lookPics: [],
       modelUrl: [],
+      nextToFlag: true,
+      imgInd: 0,
     };
   },
   //监听属性 类似于data概念
@@ -91,36 +102,41 @@ export default {
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {
+    this.imgInd=0
+    this.nextToFlag=true
     this.data = {};
     this.lookPics = [];
-    window.scrollTo({ top: 0 });
-    this.data = info.find((v) => v.id == this.$route.params.id);
+    // window.scrollTo({ top: 0 });
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+    let myId = this.$route.params.id;
+    this.data = info.find((v) => v.id == myId);
     this.$nextTick(() => {
+      console.log("-----", this.data);
+      if (this.data.img.length + this.data.url.length <= 1) this.nextToFlag = false;
       setTimeout(() => {
-        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",
+        let aaa = new Swiper(`.model${myId} .swiper-container`, {
+          navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+          },
+          pagination: {
+            el: ".swiper-pagination",
+            type: "fraction",
+          },
+          on: {
+            slideChange: () => {
+              let ind = aaa.activeIndex;
+                this.imgInd = ind;
+                console.log('123',this.imgInd,this.data.name[this.imgInd]);
+              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];
+              }
             },
-            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 = [];
@@ -155,6 +171,7 @@ export default {
       text-align: center;
       font-size: 20px;
       line-height: 30px;
+      min-height: 60px;
       color: #fff;
     }
   }
@@ -173,7 +190,7 @@ export default {
           & > img {
             width: 100%;
             height: 100%;
-            object-fit: cover;
+            object-fit: contain;
           }
         }
       }
@@ -207,7 +224,7 @@ export default {
     }
   }
   .myMusic {
-    padding: 10px 20px 40px 30px;
+    padding: 30px 20px 30px 30px;
     border-bottom: 2px dashed rgba(235, 223, 191, 0.2);
   }
   .txtt {
@@ -223,12 +240,12 @@ export default {
     margin-top: 15px;
     position: relative;
     width: 100%;
-    height: 50px;
+    height: 20px;
     z-index: 999;
     .swiper-button-next {
       z-index: 999;
       width: 100px;
-      height: 50px;
+      height: 20px;
       background-color: #e7dbbc;
       right: 24px;
       bottom: 0px;
@@ -246,7 +263,7 @@ export default {
       padding-left: 36px;
       width: 110px;
       z-index: 999;
-      height: 50px;
+      height: 20px;
       background-color: #e7dbbc;
       left: 30px;
       top: auto;

src/views/menuc/index.vue

@@ -1,11 +1,11 @@
 <!--  -->
 <template>
-  <div class="mymenu">
+  <div class="mymenu" :key="imgInd">
     <div class="conten" ref="bgsw" v-swiper:mySwiper="swiperOptions">
       <ul class="swiper-wrapper">
         <li class="bacMh"></li>
         <li class="swiper-slide" v-for="item in data" :key="item.id">
-          <div class="img"  @click="$emit('upInfo',item.id)">
+          <div class="img" @click="$emit('upInfo', item.id)">
             <img :src="require(`@/assets/img/${item.id}.png`)" alt="" />
           </div>
         </li>
@@ -33,6 +33,7 @@ export default {
         { id: 7, name: "虎门销烟" },
         { id: 8, name: "结束语" },
       ],
+      imgInd: 0,
     };
   },
   directives: {
@@ -50,6 +51,7 @@ export default {
         effect: that.g_isLandscape ? "coverflow" : "slide",
         slidesPerView: "auto",
         centeredSlides: true,
+        initialSlide: this.imgInd,
         coverflowEffect: {
           rotate: 0,
           stretch: 124,
@@ -106,7 +108,11 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    changeImgInd(val) {
+      this.imgInd = val - 1;
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -117,7 +123,9 @@ export default {
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {
+    this.imgInd=0
+  }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
@@ -145,7 +153,7 @@ export default {
           }
         }
       }
-      .bacMh{
+      .bacMh {
         z-index: 998;
         position: absolute;
         top: 0;