upload

src/App.vue

@@ -16,6 +16,7 @@ export default {
 #app {
  width: 100%;
  height: 100%;
+ overflow: hidden;
 }
 
 </style>

src/views/Home.vue

@@ -4,6 +4,10 @@
     v-if="currentData"
     :style="{ 'background-image': `url(${require('@/assets/images/bg.jpg')})` }"
   >
+    <div class="audio" @click="switchAudio">
+      <img :src="require(`@/assets/images/${isAudio?'pause':'play'}.png`)" alt="" />
+      <audio ref="audio" :src="$cdn + `part0${query.region}/music/${currentData.audio}`"></audio>
+    </div>
     <div class="top">
       <img :src="require('@/assets/images/title.png')" alt="" />
     </div>
@@ -15,32 +19,55 @@
     >
       <div class="title">
         <img :src="require('@/assets/images/small_k.png')" alt="" />
-        <span>{{currentData.title}}</span>
+        <span>{{ currentData.title }}</span>
       </div>
-      <div class="desc" v-html="currentData.desc"> </div>
-      <div class="con" :class="{modelcon:active.type == 'model'}">
+      <div class="desc" v-html="currentData.desc"></div>
+      <div class="con">
         <div class="maincon">
-          <iframe
-            v-if="active.type == 'model'"
-            :src="active.url"
-            frameborder="0"
-          >
-          </iframe>
+          <div class="mframe" v-if="active.type == 'model'">
+            <img :src="require('@/assets/images/fullH.jpg')" alt="" />
+            <iframe :src="active.url" frameborder="0"> </iframe>
+          </div>
+
           <div class="mimg" v-else v-swiper:mySwiper="swiperOptions">
-            <ul class="swiper-wrapper swiper2" >
-              <li class="swiper-slide" v-for="(item,i) in active.url" :key="i">
-                <img :src="$cdn+`part0${query.region}/picture/${active.folder}/${item}`" alt="">
+            <ul class="swiper-wrapper swiper2">
+              <li class="swiper-slide" v-for="(item, i) in active.url" :key="i">
+                <img
+                  :src="
+                    $cdn +
+                      `part0${query.region}/picture/${active.folder}/${item}`
+                  "
+                  alt=""
+                />
               </li>
               <div class="swiper-pagination"></div>
             </ul>
           </div>
         </div>
-        <div class="name" v-if="currentData.wenyin" v-html="currentData.wenyin || '暂无'"></div>
+        <div
+          class="name"
+          v-if="currentData.wenyin"
+          v-html="currentData.wenyin || '暂无'"
+        ></div>
         <div class="list" v-swiper:iSwiper="swiperOption">
-          <div class="sw-active">{{active.name}}</div>
+          <div class="sw-active">{{ active.name }}</div>
           <ul class="swiper-wrapper swiper1">
-            <li @click="active=item" :class="{'slide-active':item.thumb==active.thumb}" class="swiper-slide" v-for="(item, i) in currentData.content" :key="i">
-              <img :src="item.type == 'model' ? $cdn+`model/${item.thumb}`:$cdn+`part0${query.region}/picture/${item.folder}/${item.thumb}`" alt="" />
+            <li
+              @click="active = item"
+              :class="{ 'slide-active': item.thumb == active.thumb }"
+              class="swiper-slide"
+              v-for="(item, i) in currentData.content"
+              :key="i"
+            >
+              <img
+                :src="
+                  item.type == 'model'
+                    ? $cdn + `model/${item.thumb}`
+                    : $cdn +
+                      `part0${query.region}/picture/${item.folder}/${item.thumb}`
+                "
+                alt=""
+              />
             </li>
           </ul>
           <div class="swiper-pagination"></div>
