update

src/components/Carousel.vue

@@ -4,7 +4,10 @@
     <swiper ref="mySwiper" :options="swiperOptions">
       <swiper-slide v-for="(item, i) in data" :key="i">
         <div>
-          <img class="real" :src="item.img" alt="" />
+          <img class="real" :src="item.img" alt="" v-if="item.type == 'img'" />
+          <div v-else class="video">
+            <video controls :src="item.img"></video>
+          </div>
         </div>
       </swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
@@ -68,7 +71,7 @@ export default {
     this.interval = null;
   },
   mounted() {
-    this.reInterval();
+    // this.reInterval();
   },
 };
 </script>
@@ -99,6 +102,7 @@ export default {
 .swiper-body {
   position: relative;
   height: 100%;
+  background: #000;
   user-select: none;
   .swiper-slide {
     > div {
@@ -116,6 +120,14 @@ export default {
         z-index: 99;
         width: 100%;
       }
+      .video{
+        width: 100%;
+        background: #000;
+        min-height: 80vh;
+        >video{
+          width: 80%;
+        }
+      }
     }
   }
 }

src/components/Listiframe.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="ifr-con">
-        <iframe :src="'https://www.4dmodel.com/SuperTwo/index.html?m=805'" frameborder="0"></iframe>
+        <iframe :src="'https://www.4dmodel.com/SuperTwo/index.html?m=805_1'" frameborder="0"></iframe>
     </div>
 </template>
 

src/components/Sidebar.vue

@@ -33,8 +33,8 @@ export default {
 <style lang="less" scoped>
 .sidebar{
   border: .04rem solid #9E9E9E;
-  max-width: 10.42rem;
-  min-width: 9.17rem;
+  max-width: 18.42rem;
+  min-width: 10rem;
   li{
     overflow: hidden;
     text-overflow:ellipsis;

src/components/bmSlide/index.vue

@@ -2,7 +2,7 @@
   <div class="slide">
     <div class="collect-con" :class="{ 'right-con': !isTheme }">
       <div
-        :class="`img-con ${full ? 'full' : ''}`"
+        :class="`img-con ${full ? 'full' : ''}  ${hideSlide ? 'fullImg' : ''}`"
         :style="{ background: $linear[activeItem.bgid] }"
       >
         <img :src="activeItem.imgstr" alt="" />
@@ -11,9 +11,7 @@
         <h3>{{ activeItem.name }}</h3>
         <p v-if="activeItem.time">年代：{{ activeItem.time || "" }}</p>
         <p v-if="activeItem.size">尺寸：{{ activeItem.size || "" }}</p>
-        <div class="desc" v-if="activeItem.describe">
-          {{ activeItem.describe || "" }}
-        </div>
+        <div class="desc"  v-html="activeItem.describe || ''" v-if="activeItem.describe"></div>
         <div class="qrcode" v-if="activeItem.qrcode">
           <img :src="`${$cdn}/images/qrcode/${activeItem.qrcode}.png`" alt="" />
           <span>了解更多故事</span>
@@ -21,6 +19,7 @@
       </div>
     </div>
     <m-slide
+      v-show="!hideSlide"
       :isTheme="isTheme"
       :idx="idx"
       @activeItem="handleItem"
@@ -34,7 +33,7 @@
 import slide from "./slide";
 
 export default {
-  props: ["full", "list", "idx", "isTheme"],
+  props: ["full", "list", "idx", "isTheme",'hideSlide'],
   components: {
     mSlide: slide,
   },
@@ -76,6 +75,16 @@ export default {
         transform: translate(-50%, -50%);
         height: 90%;
       }
+      
+    }
+    .fullImg{
+      height: auto;
+        > img {
+          width: 100%!important;
+          height: auto;
+          position: static;
+          transform: translate(0,0);
+        }
     }
     .show-info {
       color: #444444;

src/components/jieshuo.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="commentary" :class="{ jieshuotheme: !isTheme }">
     <div>
-      <span :class="{ active: idx == 1 }" @click="idx = 1">解说：女声</span>
-      <span :class="{ active: idx == 2 }" @click="idx = 2">解说：男声</span>
+      <span :class="{ active: idx == 'female' }" @click="idx = 'female'">解说：女声</span>
+      <span :class="{ active: idx == 'male' }" @click="idx = 'male'">解说：男声</span>
     </div>
     <div>
-      <audio preload="auto" :src="`${$cdn}/audio/testaudio.mp3`"></audio>
+      <audio preload="auto" :src="`${$cdn}/audio/${idx}/${bgm}.mp3`"></audio>
     </div>
   </div>
 </template>
@@ -14,10 +14,10 @@
 export default {
   data() {
     return {
-      idx: 1,
+      idx: 'female',
     };
   },
-  props: ["showJiesuo", "isTheme"],
+  props: ["showJiesuo", "isTheme",'bgm'],
   mounted() {},
 };
 </script>

src/components/mbslide/index.vue

@@ -21,7 +21,7 @@ export default {
     SwiperSlide,
   },
 
-  props:['list','isTheme'],
+  props:['list','isTheme','hideSlide'],
   data () {
     let imgs = [
       {
@@ -79,7 +79,7 @@ export default {
           nextEl: '.swiper-button-next',
           prevEl: '.swiper-button-prev'
         },
-        loop: true,
+        loop: !this.hideSlide,
         paginationClickable: true,
         on: {
           progress: function () {

src/components/msection.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <jieshuo v-if="!hideJiesuo" :isTheme='isTheme'/>
-      <mbslide v-if="data.length>0" :list="data" :isTheme='isTheme'/>
+      <mbslide :hideSlide="hideSlide" v-if="data.length>0" :list="data" :isTheme='isTheme'/>
       <!-- <bm-slide :isTheme='isTheme' v-if="data.length>0"  :idx='activeIdx' @activeItem="handleItem" :list='data'  class="sld-con"/> -->
 
       <div class="readmore" v-if="showMore">
@@ -64,6 +64,10 @@ export default {
       type:Boolean,
       default:false
     },
+    hideSlide:{
+      type:Boolean,
+      default:false
+    },
     titlecolor:{
       type:String,
       default:'#444'

src/components/section.vue

@@ -23,12 +23,13 @@
           ></p>
         </div>
       </div>
-      <jieshuo v-if="!hideJiesuo" :isTheme="isTheme" />
+      <jieshuo v-if="!hideJiesuo" :bgm="bgm" :isTheme="isTheme" />
       <bm-slide
         :full="full"
         :isTheme="isTheme"
         v-if="data.length > 0"
         :idx="activeIdx"
+        :hideSlide="hideSlide"
         @activeItem="handleItem"
         :list="data"
         class="sld-con"
@@ -68,6 +69,12 @@ export default {
         return [];
       },
     },
+    hideSlide: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
     data: {
       type: Array,
       default() {
@@ -94,6 +101,10 @@ export default {
       type: String,
       default: "",
     },
+    bgm: {
+      type: String,
+      default: "",
+    },
     isTheme: {
       type: Boolean,
       default: false,

src/components/showCollection.vue

@@ -23,7 +23,7 @@
               <h3>{{ item.name }}</h3>
               <p v-if="item.time">年代：{{ item.time }}</p>
               <p v-if="item.size">尺寸：{{ item.size }}</p>
-              <div v-if="item.describe" class="desc">{{ item.describe }}</div>
+              <div v-if="item.describe" v-html="item.describe" class="desc"></div>
               <div class="qrcode" v-if="item && item.qrcode">
                 <img
                   :src="`${$cdn}/images/qrcode/${item.qrcode}.png`"

src/components/showMbCollection.vue

@@ -15,7 +15,7 @@
               <h3>{{item.name}}</h3>
               <p v-if="item.time">年代：{{item.time}}</p>
               <p v-if="item.size">尺寸：{{item.size}}</p>
-              <div v-if="item.describe" class="desc">{{item.describe}}</div>
+              <div v-if="item.describe" v-html="item.describe" class="desc"></div>
               <div class="qrcode" v-if="item.qrcode">
                 <div>
                 <img :src="`${$cdn}/images/qrcode/${item.qrcode}.png`" alt="" />

src/components/swCard/index.vue

@@ -7,13 +7,14 @@
     >
       <swiper-slide
         class="swiper-slide"
-        v-for="(item, index) in cards"
+        v-for="(item, index) in data"
         :key="index"
       >
-        <div @click="$router.push({name:'List',query:{id:item.id}})">
-          <img class="logo" :src="`${$cdn}/images/hb.png`" />
-          <!-- <img class="logo" :src="`${$cdn}/images/hb${item.img}.png`" /> -->
-          <!-- <div class="maskss" ></div>  -->
+        <div>
+          <img class="real" :src="item.img" alt="" v-if="item.type == 'img'" />
+          <div v-else class="video">
+            <video  controls autoplay :src="item.img"></video>
+          </div>
         </div>
       </swiper-slide>
       <div class="swiper-pagination" slot="pagination"></div>
@@ -34,152 +35,21 @@ export default {
   computed: {
     swiper() {
       return this.$refs.listSwiper.$swiper;
-    },
-    swiperOption() {
-      let that = this
-      let getIndex = (range,length,current)=>{
-        let next =(current + range) > length ? (current + range) - length : (current + range)
-        let prev =(current - range) < 0 ? (current - range) + length : (current - range)
-
-        return {
-          prev,
-          next
-        }
-      };
-
-      let setClass = (range,length,current,that,cls)=>{
-        let {prev,next} = getIndex(range,length,current)
-        let p = that.slides.eq(prev) 
-        let n =  that.slides.eq(next)  
-        let cur =  that.slides.eq(current)  
-
-        p.find('.maskss').removeClass('mask mask1 mask2')
-        n.find('.maskss').removeClass('mask mask1 mask2')
-        cur.find('.maskss').removeClass('mask mask1 mask2')
-
-        p.find('.maskss').addClass(cls);
-        n.find('.maskss').addClass(cls);
-      };
-      return {
-        watchSlidesProgress: true,
-        slidesPerView: "auto",
-        centeredSlides: true,
-        initialSlide :3,
-        // loop: true,
-        // loopedSlides: 9,
-        on: {
-          click:function () {
-            if (this.clickedIndex>=0) {
-              this.slideTo(this.clickedIndex, 500,()=>{
-                this.lazy.load();
-              })
-            }
-          },
-          transitionEnd:function () {
-            let length = this.slides.length
-            that.activeIdx = this.activeIndex
-            for (let i = 0; i < length; i++) {
-              var slide = this.slides.eq(i);
-              let classNames =slide[0].className
-              if (classNames.indexOf('active')>-1) {
-                setClass (1,length,i,this,'mask') 
-                setClass (2,length,i,this,'mask1') 
-                setClass (3,length,i,this,'mask2') 
-              }
-            }
-          },
-          progress: function() {
-            for (let i = 0; i < this.slides.length; i++) {
-              var slide = this.slides.eq(i);
-              var slideProgress = this.slides[i].progress;
-              var modify = 1;
-              if (Math.abs(slideProgress) > 1) {
-                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
-              }
-              let translate = slideProgress * modify * 140 + "px";
-              let scale = 1 - Math.abs(slideProgress) / 5;
-              let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
-            
-              // let opacity = 1 - Math.min(Math.abs(slideProgress / 2), 1);
-             
-              slide.transform(
-                "translateX(" + translate + ") scale(" + scale + ")"
-              );
-              slide.css({
-                "zIndex": zIndex,
-                "opacity": 1,
-                "pointer-events": 'auto',
-              });
-              
-              if (Math.abs(slideProgress) > 3) {
-                slide.css({
-                  // "opacity":0,
-                  "pointer-events":"none"
-                });
-              }
-            }
-          },
-          setTransition: function(transition) {
-            for (var i = 0; i < this.slides.length; i++) {
-              var slide = this.slides.eq(i);
-              slide.transition(transition);
-            }
-          }
-        },
-      };
-    },
+    }
   },
-  props:['list'],
+  props:['data'],
   data() {
-    let cards = [{
-      img:1,
-      id:8,
-      name:'廊道构件'
-    },{
-      img:2,
-      id:3,
-      name:'雕饰构件'
-    },{
-      img:3,
-      id:4,
-      name:'栏柱构件'
-    },{
-      img:4,
-      id:9,
-      name:'精品馆藏'
-    },{
-      img:5,
-      id:5,
-      name:'楼梯构件'
-    },{
-      img:6,
-      id:7,
-      name:'墙饰面'
-    },{
-      img:7,
-      id:6,
-      name:'墙面构件'
-    }]
     return {
       activeDate: "",
       showNext: 0,
       showPre: 0,
-      activeIdx:'',
-      cards
+      activeIdx:''
     };
   },
-  methods: {
-    goto(url) {
-      window.open(url, "_blank");
-    },
-  },
   components: {
     Swiper,
     SwiperSlide,
   },
-  directives: {
-    swiper: directive,
-  },
   mounted() {
   },
 };
@@ -189,66 +59,33 @@ export default {
   position: relative;
   width: 100%;
   margin: 0 auto;
+  padding: 0;
+  background: #000;
 }
 
 .swiper-wrapper {
-  margin-top: 10px;
-  padding: 20px 0;
+  padding: 0;
+  margin: 0;
 }
 
 .swiper-slide {
-  width: 400px;
   cursor: pointer;
   font-size: 0;
   position: relative;
-}
-
-.swiper-slide img {
-  width: 100%;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-}
-.swiper-slide .maskss{
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  overflow: hidden;
-}
-.swiper-slide .mask{
-  background: #804D28;
-  opacity: 0.5;
-}
-
-.swiper-slide .mask1{
-  background: #6e4029;
-  opacity: 0.65;
-}
-
-.swiper-slide .mask2{
-  background: #4b2b13;
-  opacity: 0.65;
-}
-.page{
-  display: flex;
-  justify-content: center;
-  margin-top: 10px;
-  >li{
-    margin: 0 15px;
-    >span{
-      width: 60px;
-      height: 8px;
-      background-color: #CCCCCC;
-      display: inline-block;
-    }
-    .active{
-      background: #4b2b13;
-    }
+  img{
+    width: 100%;
   }
-}
-@media screen and (max-width: 1600px) {
-    .swiper-slide {
-      width: 350px;
+  .video{
+    min-height: 70vh;
+    width: 100%;
+    >video{
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      width: 100%;
     }
+  }
 }
+
 </style>

src/config/videodata.js

@@ -3,7 +3,7 @@ let $cdn = process.env.VUE_APP_CDN
 const data = [
   {
     id: 1,
-    name: '苟伯儒儿子采访视频', 
+    name: '川陕苏区税务干部苟伯儒后代访谈', 
     describe: '视频介绍视频介绍视频介绍视频介绍',
     content: '内容',
     type:'类型',
@@ -13,6 +13,17 @@ const data = [
   },
   {
     id: 2,
+    name: '川陕苏区税务干部朱有炽后代访谈', 
+    describe: '视频介绍视频介绍视频介绍视频介绍',
+    content: '内容',
+    type:'类型',
+    video: $cdn + "/video/erzi.mp4",
+    keyword: '',
+    date: '1932年12月-1935年4月'
+  },
+  
+  {
+    id: 3,
     name: '动态地图', 
     describe: '视频介绍视频介绍视频介绍视频介绍',
     content: '内容',

src/views/collection/data.js

@@ -1,315 +0,0 @@
-const data = [
-
-  //前言
-  {
-    name:'1933年红四方面军第九军政治部印发的程惠明的土地使用证',
-    typeStr: "前言",
-    type:0,
-    id:1,
-    img:'1933年红四方面军第九军政治部印发的程惠明的土地使用证'
-  },
-  {
-    name:'1933年红四方面军第九军政治部印发的给红江县余风樟的土地使用证',
-    typeStr: "前言",
-    type:0,
-    id:2,
-    img:'1933年红四方面军第九军政治部印发的给红江县余风樟的土地使用证'
-  },
-  {
-    name:'1933年红四方面军第九军政治部印发的给张映伦的土地使用证',
-    typeStr: "前言",
-    type:0,
-    id:3,
-    img:'1933年红四方面军第九军政治部印发的给张映伦的土地使用证'
-  },
-  {
-    name:'1934年中国工农红军第四军二师三十四团政治处发给阆县一区三乡五村会员雒登佐的土地使用证',
-    typeStr: "前言",
-    type:0,
-    id:4,
-    img:'1934年中国工农红军第四军二师三十四团政治处发给阆县一区三乡五村会员雒登佐的土地使用证'
-  },
-  {
-    name:'巴中县第二次工农兵苏维埃代表大会宣言',
-    typeStr: "前言",
-    type:0,
-    id:5,
-    img:'巴中县第二次工农兵苏维埃代表大会宣言'
-  },
-  {
-    name:'背篓',
-    typeStr: "前言",
-    type:0,
-    id:6,
-    img:'背篓'
-  },
-
-
-  // 第一单元
-  {
-    name:'茶壶',
-    typeStr: "第一单元",
-    type:1,
-    id:1,
-    img:'茶壶'
-  },
-  {
-    name:'川陕省财政委员会印章',
-    typeStr: "第一单元",
-    type:1,
-    id:2,
-    img:'川陕省财政委员会印章'
-  },
-  {
-    name:'川陕省苏维埃政府布告 (1)',
-    typeStr: "第一单元",
-    type:1,
-    id:3,
-    img:'川陕省苏维埃政府布告 (1)'
-  },
-  {
-    name:'川陕省苏维埃政府布告 (2)',
-    typeStr: "第一单元",
-    type:1,
-    id:4,
-    img:'川陕省苏维埃政府布告 (2)'
-  },
-  {
-    name:'川陕省苏维埃政府印章大 (1)',
-    typeStr: "第一单元",
-    type:1,
-    id:5,
-    img:'川陕省苏维埃政府印章   大 (1)'
-  },
-  {
-    name:'川陕省苏维埃政府印章   大 (2)',
-    typeStr: "第一单元",
-    type:1,
-    id:6,
-    img:'川陕省苏维埃政府印章   大 (2)'
-  },
-  {
-    name:'大章',
-    typeStr: "第一单元",
-    type:1,
-    id:7,
-    img:'大章'
-  },
-
- // 第二单元
-  {
-    name:'川陕省苏维埃政府印章   小 (1)',
-    typeStr: "第二单元",
-    type:2,
-    id:1,
-    img:'川陕省苏维埃政府印章   小 (1)'
-  },
-
-  {
-    name:'川陕省苏维埃政府印章   小 (2)',
-    typeStr: "第二单元",
-    type:2,
-    id:2,
-    img:'川陕省苏维埃政府印章   小 (2)'
-  },
-  {
-    name:'川陕苏区发行的布币 (1)',
-    typeStr: "第二单元",
-    type:2,
-    id:3,
-    img:'川陕苏区发行的布币 (1)'
-  },
-  {
-    name:'川陕苏区发行的布币 (2)',
-    typeStr: "第二单元",
-    type:2,
-    id:4,
-    img:'川陕苏区发行的布币 (2)'
-  },
-  {
-    name:'川陕苏区发行的布币 (3)',
-    typeStr: "第二单元",
-    type:2,
-    id:5,
-    img:'川陕苏区发行的布币 (3)'
-  },
-  {
-    name:'川陕苏区发行的布币 (4)',
-    typeStr: "第二单元",
-    type:2,
-    id:6,
-    img:'川陕苏区发行的布币 (4)'
-  },
-  {
-    name:'川陕苏区发行的纸币（三串） (1)',
-    typeStr: "第二单元",
-    type:2,
-    id:7,
-    img:'川陕苏区发行的纸币（三串） (1)'
-  },
-  {
-    name:'川陕苏区发行的纸币（三串） (2)',
-    typeStr: "第二单元",
-    type:2,
-    id:8,
-    img:'川陕苏区发行的纸币（三串） (2)'
-  },
-
-  // 第三单元
-  {
-    name:'川陕苏区发行的纸币（壹串） (1)',
-    typeStr: "第三单元",
-    type:3,
-    id:1,
-    img:'川陕苏区发行的纸币（壹串） (1)'
-  },
-  {
-    name:'川陕苏区发行的纸币（壹串） (2)',
-    typeStr: "第三单元",
-    type:3,
-    id:2,
-    img:'川陕苏区发行的纸币（壹串） (2)'
-  },
-  {
-    name:'川陕苏区发行的纸币（壹圆） (1)',
-    typeStr: "第三单元",
-    type:3,
-    id:3,
-    img:'川陕苏区发行的纸币（壹圆） (1)'
-  },
-  {
-    name:'川陕苏区发行的纸币（壹圆） (2)',
-    typeStr: "第三单元",
-    type:3,
-    id:4,
-    img:'川陕苏区发行的纸币（壹圆） (2)'
-  },
-
-
-  // 第四单元
-  {
-    name:'川陕苏区铜币（200文）',
-    typeStr: "第四单元",
-    type:4,
-    id:1,
-    img:'川陕苏区铜币（200文）'
-  },
-  {
-    name:'川陕苏区铜币（500文）',
-    typeStr: "第四单元",
-    type:4,
-    id:2,
-    img:'川陕苏区铜币（500文）'
-  },
-  {
-    name:'川陕苏区铜币） (2)',
-    typeStr: "第四单元",
-    type:4,
-    id:3,
-    img:'川陕苏区铜币） (2)'
-  },
-
-  // 第五单元
-  {
-    name:'川陕苏区银币',
-    typeStr: "第五单元",
-    type:5,
-    id:1,
-    img:'川陕苏区银币'
-  },
-  {
-    name:'大秤',
-    typeStr: "第五单元",
-    type:5,
-    id:2,
-    img:'大秤'
-  },
-  {
-    name:'大斗和小升 (2)',
-    typeStr: "第五单元",
-    type:5,
-    id:3,
-    img:'大斗和小升 (2)'
-  },
-  {
-    name:'大清铜币 (2)',
-    typeStr: "第五单元",
-    type:5,
-    id:4,
-    img:'大清铜币 (2)'
-  },
-  {
-    name:'党员证 (1)',
-    typeStr: "第五单元",
-    type:5,
-    id:5,
-    img:'党员证 (1)'
-  },
-  {
-    name:'党员证 (2)',
-    typeStr: "第五单元",
-    type:5,
-    id:6,
-    img:'党员证 (2)'
-  },
-
-  // 拓片展示/结语
-  {
-    name:'0017',
-    typeStr: "拓片展示/结语",
-    type:6,
-    id:1,
-    img:'0017'
-  },
-  {
-    name:'0018',
-    typeStr: "拓片展示/结语",
-    type:6,
-    id:2,
-    img:'0018'
-  },
-  {
-    name:'0019',
-    typeStr: "拓片展示/结语",
-    type:6,
-    id:3,
-    img:'0019'
-  },
-  {
-    name:'0020',
-    typeStr: "拓片展示/结语",
-    type:6,
-    id:4,
-    img:'0020'
-  },
-  {
-    name:'0021',
-    typeStr: "拓片展示/结语",
-    type:6,
-    id:5,
-    img:'0021'
-  },
-  {
-    name:'0025',
-    typeStr: "拓片展示/结语",
-    type:6,
-    id:6,
-    img:'0025'
-  },
-  {
-    name:'0026',
-    typeStr: "拓片展示/结语",
-    type:6,
-    id:7,
-    img:'0026'
-  },
-  {
-    name:'0027',
-    typeStr: "拓片展示/结语",
-    type:6,
-    id:8,
-    img:'0027'
-  },
-]
-
-export default {data}

src/views/collection/index.vue

@@ -21,4 +21,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.collection-body{
+  min-height: calc(100vh - 300px);
+}
+
 </style>

src/views/dynamic/index.vue

@@ -110,6 +110,7 @@ export default {
 .dynamic {
   background: #f1f1f1;
   width: 100%;
+  min-height: calc(100vh - 130px);
   .d-con {
     width: 55rem;
     // width: @containerW;