阿达

public/config/config.json

@@ -2,10 +2,10 @@
   "map3d": {
     "scene": {
       "center": {
-        "lat": 21.578797,
-        "lng": 112.822017,
-        "alt": 110947,
-        "heading": 3,
+        "lat": 30.233505,
+        "lng": 109.487236,
+        "alt": 5000,
+        "heading": 0,
         "pitch": -53
       },
       "targetFrameRate": 60,

public/data/12village.json

@@ -1,178 +0,0 @@
-{
-  "type": "FeatureCollection",
-  "name": "12village",
-  "crs": {
-    "type": "name",
-    "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" }
-  },
-  "features": [
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 3,
-        "name": "卢边村",
-        "belong": "蓬江区潮连街道办",
-        "logo": "江门蓬江",
-        "lng": 113.11731577,
-        "lat": 22.63147116
-      },
-      "geometry": {
-        "type": "Point",
-        "coordinates": [113.11731577, 22.63147116]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 5,
-        "name": "仓前村",
-        "belong": "开平市塘口镇",
-        "logo": "江门开平",
-        "lng": 112.56293754,
-        "lat": 22.35548258
-      },
-      "geometry": {
-        "type": "Point",
-        "coordinates": [112.56293754, 22.35548258]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 1,
-        "name": "东宁村",
-        "belong": "台山市端芬镇",
-        "logo": "江门台山",
-        "lng": 112.77709365,
-        "lat": 22.03879416
-      },
-      "geometry": {
-        "type": "Point",
-        "coordinates": [112.77709365, 22.03879416]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 10,
-        "name": "浮石村",
-        "belong": "台山市斗山镇",
-        "logo": "江门台山",
-        "lng": 112.85166979,
-        "lat": 22.05615878
-      },
-      "geometry": {
-        "type": "Point",
-        "coordinates": [112.85166979, 22.05615878]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 11,
-        "name": "浮月村",
-        "belong": "台山市斗山镇",
-        "logo": "江门台山",
-        "lng": 112.8051281,
-        "lat": 22.03516245
-      },
-      "geometry": { "type": "Point", "coordinates": [112.8051281, 22.03516245] }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 12,
-        "name": "横江村",
-        "belong": "台山市斗山镇",
-        "logo": "江门台山",
-        "lng": 112.84664869,
-        "lat": 22.0355916
-      },
-      "geometry": { "type": "Point", "coordinates": [112.84664869, 22.0355916] }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 2,
-        "name": "良溪村",
-        "belong": "蓬江区棠下镇",
-        "logo": "江门蓬江",
-        "lng": 113.02345991,
-        "lat": 22.7054894
-      },
-      "geometry": { "type": "Point", "coordinates": [113.02345991, 22.7054894] }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 9,
-        "name": "马降龙村",
-        "belong": "开平市百合镇",
-        "logo": "江门开平",
-        "lng": 112.56387949000001,
-        "lat": 22.28532672
-      },
-      "geometry": {
-        "type": "Point",
-        "coordinates": [112.56387949, 22.28532672]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 4,
-        "name": "田心村",
-        "belong": "鹤山市鹤城镇",
-        "logo": "江门鹤山",
-        "lng": 112.80080438,
-        "lat": 22.59469271
-      },
-      "geometry": {
-        "type": "Point",
-        "coordinates": [112.80080438, 22.59469271]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 6,
-        "name": "霄南村",
-        "belong": "鹤山市龙口镇",
-        "logo": "江门鹤山",
-        "lng": 112.91765213,
-        "lat": 22.77494788
-      },
-      "geometry": {
-        "type": "Point",
-        "coordinates": [112.91765213, 22.77494788]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 7,
-        "name": "歇马村",
-        "belong": "恩平市圣堂镇",
-        "logo": "江门恩平",
-        "lng": 112.37006307,
-        "lat": 22.24249721
-      },
-      "geometry": {
-        "type": "Point",
-        "coordinates": [112.37006307, 22.24249721]
-      }
-    },
-    {
-      "type": "Feature",
-      "properties": {
-        "id": 8,
-        "name": "自力村",
-        "belong": "开平市塘口镇",
-        "logo": "江门开平",
-        "lng": 112.5747478,
-        "lat": 22.37665057
-      },
-      "geometry": { "type": "Point", "coordinates": [112.5747478, 22.37665057] }
-    }
-  ]
-}

public/index.html

@@ -23,7 +23,7 @@
       src="<%= BASE_URL %>lib/Cesium/Cesium.js"
     ></script>
     <script src="./lib/turf/turf.min.js" type="text/javascript"></script>
-    <title>江门市传统村落一张图</title>
+    <title>恩施市传统村落一张图</title>
     <style>
       .mars3d-locationbar {
         background-color: #000 !important;

src/App.vue

@@ -7,7 +7,14 @@
 #app{
   width: 100vw;
   height: 100vh;
-  min-width: 1400px;
+  // min-width: 1400px;
 }
 </style>
 