@@ -62,28 +89,29 @@ export default {
   data() {
     return {
       data: data.data,
-      query:{},
-      currentData:'',
-      active:''
+      query: {},
+      currentData: "",
+      active: "",
+      isAudio: false
     };
   },
 
-  computed:{
-    swiperOption(){
+  computed: {
+    swiperOption() {
       return {
-        id:'tttt',
+        id: "tttt",
         slidesPerView: "auto",
         autoplay: false,
-        direction: "horizontal"
-      }
+        direction: "horizontal",
+      };
     },
-    swiperOptions(){
+    swiperOptions() {
       return {
-        id:'qtq',
+        id: "qtq",
         slidesPerView: "auto",
         autoplay: false,
-        direction: "horizontal"
-      }
+        direction: "horizontal",
+      };
     },
   },
 
@@ -91,18 +119,33 @@ export default {
     swiper: directive,
   },
   mounted() {
-    this.$nextTick(()=>{
-      if (!this.$route.query.key||!this.$route.query.region) {
-        alert('读取数据失败，请确认链接是否正确')
+    this.$nextTick(() => {
+      if (!this.$route.query.key || !this.$route.query.region) {
+        alert("读取数据失败，请确认链接是否正确");
       }
 
-      this.query = this.$route.query
-      this.currentData = this.data[this.$route.query.region][this.$route.query.key]
-      this.active = this.currentData.content[0]
-    })
+      this.query = this.$route.query;
+      this.currentData = this.data[this.$route.query.region][
+        this.$route.query.key
+      ];
+      this.active = this.currentData.content[0];
+    });
 
     // document.title = "毛泽东同志遗物专题展";
   },
+  methods:{
+    switchAudio(){
+      if (this.$refs.audio.paused) {
+        this.isAudio = true
+        this.$refs.audio.play()
+      }
+      else{
+        this.isAudio = false
+        this.$refs.audio.pause()
+      }
+      
+    }
+  }
 };
 </script>
 
@@ -113,8 +156,21 @@ export default {
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
-  padding: 12px 0 0;
+  padding: 16px 0 0;
   font-size: 0;
+  position: relative;
+  .audio{
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    width: 40px;
+    >img{
+      width: 100%;
+    }
+    audio{
+      visibility: hidden;
+    }
+  }
   .top {
     margin: 0 auto;
     width: 70%;
@@ -140,14 +196,19 @@ export default {
       left: 50%;
       transform: translateX(-50%);
       width: 70%;
+
       > img {
         width: 100%;
       }
       > span {
         margin: 0 auto;
-        display: inline-block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         position: absolute;
-        width: 80%;
+        width: 82%;
+        height: 60%;
+        overflow-y: auto;
         text-align: center;
         top: 42%;
         letter-spacing: 1px;
@@ -159,32 +220,46 @@ export default {
     }
     .desc {
       color: #fff;
-      max-height: 20%;
+      max-height: 15%;
       overflow-x: hidden;
       overflow-y: auto;
+      text-align: justify;
     }
     .con {
       width: 100%;
-      min-height: 62%;
+      min-height: 40%;
       font-size: 0;
       margin-top: 3%;
-      .maincon{
+      .maincon {
         height: 100%;
         width: 100%;
         overflow: hidden;
         position: relative;
-        background: linear-gradient(0deg, #575757, #C0C0C0);
-        > iframe {
+        background: linear-gradient(0deg, #575757, #c0c0c0);
+        .mframe {
+          position: relative;
           width: 100%;
-          height: 100%;
+          > img {
+            width: 100%;
+            opacity: 0;
+          }
+          > iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 99;
+            width: 100%;
+            height: 100%;
+          }
         }
-        .mimg{
+
+        .mimg {
           width: 100%;
-          >ul{
+          > ul {
             width: 100%;
-            >li{
+            > li {
               width: 100%;
-              >img{
+              > img {
                 width: 100%;
                 height: 100%;
               }
@@ -200,14 +275,19 @@ export default {
         color: #b20303;
         overflow-x: hidden;
         overflow-y: auto;
+        text-align: justify;
       }
       .list {
         width: 100%;
         margin-top: 12px;
-        .sw-active{
+        .sw-active {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          width: 100%;
           font-size: 12px;
           margin-bottom: 4px;
-          color: #EDB25B;
+          color: #edb25b;
         }
         .swiper-wrapper {
           width: 100%;
@@ -216,33 +296,29 @@ export default {
             margin: 4px;
             height: 72px;
             position: relative;
-            background: linear-gradient(0deg, #575757, #C0C0C0);
+            background: linear-gradient(0deg, #575757, #c0c0c0);
             overflow: hidden;
-            &:first-of-type{
+            &:first-of-type {
               margin-left: 0;
             }
             > img {
               position: absolute;
               top: 50%;
               left: 50%;
-              transform: translate(-50%,-50%);
+              transform: translate(-50%, -50%);
               height: 100%;
               width: 100%;
             }
           }
 
-          .slide-active{
-            color: #EDB25B;
-            border: 2px solid #EDB25B;
+          .slide-active {
+            color: #edb25b;
+            border: 2px solid #edb25b;
             border-radius: 4px;
           }
         }
       }
     }
-    .modelcon{
-      height: 42%;
-      min-height: 42%;
-    }
   }
   .bottom {
     height: 5%;
@@ -252,4 +328,120 @@ export default {
     font-size: 10px;
   }
 }
+
+@media screen and (max-height: 750px) {
+  .home {
+    .top {
+      > img {
+        width: 100%;
+      }
+    }
+    .body {
+      .con {
+        width: 100%;
+        min-height: 40%;
+        font-size: 0;
+        margin-top: 3%;
+        .name {
+          max-height: 13vh;
+        }
+        .maincon {
+          height: 100%;
+          width: 100%;
+          overflow: hidden;
+          position: relative;
+          background: linear-gradient(0deg, #575757, #c0c0c0);
+          .mframe {
+            position: relative;
+            width: 100%;
+            > img {
+              width: 100%;
+              opacity: 0;
+            }
+            > iframe {
+              position: absolute;
+              top: 0;
+              left: 0;
+              z-index: 99;
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .mimg {
+            width: 100%;
+            > ul {
+              width: 100%;
+              > li {
+                width: 100%;
+                height: 28vh;
+                position: relative;
+                overflow: hidden;
+                > img {
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translate(-50%, -50%);
+                  width: 100%;
+                  min-height: 80%;
+                  height: auto;
+                }
+              }
+            }
+          }
+        }
+
+        .list {
+          width: 100%;
+          margin-top: 8px;
+          .swiper-wrapper {
+            width: 100%;
+            .swiper-slide {
+              width: 25vw;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-height: 700px) {
+  .home {
+    .body {
+      .con {
+        .name {
+          max-height: 10vh;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .home {
+    .body {
+      .con {
+        width: 100%;
+        min-height: 40%;
+        font-size: 0;
+        margin-top: 3%;
+        .name {
+          max-height: 10vh;
+        }
+        .list {
+          width: 100%;
+          margin-top: 8px;
+          .swiper-wrapper {
+            width: 100%;
+            .swiper-slide {
+              width: 25vw;
+              height: 50px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>