up

QJKK/src/framework/show/component/Map.vue

@@ -1,145 +1,50 @@
 <template>
-  <!-- <div class='Map' @click="cutVr('fd720_WoDGV0K2r',13)"> -->
-  <div class="Map">
-    <div id="mars3dContainer" class="mars3d-container"></div>
+  <div class='Map'>
+    <img src="../../../assets/img/homeImg/bac.jpg" alt="">
+    <div @click="cutVr(item.bs,item.ind)" :class="`row row${item.id}`" v-for="item in data" :key="item.id">
+      <!-- <img :src="require(`@/assets/img/homeImg/bs2.png`)" alt=""> -->
+    </div>
   </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
-//引入cesium基础库
-// import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
-// import * as Cesium from "mars3d-cesium";
-
-//导入mars3d主库
-import "mars3d/dist/mars3d.css";
-import * as mars3d from "mars3d";
 
 export default {
-  //import引入的组件需要注入到对象中才能使用
+  name: 'Map',
   components: {},
   data() {
-    //这里存放数据
     return {
-      // 地图实例
-      // map: null,
+      data: [
+        { id: 1, bs: 'fd720_kiQMdR2cy', ind: 10, name: '雨花台烈士纪念碑' },
+        { id: 2, bs: 'fd720_pUvbPNVeK', ind: 5, name: '知名烈士墓' },
+        { id: 3, bs: 'fd720_WoDGV0K2r', ind: 13, name: '雨花台烈士纪念馆' },
+        { id: 4, bs: 'fd720_e0YmU728Q', ind: 3, name: '红领巾广场' },
+        { id: 5, bs: 'fd720_FM3XwZXQP', ind: 4, name: '丁香园' },
+        { id: 6, bs: 'fd720_BsmJ0EfoL', ind: 14, name: '忠魂亭' },
+      ]
     };
   },
-  //监听属性 类似于data概念
   computed: {},
-  //监控data中的数据变化
   watch: {},
-  //方法集合
   methods: {
-    // 初始化地图
-    async initMap() {
-      // 读取 config.json 配置文件
-      const json = await mars3d.Util.fetchJson({ url: "config/config.json" });
-      console.log("读取 config.json 配置文件完成", json); // 打印测试信息
-      // 创建三维地球场景
-      const mapOptions = json.map3d;
-      let map = new mars3d.Map("mars3dContainer", mapOptions);
-      // 打印测试信息
-      // console.log("mars3d的Map主对象构造完成", this.map);
-      // console.log("其中Cesium原生的Cesium.Viewer为", this.map.viewer);
-      return map;
-    },
-    // 倾斜模型加载
-    loadModel(_map) {
-      const modelLayer = new mars3d.layer.TilesetLayer({
-        name: "雨花台模型",
-        url: "https://testgis.4dage.com/yuhuatai1021-qp/tileset.json",
-        maximumMemoryUsage: 512,
-        position: { alt: -290 },
-        preloadFlightDestinations: true,
-        flyTo: false,
-      });
-      _map.addLayer(modelLayer);
-    },
-    drawLabel(_layer) {
-      const graphic = new mars3d.graphic.DivGraphic({
-        position: [118.775298, 31.999126, 80.5],
-        style: {
-          html: `<div
-      style="
-        width: 316px;
-        height: 174px;
-        display: flex;
-        justify-content: center;
-        align-items: flex-start;
-        cursor:pointer;
-      "
-    >
-      <div
-        style="
-          position: absolute;
-          margin-left: 25px;
-          width: 190px;
-          height: 70px;
-          line-height: 70px;
-          text-align: center;
-          color: #fff;
-          font-size: 20px;
-          font-weight: bold;
-        "
-      >
-        雨花台烈士纪念馆
-      </div>
-      <div><img src="/YHT/Qjkk/MapBs.png"/></div>
-    </div>`,
-          horizontalOrigin: mars3d.Cesium.HorizontalOrigin.CENTER,
-          verticalOrigin: mars3d.Cesium.VerticalOrigin.BOTTOM,
-          // distanceDisplayCondition: new mars3d.Cesium.DistanceDisplayCondition(0, 30000), // 按视距距离显示
-          // scaleByDistance: new mars3d.Cesium.NearFarScalar(100, 1, 1000, 0.5),
-          scale: 0.1,
-          clampToGround: false,
-        },
-      });
-      graphic.on(mars3d.EventType.click, () => {
-        this.cutVr("fd720_WoDGV0K2r", 13);
-      });
-
-      _layer.addGraphic(graphic);
-    },
     cutVr(code, index) {
       this.$emit("mapCutVr", code, index);
     },
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
+  created() {
+
+  },
   mounted() {
-    // 初始化地图实例
-    this.initMap().then(
-      (map) => {
-        // 加载模型
-        this.loadModel(map);
-        // 加载标签
-        let graphicLayer = new mars3d.layer.GraphicLayer();
-        map.addLayer(graphicLayer);
-        this.drawLabel(graphicLayer);
-        map.setCameraView({
-          lat: 31.99314,
-          lng: 118.776577,
-          alt: 656,
-          heading: 350,
-          pitch: -43,
-        });
-      },
-      (error) => {
-        console.log("地图初始化失败", error);
-      }
-    );
+
   },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
+}
 </script>
 <style lang='less' scoped>
 .Map {
@@ -149,19 +54,56 @@ export default {
   z-index: 98;
   width: 100%;
   height: 100%;
-  // background-color: aqua;
-}
 
-#mars3dContainer {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-}
+  &>img {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .row {
+    cursor: pointer;
+    position: absolute;
+    width: 14%;
+    height: 12%;
+    top: 10%;
+    left: 23.5%;
+    background-size: 100% 100%;
+    background-image: url('../../../assets/img/homeImg/bs2.png');
+  }
+
+  .row2 {
+    top: 27%;
+    left: 54%;
+    background-image: url('../../../assets/img/homeImg/bs5.png');
+  }
+
+  .row3 {
+    top: 45%;
+    left: 47%;
+    background-image: url('../../../assets/img/homeImg/bs1.png');
+  }
+
+  .row4 {
+    top: 32%;
+    left: 3%;
+    background-image: url('../../../assets/img/homeImg/bs3.png');
+  }
+
+  .row5 {
+    top: auto;
+    left: auto;
+    right: 23.5%;
+    bottom: 29%;
+    background-image: url('../../../assets/img/homeImg/bs4.png');
+  }
 
-/deep/.mars3d-locationbar {
-  background-color: #000 !important;
-  z-index: 0 !important;
+  .row6 {
+    top: auto;
+    left: auto;
+    right: 25.5%;
+    bottom: 16%;
+    background-image: url('../../../assets/img/homeImg/bs6.png');
+  }
 }
 </style>

QJKK/src/framework/show/component/Map2.vue

@@ -0,0 +1,167 @@
+<template>
+  <!-- <div class='Map' @click="cutVr('fd720_WoDGV0K2r',13)"> -->
+  <div class="Map">
+    <div id="mars3dContainer" class="mars3d-container"></div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+//引入cesium基础库
+// import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
+// import * as Cesium from "mars3d-cesium";
+
+//导入mars3d主库
+import "mars3d/dist/mars3d.css";
+import * as mars3d from "mars3d";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      // 地图实例
+      // map: null,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 初始化地图
+    async initMap() {
+      // 读取 config.json 配置文件
+      const json = await mars3d.Util.fetchJson({ url: "config/config.json" });
+      console.log("读取 config.json 配置文件完成", json); // 打印测试信息
+      // 创建三维地球场景
+      const mapOptions = json.map3d;
+      let map = new mars3d.Map("mars3dContainer", mapOptions);
+      // 打印测试信息
+      // console.log("mars3d的Map主对象构造完成", this.map);
+      // console.log("其中Cesium原生的Cesium.Viewer为", this.map.viewer);
+      return map;
+    },
+    // 倾斜模型加载
+    loadModel(_map) {
+      const modelLayer = new mars3d.layer.TilesetLayer({
+        name: "雨花台模型",
+        url: "https://testgis.4dage.com/yuhuatai1021-qp/tileset.json",
+        maximumMemoryUsage: 512,
+        position: { alt: -290 },
+        preloadFlightDestinations: true,
+        flyTo: false,
+      });
+      _map.addLayer(modelLayer);
+    },
+    drawLabel(_layer) {
+      const graphic = new mars3d.graphic.DivGraphic({
+        position: [118.775298, 31.999126, 80.5],
+        style: {
+          html: `<div
+      style="
+        width: 316px;
+        height: 174px;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        cursor:pointer;
+      "
+    >
+      <div
+        style="
+          position: absolute;
+          margin-left: 25px;
+          width: 190px;
+          height: 70px;
+          line-height: 70px;
+          text-align: center;
+          color: #fff;
+          font-size: 20px;
+          font-weight: bold;
+        "
+      >
+        雨花台烈士纪念馆
+      </div>
+      <div><img src="/YHT/Qjkk/MapBs.png"/></div>
+    </div>`,
+          horizontalOrigin: mars3d.Cesium.HorizontalOrigin.CENTER,
+          verticalOrigin: mars3d.Cesium.VerticalOrigin.BOTTOM,
+          // distanceDisplayCondition: new mars3d.Cesium.DistanceDisplayCondition(0, 30000), // 按视距距离显示
+          // scaleByDistance: new mars3d.Cesium.NearFarScalar(100, 1, 1000, 0.5),
+          scale: 0.1,
+          clampToGround: false,
+        },
+      });
+      graphic.on(mars3d.EventType.click, () => {
+        this.cutVr("fd720_WoDGV0K2r", 13);
+      });
+
+      _layer.addGraphic(graphic);
+    },
+    cutVr(code, index) {
+      this.$emit("mapCutVr", code, index);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    // 初始化地图实例
+    this.initMap().then(
+      (map) => {
+        // 加载模型
+        this.loadModel(map);
+        // 加载标签
+        let graphicLayer = new mars3d.layer.GraphicLayer();
+        map.addLayer(graphicLayer);
+        this.drawLabel(graphicLayer);
+        map.setCameraView({
+          lat: 31.99314,
+          lng: 118.776577,
+          alt: 656,
+          heading: 350,
+          pitch: -43,
+        });
+      },
+      (error) => {
+        console.log("地图初始化失败", error);
+      }
+    );
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 98;
+  width: 100%;
+  height: 100%;
+  // background-color: aqua;
+}
+
+#mars3dContainer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+/deep/.mars3d-locationbar {
+  background-color: #000 !important;
+  z-index: 0 !important;
+}
+</style>

QJKK/src/framework/show/component/rightInco.vue

@@ -89,7 +89,12 @@ export default {
     },
   },
   //方法集合
+
   methods: {
+    closeBacMusic(){
+      this.music = false;
+    },
+
     openMusic() {
       this.music = true;
     },

QJKK/src/framework/show/component/vrTxt.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class='vrTxt'>
+    <audio v-if="vrTxtObj.code" :src="`data/${vrTxtObj.code}.mp3`" id="txtAudio"></audio>
+    <div class="left" @click="aduioShow = !aduioShow">
+      &nbsp;&nbsp;
+      <img :src="require(`@/assets/img/Goods/txtMusic${aduioShow ? 'Ac' : ''}.png`)" alt="">
+      &nbsp;
+      <img src="../../../assets/img/Goods/Group.png" alt="">
+    </div>
+    <div class="centen">{{ vrTxtObj.name }}</div>
+    <div class="right" @click="txtDown = !txtDown">
+      <img src="../../../assets/img/Goods/Group.png" alt="">
+      &nbsp;
+      <img :src="require(`@/assets/img/Goods/txtDown${txtDown ? 'Ac' : ''}.png`)" alt="">
+      &nbsp;&nbsp;
+
+    </div>
+
+    <!-- 点击箭头出来的文字详情 -->
+    <div class="txtBox" v-html="vrTxtObj.txt" :class="{ txtBoxShow: txtDown }"></div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'vrTxt',
+  props: {
+    vrTxtObj: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  components: {},
+  data() {
+    return {
+      aduioShow: false,
+      txtDown: false
+    };
+  },
+  computed: {},
+  watch: {
+    aduioShow(val) {
+      if (this.vrTxtObj.code) {
+        let dom = document.querySelector('#txtAudio')
+        if (val) {
+          dom.play()
+          this.$emit('closeBacMusic')
+          dom.addEventListener('ended', () => {
+            this.aduioShow = false
+          }, false);
+
+        } else dom.pause();
+      }
+
+    },
+    vrTxtObj() {
+      this.aduioShow = false
+    },
+    // vrTxtObj: {
+    //   handler(val) {
+    //     this.aduioShow = false
+    //   },
+    //   immediate: true
+    // }
+  },
+  methods: {
+    closeMusic() {
+      this.aduioShow = false
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+
+  },
+  beforeCreate() { }, //生命周期 - 创建之前
+  beforeMount() { }, //生命周期 - 挂载之前
+  beforeUpdate() { }, //生命周期 - 更新之前
+  updated() { }, //生命周期 - 更新之后
+  beforeDestroy() { }, //生命周期 - 销毁之前
+  destroyed() { }, //生命周期 - 销毁完成
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.vrTxt {
+  position: fixed;
+  z-index: 97;
+  top: 35px;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 36px;
+  border-radius: 18px;
+  background-color: rgba(177, 11, 11, 0.8);
+  display: flex;
+  align-items: center;
+
+  img {
+    vertical-align: middle;
+  }
+
+  .left {
+    cursor: pointer;
+  }
+
+  .centen {
+    padding: 0 34px;
+  }
+
+  .right {
+    cursor: pointer;
+  }
+
+  .txtBox {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .3s;
+    width: 600px;
+    position: fixed;
+    z-index: 97;
+    top: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(177, 11, 11, 0.8);
+    border-radius: 10px;
+    padding: 20px 40px 40px;
+    line-height: 22px;
+  }
+
+  .txtBoxShow {
+    opacity: 1;
+  }
+}
+</style>

QJKK/src/framework/show/index.vue

@@ -1,62 +1,29 @@
 <template>
   <div class="panocon" @click.once="$refs.RightIncoRef.openMusic()">
     <template v-if="showInfo">
-      <iframe
-        class="iframe-scene-3d"
-        allowfullscreen="true"
-        v-if="activeItem.type == '4dkk'"
-        :src="`local/4dkk/${activeItem.sceneCode}/wwwroot/spc.html?m=${activeItem.sceneCode}`"
-        frameborder="0"
-      ></iframe>
+      <iframe class="iframe-scene-3d" allowfullscreen="true" v-if="activeItem.type == '4dkk'"
+        :src="`local/4dkk/${activeItem.sceneCode}/wwwroot/spc.html?m=${activeItem.sceneCode}`" frameborder="0"></iframe>
       <div v-show="activeItem.type != '4dkk'" id="pano"></div>
 
-      <div
-        class="pano-logo"
-        v-if="showInfo.isLogo && activeItem.type != '4dkk'"
-      >
-        <img
-          :src="
-            showInfo.logo ||
-            require('@/assets/images/default/img_logoshow@2x.png')
-          "
-          alt=""
-        />
+      <div class="pano-logo" v-if="showInfo.isLogo && activeItem.type != '4dkk'">
+        <img :src="
+          showInfo.logo ||
+          require('@/assets/images/default/img_logoshow@2x.png')
+        " alt="" />
       </div>
 
-      <div
-        class="oper-tips"
-        :class="{ hidetips: !showTips }"
-        v-if="localRemind"
-      >
-        <img
-          :src="
-            showInfo.pcIcon ||
-            require('@/assets/images/default/show/img_tipspc_default.png')
-          "
-          alt=""
-        />
+      <div class="oper-tips" :class="{ hidetips: !showTips }" v-if="localRemind">
+        <img :src="
+          showInfo.pcIcon ||
+          require('@/assets/images/default/show/img_tipspc_default.png')
+        " alt="" />
       </div>
 
-      <List
-        v-if="canLoad"
-        @select="handleSelect"
-        :select="activeItem"
-        ref="myListRef"
-        :MapShow='MapShow'
-        @mapClose='MapShow=false'
-      />
-      <password
-        :bg="showInfo.icon"
-        :show="showPassword"
-        @submit="handlePassword"
-        @close="showPassword = false"
-      />
-
-      <preview
-        :item="currentHotspot"
-        :show="showPreview"
-        @close="(showPreview = false), (currentHotspot = '')"
-      />
+      <List v-if="canLoad" @select="handleSelect" :select="activeItem" ref="myListRef" :MapShow='MapShow'
+        @mapClose='MapShow = false' />
+      <password :bg="showInfo.icon" :show="showPassword" @submit="handlePassword" @close="showPassword = false" />
+
+      <preview :item="currentHotspot" :show="showPreview" @close="(showPreview = false), (currentHotspot = '')" />
     </template>
     <template v-else>
       <div class="hasDel" v-if="loadFinish">
@@ -71,17 +38,28 @@
     <RightInco ref="RightIncoRef" />
 
     <!-- 倾斜摄影 -->
-    <MapPage v-if="MapShow" @mapCutVr="mapCutVr" />
+    <MapPage v-show="MapShow" @mapCutVr="mapCutVr" />
 
     <!-- 左侧返回 -->
-    <div class="backMap" @click="MapShow = true">
-      <img src="@/assets/img/Goods/back.png" alt="" />
-      <p>返回</p>
+    <div class="backMap">
+      <div class="bacKMap_row" @click="MapShow = true">
+        <img src="@/assets/img/Goods/back.png" alt="" />
+        <p>返回</p>
+      </div>
     </div>
+    
+
+  
+    <!-- 关于全景介绍的盒子 -->
+    <VrTxt v-show="vrTxtObj.code" :vrTxtObj='vrTxtObj' @closeBacMusic='$refs.RightIncoRef.closeBacMusic()' ref="VrTxtRef"/>
+
   </div>
 </template>
 
 <script>
+import { vrTxtInfo } from './component/vrTxt.js'
+
+import VrTxt from './component/vrTxt.vue'
 import RightInco from "./component/rightInco.vue";
 import MapPage from "./component/Map.vue";
 import * as krfn from "@/core/index.js";
@@ -104,6 +82,7 @@ export default {
     List,
     password,
     preview,
+    VrTxt
   },
   computed: {
     ...mapGetters({
@@ -112,6 +91,8 @@ export default {
   },
   data() {
     return {
+      vrTxtObj:{},
+      vrTxtShow: false,
       MapShow: true,
 
       showPreview: false,
@@ -145,8 +126,10 @@ export default {
   methods: {
     // 地图切换vr
     mapCutVr(code, index) {
-      this.$refs.myListRef.handleVR({ sceneCode: code }, index);
       this.$refs.myListRef.incoShowClose()
+      setTimeout(() => {
+        this.$refs.myListRef.handleVR({ sceneCode: code }, index);
+      }, 20);
     },
 
     handlePassword(data) {
@@ -257,9 +240,10 @@ export default {
 
     MapShow(val){
       if(val) {
-        setTimeout(() => {
-          location.reload(true)
-        }, 100);
+        this.$refs.VrTxtRef.closeMusic()
+        // setTimeout(() => {
+        //   location.reload(true)
+        // }, 100);
       }
     },
 
@@ -319,6 +303,10 @@ export default {
       handler(newVal, oldVal) {
         if (oldVal) this.MapShow = false;
         console.log("切换了vr", newVal);
+
+        // vr变化的时候看看当前有没有介绍
+       this.vrTxtObj = vrTxtInfo.find(v=>v.code===newVal.sceneCode)||{}
+
         this.currentHotspot = "";
         $("#pano").empty();
         window.vrInitFn = () => {
@@ -392,7 +380,7 @@ export default {
     });
     this.getSceneInfo();
   },
-  async created() {},
+  async created() { },
 };
 </script>
 
@@ -404,18 +392,27 @@ export default {
   top: 35px;
   left: 30px;
   cursor: pointer;
-  width: 50px;
   text-align: center;
-  & > img {
+  display: flex;
+
+  .bacKMap_row {
     width: 50px;
+
+    &>img {
+      width: 50px;
+    }
   }
 }
+
+
+
+
 .panocon {
   width: 100%;
   height: 100%;
   position: relative;
 
-  > .iframe-scene-3d {
+  >.iframe-scene-3d {
     width: 100%;
     height: 100%;
   }
@@ -432,7 +429,7 @@ export default {
     top: 20px;
     left: 20px;
 
-    > img {
+    >img {
       max-width: 120px;
       max-height: 100px;
       pointer-events: none;
@@ -446,7 +443,7 @@ export default {
     transform: translate(-50%, -50%);
     transition: display 0.3s ease;
 
-    > img {
+    >img {
       max-width: 300px;
     }
   }
@@ -461,7 +458,7 @@ export default {
     height: 100%;
     position: relative;
 
-    > div {
+    >div {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -470,7 +467,7 @@ export default {
       text-align: center;
       font-size: 18px;
 
-      > p {
+      >p {
         margin-top: 20px;
       }
     }

QJKK/src/framework/show/list.vue

@@ -181,6 +181,7 @@ export default {
     // 从倾斜摄影进来
     incoShowClose() {
       this.incoShow = true;
+      this.taboneActive = { children: [1], id: 100, name: '航拍' };
     },
 
     // 点击全屏
@@ -235,6 +236,8 @@ export default {
       this.$refs.sw.swiper.slideTo(index);
     },
 
+    // 给
+
     handleTabone(item, i = null) {
       this.taboneActive = item;
       // 把底部轮播图回到起点