+<style lang="less">
+// 全局性地美化滚动条
+::-webkit-scrollbar { background: #dddecc; width: 6px; height: 6px; }
+::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 3px; }
+::-webkit-scrollbar-corner { background: #dddecc; }
+</style>
+

src/components/eight.vue

@@ -1,386 +0,0 @@
-<template>
-  <div class="eight">
-    <div class="comTit">{{ tit }}</div>
-    <div class="comMani" :class="{ swShow: !conShowLoad }">
-      <div class="row" v-for="item in data" :key="item.id">
-        <img  :src="baseURL + imgSrc(item)" alt="" />
-        <div class="rowRight">
-          <div class="txt">
-            <p :title="item.name"><span>建筑名称：</span>{{ item.name }}</p>
-            <p :title="item.txt1"><span>产权归属：</span>{{ item.txt1 }}</p>
-            <p :title="item.txt2"><span>占地面积：</span>{{ item.txt2 }}</p>
-          </div>
-          <div class="txt">
-            <p :title="item.txt3"><span>建筑面积：</span>{{ item.txt3 }}</p>
-            <p :title="item.txt4"><span>保护级别：</span>{{ item.txt4 }}</p>
-          </div>
-        </div>
-
-        <!-- 详情按钮 -->
-        <div class="detailBtn" @click="lookDetail(item)"></div>
-      </div>
-    </div>
-    <!-- 点击详情出来的弹窗 -->
-    <div class="detailBox" v-if="detailShow">
-      <div class="detailMain">
-        <div class="detailCon">
-          <!-- 文字 -->
-          <div class="detailTxt">
-            <div class="detailTxtS">
-              <p class="detailp" :title="detailData.name">
-                <span class="detailSpan">建筑名称：</span>{{ detailData.name }}
-              </p>
-              <p class="detailp" :title="detailData.txt1">
-                <span class="detailSpan">产权归属：</span>{{ detailData.txt1 }}
-              </p>
-              <p class="detailp" :title="detailData.txt2">
-                <span class="detailSpan">占地面积：</span>{{ detailData.txt2 }}
-              </p>
-            </div>
-            <div class="detailTxtS">
-              <p class="detailp" :title="detailData.txt3">
-                <span class="detailSpan">建筑面积：</span>{{ detailData.txt3 }}
-              </p>
-              <p class="detailp" :title="detailData.txt4">
-                <span class="detailSpan">保护级别：</span>{{ detailData.txt4 }}
-              </p>
-            </div>
-            <div class="detailPP">
-              <span class="detailSpan">建筑概况：</span
-              ><i v-html="detailData.txt5"></i>
-            </div>
-          </div>
-          <!-- 图片 -->
-          <div class="detailImg">
-            <div class="swiper-container detailImgSon">
-              <div class="swiper-wrapper detailImgSon">
-                <div
-                  class="swiper-slide detailImgSon"
-                  v-for="item in detailData.imgList"
-                  @click="$emit('openLook', baseURL + item.filePath, 'img')"
-                  :key="item.id"
-                >
-                  <img
-                    class="detailImgSonImg"
-                     :src="baseURL + item.filePath"
-                    alt=""
-                  />
-                </div>
-              </div>
-              <!-- Add Pagination -->
-              <!-- <div class="swiper-pagination"></div> -->
-            </div>
-          </div>
-          <!-- 关闭按钮 -->
-          <div class="detailClose" @click="detailShow = false"></div>
-        </div>
-      </div>
-    </div>
-    <div class="comBs" @click="$emit('pageNext')"></div>
-    <!-- 数据加载中 -->
-    <div class="conShowLoad" v-show="conShowLoad">
-      <img src="../assets/img/loading.gif" alt="" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Swiper from "./data/swiper.js";
-// import "./data/swiper.css";
-import axios from "@/utils/request";
-export default {
-  name: "eight",
-  props: {
-    tit: {
-      type: String,
-    },
-    data: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      conShowLoad: true,
-      baseURL: "",
-      detailShow: false,
-      detailData: {},
-      imgInd: 0,
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {
-    detailShow(val) {
-      if (val) {
-        this.$nextTick(() => {
-          new Swiper(".detailImg .swiper-container", {
-            slidesPerView: 3,
-            spaceBetween: 0,
-            centeredSlides: true,
-            initialSlide: this.imgInd,
-            // pagination: {
-            //   el: '.swiper-pagination',
-            //   clickable: true,
-            // },
-          });
-        });
-      }
-    },
-  },
-  //方法集合
-  methods: {
-    imgSrc(item) {
-      return item.imgList.find((v) => v.id === item.imgActive).filePath;
-    },
-    lookDetail(item) {
-      this.imgInd = 0;
-      item.imgList.forEach((v, i) => {
-        if (v.id === item.imgActive) this.imgInd = i;
-      });
-      this.detailData = item;
-      this.detailShow = true;
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        this.conShowLoad = false;
-      }, 1000);
-    });
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-@import "./data/swiper.css";
-.swiper-container {
-  width: 100%;
-  height: 100%;
-  overflow: visible !important;
-}
-
-.swiper-slide img {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.swiper-slide {
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-.swiper-slide-active {
-  transform: scale(1.3);
-  opacity: 1;
-  z-index: 999;
-}
-.eight {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 50px;
-  .comMani::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-    height: 1px;
-  }
-  .comMani::-webkit-scrollbar-thumb {
-    /*滚动条里面小方块*/
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 5px transparent;
-    background: #8a7351;
-  }
-  .comMani::-webkit-scrollbar-track {
-    /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px transparent;
-    border-radius: 10px;
-    background: transparent;
-  }
-  .comMani {
-    opacity: 0;
-    overflow-y: auto;
-    width: 100%;
-    height: calc(100% - 155px);
-    padding-right: 20px;
-    .row {
-      display: flex;
-      align-items: center;
-      position: relative;
-      width: 100%;
-      height: 180px;
-      margin-bottom: 20px;
-      padding-bottom: 20px;
-      border-bottom: 1px solid #bfb094;
-      & > img {
-        min-width: 220px;
-        width: 220px;
-        height: 157px;
-        object-fit: cover;
-        margin-right: 40px;
-      }
-      .rowRight {
-        flex: 1;
-        .txt {
-          color: #8a7351;
-          display: flex;
-          p {
-            margin-right: 50px;
-            cursor: default;
-            width: 260px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            height: 60px;
-            line-height: 60px;
-            font-size: 24px;
-            & > span {
-              font-weight: 700;
-              font-family: "思源宋体";
-              font-size: 24px;
-            }
-          }
-        }
-      }
-      .detailBtn {
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 46px;
-        height: 44px;
-        background: url("../assets/img/btnDe.png");
-        background-size: 100% 100%;
-      }
-    }
-  }
-  .swShow {
-    opacity: 1;
-  }
-  .detailBox {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 999;
-    padding-top: 100px;
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      backdrop-filter: blur(20px);
-      z-index: -2;
-    }
-    .detailMain {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: calc(100% - 100px);
-      .detailCon {
-        overflow: hidden;
-        padding: 30px 60px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: rgba(0, 0, 0, 0.8);
-        width: 1300px;
-        height: 700px;
-        .detailClose {
-          cursor: pointer;
-          top: -7px;
-          right: 104px;
-          position: absolute;
-          width: 66px;
-          height: 105px;
-          background: url("../assets/img/close.png");
-          background-size: 100% 100%;
-        }
-        .detailTxt {
-          color: #fff;
-          font-size: 18px;
-          .detailTxtS {
-            display: flex;
-            .detailp {
-              margin-bottom: 12px;
-              cursor: pointer;
-              width: 300px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              margin-right: 50px;
-              .detailSpan {
-                font-family: "思源宋体";
-                font-size: 20px;
-              }
-            }
-          }
-          .detailPP::-webkit-scrollbar {
-            /*滚动条整体样式*/
-            width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-            height: 1px;
-          }
-          .detailPP::-webkit-scrollbar-thumb {
-            /*滚动条里面小方块*/
-            border-radius: 10px;
-            -webkit-box-shadow: inset 0 0 5px transparent;
-            background: #c7b080;
-          }
-          .detailPP::-webkit-scrollbar-track {
-            /*滚动条里面轨道*/
-            -webkit-box-shadow: inset 0 0 5px transparent;
-            border-radius: 10px;
-            background: transparent;
-          }
-          .detailPP {
-            height: 200px;
-            overflow-y: auto;
-            i {
-              font-style: normal;
-            }
-            .detailSpan {
-              font-family: "思源宋体";
-              font-size: 20px;
-            }
-          }
-        }
-        .detailImg {
-          margin-top: 50px;
-          height: 280px;
-        }
-      }
-    }
-  }
-  .conShowLoad {
-    z-index: 999;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>

src/components/five.vue

@@ -1,129 +0,0 @@
-<template>
-  <div class="five">
-    <div class="comTit">{{ tit }}</div>
-    <div class="comMani sroolStop">
-      <div
-        class="row"
-        v-for="item in data.videos"
-        :key="item.id"
-        @click="$emit('openLook', baseURL + item.filePath, 'video')"
-      >
-        <div class="videoName">
-          <p>{{ item.name }}</p>
-          <div class="videoPlay">
-            <img src="../assets/img/videoPlay.png" alt="" />
-          </div>
-        </div>
-        <video
-          class="sroolStop"
-          controls
-           :src="baseURL + item.filePath"
-        ></video>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "@/utils/request";
-export default {
-  name: "five",
-  props: {
-    tit: {
-      type: String,
-    },
-    data: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      baseURL: "",
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {},
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.five {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 50px;
-  .comMani::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-    height: 1px;
-  }
-  .comMani::-webkit-scrollbar-thumb {
-    /*滚动条里面小方块*/
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 5px transparent;
-    background: #8a7351;
-  }
-  .comMani::-webkit-scrollbar-track {
-    /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px transparent;
-    border-radius: 10px;
-    background: transparent;
-  }
-  .comMani {
-    width: 100%;
-    height: calc(100% - 115px);
-    overflow-y: auto;
-    padding-top: 80px;
-    display: flex;
-    flex-wrap: wrap;
-    .row {
-      margin-right: 20px;
-      margin-bottom: 26px;
-      position: relative;
-      width: 100%;
-      height: 90%;
-      background-color: rgba(0, 0, 0, 0.6);
-      & > video {
-        width: 100%;
-        height: 100%;
-      }
-      .videoName {
-        z-index: 999;
-        background-color: rgba(0, 0, 0, 0.6);
-        cursor: pointer;
-        width: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        color: #fff;
-        font-size: 14px;
-      }
-      // &:nth-of-type(4n) {
-      //   margin-right: 0;
-      // }
-    }
-  }
-}
-</style>

src/components/four.vue

@@ -1,292 +0,0 @@
-<template>
-  <div class="four">
-    <div class="comTit">{{ tit }}</div>
-    <div class="comMani" :class="{ swShow: !conShowLoad }">
-      <div class="conShow">
-        <!-- 如果需要使用前进后退按钮 -->
-        <!-- <div
-          class="swiper-button-prev swiper-button-white"
-          v-show="Numm > 1"
-        ></div>
-        <div
-          class="swiper-button-next swiper-button-white"
-          v-show="Numm > 1"
-        ></div> -->
-
-        <div class="conShowfloo">
-          <div class="swiper-container">
-            <div class="swiper-wrapper">
-              <div
-                class="swiper-slide swiperVideo"
-                v-for="item in data.videos"
-                @click="$emit('openLook', baseURL + item.filePath, 'video')"
-                :key="item.id"
-              >
-                <div class="videoName">
-                  <p>{{ item.name }}</p>
-                  <div class="videoPlay">
-                    <img src="../assets/img/videoPlay.png" alt="" />
-                  </div>
-                </div>
-                <video controls  :src="baseURL + item.filePath"></video>
-              </div>
-
-              <div
-                class="swiper-slide"
-                v-for="item in data.images"
-                @click="$emit('openLook', baseURL + item.filePath, 'img')"
-                :key="item.id"
-              >
-                <img  :src="baseURL + item.filePath" alt="" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="info sroolStop" v-html="data.content"></div>
-    </div>
-    <div class="comBs" @click="$emit('pageNext')"></div>
-    <!-- 数据加载中 -->
-    <div class="conShowLoad" v-show="conShowLoad">
-      <img src="../assets/img/loading.gif" alt="" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Swiper from "./data/swiper.js";
-import axios from "@/utils/request";
-export default {
-  name: "four",
-  props: {
-    tit: {
-      type: String,
-    },
-    data: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      baseURL: "",
-      Numm: 0,
-      conShowLoad: true,
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    arrowClick(val) {
-      if (val === 0) this.$refs.cardShow.prev();
-      else this.$refs.cardShow.next();
-    },
-    cutBig(src, type) {},
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        // 看看图片和视频加起来的数量
-        let imgNum = 0;
-        let videoNum = 0;
-        if (this.data.images && this.data.images.length)
-          imgNum = this.data.images.length;
-        if (this.data.videos && this.data.videos.length)
-          videoNum = this.data.videos.length;
-        this.Numm = imgNum + videoNum;
-        // 初始化sw
-        new Swiper(".four .swiper-container", {
-          // slidesPerView: this.tit==='入村路线'?1:3,
-          slidesPerView: 3,
-          spaceBetween: 0,
-          centeredSlides: true,
-          initialSlide: 1,
-          // // 如果需要分页器
-          // pagination: {
-          //   el: ".swiper-pagination",
-          //   clickable: true, // 分页器可以点击
-          // },
-
-          // 如果需要前进后退按钮
-          navigation: {
-            nextEl: ".swiper-button-next",
-            prevEl: ".swiper-button-prev",
-          },
-        });
-        this.conShowLoad = false;
-      }, 1000);
-    });
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-@import "./data/swiper.css";
-.swiper-container {
-  width: 100%;
-  height: 250px;
-  overflow: visible !important;
-  .swiperVideo {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.6);
-    .videoName {
-      z-index: 999;
-      background-color: rgba(0, 0, 0, 0.6);
-      cursor: pointer;
-      width: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      color: #fff;
-      font-size: 14px;
-    }
-    video {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.swiper-slide img {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.swiper-slide {
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-.swiper-slide-active {
-  transform: scale(1.3);
-  opacity: 1;
-  z-index: 999;
-}
-.info::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
-}
-.info::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #8a7351;
-}
-.info::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  border-radius: 10px;
-  background: transparent;
-}
-.four {
-  /deep/.el-carousel__item img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  /deep/.el-carousel__item video {
-    width: 100%;
-    height: 100%;
-  }
-
-  .videoBox {
-    background-color: rgba(0, 0, 0, 0.6);
-    .videoName {
-      position: absolute;
-      top: 5px;
-      left: 10px;
-      color: #fff;
-      font-size: 18px;
-    }
-  }
-
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 50px;
-  .comMani {
-    opacity: 0;
-    width: 100%;
-    height: calc(100% - 65px);
-    .conShow {
-      position: relative;
-      height: 330px;
-      width: 100%;
-      .conShowfloo {
-        padding-top: 40px;
-        position: relative;
-        height: 100%;
-        width: 100%;
-        margin: 0px auto 0;
-        overflow: hidden;
-        .icon {
-          z-index: 9998;
-          position: absolute;
-          left: -18px;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 36px;
-          height: 36px;
-          background-color: rgba(0, 0, 0, 0.6);
-          color: #fff;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 50%;
-          cursor: pointer;
-          font-size: 20px;
-        }
-        .el-icon-arrow-right {
-          left: auto;
-          right: -18px;
-        }
-      }
-    }
-    .info {
-      margin-top: 10px;
-      width: 100%;
-      height: 270px;
-      color: #8a7351;
-      font-size: 16px;
-      line-height: 28px;
-      overflow-y: auto;
-    }
-  }
-  .swShow {
-    opacity: 1;
-  }
-  .conShowLoad {
-    z-index: 999;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>

src/components/one.vue

@@ -1,214 +0,0 @@
-<template>
-  <div class="one">
-    <div class="comTit">{{ tit }}</div>
-    <div class="comMani">
-      <div class="info sroolStop" v-html="data.content"></div>
-      <div class="conShow">
-        <!--基础存放容器-->
-        <div class="swiper-container" :class="{ swShow: !conShowLoad }">
-          <!-- 需要进行轮播的部分 -->
-          <div class="swiper-wrapper">
-            <div
-              class="swiper-slide swiperVideo"
-              v-for="item in data.videos"
-              @click="$emit('openLook', baseURL + item.filePath, 'video')"
-              :key="item.id"
-            >
-              <div class="videoName">
-                <p>{{ item.name }}</p>
-                <div class="videoPlay">
-                  <img src="../assets/img/videoPlay.png" alt="" />
-                </div>
-              </div>
-              <video :src="baseURL + item.filePath"></video>
-            </div>
-
-            <!-- 每个节点 -->
-            <div
-              class="swiper-slide"
-              v-for="item in data.images"
-              @click="$emit('openLook', baseURL + item.filePath, 'img')"
-              :key="item.id"
-            >
-              <img :src="baseURL + item.filePath" alt="" />
-            </div>
-          </div>
-
-          <!-- 如果需要使用分页器 -->
-          <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
-
-          <!-- 如果需要使用前进后退按钮 -->
-          <!-- <div class="swiper-button-prev swiper-button-white"></div>
-          <div class="swiper-button-next swiper-button-white"></div> -->
-        </div>
-      </div>
-    </div>
-    <div class="comBs" @click="$emit('pageNext')"></div>
-    <!-- 数据加载中 -->
-    <div class="conShowLoad" v-show="conShowLoad">
-      <img src="../assets/img/loading.gif" alt="" />
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "@/utils/request";
-import "swiper/dist/js/swiper";
-import "swiper/dist/css/swiper.css";
-import Swiper from "swiper";
-export default {
-  name: "one",
-  props: {
-    tit: {
-      type: String,
-    },
-    data: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      conShowLoad: true,
-      baseURL: "",
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {},
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        new Swiper(".one .swiper-container", {
-          slidesPerView: 3.5,
-          spaceBetween: 20,
-          // // 如果需要分页器
-          // pagination: {
-          //   el: ".swiper-pagination",
-          //   clickable: true, // 分页器可以点击
-          // },
-
-          // // 如果需要前进后退按钮
-          // navigation: {
-          //   nextEl: ".swiper-button-next",
-          //   prevEl: ".swiper-button-prev",
-          // },
-        });
-        this.conShowLoad = false;
-      }, 1000);
-    });
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang="less" scoped>
-@import "../../node_modules/swiper/dist/css/swiper.css";
-.swiper-container {
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-}
-.swShow {
-  opacity: 1;
-}
-
-.swiper-slide img {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.swiper-slide video {
-  z-index: -1;
-  height: 100%;
-}
-.info::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
-}
-.info::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #8a7351;
-}
-.info::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  border-radius: 10px;
-  background: transparent;
-}
-.one {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 50px;
-  .comMani {
-    width: 100%;
-    height: calc(100% - 65px);
-    .info {
-      color: #8a7351;
-      font-size: 16px;
-      line-height: 28px;
-      width: 100%;
-      height: 340px;
-      padding-right: 30px;
-      overflow-y: auto;
-      margin-bottom: 30px;
-    }
-    .conShow {
-      position: relative;
-      height: 240px;
-      flex: 1;
-      .swiperVideo {
-        overflow: hidden;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        .videoName {
-          z-index: 999;
-          background-color: rgba(0, 0, 0, 0.6);
-          cursor: pointer;
-          width: 100%;
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          color: #fff;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-  .conShowLoad {
-    z-index: 999;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>

src/components/seven.vue

@@ -1,352 +0,0 @@
-<template>
-  <div class="seven">
-    <div class="comTit">{{ tit }}</div>
-    <div class="comMani">
-      <div class="row" v-for="item in data" :key="item.id">
-        <img  :src="baseURL + imgSrc(item)" alt="" />
-        <div class="txt">
-          <p :title="item.txt1"><span>编号：</span>{{ item.txt1 }}</p>
-          <p :title="item.txt2"><span>类型：</span>{{ item.txt2 }}</p>
-        </div>
-        <div class="txt">
-          <p :title="item.name"><span>名称：</span>{{ item.name }}</p>
-          <p :title="item.txt3"><span>年代：</span>{{ item.txt3 }}</p>
-        </div>
-        <!-- 详情按钮 -->
-        <div class="detailBtn" @click="lookDetail(item)"></div>
-      </div>
-    </div>
-    <!-- 点击详情出来的弹窗 -->
-    <div class="detailBox" v-if="detailShow">
-      <div class="detailMain">
-        <div class="detailCon">
-          <!-- 文字 -->
-          <div class="detailTxt">
-            <div class="detailTxtS">
-              <p class="detailp" :title="detailData.name">
-                <span class="detailSpan">名称：</span>{{ detailData.name }}
-              </p>
-              <p class="detailp" :title="detailData.txt1">
-                <span class="detailSpan">编号：</span>{{ detailData.txt1 }}
-              </p>
-            </div>
-            <div class="detailTxtS">
-              <p class="detailp" :title="detailData.txt2">
-                <span class="detailSpan">类型：</span>{{ detailData.txt2 }}
-              </p>
-              <p class="detailp" :title="detailData.txt3">
-                <span class="detailSpan">年代：</span>{{ detailData.txt3 }}
-              </p>
-            </div>
-            <div class="detailPP">
-              <span class="detailSpan">简介：</span
-              ><i v-html="detailData.txt4"></i>
-            </div>
-          </div>
-          <!-- 图片 -->
-          <div class="detailImg">
-            <div class="swiper-container detailImgSon">
-              <div class="swiper-wrapper detailImgSon">
-                <div
-                  class="swiper-slide detailImgSon"
-                  v-for="item in detailData.imgList"
-                  @click="$emit('openLook', baseURL + item.filePath, 'img')"
-                  :key="item.id"
-                >
-                  <img
-                    class="detailImgSonImg"
-                     :src="baseURL + item.filePath"
-                    alt=""
-                  />
-                </div>
-              </div>
-              <!-- Add Pagination -->
-              <!-- <div class="swiper-pagination"></div> -->
-            </div>
-          </div>
-          <!-- 关闭按钮 -->
-          <div class="detailClose" @click="detailShow = false"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Swiper from "./data/swiper.js";
-import "./data/swiper.css";
-import axios from "@/utils/request";
-export default {
-  name: "seven",
-  props: {
-    tit: {
-      type: String,
-    },
-    data: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      baseURL: "",
-      detailShow: false,
-      detailData: {},
-      imgInd: 0,
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {
-    detailShow(val) {
-      if (val) {
-        this.$nextTick(() => {
-          new Swiper(".detailImg .swiper-container", {
-            slidesPerView: 3,
-            spaceBetween: 0,
-            centeredSlides: true,
-            initialSlide: this.imgInd,
-            // pagination: {
-            //   el: '.swiper-pagination',
-            //   clickable: true,
-            // },
-          });
-        });
-      }
-    },
-  },
-  //方法集合
-  methods: {
-    imgSrc(item) {
-      return item.imgList.find((v) => v.id === item.imgActive).filePath;
-    },
-    lookDetail(item) {
-            this.imgInd=0
-      item.imgList.forEach((v,i)=>{
-        if(v.id===item.imgActive) this.imgInd=i
-      })
-
-      this.detailData = item;
-      this.detailShow = true;
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-@import "./data/swiper.css";
-.swiper-container {
-  width: 100%;
-  height: 100%;
-  overflow: visible !important;
-}
-
-.swiper-slide img {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.swiper-slide {
-  transition: all 0.3s;
-  opacity: 0.5;
-}
-.swiper-slide-active {
-  transform: scale(1.3);
-  opacity: 1;
-  z-index: 999;
-}
-.seven {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 50px;
-  .comMani::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-    height: 1px;
-  }
-  .comMani::-webkit-scrollbar-thumb {
-    /*滚动条里面小方块*/
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 5px transparent;
-    background: #8a7351;
-  }
-  .comMani::-webkit-scrollbar-track {
-    /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px transparent;
-    border-radius: 10px;
-    background: transparent;
-  }
-  .comMani {
-    overflow-y: auto;
-    width: 100%;
-    height: calc(100% - 155px);
-    padding-right: 20px;
-    .row {
-      display: flex;
-      position: relative;
-      width: 100%;
-      height: 180px;
-      margin-bottom: 20px;
-      padding-bottom: 20px;
-      border-bottom: 1px solid #bfb094;
-      & > img {
-        min-width: 220px;
-        width: 220px;
-        height: 157px;
-        object-fit: cover;
-        margin-right: 40px;
-      }
-      .txt {
-        width: 400px;
-        color: #8a7351;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin-right: 120px;
-        p {
-          cursor: default;
-          width: 400px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          height: 60px;
-          line-height: 60px;
-          font-size: 24px;
-          & > span {
-            font-weight: 700;
-            font-family: "思源宋体";
-            font-size: 24px;
-          }
-        }
-      }
-      .detailBtn {
-        cursor: pointer;
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 46px;
-        height: 44px;
-        background: url("../assets/img/btnDe.png");
-        background-size: 100% 100%;
-      }
-    }
-  }
-  .detailBox {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 999;
-    padding-top: 100px;
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      backdrop-filter: blur(20px);
-      z-index: -2;
-    }
-    .detailMain {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: calc(100% - 100px);
-      .detailCon {
-        overflow: hidden;
-        padding: 30px 60px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background-color: rgba(0, 0, 0, 0.8);
-        width: 1300px;
-        height: 700px;
-        .detailClose {
-          cursor: pointer;
-          top: -7px;
-          right: 104px;
-          position: absolute;
-          width: 66px;
-          height: 105px;
-          background: url("../assets/img/close.png");
-          background-size: 100% 100%;
-        }
-        .detailTxt {
-          color: #fff;
-          font-size: 18px;
-          .detailTxtS {
-            display: flex;
-            .detailp {
-              margin-bottom: 12px;
-              cursor: pointer;
-              width: 400px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              margin-right: 100px;
-              .detailSpan {
-                font-family: "思源宋体";
-                font-size: 20px;
-              }
-            }
-          }
-          .detailPP::-webkit-scrollbar {
-            /*滚动条整体样式*/
-            width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-            height: 1px;
-          }
-          .detailPP::-webkit-scrollbar-thumb {
-            /*滚动条里面小方块*/
-            border-radius: 10px;
-            -webkit-box-shadow: inset 0 0 5px transparent;
-            background: #c7b080;
-          }
-          .detailPP::-webkit-scrollbar-track {
-            /*滚动条里面轨道*/
-            -webkit-box-shadow: inset 0 0 5px transparent;
-            border-radius: 10px;
-            background: transparent;
-          }
-          .detailPP {
-            height: 200px;
-            overflow-y: auto;
-            i {
-              font-style: normal;
-            }
-            .detailSpan {
-              font-family: "思源宋体";
-              font-size: 20px;
-            }
-          }
-        }
-        .detailImg {
-          margin-top: 50px;
-          height: 280px;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/six.vue

@@ -1,286 +0,0 @@
-<template>
-  <div class="six">
-    <div class="comTit">{{ tit }}</div>
-    <div class="comMani">
-      <div class="conShow">
-        <div class="conShowTop">
-          <img
-             :src="baseURL + bigSrc"
-            alt=""
-            v-if="type === 'img' && bigSrc"
-            @click="$emit('openLook', baseURL + bigSrc, 'img')"
-          />
-          <video
-            controls
-             :src="baseURL + bigSrc"
-            v-if="type === 'video' && bigSrc"
-          ></video>
-        </div>
-        <div class="conShowfloo">
-          <!--基础存放容器-->
-          <div class="swiper-container" :class="{ swShow: !conShowLoad }">
-            <!-- 需要进行轮播的部分 -->
-            <div class="swiper-wrapper">
-              <div
-                :class="{ active: item.filePath === bigSrc }"
-                @click="cutBig(item.filePath, 'video')"
-                class="swiper-slide swiperVideo"
-                v-for="item in data.videos"
-                :key="item.id"
-              >
-                <div class="videoName" :title="item.name">{{ item.name }}</div>
-                <video  :src="baseURL + item.filePath"></video>
-              </div>
-
-              <!-- 每个节点 -->
-              <div
-                :class="{ active: item.filePath === bigSrc }"
-                @click="cutBig(item.filePath, 'img')"
-                class="swiper-slide"
-                v-for="item in data.images"
-                :key="item.id"
-              >
-                <img  :src="baseURL + item.filePath" alt="" />
-              </div>
-            </div>
-
-            <!-- 如果需要使用分页器 -->
-            <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
-          </div>
-          <!-- 如果需要使用前进后退按钮 -->
-          <!-- <div
-            class="swiper-button-prev swiper-button-white"
-            v-show="Numm > 1"
-          ></div>
-          <div
-            class="swiper-button-next swiper-button-white"
-            v-show="Numm > 1"
-          ></div> -->
-        </div>
-      </div>
-      <div class="info sroolStop" v-html="data.content"></div>
-    </div>
-    <div
-      class="comBs"
-      @click="$emit('pageNext')"
-      v-if="tit !== '村内导览'"
-    ></div>
-    <!-- 加载动画 -->
-    <div class="conShowLoad" v-show="conShowLoad">
-      <img src="../assets/img/loading.gif" alt="" />
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "@/utils/request";
-import "swiper/dist/js/swiper";
-import "swiper/dist/css/swiper.css";
-import Swiper from "swiper";
-export default {
-  name: "six",
-  props: {
-    tit: {
-      type: String,
-    },
-    data: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      baseURL: "",
-      bigSrc: "",
-      type: "video",
-      conShowLoad: true,
-      Numm: 0,
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    cutBig(src, type) {
-      this.bigSrc = src;
-      this.type = type;
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        new Swiper(".six .swiper-container", {
-          slidesPerView: 2.4,
-          spaceBetween: 20,
-
-          // // 如果需要分页器
-          // pagination: {
-          //   el: ".swiper-pagination",
-          //   clickable: true, // 分页器可以点击
-          // },
-
-          // 如果需要前进后退按钮
-          navigation: {
-            nextEl: ".swiper-button-next",
-            prevEl: ".swiper-button-prev",
-          },
-        });
-        // 看看图片和视频加起来的数量
-        let imgNum = 0;
-        let videoNum = 0;
-        if (this.data.images && this.data.images.length)
-          imgNum = this.data.images.length;
-        if (this.data.videos && this.data.videos.length)
-          videoNum = this.data.videos.length;
-        this.Numm = imgNum + videoNum;
-        if (this.data.videos && this.data.videos[0])
-          this.bigSrc = this.data.videos[0].filePath;
-        else {
-          this.type = "img";
-          if (this.data.images && this.data.images.length > 0)
-            this.bigSrc = this.data.images[0].filePath;
-        }
-        this.conShowLoad = false;
-      }, 1000);
-    });
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-@import "../../node_modules/swiper/dist/css/swiper.css";
-.swiper-container {
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-}
-.swShow {
-  opacity: 1;
-}
-
-.swiper-slide img {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.swiper-slide video {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-}
-.info::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
-}
-.info::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #8a7351;
-}
-.info::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  border-radius: 10px;
-  background: transparent;
-}
-.six {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 50px;
-  .comMani {
-    width: 100%;
-    height: calc(100% - 65px);
-    display: flex;
-    .info {
-      color: #8a7351;
-      font-size: 16px;
-      line-height: 28px;
-      width: 60%;
-      max-height: calc(100% - 80px);
-      padding-left: 40px;
-      overflow-y: auto;
-    }
-    .conShow {
-      position: relative;
-      padding: 30px 0;
-      padding-left: 20px;
-      height: calc(100% - 80px);
-      width: 40%;
-      flex: 1;
-      .conShowTop {
-        width: 100%;
-        height: 400px;
-        margin-bottom: 15px;
-        & > img {
-          cursor: pointer;
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-        & > video {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .conShowfloo {
-        position: relative;
-        width: 100%;
-        height: 150px;
-        .swiperVideo {
-          position: relative;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(0, 0, 0, 0.6);
-          .videoName {
-            z-index: 99;
-            cursor: pointer;
-            width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            position: absolute;
-            top: 1px;
-            left: 5px;
-            color: #fff;
-            font-size: 14px;
-          }
-        }
-        .active {
-          border: 3px solid #9f171c;
-        }
-      }
-    }
-  }
-  .conShowLoad {
-    z-index: 999;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>

src/components/three.vue

@@ -1,289 +0,0 @@
-<template>
-  <div class="three">
-    <div class="comTit">{{ tit }}</div>
-    <div class="comMani">
-      <div class="info sroolStop" v-html="data.content"></div>
-      <div class="conShow">
-        <div class="conShowTop">
-          <img
-            :src="baseURL + bigSrc"
-            alt=""
-            v-if="type === 'img' && bigSrc"
-            @click="$emit('openLook', baseURL + bigSrc, 'img')"
-          />
-          <video
-            controls
-            :src="baseURL + bigSrc"
-            v-if="type === 'video' && bigSrc"
-          ></video>
-        </div>
-        <div class="conShowfloo">
-          <!--基础存放容器-->
-
-          <div class="swiper-container" :class="{ swShow: !conShowLoad }">
-            <!-- 需要进行轮播的部分 -->
-            <div class="swiper-wrapper">
-              <div
-                :class="{ active: item.filePath === bigSrc }"
-                @click="cutBig(item.filePath, 'video')"
-                class="swiper-slide swiperVideo"
-                v-for="item in data.videos"
-                :key="item.id"
-              >
-                <div class="videoName">
-                  <p>{{ item.name }}</p>
-                  <div class="videoPlay">
-                    <img src="../assets/img/videoPlay.png" alt="" />
-                  </div>
-                </div>
-                <video :src="baseURL + item.filePath"></video>
-              </div>
-
-              <!-- 每个节点 -->
-              <div
-                :class="{ active: item.filePath === bigSrc }"
-                @click="cutBig(item.filePath, 'img')"
-                class="swiper-slide"
-                v-for="item in data.images"
-                :key="item.id"
-              >
-                <img :src="baseURL + item.filePath" alt="" />
-              </div>
-            </div>
-
-            <!-- 如果需要使用分页器 -->
-            <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
-          </div>
-          <!-- 如果需要使用前进后退按钮 -->
-          <!-- <div
-            class="swiper-button-prev swiper-button-white"
-            v-show="Numm > 1"
-          ></div>
-          <div
-            class="swiper-button-next swiper-button-white"
-            v-show="Numm > 1"
-          ></div> -->
-        </div>
-      </div>
-    </div>
-    <div class="comBs" @click="$emit('pageNext')"></div>
-    <!-- 加载动画 -->
-    <div class="conShowLoad" v-show="conShowLoad">
-      <img src="../assets/img/loading.gif" alt="" />
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "@/utils/request";
-import "swiper/dist/js/swiper";
-import "swiper/dist/css/swiper.css";
-import Swiper from "swiper";
-export default {
-  name: "three",
-  props: {
-    tit: {
-      type: String,
-    },
-    data: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      baseURL: "",
-      bigSrc: "",
-      type: "video",
-      conShowLoad: true,
-      Numm: 0,
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    cutBig(src, type) {
-      this.bigSrc = src;
-      this.type = type;
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        new Swiper(".three .swiper-container", {
-          slidesPerView: 2.4,
-          spaceBetween: 20,
-
-          // // 如果需要分页器
-          // pagination: {
-          //   el: ".swiper-pagination",
-          //   clickable: true, // 分页器可以点击
-          // },
-
-          // 如果需要前进后退按钮
-          navigation: {
-            nextEl: ".swiper-button-next",
-            prevEl: ".swiper-button-prev",
-          },
-        });
-        // 看看图片和视频加起来的数量
-        let imgNum = 0;
-        let videoNum = 0;
-        if (this.data.images && this.data.images.length)
-          imgNum = this.data.images.length;
-        if (this.data.videos && this.data.videos.length)
-          videoNum = this.data.videos.length;
-        this.Numm = imgNum + videoNum;
-
-        if (this.data.videos && this.data.videos[0])
-          this.bigSrc = this.data.videos[0].filePath;
-        else {
-          this.type = "img";
-          if (this.data.images && this.data.images.length > 0)
-            this.bigSrc = this.data.images[0].filePath;
-        }
-
-        this.conShowLoad = false;
-      }, 1000);
-    });
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-@import "../../node_modules/swiper/dist/css/swiper.css";
-.swiper-container {
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-}
-.swShow {
-  opacity: 1;
-}
-
-.swiper-slide img {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.swiper-slide video {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-}
-.info::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
-}
-.info::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #8a7351;
-}
-.info::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  border-radius: 10px;
-  background: transparent;
-}
-.three {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 50px;
-  .comMani {
-    width: 100%;
-    height: calc(100% - 65px);
-    display: flex;
-    .info {
-      color: #8a7351;
-      font-size: 16px;
-      line-height: 28px;
-      width: 60%;
-      max-height: calc(100% - 80px);
-      padding-right: 20px;
-      overflow-y: auto;
-    }
-    .conShow {
-      position: relative;
-      padding: 30px 0;
-      padding-left: 20px;
-      height: calc(100% - 80px);
-      width: 40%;
-      flex: 1;
-      .conShowTop {
-        width: 100%;
-        height: 400px;
-        margin-bottom: 15px;
-        & > img {
-          cursor: pointer;
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-        & > video {
-          width: 100%;
-          height: 100%;
-        }
-      }
-      .conShowfloo {
-        position: relative;
-        width: 100%;
-        height: 150px;
-        .swiperVideo {
-          position: relative;
-          width: 100%;
-          height: 100%;
-          .videoName {
-            z-index: 999;
-            background-color: rgba(0, 0, 0, 0.6);
-            cursor: pointer;
-            width: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            color: #fff;
-            font-size: 14px;
-          }
-        }
-        .active {
-          border: 3px solid #9f171c;
-        }
-      }
-    }
-  }
-  .conShowLoad {
-    z-index: 999;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-</style>

src/components/tow.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="tow">
-    <div class="comTit">{{ tit }}</div>
-    <div class="comMain sroolStop">
-      <div class="row" v-for="(item,index) in data" :key="item.id">
-        <div class="rowLeft">{{ (index+1)<10?`0${index+1}`:index+1 }}</div>
-        <div class="rowRight">
-          <div class="sroolStop">{{item.name}}</div>
-          <p class="sroolStop" v-html="item.txt"></p>
-        </div>
-      </div>
-    </div>
-    <div class="comBs" @click="$emit('pageNext')"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "tow",
-  props: {
-    tit: {
-      type: String,
-    },
-    data: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  components: {},
-  data() {
-    //这里存放数据
-    return {};
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {},
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.comMain::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
-}
-.comMain::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #8a7351;
-}
-.comMain::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  border-radius: 10px;
-  background: transparent;
-}
-.tow {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 50px;
-  .comMain {
-    overflow-y: auto;
-    width: 100%;
-    max-height: calc(100% - 140px);
-    .row {
-      pointer-events: none;
-      color: #8a7351;
-      display: flex;
-      padding: 20px 20px 0px 0;
-      .rowLeft {
-        width: 60px;
-        padding-bottom: 20px;
-        border-bottom: 1px solid #bfb094;
-        font-family: "思源宋体";
-        font-weight: 700;
-        font-size: 50px;
-      }
-      .rowRight {
-        flex: 1;
-        padding-bottom: 20px;
-        border-bottom: 1px solid #bfb094;
-        padding-left: 50px;
-        & > div {
-          font-size: 24px;
-          font-family: "思源宋体";
-        }
-        & > p {
-          margin-top: 10px;
-          font-size: 16px;
-        }
-      }
-    }
-  }
-}
-</style>

src/router/index.js

@@ -9,17 +9,6 @@ const routes = [
     name: 'Home',
     component: () => import('../views/Home.vue')
   },
-  {
-    path: '/stair/:id',
-    name: 'stair',
-    component: () => import('../views/stair/index.vue')
-  },
-  {
-    path: '/info/:id',
-    name: 'info',
-    component: () => import('../views/info/index.vue')
-  },
-  
 ]
 
 const router = new VueRouter({

src/utils/api.js

@@ -1,70 +1,70 @@
 import axios from './request'
 // 村庄保存点赞
-export const likeSaveApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/village/addStar/${villageId}`,
-  })
-}
-// 村庄浏览量
-export const lookSaveApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/village/addVisit/${villageId}`,
-  })
-}
-// 获取浏览量和点赞量
-export const getCunNumApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/village/getDetail/${villageId}`,
-  })
-}
+// export const likeSaveApi = (villageId) => {
+//   return axios({
+//     method: 'get',
+//     url: `/web/village/addStar/${villageId}`,
+//   })
+// }
+// // 村庄浏览量
+// export const lookSaveApi = (villageId) => {
+//   return axios({
+//     method: 'get',
+//     url: `/web/village/addVisit/${villageId}`,
+//   })
+// }
+// // 获取浏览量和点赞量
+// export const getCunNumApi = (villageId) => {
+//   return axios({
+//     method: 'get',
+//     url: `/web/village/getDetail/${villageId}`,
+//   })
+// }
 
-// 获取菜单树
-export const getTreeMenuApi = () => {
-  return axios({
-    method: 'get',
-    url: '/web/getTreeMenu',
-  })
-} 
+// // 获取菜单树
+// export const getTreeMenuApi = () => {
+//   return axios({
+//     method: 'get',
+//     url: '/web/getTreeMenu',
+//   })
+// } 
 
-// 获取内容列表
-export const getInfoApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/content/list/${villageId}`,
-  })
-}
+// // 获取内容列表
+// export const getInfoApi = (villageId) => {
+//   return axios({
+//     method: 'get',
+//     url: `/web/content/list/${villageId}`,
+//   })
+// }
 
-// 村庄-统计-5分钟更新一次
-export const getStatistics = (villageId) => {
-  return axios({
-    method: 'get',
-    url: '/web/village/getStatistics',
-  })
-}
+// // 村庄-统计-5分钟更新一次
+// export const getStatistics = (villageId) => {
+//   return axios({
+//     method: 'get',
+//     url: '/web/village/getStatistics',
+//   })
+// }
 
-// 村庄-保存分享量
-export const addShareApi = (villageId) => {
-  return axios({
-    method: 'get',
-    url: `/web/village/addShare/${villageId}`,
-  })
-}
+// // 村庄-保存分享量
+// export const addShareApi = (villageId) => {
+//   return axios({
+//     method: 'get',
+//     url: `/web/village/addShare/${villageId}`,
+//   })
+// }
 
-// 获取访问量
-export const sceneGetList = () => {
-  return axios({
-    method: 'get',
-    url: '/web/scene/getList',
-  })
-}
+// // 获取访问量
+// export const sceneGetList = () => {
+//   return axios({
+//     method: 'get',
+//     url: '/web/scene/getList',
+//   })
+// }
 
-// 添加访问量
-export const addVisit = (sceneCode) => {
-  return axios({
-    method: 'get',
-    url: `/web/scene/addVisit/${sceneCode}`,
-  })
-}
+// // 添加访问量
+// export const addVisit = (sceneCode) => {
+//   return axios({
+//     method: 'get',
+//     url: `/web/scene/addVisit/${sceneCode}`,
+//   })
+// }

src/views/info/components/Son1.vue

@@ -1,107 +0,0 @@
-<!--  -->
-<template>
-  <div class="Son1">
-    <One
-      tit="建村历史"
-      :data="data1"
-      @pageNext="$emit('pageNext', 1)"
-      @openLook="openLook"
-    />
-    <Tow tit="历史人物" :data="data2" @pageNext="$emit('pageNext', 2)" />
-    <Three
-      tit="历史事件"
-      :data="data3"
-      @pageNext="$emit('pageNext', 3)"
-      @openLook="openLook"
-    />
-    <Three
-      tit="族谱家训"
-      :data="data4"
-      @pageNext="$emit('pageNext', 4)"
-      @openLook="openLook"
-    />
-    <Four
-      tit="口述史"
-      :data="data5"
-      @pageNext="$emit('pageNext', 5)"
-      @openLook="openLook"
-    />
-    <Five tit="视频集" :data="data6" @openLook="openLook" />
-  </div>
-</template>
-
-<script>
-import { getInfoApi } from "@/utils/api";
-import One from "@/components/one.vue";
-import Tow from "@/components/tow.vue";
-import Three from "@/components/three.vue";
-import Four from "@/components/four.vue";
-import Five from "@/components/five.vue";
-export default {
-  name: "Son1",
-  components: { One, Tow, Three, Four, Five },
-  props: {},
-  data() {
-    //这里存放数据
-    return {
-      data1: {},
-      data2: [],
-      data3: {},
-      data4: {},
-      data5: {},
-      data6: {},
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    openLook(url, type) {
-      this.$emit("openLook", url, type);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  async created() {
-    let res = await getInfoApi(Number(this.$route.params.id));
-    res.data.forEach((v) => {
-      // console.log(v);
-      if (v.menuId === 1001) {
-        this.data1 = v;
-        return;
-      } else if (v.menuId === 1002) {
-        this.data2 = JSON.parse(v.contentJson);
-        return;
-      } else if (v.menuId === 1003) {
-        this.data3 = v;
-        return;
-      } else if (v.menuId === 1004) {
-        this.data4 = v;
-        return;
-      } else if (v.menuId === 1005) {
-        this.data5 = v;
-        return;
-      } else if (v.menuId === 1006) {
-        this.data6 = v;
-        return;
-      }
-    });
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.Son1 {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/info/components/Son2.vue

@@ -1,122 +0,0 @@
-<!--  -->
-<template>
-  <div class="Son2">
-    <Three
-      tit="村落选址"
-      :data="data1"
-      @pageNext="$emit('pageNext', 1)"
-      @openLook="openLook"
-    />
-    <Four
-      tit="村落格局"
-      :data="data2"
-      @pageNext="$emit('pageNext', 2)"
-      @openLook="openLook"
-    />
-    <One
-      tit="建村智慧"
-      :data="data3"
-      @pageNext="$emit('pageNext', 3)"
-      @openLook="openLook"
-    />
-    <Six
-      tit="自然环境"
-      :data="data4"
-      @pageNext="$emit('pageNext', 4)"
-      @openLook="openLook"
-    />
-    <Four
-      tit="风景名胜"
-      :data="data5"
-      @pageNext="$emit('pageNext', 5)"
-      @openLook="openLook"
-    />
-    <One
-      tit="文物古迹"
-      :data="data6"
-      @pageNext="$emit('pageNext', 6)"
-      @openLook="openLook"
-    />
-    <Seven tit="历史环境要素" :data="data7" @openLook="openLook" />
-  </div>
-</template>
-
-<script>
-import { getInfoApi } from "@/utils/api";
-import One from "@/components/one.vue";
-import Three from "@/components/three.vue";
-import Four from "@/components/four.vue";
-import Six from "@/components/six.vue";
-import Seven from "@/components/seven.vue";
-export default {
-  name: "Son2",
-  components: { One, Three, Four, Six, Seven },
-  props: {},
-  data() {
-    //这里存放数据
-    return {
-      data1: {},
-      data2: {},
-      data3: {},
-      data4: {},
-      data5: {},
-      data6: {},
-      data7: [],
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    openLook(url, type) {
-      this.$emit("openLook", url, type);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  async created() {
-    let res = await getInfoApi(Number(this.$route.params.id));
-    res.data.forEach((v) => {
-      // console.log(v);
-      if (v.menuId === 2001) {
-        this.data1 = v;
-        return;
-      } else if (v.menuId === 2002) {
-        this.data2 = v;
-        return;
-      } else if (v.menuId === 2003) {
-        this.data3 = v;
-        return;
-      } else if (v.menuId === 2004) {
-        this.data4 = v;
-        return;
-      } else if (v.menuId === 2005) {
-        this.data5 = v;
-        return;
-      } else if (v.menuId === 2006) {
-        this.data6 = v;
-        return;
-      } else if (v.menuId === 2007) {
-        this.data7 = JSON.parse(v.contentJson);
-        return;
-      }
-    });
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.Son2 {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/info/components/Son3.vue

@@ -1,80 +0,0 @@
-<!--  -->
-<template>
-  <div class="Son3">
-    <Eight
-      tit="传统建筑"
-      :data="data1"
-      @pageNext="$emit('pageNext', 1)"
-      @openLook="openLook"
-    />
-    <Six
-      tit="村落风貌"
-      :data="data2"
-      @pageNext="$emit('pageNext', 2)"
-      @openLook="openLook"
-    />
-    <Five tit="视频集" :data="data3" @openLook="openLook" />
-  </div>
-</template>
-
-<script>
-import { getInfoApi } from "@/utils/api";
-import Six from "@/components/six.vue";
-import Eight from "@/components/eight.vue";
-import Five from "@/components/five.vue";
-export default {
-  name: "Son3",
-  components: { Six, Eight, Five },
-  props: {},
-  data() {
-    //这里存放数据
-    return {
-      data1: [],
-      data2: {},
-      data3: {},
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    openLook(url, type) {
-      this.$emit("openLook", url, type);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  async created() {
-    let res = await getInfoApi(Number(this.$route.params.id));
-    res.data.forEach((v) => {
-      // console.log(v);
-      if (v.menuId === 3001) {
-        this.data1 = JSON.parse(v.contentJson);
-        return;
-      } else if (v.menuId === 3002) {
-        this.data2 = v;
-        return;
-      } else if (v.menuId === 3003) {
-        this.data3 = v;
-        return;
-      }
-    });
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.Son3 {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/info/components/Son4.vue

@@ -1,112 +0,0 @@
-<!--  -->
-<template>
-  <div class="Son4">
-    <Four
-      tit="节庆活动"
-      :data="data1"
-      @pageNext="$emit('pageNext', 1)"
-      @openLook="openLook"
-    />
-    <Six
-      tit="祭祀崇礼"
-      :data="data2"
-      @pageNext="$emit('pageNext', 2)"
-      @openLook="openLook"
-    />
-    <Three
-      tit="婚丧嫁娶"
-      :data="data3"
-      @pageNext="$emit('pageNext', 3)"
-      @openLook="openLook"
-    />
-    <One
-      tit="地方方言"
-      :data="data4"
-      @pageNext="$emit('pageNext', 4)"
-      @openLook="openLook"
-    />
-    <Three
-      tit="特色文化"
-      :data="data5"
-      @pageNext="$emit('pageNext', 5)"
-      @openLook="openLook"
-    />
-    <Five tit="视频集" :data="data6" @openLook="openLook" />
-  </div>
-</template>
-
-<script>
-import { getInfoApi } from "@/utils/api";
-import One from "@/components/one.vue";
-import Three from "@/components/three.vue";
-import Four from "@/components/four.vue";
-import Five from "@/components/five.vue";
-import Six from "@/components/six.vue";
-export default {
-  name: "Son4",
-  components: { One, Three, Four, Six, Five },
-  props: {},
-  data() {
-    //这里存放数据
-    return {
-      data1: {},
-      data2: {},
-      data3: {},
-      data4: {},
-      data5: {},
-      data6: {},
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    openLook(url, type) {
-      this.$emit("openLook", url, type);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  async created() {
-    let res = await getInfoApi(Number(this.$route.params.id));
-    res.data.forEach((v) => {
-      // console.log(v);
-      if (v.menuId === 4001) {
-        this.data1 = v;
-        return;
-      } else if (v.menuId === 4002) {
-        this.data2 = v;
-        return;
-      } else if (v.menuId === 4003) {
-        this.data3 = v;
-        return;
-      } else if (v.menuId === 4004) {
-        this.data4 = v;
-        return;
-      } else if (v.menuId === 4005) {
-        this.data5 = v;
-        return;
-      } else if (v.menuId === 4006) {
-        this.data6 = v;
-        return;
-      }
-    });
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.Son4 {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/info/components/Son5.vue

@@ -1,142 +0,0 @@
-<!--  -->
-<template>
-  <div class="Son5">
-    <Four
-      tit="特色物产"
-      :data="data1"
-      @pageNext="$emit('pageNext', 1)"
-      @openLook="openLook"
-    />
-    <Six
-      tit="商业集市"
-      :data="data2"
-      @pageNext="$emit('pageNext', 2)"
-      @openLook="openLook"
-    />
-    <Three
-      tit="生产工艺"
-      :data="data3"
-      @pageNext="$emit('pageNext', 3)"
-      @openLook="openLook"
-    />
-    <One
-      tit="生产工具"
-      :data="data4"
-      @pageNext="$emit('pageNext', 4)"
-      @openLook="openLook"
-    />
-    <Four
-      tit="服装服饰"
-      :data="data5"
-      @pageNext="$emit('pageNext', 5)"
-      @openLook="openLook"
-    />
-    <Six
-      tit="美味美食"
-      :data="data6"
-      @pageNext="$emit('pageNext', 6)"
-      @openLook="openLook"
-    />
-    <Three
-      tit="运输工具"
-      :data="data7"
-      @pageNext="$emit('pageNext', 7)"
-      @openLook="openLook"
-    />
-    <Four
-      tit="村规民约"
-      :data="data8"
-      @pageNext="$emit('pageNext', 8)"
-      @openLook="openLook"
-    />
-    <Five tit="视频集" :data="data9" @openLook="openLook" />
-  </div>
-</template>
-
-<script>
-import { getInfoApi } from "@/utils/api";
-import One from "@/components/one.vue";
-import Three from "@/components/three.vue";
-import Four from "@/components/four.vue";
-import Five from "@/components/five.vue";
-import Six from "@/components/six.vue";
-export default {
-  name: "Son5",
-  components: { One, Three, Four, Six, Five },
-  props: {},
-  data() {
-    //这里存放数据
-    return {
-      data1: {},
-      data2: {},
-      data3: {},
-      data4: {},
-      data5: {},
-      data6: {},
-      data7: {},
-      data8: {},
-      data9: {},
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    openLook(url, type) {
-      this.$emit("openLook", url, type);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  async created() {
-    let res = await getInfoApi(Number(this.$route.params.id));
-    res.data.forEach((v) => {
-      // console.log(v);
-      if (v.menuId === 5001) {
-        this.data1 = v;
-        return;
-      } else if (v.menuId === 5002) {
-        this.data2 = v;
-        return;
-      } else if (v.menuId === 5003) {
-        this.data3 = v;
-        return;
-      } else if (v.menuId === 5004) {
-        this.data4 = v;
-        return;
-      } else if (v.menuId === 5005) {
-        this.data5 = v;
-        return;
-      } else if (v.menuId === 5006) {
-        this.data6 = v;
-        return;
-      } else if (v.menuId === 5007) {
-        this.data7 = v;
-        return;
-      } else if (v.menuId === 5008) {
-        this.data8 = v;
-        return;
-      } else if (v.menuId === 5009) {
-        this.data9 = v;
-        return;
-      }
-    });
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.Son5 {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/info/components/Son6.vue

@@ -1,69 +0,0 @@
-<!--  -->
-<template>
-  <div class="Son6">
-    <Four
-      tit="入村路线"
-      :data="data1"
-      @pageNext="$emit('pageNext', 1)"
-      @openLook="openLook"
-    />
-    <Six tit="村内导览" :data="data2" @openLook="openLook" />
-  </div>
-</template>
-
-<script>
-import { getInfoApi } from "@/utils/api";
-import Four from "@/components/four.vue";
-import Six from "@/components/six.vue";
-export default {
-  name: "Son6",
-  components: { Four, Six },
-  props: {},
-  data() {
-    //这里存放数据
-    return {
-      data1: {},
-      data2: {},
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    openLook(url, type) {
-      this.$emit("openLook", url, type);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  async created() {
-    let res = await getInfoApi(Number(this.$route.params.id));
-    res.data.forEach((v) => {
-      // console.log(v);
-      if (v.menuId === 6001) {
-        this.data1 = v;
-        return;
-      } else if (v.menuId === 6002) {
-        this.data2 = v;
-        return;
-      }
-    });
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.Son6 {
-  width: 100%;
-  height: 100%;
-}
-</style>

src/views/info/index.vue

@@ -1,419 +0,0 @@
-<!--  -->
-<template>
-  <div class="info">
-    <div class="top">
-      <div
-        class="el-icon-arrow-left"
-        @click="$router.push(`/stair/${$route.params.id}`)"
-      >
-        返回
-      </div>
-      <div class="rightTab">
-        <div
-          class="row"
-          @click="cutInfo(item.id, item.children)"
-          :class="{ active: topDataInd === item.id }"
-          v-for="item in topData"
-          :key="item.id"
-        >
-          {{ item.name }}
-        </div>
-      </div>
-    </div>
-    <div class="conten">
-      <div class="left">
-        <img
-          :src="require(`@/assets/img/contCun/${$route.params.id}.png`)"
-          alt=""
-        />
-        <div class="leftRow">
-          <div
-            @click="cutScroll(index)"
-            class="row"
-            :class="{ leAc: pageInd === index }"
-            v-for="(item, index) in leftData"
-            :key="item.id"
-          >
-            <img
-              :src="
-                require(`@/assets/img/conBs${
-                  pageInd === index ? 'Ac' : ''
-                }.png`)
-              "
-              alt=""
-            />
-            <span>{{ item.name }}</span>
-          </div>
-        </div>
-      </div>
-      <!-- 主要切换内容 -->
-      <div class="right">
-        <Son1
-          @pageNext="pageNext"
-          v-if="topDataInd === '1000'"
-          @openLook="openLook"
-        />
-        <Son2
-          @pageNext="pageNext"
-          v-else-if="topDataInd === '2000'"
-          @openLook="openLook"
-        />
-        <Son3
-          @pageNext="pageNext"
-          v-else-if="topDataInd === '3000'"
-          @openLook="openLook"
-        />
-        <Son4
-          @pageNext="pageNext"
-          v-else-if="topDataInd === '4000'"
-          @openLook="openLook"
-        />
-        <Son5
-          @pageNext="pageNext"
-          v-else-if="topDataInd === '5000'"
-          @openLook="openLook"
-        />
-        <Son6
-          @pageNext="pageNext"
-          v-else-if="topDataInd === '6000'"
-          @openLook="openLook"
-        />
-      </div>
-    </div>
-    <!-- 查看图片 -->
-    <viewer class="viewerCla" ref="viewer" :images="lookPics">
-      <img :src="lookPics[0]" alt="" />
-    </viewer>
-
-    <!-- 查看视频的盒子 -->
-    <div class="videoBox" v-if="lookShow === 'video'">
-      <video autoplay controls :src="lookUrl"></video>
-      <div class="closeL" @click="lookShow = null">
-        <img src="../../assets/img/closeL.png" alt="" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getTreeMenuApi } from "@/utils/api";
-import Son1 from "./components/Son1.vue";
-import Son2 from "./components/Son2.vue";
-import Son3 from "./components/Son3.vue";
-import Son4 from "./components/Son4.vue";
-import Son5 from "./components/Son5.vue";
-import Son6 from "./components/Son6.vue";
-export default {
-  name: "info",
-  components: { Son1, Son2, Son3, Son4, Son5, Son6 },
-  data() {
-    //这里存放数据
-    return {
-      lookShow: null,
-      lookUrl: null,
-      lookPics: [],
-      // ----------------------
-      leftData: [],
-      topDataInd: "1000",
-      topData: [],
-      // 一个内容的高度
-      pageHeight: null,
-      pageInd: 0,
-      // 滚动开关
-      sroolFlag: false,
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {
-    pageInd(val) {
-      let dom = document.querySelector(".conten");
-      dom.scrollTo({ top: this.pageHeight * val, behavior: "smooth" });
-      // // 切换的时候暂时视频
-      this.$nextTick(() => {
-        setTimeout(() => {
-          let dom = document.querySelectorAll("video");
-          dom.forEach((v) => {
-            v.pause();
-          });
-        }, 100);
-      });
-    },
-  },
-  //方法集合
-  methods: {
-    openLook(url, type) {
-      if (type === "img") {
-        let dom = this.$refs.viewer.$viewer;
-        this.lookPics = [url];
-        dom.show();
-      } else {
-        this.lookUrl = url;
-        this.lookShow = type;
-      }
-    },
-    pageNext(index) {
-      this.cutScroll(index);
-    },
-    cutScroll(index) {
-      this.pageInd = index;
-    },
-    cutInfo(id, val) {
-      let dom = document.querySelector(".conten");
-      dom.scrollTo({ top: 0, behavior: "smooth" });
-      this.topDataInd = id;
-      this.leftData = val;
-      this.pageInd = 0;
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  async created() {
-    // 获取菜单树
-    let res = await getTreeMenuApi();
-    this.topData = res.data;
-    this.leftData = res.data[0].children;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    this.$nextTick(() => {
-      // 获取一个页面的高度
-      let domH = document.querySelector(".conten .right");
-      this.pageHeight = domH.clientHeight;
-      // uc浏览器兼容问题
-      let dom = document.querySelector(".conten");
-      if (!dom.scrollTo) {
-        const Element = window.HTMLElement || window.Element;
-        Element.prototype.scrollTo = function () {
-          let left = 0;
-          let top = 0;
-          if (arguments.length > 1) {
-            left = arguments[0];
-            top = arguments[1];
-          } else {
-            left = arguments[0].left;
-            top = arguments[0].top;
-          }
-          this.scrollLeft = left;
-          this.scrollTop = top;
-        };
-      }
-
-      // 获取滚动元素
-      // let sroolDom = document.querySelector(".info .conten");
-      // sroolDom.addEventListener(
-      //   "wheel",
-      //   (e) => {
-      //     let evt = e || sroolDom.event; //考虑兼容性
-      //     let dom = evt.target;
-      //     if (dom.className && dom.className.includes("detail")) return;
-      //     // if (dom.className.includes("sroolStop")) {
-      //     //   // 可能会有滚动条的元素
-      //     //   if (dom.scrollHeight > dom.clientHeight) {
-      //     //     // 确定有滚动条的元素
-      //     //     dom.addEventListener("scroll", () => {
-      //     //       const clientHeight = dom.clientHeight;
-      //     //       const scrollTop = dom.scrollTop;
-      //     //       const scrollHeight = dom.scrollHeight;
-      //     //       // console.log(clientHeight , scrollTop,scrollHeight);
-      //     //       if (
-      //     //         clientHeight + scrollTop < scrollHeight &&
-      //     //         scrollTop !== 0
-      //     //       ) {
-      //     //         console.log("在元素中滚动");
-      //     //         return;
-      //     //       } else {
-      //     //         setTimeout(() => {
-      //     //         }, 100);
-      //     //         console.log("滚动到了顶部或者底部");
-      //     //       }
-      //     //     });
-      //     //   }
-      //     // }
-      //     // evt.preventDefault();
-      //     if (this.sroolFlag) return;
-      //     this.sroolFlag = true;
-
-      //     if (evt.deltaY > 0) {
-      //       //在火狐中 向下滚动是3 谷歌是125
-      //       if (this.pageInd === this.leftData.length - 1) {
-      //         this.sroolFlag = false;
-      //         return;
-      //       }
-      //       this.pageInd++;
-
-      //       // console.log("向下滚动");
-      //     } else {
-      //       if (this.pageInd === 0) {
-      //         this.sroolFlag = false;
-      //         return;
-      //       }
-      //       this.pageInd--;
-
-      //       // console.log("向上滚动");
-      //       //在火狐中 向上滚动是-3 谷歌是-125
-      //     }
-      //     setTimeout(() => {
-      //       this.sroolFlag = false;
-      //     }, 500);
-      //     // //检查事件
-      //     // console.log(evt.type, evt.deltaX, evt.deltaY, evt.deltaZ);
-      //   },
-      //   {
-      //     passive: false,
-      //   }
-      // );
-    });
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.info {
-  width: 100%;
-  height: 100%;
-  min-height: 900px;
-  .top {
-    font-family: "思源宋体";
-    z-index: 1999;
-    min-width: 1400px;
-    padding: 0 0px 0 120px;
-    color: #fff;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100px;
-    background-color: #d4c6b4;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .el-icon-arrow-left {
-      cursor: pointer;
-      font-size: 24px;
-    }
-    .rightTab {
-      flex: 1;
-      height: 100%;
-      display: flex;
-      padding-left: 380px;
-      .row {
-        margin-right: 90px;
-        cursor: pointer;
-        padding: 0 12px;
-        height: 100px;
-        line-height: 100px;
-        font-size: 24px;
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-      .active {
-        pointer-events: none;
-        color: #9f171c;
-        border-bottom: 2px solid #9f171c;
-      }
-    }
-  }
-
-  .conten {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    // overflow-y: auto;
-    padding: 100px 140px 0;
-    background: url("../../assets/img/contenBG.png");
-    .left {
-      position: absolute;
-      top: 100px;
-      left: 140px;
-      padding-top: 50px;
-      width: 300px;
-      height: calc(100% - 100px);
-      & > img {
-        width: 145px;
-        height: 255px;
-      }
-      .leftRow {
-        margin: 30px 0 0 58px;
-        width: calc(100% - 58px);
-        height: 450px;
-        border-left: 1px solid #cab58d;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        .row {
-          cursor: pointer;
-          position: relative;
-          padding-left: 30px;
-          font-family: "思源宋体";
-          font-size: 24px;
-          color: #d9c8a9;
-          & > img {
-            position: absolute;
-            top: 50%;
-            left: -16px;
-            transform: translateY(-50%);
-            width: 32px;
-            height: 26px;
-          }
-        }
-        .leAc {
-          pointer-events: none;
-          color: #9f171c;
-        }
-      }
-    }
-    .right {
-      padding-left: 358px;
-      height: 100%;
-    }
-  }
-  .videoBox {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 99999;
-    background-color: rgba(0, 0, 0, 0.8);
-    video {
-      width: 100%;
-      height: 100%;
-    }
-    .closeL {
-      cursor: pointer;
-      z-index: 99999;
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      width: 30px;
-      img {
-        width: 100%;
-      }
-    }
-  }
-  .viewerCla img {
-    display: none;
-  }
-}
-@media screen and (max-width: 1750px) {
-  .info .top .rightTab {
-    padding-left: 180px;
-  }
-}
-@media screen and (max-width: 1550px) {
-  .info .top {
-    padding-left: 50px;
-    .rightTab {
-      padding-left: 80px;
-    }
-  }
-}
-</style>

src/views/stair/component/card.vue

@@ -1,247 +0,0 @@
-<!--  -->
-<template>
-  <div class="stairCard">
-    <div class="main">
-      <div class="title">观光打卡</div>
-      <div class="title2">参观景点VR场景<br />，完成打卡签到<br />！</div>
-
-      <div class="rowBox">
-        <div
-          class="row"
-          v-for="item in data"
-          :key="item.id"
-          @click="sonDaka(item)"
-        >
-          <img
-            :src="`${textUrl}/local/4dkk/${item.id}/wwwroot/images/images${item.id}/thumbSmallImg.jpg?0.3393463684591038`"
-            alt=""
-          />
-          <div class="txt">
-            <p>{{ item.name }}</p>
-            <span>访问量：{{ item.num }}</span>
-          </div>
-          <!-- 已经打卡了 -->
-          <div class="bs" v-if="item.done"></div>
-        </div>
-      </div>
-      <!-- 关闭按钮 -->
-      <div class="close" @click="$emit('close')"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { sceneGetList, addVisit } from "@/utils/api";
-export default {
-  name: "stairCard",
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      // 测试url
-      // textUrl: "http://192.168.20.48:8080/", //本地
-      textUrl: "/SWKK", //打包
-
-      // 打卡相关匹配数据
-      dakaData: {
-        1: [
-          { num: 0, id: "KJ-rDI8nxEzY7", name: "图书馆", ind: 0 },
-          { num: 0, id: "KJ-l6umbreveh", name: "住宅", ind: 1 },
-        ],
-        2: [
-          { num: 0, id: "KJ-DGrs9gsN5f", name: "罗氏大宗祠", ind: 0 },
-          { num: 0, id: "KJ-TlLriX28UR", name: "五部堂", ind: 1 },
-        ],
-        3: [
-          { num: 0, id: "KJ-XOBeWcv7zo", name: "名官家廟", ind: 0 },
-          { num: 0, id: "KJ-ASW6c4Dn2c", name: "毅斋卢公祠", ind: 1 },
-        ],
-        4: [
-          { num: 0, id: "KK-mJd0HnVE0e", name: "祠堂", ind: 0 },
-          { num: 0, id: "KK-uptTQv9BYC", name: "四新楼", ind: 1 },
-        ],
-        5: [
-          { num: 0, id: "KJ-OQtw9EMLaP", name: "仓东村秉文谢", ind: 0 },
-          { num: 0, id: "KJ-uce7ck7XWB", name: "仓东村-侯成谢公祠", ind: 1 },
-        ],
-        6: [
-          { num: 0, id: "KJ-AZ11Fpmquy", name: "霄南村-尧階", ind: 0 },
-          { num: 0, id: "KJ-DyMG5hLNEs", name: "霄南村-樂隐源公祠", ind: 1 },
-        ],
-        7: [
-          { num: 0, id: "KJ-O8r726fnie", name: "振韬祖祠", ind: 0 },
-          { num: 0, id: "KJ-BQFE4jJMyU", name: "缉熙堂祠堂", ind: 1 },
-        ],
-        8: [
-          { num: 0, id: "KJ-q2pOJb3igE", name: "碉楼", ind: 0 },
-          { num: 0, id: "KJ-qvIOZguVBQ", name: "澜生居庐", ind: 1 },
-        ],
-        9: [
-          { num: 0, id: "KJ-qKWxTrHUMd", name: "骏庐", ind: 0 },
-          { num: 0, id: "KJ-e6wGbcLwtP", name: "林庐", ind: 1 },
-        ],
-        10: [
-          { num: 0, id: "KK-qO3teGzkJK", name: "南津赵公祠", ind: 0 },
-          { num: 0, id: "KJ-JgLPL8Y1Ue", name: "凌云阁", ind: 1 },
-        ],
-        11: [
-          { num: 0, id: "KJ-fqXrFPJYOg", name: "贤安庐", ind: 0 },
-          { num: 0, id: "KJ-eh6NxoBf9l", name: "民居", ind: 1 },
-        ],
-        12: [
-          { num: 0, id: "KJ-Dx5YGcSZlx", name: "礼仪书室", ind: 0 },
-          { num: 0, id: "KJ-qGS7oKvuZa", name: "胡氏别墅", ind: 1 },
-        ],
-      },
-      data: [],
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    async sonDaka(item) {
-      await addVisit(item.id);
-      this.$emit("daka", [item.id, item.ind]);
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  async created() {
-    let id = Number(this.$route.params.id);
-
-    // 筛选打卡的数据
-    this.data = this.dakaData[id];
-    // 存在本地
-    let temp = localStorage.getItem("JMData_daka") || [];
-    if (temp.length > 0) {
-      temp = JSON.parse(temp);
-    }
-    temp.forEach((v) => {
-      if (v.name == this.data[0].id) this.data[0].done = true;
-      if (v.name == this.data[1].id) this.data[1].done = true;
-    });
-
-    // 获取访问量
-    let res = await sceneGetList();
-    res.data.forEach((v) => {
-      if (v.sceneCode === this.data[0].id) this.data[0].num = v.visit;
-      if (v.sceneCode === this.data[1].id) this.data[1].num = v.visit;
-    });
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.stairCard {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  backdrop-filter: blur(4px);
-  .main {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1450px;
-    height: 660px;
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.6);
-      z-index: -2;
-    }
-    .close {
-      cursor: pointer;
-      top: -7px;
-      right: 104px;
-      position: absolute;
-      width: 66px;
-      height: 105px;
-      background: url("../../../assets/img/close.png");
-      background-size: 100% 100%;
-    }
-    .title {
-      font-size: 36px;
-      font-family: "思源宋体";
-      position: absolute;
-      top: 0px;
-      right: 85px;
-      width: 20px;
-      height: 100%;
-      padding-top: 135px;
-    }
-    .title2 {
-      line-height: 30px;
-      text-align: center;
-      font-size: 18px;
-      position: absolute;
-      top: 0px;
-      right: 125px;
-      width: 24px;
-      height: 100%;
-      padding-top: 135px;
-    }
-    .rowBox {
-      position: absolute;
-      top: 110px;
-      right: 200px;
-      width: 1150px;
-      height: 440px;
-      display: flex;
-      justify-content: space-between;
-      .row {
-        cursor: pointer;
-        position: relative;
-        width: 550px;
-        height: 440px;
-        background: url("../../../assets/img/btn_record.png");
-        background-size: 100% 100%;
-        padding: 15px;
-        & > img {
-          width: 100%;
-          height: 350px;
-          object-fit: cover;
-        }
-        .txt {
-          margin-top: 10px;
-          width: 100%;
-          height: 90px;
-          color: #887b67;
-          & > p {
-            font-size: 20px;
-          }
-          & > span {
-            font-size: 16px;
-          }
-        }
-        .bs {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: 209px;
-          height: 90px;
-          background: url("../../../assets/img/cardAc.png");
-          background-size: 100% 100%;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/stair/component/intro.vue

@@ -1,125 +0,0 @@
-<!--  -->
-<template>
-  <div class="stairIntro">
-    <div class="main">
-      <div class="title">{{ txtData.tit }}</div>
-      <div class="info" v-html="txtData.txt"></div>
-      <!-- 关闭按钮 -->
-      <div class="close" @click="$emit('close')"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { txtInfo } from "../data";
-export default {
-  name: "stairIntro",
-  components: {},
-  data() {
-    //这里存放数据
-    return {
-      txtData: {},
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {},
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    this.txtData = txtInfo.find((v) => v.id == this.$route.params.id);
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.stairIntro {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  backdrop-filter: blur(4px);
-  .main {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1450px;
-    height: 700px;
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.6);
-      z-index: -2;
-    }
-    .close {
-      cursor: pointer;
-      top: -7px;
-      right: 104px;
-      position: absolute;
-      width: 66px;
-      height: 105px;
-      background: url("../../../assets/img/close.png");
-      background-size: 100% 100%;
-    }
-    .title {
-      font-size: 36px;
-      font-family: "思源宋体";
-      position: absolute;
-      top: 0px;
-      right: 58px;
-      width: 20px;
-      height: 100%;
-      padding-top: 135px;
-    }
-    .info::-webkit-scrollbar {
-      /*滚动条整体样式*/
-      width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-      height: 1px;
-    }
-    .info::-webkit-scrollbar-thumb {
-      /*滚动条里面小方块*/
-      border-radius: 10px;
-      -webkit-box-shadow: inset 0 0 5px transparent;
-      background: #cbb485;
-    }
-    .info::-webkit-scrollbar-track {
-      /*滚动条里面轨道*/
-      -webkit-box-shadow: inset 0 0 5px transparent;
-      border-radius: 10px;
-      background: transparent;
-    }
-    .info {
-      padding-right: 20px;
-      text-align: justify;
-      // display: flex;
-      // align-items: center;
-      letter-spacing: 8px;
-      line-height: 30px;
-      // writing-mode:vertical-rl;
-      position: absolute;
-      top: 50%;
-      right: 190px;
-      transform: translateY(-50%);
-      width: 1100px;
-      max-height: 500px;
-      overflow-y: auto;
-    }
-  }
-}
-</style>

src/views/stair/component/share.vue

@@ -1,165 +0,0 @@
-<!--  -->
-<template>
-  <div class="stairShare">
-    <div class="main">
-      <div class="title">分享</div>
-      <div class="bigImg">
-        <img :src="`data/${$route.params.id}.png`" alt="" />
-      </div>
-      <!-- 复制和下载 -->
-      <div class="btn">
-        <div class="lianjie" title="复制链接" @click="copy">
-          <img src="../../../assets/img/copy.png" alt="" />
-        </div>
-        <a :href="`data/${$route.params.id}.png`" download title="下载">
-        <img src="../../../assets/img/download.png" alt="" />
-        </a>
-      </div>
-      <!-- 关闭按钮 -->
-      <div class="close" @click="$emit('close')"></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { addShareApi } from "@/utils/api";
-export default {
-  name: "stairShare",
-  components: {},
-  data() {
-    //这里存放数据
-    return {};
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-   async copy() {
-      // 存储传递过来的数据
-      let OrderNumber = window.location.href;
-      // 创建一个input 元素
-      // createElement() 方法通过指定名称创建一个元素
-      let newInput = document.createElement("input");
-      // 讲存储的数据赋值给input的value值
-      newInput.value = OrderNumber;
-      // appendChild() 方法向节点添加最后一个子节点。
-      document.body.appendChild(newInput);
-      // 选中input元素中的文本
-      // select() 方法用于选择该元素中的文本。
-      newInput.select();
-      // 执行浏览器复制命令
-      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
-      document.execCommand("Copy");
-      // 清空输入框
-      newInput.remove();
-      // 下面是element的弹窗 不需要的自行删除就好
-      this.$message({
-        message: `复制网址成功`,
-        type: "success",
-      });
-      // 发送接口保存分享数量
-      await addShareApi(Number(this.$route.params.id));
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.stairShare {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  backdrop-filter: blur(4px);
-  .main {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 1450px;
-    height: 700px;
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.6);
-      z-index: -2;
-    }
-    .close {
-      cursor: pointer;
-      top: -7px;
-      right: 104px;
-      position: absolute;
-      width: 66px;
-      height: 105px;
-      background: url("../../../assets/img/close.png");
-      background-size: 100% 100%;
-    }
-    .title {
-      font-size: 36px;
-      font-family: "思源宋体";
-      position: absolute;
-      top: 0px;
-      right: 70px;
-      width: 20px;
-      height: 100%;
-      padding-top: 135px;
-    }
-    .bigImg {
-      position: absolute;
-      top: 80px;
-      right: 190px;
-      width: 1100px;
-      height: 540px;
-      & > img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    }
-    .btn {
-      position: absolute;
-      bottom: 70px;
-      right: 70px;
-      width: 50px;
-      .lianjie {
-        cursor: pointer;
-        width: 50px;
-        height: 50px;
-        margin-bottom: 15px;
-        & > img {
-          width: 50px;
-          height: 50px;
-        }
-      }
-      a {
-        display: block;
-        cursor: pointer;
-        width: 50px;
-        height: 50px;
-        margin-bottom: 10px;
-        & > img {
-          width: 50px;
-          height: 50px;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/stair/index.vue

@@ -1,342 +0,0 @@
-<template>
-  <div class="stair">
-    <div class="ifrBox">
-      <iframe
-        id="preview"
-        :src="textUrl + ifrSrc[$route.params.id]"
-        frameborder="0"
-      ></iframe>
-    </div>
-    <!-- 左上浏览量 -->
-    <div class="upleft">
-      <div class="el-icon-arrow-left" @click="$router.push('/')">返回</div>
-      <div class="eye">浏览量：{{ lookNum }}</div>
-    </div>
-    <!-- 右边村名 -->
-    <div class="rightCM">
-      <img
-        class="name"
-        :src="require(`@/assets/img/cunName/${$route.params.id}.png`)"
-        alt=""
-      />
-    </div>
-    <!-- 中间选项 -->
-    <!-- <div class="conMain">
-      <div class="row" v-for="item in data" :key="item.id">{{ item.name }}</div>
-    </div> -->
-    <!-- 底部功能 -->
-    <div class="botBtn">
-      <div
-        @click="cutPage(item.id)"
-        class="btnRow"
-        v-for="item in btnData"
-        :key="item.id"
-        @mouseenter="btnDataInd = item.id"
-        @mouseleave="btnDataInd = null"
-      >
-        <img
-          :src="
-            require(`@/assets/img/${item.inco}${
-              (btnDataInd === item.id && item.id !== 4) ||
-              (item.id === 4) & isShowGood ||
-              btnDataAc === item.id
-                ? '_active'
-                : ''
-            }.png`)
-          "
-          alt=""
-        />
-        <!-- 点赞的数字 -->
-        <p v-if="item.id === 4">{{ likeNum }}</p>
-        <transition v-if="item.id === 4" name="likeAddAnimate">
-          <div class="good" v-show="isShowGood">
-            <div class="pic">
-              <img :src="require(`@/assets/img/like_active.png`)" alt="" />
-            </div>
-            <div class="num">+1</div>
-          </div>
-        </transition>
-        <!-- 鼠标移入的显示 -->
-        <div
-          class="hoverInco"
-          :class="{ hovAc: btnDataInd === item.id && !isShowGood }"
-        >
-          {{ item.name }}
-        </div>
-      </div>
-    </div>
-    <!-- 简介组件 -->
-    <StairIntro v-if="btnDataAc === 1" @close="btnDataAc = null" />
-    <!-- 打卡组件 -->
-    <StairCard v-if="btnDataAc === 2" @close="btnDataAc = null" @daka="daka" />
-    <!-- 分享组件 -->
-    <StairShare v-if="btnDataAc === 3" @close="btnDataAc = null" />
-  </div>
-</template>
-
-<script>
-import { likeSaveApi, getCunNumApi } from "@/utils/api";
-import StairIntro from "./component/intro.vue";
-import StairCard from "./component/card.vue";
-import StairShare from "./component/share.vue";
-import { Log } from "mars3d";
-export default {
-  name: "stair",
-  components: { StairIntro, StairCard, StairShare },
-  data() {
-    //这里存放数据
-    return {
-      // 测试url
-      // textUrl: "http://192.168.20.48:8081", //本地
-      textUrl: "/SWKK", //打包
-      lookNum: 0,
-      btnData: [
-        { id: 1, name: "简介", inco: "introduction" },
-        { id: 2, name: "打卡", inco: "daily" },
-        { id: 3, name: "分享", inco: "share" },
-        { id: 4, name: "点赞", inco: "like" },
-        { id: 5, name: "资料", inco: "data" },
-      ],
-      btnDataInd: null,
-      btnDataAc: null,
-      likeNum: 0,
-      isShowGood: false,
-      // 场景地址
-      ifrSrc: {
-        1: "/show.html?id=WK1526481420019593216",
-        2: "/show.html?id=WK1526504857790345216",
-        3: "/show.html?id=WK1526492643662524416",
-        4: "/show.html?id=WK1534388525183561728",
-        5: "/show.html?id=WK1526467526949629952",
-        6: "/show.html?id=WK1534416074647302144",
-        7: "/show.html?id=WK1534702347710656512",
-        8: "/show.html?id=WK1534781968695259136",
-        9: "/show.html?id=WK1534383548646060032",
-        10: "/show.html?id=WK1526490922810896384",
-        11: "/show.html?id=WK1526504177180635136",
-        12: "/show.html?id=WK1526461619335360512",
-      },
-    };
-  },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {
-    // 通知子组件跳转页面
-    daka(arr) {
-      // 存在本地
-      let temp = localStorage.getItem("JMData_daka") || [];
-      if (temp.length > 0) {
-        temp = JSON.parse(temp);
-      }
-      if (temp.every((v) => v.name != arr[0])) {
-        temp.push({ name: arr[0] });
-        localStorage.setItem("JMData_daka", JSON.stringify(temp));
-      }
-
-      this.btnDataAc = null;
-      let ifrDom = document.querySelector("#preview");
-      ifrDom.contentWindow.postMessage(arr, "*");
-    },
-    async cutPage(id) {
-      // 点赞
-      if (id === 4) {
-        if (this.isShowGood) return;
-        this.isShowGood = true;
-        await likeSaveApi(Number(this.$route.params.id));
-        setTimeout(() => {
-          this.likeNum++;
-          this.isShowGood = false;
-        }, 1800);
-        return;
-      } else if (id === 5) {
-        this.$router.push(`/info/${this.$route.params.id}`);
-      } else this.btnDataAc = id;
-    },
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  async created() {
-    let id = Number(this.$route.params.id);
-    let res = await getCunNumApi(id);
-    this.likeNum = res.data.star;
-    this.lookNum = res.data.visit;
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-    window.addEventListener(
-      "message",
-      (e) => {
-        if (typeof e.data === "string" && e.data.length > 0) {
-          // 存在本地
-          let temp = localStorage.getItem("JMData_daka") || [];
-          if (temp.length > 0) {
-            temp = JSON.parse(temp);
-          }
-          if (temp.every((v) => v.name != e.data)) {
-            temp.push({ name: e.data });
-            localStorage.setItem("JMData_daka", JSON.stringify(temp));
-          }
-        }
-      },
-      false
-    );
-  },
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
-</script>
-<style lang='less' scoped>
-.stair {
-  overflow: hidden;
-  position: relative;
-  padding: 20px 0 0 15px;
-  color: #fff;
-  width: 100%;
-  height: 100%;
-  // background: url("../../assets/img/bgs.jpg");
-  // background-size: 100% 100%;
-  .ifrBox {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    iframe {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .upleft {
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    display: flex;
-    align-items: center;
-    .el-icon-arrow-left {
-      cursor: pointer;
-      border-right: 1px solid #fff;
-      padding-right: 15px;
-      margin-right: 15px;
-    }
-    .eye {
-      background-image: url("../../assets/img/number.png");
-      background-position: 0px -8px;
-      background-repeat: no-repeat;
-      padding-left: 40px;
-    }
-  }
-  .rightCM {
-    position: absolute;
-    top: 240px;
-    right: 20px;
-  }
-  .conMain {
-    height: 400px;
-    position: absolute;
-    bottom: 170px;
-    left: 0;
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-    .row {
-      padding-top: 30px;
-      text-align: right;
-      line-height: 34px;
-      cursor: pointer;
-      width: 54px;
-      height: 303px;
-      background: url("../../assets/img/normal.png");
-      background-size: 100% 100%;
-      word-wrap: break-word;
-      letter-spacing: 20px;
-      margin-top: 100px;
-      &:nth-of-type(2n) {
-        margin-top: 0;
-      }
-      &:hover {
-        background: url("../../assets/img/hover.png");
-        background-size: 100% 100%;
-      }
-    }
-  }
-  .likeAddAnimate-enter-active,
-  .likeAddAnimate-leave-active {
-    transition: all 2s ease;
-  }
-  .likeAddAnimate-enter,
-  .likeAddAnimate-leave {
-    transform: translateY(0) scale(0);
-    opacity: 0;
-  }
-  .likeAddAnimate-enter-to,
-  .likeAddAnimate-leave-to {
-    transform: translateY(-50px) scale(1.2);
-    opacity: 1;
-  }
-  .good {
-    position: absolute;
-    top: -10px;
-    right: 0px;
-    display: flex;
-    .pic {
-      width: 35px;
-      > img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .num {
-      margin-top: 10px;
-      margin-left: 10px;
-      color: #fff;
-      text-shadow: 0 0 10px rgba(0, 0, 0, 1);
-    }
-  }
-  .botBtn {
-    display: flex;
-    position: absolute;
-    bottom: 55px;
-    left: 80px;
-    .btnRow {
-      position: relative;
-      cursor: pointer;
-      text-align: center;
-      width: 87px;
-      height: 51px;
-      & > img {
-        width: 52px;
-        height: 51px;
-      }
-      .hoverInco {
-        pointer-events: none;
-        opacity: 0;
-        transform: translateY(10px);
-        transition: all 0.5s;
-        line-height: 34px;
-        position: absolute;
-        top: -45px;
-        left: 0;
-        width: 87px;
-        height: 41px;
-        background: url("../../assets/img/msg.png");
-        background-size: 100% 100%;
-      }
-      .hovAc {
-        transform: translateY(0px);
-        opacity: 1;
-      }
-      & > p {
-        font-size: 14px;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>