up

web/src/assets/css/base.css

@@ -71,4 +71,10 @@ ul li {
 #app .swiper-button-next{
   left: auto;
   right: -17px;
+}
+.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{
+  font-size: 20px !important;
+}
+.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{
+  font-size: 20px !important;
 }

web/src/components/eight.vue

@@ -0,0 +1,373 @@
+<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>{{ detailData.txt5 }}
+            </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"
+                  :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: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    detailShow(val) {
+      if (val) {
+        this.$nextTick(() => {
+          new Swiper(".detailImg .swiper-container", {
+            slidesPerView: 3,
+            spaceBetween: 0,
+            centeredSlides: true,
+            initialSlide: 1,
+            // pagination: {
+            //   el: '.swiper-pagination',
+            //   clickable: true,
+            // },
+          });
+        });
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    imgSrc(item) {
+      return item.imgList.find((v) => v.id === item.imgActive).filePath;
+    },
+    lookDetail(item) {
+      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 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.swiper-slide {
+  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 {
+        width: 220px;
+        height: 157px;
+        object-fit: cover;
+        margin-right: 40px;
+      }
+      .rowRight {
+        flex: 1;
+        .txt {
+          color: #8a7351;
+          display: flex;
+          p {
+            margin-right: 50px;
+            cursor: pointer;
+            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;
+            .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>

web/src/components/four.vue

@@ -1,12 +1,29 @@
 <template>
   <div class="four">
     <div class="comTit">{{ tit }}</div>
-    <div class="comMani">
+    <div class="comMani" :class="{ swShow: !conShowLoad }">
       <div class="conShow">
         <div class="conShowfloo">
-          <div class="icon el-icon-arrow-left" @click="arrowClick(0)"></div>
-          <div class="icon el-icon-arrow-right" @click="arrowClick(1)"></div>
-          <el-carousel type="card" height="300px" :autoplay='false' arrow="never" indicator-position='none' ref="cardShow" :loop='false' :initial-index='1'>
+          <div
+            class="icon el-icon-arrow-left"
+            v-show="Numm > 1"
+            @click="arrowClick(0)"
+          ></div>
+          <div
+            class="icon el-icon-arrow-right"
+            v-show="Numm > 1"
+            @click="arrowClick(1)"
+          ></div>
+          <el-carousel
+            type="card"
+            height="300px"
+            :autoplay="false"
+            arrow="never"
+            indicator-position="none"
+            ref="cardShow"
+            :loop="false"
+            :initial-index="1"
+          >
             <el-carousel-item v-for="item in data.images" :key="item.id">
               <img :src="baseURL + item.filePath" alt="" />
             </el-carousel-item>
@@ -15,7 +32,7 @@
               v-for="item in data.videos"
               :key="item.id"
             >
-              <div class="videoName">{{item.name}}</div>
+              <div class="videoName">{{ item.name }}</div>
               <video controls :src="baseURL + item.filePath"></video>
             </el-carousel-item>
           </el-carousel>
@@ -24,6 +41,10 @@
       <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>
 
@@ -45,6 +66,8 @@ export default {
     //这里存放数据
     return {
       baseURL: "",
+      Numm: 0,
+      conShowLoad:true
     };
   },
   //监听属性 类似于data概念
@@ -53,9 +76,9 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    arrowClick(val){
-      if(val===0) this.$refs.cardShow.prev()
-      else this.$refs.cardShow.next()
+    arrowClick(val) {
+      if (val === 0) this.$refs.cardShow.prev();
+      else this.$refs.cardShow.next();
     },
     cutBig(src, type) {},
   },
@@ -65,7 +88,21 @@ export default {
     this.baseURL = axios.defaults.baseURL;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.conShowLoad = false;
+        // 看看图片和视频加起来的数量
+        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;
+      }, 1000);
+    });
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -106,7 +143,7 @@ export default {
 
   .videoBox {
     background-color: rgba(0, 0, 0, 0.6);
-    .videoName{
+    .videoName {
       position: absolute;
       top: 5px;
       left: 10px;
@@ -120,6 +157,7 @@ export default {
   height: 100%;
   padding-top: 50px;
   .comMani {
+    opacity: 0;
     width: 100%;
     height: calc(100% - 65px);
     .conShow {
@@ -129,8 +167,8 @@ export default {
         position: relative;
         width: 100%;
         height: 300px;
-        .icon{
-          z-index: 9999;
+        .icon {
+          z-index: 9998;
           position: absolute;
           left: -18px;
           top: 50%;
@@ -146,7 +184,7 @@ export default {
           cursor: pointer;
           font-size: 20px;
         }
-        .el-icon-arrow-right{
+        .el-icon-arrow-right {
           left: auto;
           right: -18px;
         }
@@ -154,12 +192,26 @@ export default {
     }
     .info {
       width: 100%;
-      height: 300px;
+      height: 280px;
       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>

web/src/components/one.vue

@@ -4,12 +4,8 @@
     <div class="comMani">
       <div class="info sroolStop" v-html="data.content"></div>
       <div class="conShow">
-        <!-- 数据加载中 -->
-        <div class="conShowLoad" v-show="conShowLoad">
-          <img src="../assets/img/loading.gif" alt="">
-        </div>
         <!--基础存放容器-->
-        <div class="swiper-container">
+        <div class="swiper-container" :class="{swShow:!conShowLoad}">
           <!-- 需要进行轮播的部分 -->
           <div class="swiper-wrapper">
             <!-- 每个节点 -->
@@ -18,14 +14,14 @@
               v-for="item in data.images"
               :key="item.id"
             >
-              <img :src="baseURL + item.filePath" alt=""/>
+              <img :src="baseURL + item.filePath" alt="" />
             </div>
             <div
               class="swiper-slide swiperVideo"
               v-for="item in data.videos"
               :key="item.id"
             >
-            <div class="videoName">{{item.name}}</div>
+              <div class="videoName">{{ item.name }}</div>
               <video controls :src="baseURL + item.filePath"></video>
             </div>
           </div>
@@ -40,6 +36,10 @@
       </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>
 
@@ -63,7 +63,7 @@ export default {
   data() {
     //这里存放数据
     return {
-      conShowLoad:true,
+      conShowLoad: true,
       baseURL: "",
     };
   },
@@ -97,7 +97,7 @@ export default {
           //   prevEl: ".swiper-button-prev",
           // },
         });
-        this.conShowLoad=false
+        this.conShowLoad = false;
       }, 1000);
     });
   },
@@ -113,9 +113,13 @@ export default {
 <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;
@@ -158,7 +162,7 @@ export default {
       font-size: 16px;
       line-height: 28px;
       width: 100%;
-      height: 360px;
+      height: 340px;
       padding-right: 30px;
       overflow-y: auto;
       margin-bottom: 30px;
@@ -167,24 +171,12 @@ export default {
       position: relative;
       height: 240px;
       flex: 1;
-      .conShowLoad{
-        z-index: 999;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        background-color: #fcfefc;
-        justify-content: center;
-        align-items: center;
-      }
       .swiperVideo {
         position: relative;
         width: 100%;
         height: 100%;
-        background-color: rgba(0,0,0,.6);
-        .videoName{
+        background-color: rgba(0, 0, 0, 0.6);
+        .videoName {
           position: absolute;
           top: 1px;
           left: 5px;
@@ -194,5 +186,16 @@ export default {
       }
     }
   }
+  .conShowLoad {
+    z-index: 999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>

web/src/components/seven.vue

@@ -0,0 +1,338 @@
+<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>{{ detailData.txt4 }}
+            </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"
+                  :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: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    detailShow(val) {
+      if (val) {
+        this.$nextTick(() => {
+          new Swiper(".detailImg .swiper-container", {
+            slidesPerView: 3,
+            spaceBetween: 0,
+            centeredSlides: true,
+            initialSlide:1
+            // pagination: {
+            //   el: '.swiper-pagination',
+            //   clickable: true,
+            // },
+          });
+        });
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    imgSrc(item) {
+      return item.imgList.find((v) => v.id === item.imgActive).filePath;
+    },
+    lookDetail(item) {
+      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 {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.swiper-slide {
+  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 {
+        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: pointer;
+          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;
+            .detailSpan {
+              font-family: "思源宋体";
+              font-size: 20px;
+            }
+          }
+        }
+        .detailImg {
+          margin-top: 50px;
+          height: 280px;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/components/six.vue

@@ -3,17 +3,17 @@
     <div class="comTit">{{ tit }}</div>
     <div class="comMani">
       <div class="conShow">
-        <!-- 加载动画 -->
-        <div class="conShowLoad" v-show="conShowLoad">
-          <img src="../assets/img/loading.gif" alt="" />
-        </div>
         <div class="conShowTop">
-          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img'&&bigSrc" />
-          <video controls :src="baseURL + bigSrc" v-if="type === 'video'&&bigSrc"></video>
+          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img' && bigSrc" />
+          <video
+            controls
+            :src="baseURL + bigSrc"
+            v-if="type === 'video' && bigSrc"
+          ></video>
         </div>
         <div class="conShowfloo">
           <!--基础存放容器-->
-          <div class="swiper-container">
+          <div class="swiper-container" :class="{ swShow: !conShowLoad }">
             <!-- 需要进行轮播的部分 -->
             <div class="swiper-wrapper">
               <!-- 每个节点 -->
@@ -42,13 +42,23 @@
             <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
           </div>
           <!-- 如果需要使用前进后退按钮 -->
-          <div class="swiper-button-prev swiper-button-white"></div>
-          <div class="swiper-button-next swiper-button-white"></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')"></div>
+    <!-- 加载动画 -->
+    <div class="conShowLoad" v-show="conShowLoad">
+      <img src="../assets/img/loading.gif" alt="" />
+    </div>
   </div>
 </template>
 
@@ -76,6 +86,7 @@ export default {
       bigSrc: "",
       type: "img",
       conShowLoad: true,
+      Numm: 0,
     };
   },
   //监听属性 类似于data概念
@@ -114,11 +125,21 @@ export default {
             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.images && this.data.images.length > 0)
           this.bigSrc = this.data.images[0].filePath;
         else {
           this.type = "video";
-          this.bigSrc = this.data.videos[0].filePath;
+          if (this.data.videos && this.data.videos[0])
+            this.bigSrc = this.data.videos[0].filePath;
         }
         this.conShowLoad = false;
       }, 1000);
@@ -138,6 +159,10 @@ export default {
 .swiper-container {
   width: 100%;
   height: 100%;
+  opacity: 0;
+}
+.swShow {
+  opacity: 1;
 }
 
 .swiper-slide img {
@@ -193,18 +218,6 @@ export default {
       height: calc(100% - 80px);
       width: 40%;
       flex: 1;
-      .conShowLoad {
-        z-index: 999;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        background-color: #fcfefc;
-        justify-content: center;
-        align-items: center;
-      }
       .conShowTop {
         width: 100%;
         height: 400px;
@@ -242,5 +255,16 @@ export default {
       }
     }
   }
+  .conShowLoad {
+    z-index: 999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>

web/src/components/three.vue

@@ -4,18 +4,18 @@
     <div class="comMani">
       <div class="info sroolStop" v-html="data.content"></div>
       <div class="conShow">
-        <!-- 加载动画 -->
-        <div class="conShowLoad" v-show="conShowLoad">
-          <img src="../assets/img/loading.gif" alt="" />
-        </div>
         <div class="conShowTop">
-          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img'&&bigSrc" />
-          <video controls :src="baseURL + bigSrc" v-if="type === 'video'&&bigSrc"></video>
+          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img' && bigSrc" />
+          <video
+            controls
+            :src="baseURL + bigSrc"
+            v-if="type === 'video' && bigSrc"
+          ></video>
         </div>
         <div class="conShowfloo">
           <!--基础存放容器-->
 
-          <div class="swiper-container">
+          <div class="swiper-container" :class="{ swShow: !conShowLoad }">
             <!-- 需要进行轮播的部分 -->
             <div class="swiper-wrapper">
               <!-- 每个节点 -->
@@ -44,12 +44,22 @@
             <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
           </div>
           <!-- 如果需要使用前进后退按钮 -->
-          <div class="swiper-button-prev swiper-button-white"></div>
-          <div class="swiper-button-next swiper-button-white"></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>
 
@@ -77,6 +87,7 @@ export default {
       bigSrc: "",
       type: "img",
       conShowLoad: true,
+      Numm: 0,
     };
   },
   //监听属性 类似于data概念
@@ -115,11 +126,20 @@ export default {
             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.images && this.data.images.length > 0)
           this.bigSrc = this.data.images[0].filePath;
         else {
           this.type = "video";
-          this.bigSrc = this.data.videos[0].filePath;
+          if (this.data.videos && this.data.videos[0])
+            this.bigSrc = this.data.videos[0].filePath;
         }
         this.conShowLoad = false;
       }, 1000);
@@ -137,9 +157,13 @@ export default {
 <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;
@@ -194,18 +218,6 @@ export default {
       height: calc(100% - 80px);
       width: 40%;
       flex: 1;
-      .conShowLoad {
-        z-index: 999;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        background-color: #fcfefc;
-        justify-content: center;
-        align-items: center;
-      }
       .conShowTop {
         width: 100%;
         height: 400px;
@@ -243,5 +255,16 @@ export default {
       }
     }
   }
+  .conShowLoad {
+    z-index: 999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>

web/src/views/info/components/Son2.vue

@@ -1,24 +1,26 @@
 <!--  -->
 <template>
   <div class="Son2">
-    <Three tit="村落选址" :data='data1' @pageNext="$emit('pageNext','2002',1)"/>
-    <Four tit="村落格局" :data='data2' @pageNext="$emit('pageNext','2003',2)"/>
-    <One tit="建村智慧" :data='data3' @pageNext="$emit('pageNext','2004',3)"/>
-    <Six tit="自然环境" :data='data4' @pageNext="$emit('pageNext','2005',4)"/>
+    <Three tit="村落选址" :data='data1' @pageNext="$emit('pageNext',1)"/>
+    <Four tit="村落格局" :data='data2' @pageNext="$emit('pageNext',2)"/>
+    <One tit="建村智慧" :data='data3' @pageNext="$emit('pageNext',3)"/>
+    <Six tit="自然环境" :data='data4' @pageNext="$emit('pageNext',4)"/>
+    <Four tit="风景名胜" :data='data5' @pageNext="$emit('pageNext',5)"/>
+    <One tit="文物古迹" :data='data6' @pageNext="$emit('pageNext',6)"/>
+    <Seven tit="历史环境要素" :data='data7'/>
   </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";
 import Six from "@/components/six.vue";
+import Seven from "@/components/seven.vue";
 export default {
   name: "Son2",
-  components: { One, Tow, Three,Four,Five,Six },
+  components: { One, Three,Four,Six,Seven },
   props: {},
   data() {
     //这里存放数据
@@ -29,7 +31,7 @@ export default {
       data4:{},
       data5:{},
       data6:{},
-      data7:{}
+      data7:[]
     };
   },
   //监听属性 类似于data概念
@@ -62,7 +64,7 @@ export default {
         this.data6=v
         return
       }else if(v.menuId===2007) {
-        this.data7=v
+        this.data7=JSON.parse(v.contentJson);
         return
       }
     })

web/src/views/info/components/Son3.vue

@@ -0,0 +1,66 @@
+<!--  -->
+<template>
+  <div class="Son3">
+    <Eight tit="传统建筑" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <Six tit="村落风貌" :data="data2" @pageNext="$emit('pageNext', 2)" />
+    <Five tit="视频集" :data="data3" />
+  </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: {},
+  //生命周期 - 创建完成（可以访问当前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>

web/src/views/info/components/Son4.vue

@@ -0,0 +1,83 @@
+<!--  -->
+<template>
+  <div class="Son4">
+    <Four tit="节庆活动" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <Six tit="祭祀崇礼" :data="data2" @pageNext="$emit('pageNext', 2)" />
+    <Three tit="婚丧嫁娶" :data="data3" @pageNext="$emit('pageNext', 3)" />
+    <One tit="地方方言" :data="data4" @pageNext="$emit('pageNext', 4)" />
+    <Three tit="特色文化" :data="data5" @pageNext="$emit('pageNext', 5)" />
+    <Five tit="视频集" :data="data6" />
+  </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: {},
+  //生命周期 - 创建完成（可以访问当前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>

web/src/views/info/components/Son5.vue

@@ -0,0 +1,83 @@
+<!--  -->
+<template>
+  <div class="Son5">
+    <Four tit="特色物产" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <Six tit="商业集市" :data="data2" @pageNext="$emit('pageNext', 2)" />
+    <Three tit="生产工艺" :data="data3" @pageNext="$emit('pageNext', 3)" />
+    <One tit="生产工具" :data="data4" @pageNext="$emit('pageNext', 4)" />
+    <!-- <Three tit="特色文化" :data="data5" @pageNext="$emit('pageNext', 5)" />
+    <Five tit="视频集" :data="data6" /> -->
+  </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: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前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;
+      }
+    });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Son5 {
+  width: 100%;
+  height: 100%;
+}
+</style>

web/src/views/info/components/Son6.vue

@@ -0,0 +1,63 @@
+<!--  -->
+<template>
+  <div class="Son6">
+    <Four tit="入村路线" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <Six tit="村内导览" :data="data2" />
+  </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: {},
+  //生命周期 - 创建完成（可以访问当前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%;
+  /deep/.comBs{
+    display: none;
+  }
+}
+</style>

web/src/views/info/index.vue

@@ -47,6 +47,10 @@
       <div class="right">
         <Son1 @pageNext="pageNext" v-if="topDataInd === '1000'" />
         <Son2 @pageNext="pageNext" v-else-if="topDataInd === '2000'" />
+        <Son3 @pageNext="pageNext" v-else-if="topDataInd === '3000'" />
+        <Son4 @pageNext="pageNext" v-else-if="topDataInd === '4000'" />
+        <Son5 @pageNext="pageNext" v-else-if="topDataInd === '5000'" />
+        <Son6 @pageNext="pageNext" v-else-if="topDataInd === '6000'" />
       </div>
     </div>
   </div>
@@ -56,9 +60,13 @@
 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 },
+  components: { Son1, Son2, Son3, Son4, Son5, Son6 },
   data() {
     //这里存放数据
     return {
@@ -68,8 +76,8 @@ export default {
       // 一个内容的高度
       pageHeight: null,
       pageInd: 0,
-      downSrool: 0,
-      sroolFlag: true,
+      // 滚动开关
+      sroolFlag: false,
     };
   },
   //监听属性 类似于data概念
@@ -120,68 +128,69 @@ export default {
       let domH = document.querySelector(".conten .right");
       this.pageHeight = domH.clientHeight;
       // 获取滚动元素
-      // let sroolDom = document.querySelector(".info .conten");
-      // sroolDom.addEventListener(
-      //   "wheel",
-      //   (e) => {
-      //     let evt = e || sroolDom.event; //考虑兼容性
-      //     let dom = evt.target;
-      //     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("在元素中滚动");
-      //             this.sroolFlag = false;
-      //             return;
-      //           } else {
-      //             setTimeout(() => {
-      //               this.sroolFlag = true;
-      //             }, 100);
-      //             console.log("滚动到了顶部或者底部");
-      //           }
-      //         });
-      //       }
-      //     }
-      //     // evt.preventDefault();
-      //     if (this.sroolFlag) {
-      //       if (evt.deltaY > 0) {
-      //         //在火狐中 向下滚动是3 谷歌是125
-      //         this.downSrool++;
-      //         if (this.downSrool > 2) {
-      //           // 删除元素滚动事件
-      //           this.downSrool = 0;
-      //           if (this.pageInd === this.leftData.length - 1) return;
-      //           this.pageInd++;
-      //           // console.log("向下滚动");
-      //         }
-      //       } else {
-      //         this.downSrool--;
-      //         if (this.downSrool < -2) {
-      //           this.downSrool = 0;
-      //           if (this.pageInd === 0) return;
-      //           this.pageInd--;
+      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;
 
-      //           // console.log("向上滚动");
-      //         }
-      //         //在火狐中 向上滚动是-3 谷歌是-125
-      //       }
-      //     }
-      //     // //检查事件
-      //     // console.log(evt.type, evt.deltaX, evt.deltaY, evt.deltaZ);
-      //   },
-      //   {
-      //     passive: false,
-      //   }
-      // );
+          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() {}, //生命周期 - 创建之前
@@ -238,23 +247,7 @@ export default {
       }
     }
   }
-  .conten::-webkit-scrollbar {
-    /*滚动条整体样式*/
-    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-    height: 1px;
-  }
-  .conten::-webkit-scrollbar-thumb {
-    /*滚动条里面小方块*/
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 5px transparent;
-    background: #8a7351;
-  }
-  .conten::-webkit-scrollbar-track {
-    /*滚动条里面轨道*/
-    -webkit-box-shadow: inset 0 0 5px transparent;
-    border-radius: 10px;
-    background: transparent;
-  }
+
   .conten {
     width: 100%;
     height: 100%;