update

src/components/lunbo.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="lunbo" :key="id" :ref="id" v-swiper:mySwiper="swiperOptions">
-    <ul class="swiper-wrapper swiper2">
-      <li class="swiper-slide" v-for="(item, i) in data" :key="i">
-        <img
-          :src="require(`@/assets/images/collection/${active}/${item.img}`)"
-        />
-        <span>{{ item.name }}</span>
-      </li>
-    </ul>
-  </div>
+  <ul class="swiper-wrapper swiper2">
+    <li class="swiper-slide" v-for="(item, i) in data" @click="showIframe(item.link,item.name)" :key="i">
+      <img
+        :src="require(`@/assets/images/collection/${active}/${item.img}`)"
+      />
+      <span>{{ item.name }}</span>
+    </li>
+  </ul>
+</div>
+ 
 </template>
 
 <script>
@@ -27,7 +28,7 @@ export default {
       return {
         preventLinksPropagation: !1,
         slidesPerView: "auto",
-        speed: 6e3,
+        speed: 1e4,
         loop: true,
         freeMode: true,
         autoplay: {
@@ -35,27 +36,50 @@ export default {
           disableOnInteraction: !1,
           reverseDirection: this.isReverse,
         },
+        on: {
+          progress: function(swiper,progress){
+              console.log(progress,swiper);
+            },  
+        },
         pagination: {},
+        
       };
     },
   },
   beforeDestroy() {
     this.$refs[this.id].swiper.destroy();
   },
