解决从其他页面切换回来轮播速度加快问题；解决点击两侧遮罩时文物会粘着鼠标的问题；修改错误文物图片

src/App.vue

@@ -12,6 +12,8 @@ import Home from '@/views/Home.vue'
 export default {
   components:{Home}
 }
+
+
 </script>
 
 <style lang="less">

src/components/lunbo.vue

@@ -36,7 +36,6 @@ export default {
   directives: {
     swiper: directive,
   },
-
   computed: {
     swiperOptions() {
       let that = this;
@@ -45,14 +44,14 @@ export default {
         slidesPerView: "auto",
         speed: 1e4,
         loop: true,
-        freeMode: true,
+        freeMode: false,
         autoplay: {
           delay: 0,
           disableOnInteraction: !1,
           reverseDirection: this.isReverse,
         },
         on: {
-          click: function() {
+          click: function () {
             const clickedRealIndex = parseInt(
               this.clickedSlide.dataset.swiperSlideIndex || this.clickedIndex
             );
@@ -77,6 +76,7 @@ export default {
   &::before {
     content: "";
     position: absolute;
+    pointer-events: none;
     background: linear-gradient(
       90deg,
       #034c52 0,
@@ -92,6 +92,7 @@ export default {
   &::after {
     content: "";
     position: absolute;
+    pointer-events: none;
     background: linear-gradient(-90deg, #034c52, rgba(3, 76, 82, 0));
     right: 0;
     top: 0;
@@ -110,14 +111,14 @@ export default {
       position: relative;
       cursor: pointer;
       transition: 0.3s ease all;
-      margin: 0 2vw 0;
+      margin: 0 1vw 0;
       > img {
         width: 100%;
         height: 100%;
       }
       > span {
         position: absolute;
-        right: 10px;
+        right: 13px;
         top: 14px;
         writing-mode: vertical-lr;
         display: inline-block;

src/data/data.js

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

src/views/Home.vue

@@ -17,7 +17,7 @@
         @openIframe="openIframe"
       />
       <lunbo
-        v-if="active"
+        v-if="active && reInit"
         :id="'bottom'"
         :active="active"
         class="bottom"
@@ -28,11 +28,19 @@
     </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>
+      <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>
+      <span id="companyText" class="loading animated"
+        >四维时代提供技术支持</span
+      >
+    </div>
     <ul class="list">
       <li
         @click="handleItem(item)"
@@ -66,19 +74,21 @@ export default {
     return {
       menu,
       active: "gaochun",
-      iframeShow:false,
-      iframeUrl:'',
-      name:'',
+      iframeShow: false,
+      iframeUrl: "",
+      name: "",
+      reInit: true,
     };
   },
   methods: {
-    openIframe(data){
+    openIframe(data) {
       this.iframeUrl = data.url;
       this.iframeShow = data.isShow;
       this.name = data.name;
     },
     handleItem(item) {
       this.active = "";
+      this.iframeShow = false;
       setTimeout(() => {
         this.active = item.id;
       });
@@ -94,6 +104,16 @@ export default {
       return divideArr(tmp.list).back;
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      document.addEventListener("visibilitychange", () => {
+        this.reInit = false;
+        setTimeout(() => {
+          this.reInit = true;
+        });
+      });
+    });
+  },
 };
 </script>
 
@@ -122,72 +142,91 @@ export default {
     }
   }
 
-  #iframe-container{
-    position:fixed;
-    top:50%;  left:50%;
-    transform: translate(-50%,-50%);
-    width:995px;  height:591px;
+  #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;
+    margin: 0;
+    z-index: 99999999;
+    #iframeback {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      pointer-events: none;
+      z-index: 999999999;
     }
-    .namebox{
+    #companyText {
       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;
+      z-index: 1;
+      font-size: 16px;
+      color: rgb(153, 153, 153);
+      font-weight: 100;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 20px;
+      letter-spacing: 1px;
+      text-shadow: rgb(51 51 51) 0px 1px 1px;
+    }
+    .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{
+    #iframe {
       position: absolute;
-      top:0; left:0;
-      width:100%;
+      top: 0;
+      left: 0;
+      width: 100%;
       height: 100%;
     }
-    #iframeCancel{
-      position:absolute;
-      top:13px; right:13px;
-      width:18px; height:18px;
-      color:#FFFFFF;
+    #iframeCancel {
+      position: absolute;
+      top: 13px;
+      right: 13px;
+      width: 18px;
+      height: 18px;
+      color: #ffffff;
       font-size: 20px;
-      &:hover{
-        cursor:pointer;
+      &:hover {
+        cursor: pointer;
       }
-      >img{
-        position:absolute;
-        top:50%;  left:50%;
-        transform:translate(-50%,-50%);
+      > img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
     }
-
   }
   .list {
-    position:absolute;
-    bottom:2.8vw;
-    left:50%;
-    transform:translateX(-50%);
+    position: absolute;
+    bottom: 2.8vw;
+    left: 50%;
+    transform: translateX(-50%);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -196,7 +235,7 @@ export default {
       margin: 0 10px;
       color: rgba(255, 255, 255, 0.65);
       font-weight: bold;
-      font-size:16px;
+      font-size: 16px;
       letter-spacing: 1px;
       &.active,
       &:hover {