+  methods:{
+    showIframe(url,name){
+      this.$emit('openIframe',{"url":url,"isShow":true,"name":name});
+    },
+  }
 };
 </script>
 
 <style lang="less" scoped>
 .lunbo {
   width: 100%;
+  position: relative;
+  &::before{
+    content: '';
+    position: absolute;
+    background:linear-gradient(90deg,rgba(0,0,0,1),rgba(0,0,0,0));
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 80px;
+    z-index: 9999;
+  }
   .swiper-wrapper {
     width: 100%;
     .swiper-slide {
-      width: 287px;
-      height: 287px;
+      width: 15vw;
+      height: 15vw;
       position: relative;
       cursor: pointer;
       transition: 0.3s ease all;
+      margin:0 2vw 0;
       > img {
         width: 100%;
         height: 100%;
@@ -77,6 +101,7 @@ export default {
       }
     }
   }
+
 }
 </style>
 

src/data/data.js

@@ -3,387 +3,332 @@ let menu = [{
   id:'gaochun',
   list:[{
     img:'GC1.png',
-    name:'文物名字'
+    name:'方格勾连纹双耳铜簋',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC09&v=1'
   },{
     img:'GC2.png',
-    name:'文物名字'
+    name:'霁蓝釉瓷盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC72&v=1'
   },{
     img:'GC3.png',
-    name:'文物名字'
+    name:'双龙乳钉纹铜钮钟',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC04&v=1'
   },{
     img:'GC4.png',
-    name:'文物名字'
+    name:'葫芦冰梅瓷瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC61&v=1'
   },{
     img:'GC5.png',
-    name:'文物名字'
+    name:'青铜剑',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC100&v=1'
   },{
     img:'GC6.png',
-    name:'文物名字'
+    name:'梅花形影青瓷碟',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC65&v=1'
   },{
     img:'GC7.png',
-    name:'文物名字'
+    name:'鱼鳞纹铜提梁卣',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC12&v=1'
   },{
     img:'GC8.png',
-    name:'文物名字'
+    name:'鸟首镂孔釉陶熏炉',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC52&v=1'
   },{
     img:'GC9.png',
-    name:'文物名字'
+    name:'景泰款狮钮龙纹兽足铜香炉',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC25&v=1'
   },{
     img:'GC10.png',
-    name:'文物名字'
+    name:'青花瓷孩儿脉枕',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC66&v=1'
   },{
     img:'GC11.png',
-    name:'文物名字'
+    name:'窃曲纹曲柄铜勺',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC13&v=1'
   },{
     img:'GC12.png',
-    name:'文物名字'
+    name:'悬山顶黄釉陶仓',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC53&v=1'
   },{
     img:'GC13.png',
-    name:'文物名字'
+    name:'铜弩机',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC19&v=1'
   },{
     img:'GC14.png',
-    name:'文物名字'
+    name:'青花梅花葫芦瓷瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC63&v=1'
   },{
     img:'GC15.png',
-    name:'文物名字'
+    name:'月宫纹铜镜',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC37&v=1'
   },{
     img:'GC16.png',
-    name:'文物名字'
+    name:'谷仓陶罐',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC76&v=1'
   },{
     img:'GC17.png',
-    name:'文物名字'
+    name:'兽面纹铜甬钟',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC02&v=1'
   },{
     img:'GC18.png',
-    name:'文物名字'
+    name:'粉彩牡丹瓷盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC71&v=1'
   },{
     img:'GC19.png',
-    name:'文物名字'
-  },{
-    img:'GC20.png',
-    name:'文物名字'
-  },{
-    img:'GC21.png',
-    name:'文物名字'
+    name:'鸡首流带銎铜盉',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_GC14&v=1'
   }]
 },{
   name:'德国博物馆',
   id:'germany',
   list:[{
     img:'ger (1).png',
-    name:'文物名字'
+    name:'秘鲁莫切人物陶罐',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger01&v=1'
   },{
     img:'ger (2).png',
-    name:'文物名字'
+    name:'意大利锡釉陶器',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger10&v=1'
   },{
     img:'ger (3).png',
-    name:'文物名字'
+    name:'吃古柯叶的厄瓜多尔祭司',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger02&v=1'
   },{
     img:'ger (4).png',
-    name:'文物名字'
+    name:'陶瓷壶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger11&v=1'
   },{
     img:'ger (5).png',
-    name:'文物名字'
+    name:'伊兹尼克瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger03&v=1'
   },{
     img:'ger (6).png',
-    name:'文物名字'
+    name:'雅典双耳细颈瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger12&v=1'
   },{
     img:'ger (7).png',
-    name:'文物名字'
+    name:'青瓷盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger04&v=1'
   },{
     img:'ger (8).png',
-    name:'文物名字'
+    name:'琴图里佩瓷钵',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger13&v=1'
   },{
     img:'ger (9).png',
-    name:'文物名字'
+    name:'日本花瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger05&v=1'
   },{
     img:'ger (10).png',
-    name:'文物名字'
+    name:'龙像',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger14&v=1'
   },{
     img:'ger (11).png',
-    name:'文物名字'
+    name:'陶制火鸡造型盖碗',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger06&v=1'
   },{
     img:'ger (12).png',
-    name:'文物名字'
+    name:'柏林皇家花瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger15&v=1'
   },{
     img:'ger (13).png',
-    name:'文物名字'
+    name:'西班牙黄金盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger07&v=1'
   },{
     img:'ger (14).png',
-    name:'文物名字'
+    name:'清丨牧童回家',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger16&v=1'
   },{
     img:'ger (15).png',
-    name:'文物名字'
+    name:'Émille Gallé 盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger08&v=1'
   },{
     img:'ger (16).png',
-    name:'文物名字'
+    name:'法国绝代艳后花瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_ger09&v=1'
   }]
 },{
   name:'南京博物馆',
   id:'nanjing',
   list:[{
-    img:'GC1.png',
-    name:'文物名字'
+    img:'nj (1).png',
+    name:'东晋·陶牛车及陶俑群',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj01&v=1'
   },{
-    img:'GC2.png',
-    name:'文物名字'
+    img:'nj (3).png',
+    name:'文物名字',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj30&v=1'
   },{
-    img:'GC3.png',
-    name:'文物名字'
+    img:'nj (4).png',
+    name:'文物名字',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj35&v=1'
   },{
-    img:'GC4.png',
-    name:'文物名字'
+    img:'nj (5).png',
+    name:'东晋·玻璃杯',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj18&v=1'
   },{
-    img:'GC5.png',
-    name:'文物名字'
+    img:'nj (6).png',
+    name:'文物名字',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj36&v=1'
   },{
-    img:'GC6.png',
-    name:'文物名字'
+    img:'nj (7).png',
+    name:'东晋·陶马',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj19&v=1'
   },{
-    img:'GC7.png',
-    name:'文物名字'
+    img:'nj (8).png',
+    name:'文物名字',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj37&v=1'
   },{
-    img:'GC8.png',
-    name:'文物名字'
+    img:'nj (9).png',
+    name:'东晋·金珰',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj21&v=1'
   },{
-    img:'GC9.png',
-    name:'文物名字'
+    img:'nj (10).png',
+    name:'文物名字',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj38&v=1'
   },{
-    img:'GC10.png',
-    name:'文物名字'
+    img:'nj (11).png',
+    name:'南朝·铜佛像',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj25&v=1'
   },{
-    img:'GC11.png',
-    name:'文物名字'
+    img:'nj (12).png',
+    name:'南朝齐·王珪之墓志',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj39&v=1'
   },{
-    img:'GC12.png',
-    name:'文物名字'
+    img:'nj (13).png',
+    name:'六朝·人面纹瓦当',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj27&v=1'
   },{
-    img:'GC13.png',
-    name:'文物名字'
+    img:'nj (14).png',
+    name:'文物名字',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj31&v=1'
   },{
-    img:'GC14.png',
-    name:'文物名字'
+    img:'nj (15).png',
+    name:'六朝·莲花纹瓦当',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj28&v=1'
   },{
-    img:'GC15.png',
-    name:'文物名字'
-  },{
-    img:'GC16.png',
-    name:'文物名字'
-  },{
-    img:'GC17.png',
-    name:'文物名字'
-  },{
-    img:'GC18.png',
-    name:'文物名字'
+    img:'nj (16).png',
+    name:'文物名字',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj32&v=1'
   },{
-    img:'GC19.png',
-    name:'文物名字'
+    img:'nj (17).png',
+    name:'六朝·兽面纹瓦当',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj29&v=1'
   },{
-    img:'GC20.png',
-    name:'文物名字'
-  },{
-    img:'GC21.png',
-    name:'文物名字'
+    img:'nj (19).png',
+    name:'文物名字',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nj30&v=1'
   }]
 },{
   name:'南通博物馆',
   id:'nantong',
   list:[{
-    img:'GC1.png',
-    name:'文物名字'
+    img:'nt (1).png',
+    name:'磁州窑系人物故事花卉纹大罐',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt01&v=1'
   },{
-    img:'GC2.png',
-    name:'文物名字'
+    img:'nt (3).png',
+    name:'青花竹石芭蕉纹玉壶春瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt03&v=1'
   },{
-    img:'GC3.png',
-    name:'文物名字'
+    img:'nt (5).png',
+    name:'青花缠枝莲瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt06&v=1'
   },{
-    img:'GC4.png',
-    name:'文物名字'
+    img:'nt (8).png',
+    name:'嵌珐琅双龙戏珠纹天球罐',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt72&v=1'
   },{
-    img:'GC5.png',
-    name:'文物名字'
+    img:'nt (9).png',
+    name:'青花人物故事觚形瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt46&v=1'
   },{
-    img:'GC6.png',
-    name:'文物名字'
+    img:'nt (11).png',
+    name:'黄地珐琅彩花卉碗',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt18&v=1'
   },{
-    img:'GC7.png',
-    name:'文物名字'
-  },{
-    img:'GC8.png',
-    name:'文物名字'
-  },{
-    img:'GC9.png',
-    name:'文物名字'
-  },{
-    img:'GC10.png',
-    name:'文物名字'
-  },{
-    img:'GC11.png',
-    name:'文物名字'
-  },{
-    img:'GC12.png',
-    name:'文物名字'
-  },{
-    img:'GC13.png',
-    name:'文物名字'
-  },{
-    img:'GC14.png',
-    name:'文物名字'
+    img:'nt (12).png',
+    name:'青花一束莲纹大盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt87&v=1'
   },{
-    img:'GC15.png',
-    name:'文物名字'
-  },{
-    img:'GC16.png',
-    name:'文物名字'
-  },{
-    img:'GC17.png',
-    name:'文物名字'
+    img:'nt (13).png',
+    name:'斗彩花卉碗',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt19&v=1'
   },{
-    img:'GC18.png',
-    name:'文物名字'
+    img:'nt (14).png',
+    name:'嵌珐琅花卉瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt53&v=1'
   },{
-    img:'GC19.png',
-    name:'文物名字'
+    img:'nt (16).png',
+    name:'嵌珐琅象尊',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt54&v=1'
   },{
-    img:'GC20.png',
-    name:'文物名字'
+    img:'nt (18).png',
+    name:'张謇铭嵌珐琅云竹纹双联瓶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt65&v=1'
   },{
-    img:'GC21.png',
-    name:'文物名字'
-  }]
-},{
-  name:'古田会议纪念馆',
-  id:'gutian',
-  list:[{
-    img:'GC1.png',
-    name:'文物名字'
-  },{
-    img:'GC2.png',
-    name:'文物名字'
-  },{
-    img:'GC3.png',
-    name:'文物名字'
-  },{
-    img:'GC4.png',
-    name:'文物名字'
-  },{
-    img:'GC5.png',
-    name:'文物名字'
-  },{
-    img:'GC6.png',
-    name:'文物名字'
-  },{
-    img:'GC7.png',
-    name:'文物名字'
-  },{
-    img:'GC8.png',
-    name:'文物名字'
-  },{
-    img:'GC9.png',
-    name:'文物名字'
-  },{
-    img:'GC10.png',
-    name:'文物名字'
-  },{
-    img:'GC11.png',
-    name:'文物名字'
-  },{
-    img:'GC12.png',
-    name:'文物名字'
-  },{
-    img:'GC13.png',
-    name:'文物名字'
-  },{
-    img:'GC14.png',
-    name:'文物名字'
-  },{
-    img:'GC15.png',
-    name:'文物名字'
-  },{
-    img:'GC16.png',
-    name:'文物名字'
-  },{
-    img:'GC17.png',
-    name:'文物名字'
-  },{
-    img:'GC18.png',
-    name:'文物名字'
-  },{
-    img:'GC19.png',
-    name:'文物名字'
-  },{
-    img:'GC20.png',
-    name:'文物名字'
-  },{
-    img:'GC21.png',
-    name:'文物名字'
+    img:'nt (20).png',
+    name:'化生佛造像碑',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_nt66&v=1'
   }]
 },{
   name:'广东省博物馆',
   id:'guangdong',
   list:[{
-    img:'GC1.png',
-    name:'文物名字'
-  },{
-    img:'GC2.png',
-    name:'文物名字'
-  },{
-    img:'GC3.png',
-    name:'文物名字'
-  },{
-    img:'GC4.png',
-    name:'文物名字'
-  },{
-    img:'GC5.png',
-    name:'文物名字'
-  },{
-    img:'GC6.png',
-    name:'文物名字'
+    img:'gd (1).png',
+    name:'广彩人像庭院图六角灯座',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds11&v=1'
   },{
-    img:'GC7.png',
-    name:'文物名字'
+    img:'gd (3).png',
+    name:'广彩徽章纹盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds01&v=1'
   },{
-    img:'GC8.png',
-    name:'文物名字'
+    img:'gd (5).png',
+    name:'广彩徽章纹花口盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds02&v=1'
   },{
-    img:'GC9.png',
-    name:'文物名字'
+    img:'gd (7).png',
+    name:'广彩徽章纹瓣口盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds03&v=1'
   },{
-    img:'GC10.png',
-    name:'文物名字'
+    img:'gd (9).png',
+    name:'广彩徽章纹八角形盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds04&v=1'
   },{
-    img:'GC11.png',
-    name:'文物名字'
+    img:'gd (11).png',
+    name:'青花粉彩徽章纹盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds05&v=1'
   },{
-    img:'GC12.png',
-    name:'文物名字'
+    img:'gd (13).png',
+    name:'青花广彩徽章纹花口盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds06&v=1'
   },{
-    img:'GC13.png',
-    name:'文物名字'
+    img:'gd (14).png',
+    name:'广彩珍珠地花卉纹马克杯',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds12&v=1'
   },{
-    img:'GC14.png',
-    name:'文物名字'
+    img:'gd (15).png',
+    name:'广彩天使图盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds09&v=1'
   },{
-    img:'GC15.png',
-    name:'文物名字'
-  },{
-    img:'GC16.png',
-    name:'文物名字'
+    img:'gd (16).png',
+    name:'广彩人物纹双兽耳长方形盖盆',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds14&v=1'
   },{
-    img:'GC17.png',
-    name:'文物名字'
+    img:'gd (17).png',
+    name:'广彩巴利斯之审判图盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds07&v=1'
   },{
-    img:'GC18.png',
-    name:'文物名字'
-  },{
-    img:'GC19.png',
-    name:'文物名字'
+    img:'gd (18).png',
+    name:'广彩英国罗斯伯爵徽章纹大盘',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds15&v=1'
   },{
-    img:'GC20.png',
-    name:'文物名字'
+    img:'gd (19).png',
+    name:'广彩通景航海西洋人物图执壶',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds10&v=1'
   },{
-    img:'GC21.png',
-    name:'文物名字'
+    img:'gd (20).png',
+    name:'广彩人物故事图带盖奖杯',
+    link:'http://4dscene.4dage.com/culturalrelics/ZZBBH/Model.html?m=BBH_gds16&v=1'
   }]
 }]
 

src/views/Home.vue

@@ -14,6 +14,7 @@
         :active="active"
         :data="topItem"
         class="top"
+        @openIframe="openIframe"
       />
       <lunbo
         v-if="active"
@@ -21,9 +22,17 @@
         :active="active"
         class="bottom"
         :data="bottomItem"
+        @openIframe="openIframe"
         :isReverse="true"
       />
     </div>
+
+    <div id="iframe-container" v-if="iframeShow">
+      <div class="namebox"><img src="@/assets/images/namebox.png"/><div class="name">{{name}}</div></div>
+      <iframe id="iframe" :src="iframeUrl"/>
+      <img id="iframeback" src="@/assets/images/iframeback.png"/>
+      <div id="iframeCancel" @click="iframeShow = false"><img src="@/assets/images/iframeCancel.png"/></div>
+  </div>
     <ul class="list">
       <li
         @click="handleItem(item)"
@@ -57,9 +66,17 @@ export default {
     return {
       menu,
       active: "gaochun",
+      iframeShow:false,
+      iframeUrl:'',
+      name:'',
     };
   },
   methods: {
+    openIframe(data){
+      this.iframeUrl = data.url;
+      this.iframeShow = data.isShow;
+      this.name = data.name;
+    },
     handleItem(item) {
       this.active = "";
       setTimeout(() => {
@@ -88,7 +105,7 @@ export default {
   background-repeat: no-repeat;
   background-position: center center;
   .title {
-    padding-top: 70px;
+    padding-top: 3.6vw;
     > img {
       display: block;
       margin: 0 auto;
@@ -104,7 +121,73 @@ export default {
       margin-left: 0;
     }
   }
+
+  #iframe-container{
+    position:fixed;
+    top:50%;  left:50%;
+    transform: translate(-50%,-50%);
+    width:995px;  height:591px;
+    background-color: #787878;
+    margin:0;
+    z-index:99999999;
+    #iframeback{
+      position:absolute;
+      bottom:0;
+      left:0;
+      width:100%;
+      pointer-events:none;
+      z-index:999999999;
+    }
+    .namebox{
+      position: absolute;
+      top:57px; right:124px;
+      width:57px; height:337px;
+      z-index:999999999;
+      .name{
+          position: absolute;
+          top:50%;
+          left:50%;
+          transform:translate(-50%,-50%);
+          width:18px; 
+          margin:0 auto;
+          word-wrap: break-word;
+          word-break: break-all;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          line-height: 23px;
+          color: #FFFFFF;
+          text-shadow: 0px 0px 6px #000000;
+          letter-spacing: 24px;
+      }
+    }
+    #iframe{
+      position: absolute;
+      top:0; left:0;
+      width:100%;
+      height: 100%;
+    }
+    #iframeCancel{
+      position:absolute;
+      top:13px; right:13px;
+      width:18px; height:18px;
+      color:#FFFFFF;
+      font-size: 20px;
+      &:hover{
+        cursor:pointer;
+      }
+      >img{
+        position:absolute;
+        top:50%;  left:50%;
+        transform:translate(-50%,-50%);
+      }
+    }
+
+  }
   .list {
+    position:absolute;
+    bottom:2.8vw;
+    left:50%;
+    transform:translateX(-50%);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -113,6 +196,7 @@ export default {
       margin: 0 10px;
       color: rgba(255, 255, 255, 0.65);
       font-weight: bold;
+      font-size:16px;
       letter-spacing: 1px;
       &.active,
       &:hover {