up

web/package-lock.json

@@ -8,8 +8,10 @@
       "name": "web",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.27.2",
         "core-js": "^3.6.5",
         "element-ui": "^2.15.8",
+        "swiper": "^4.5.1",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0"
       },
@@ -3087,8 +3089,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/atob": {
       "version": "2.1.2",
@@ -3135,6 +3136,28 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -4297,7 +4320,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5432,7 +5454,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -5546,6 +5567,19 @@
         "entities": "^2.0.0"
       }
     },
+    "node_modules/dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "dependencies": {
+        "ssr-window": "^2.0.0"
+      }
+    },
+    "node_modules/dom7/node_modules/ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "node_modules/domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -6524,7 +6558,6 @@
       "version": "1.15.1",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz",
       "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
-      "dev": true,
       "engines": {
         "node": ">=4.0"
       },
@@ -8634,7 +8667,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8643,7 +8675,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -11864,6 +11895,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -12255,6 +12291,19 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
+      "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz",
@@ -16710,8 +16759,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "atob": {
       "version": "2.1.2",
@@ -16746,6 +16794,27 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-helper-vue-jsx-merge-props": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@@ -17749,7 +17818,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -18676,8 +18744,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
     "depd": {
       "version": "2.0.0",
@@ -18780,6 +18847,21 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      },
+      "dependencies": {
+        "ssr-window": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+          "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+        }
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -19599,8 +19681,7 @@
     "follow-redirects": {
       "version": "1.15.1",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.1.tgz",
-      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
-      "dev": true
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -21298,14 +21379,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -24056,6 +24135,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -24392,6 +24476,15 @@
         }
       }
     },
+    "swiper": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
+      "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+      "requires": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/tapable/-/tapable-1.1.3.tgz",

web/package.json

@@ -7,8 +7,10 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.8",
+    "swiper": "^4.5.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"
   },

web/src/App.vue

@@ -9,7 +9,6 @@
   height: 100vh;
   min-width: 1800px;
   min-height: 900px;
-  overflow: hidden;
 }
 </style>
 

web/src/assets/css/base.css

@@ -4,7 +4,23 @@
   font-weight: normal;
   font-style: normal;
 }
-
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  background: #8a7351;
+}
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  border-radius: 10px;
+  background: transparent;
+}
 * {
   margin: 0;
   padding: 0;
@@ -26,23 +42,49 @@ ul li {
   margin-bottom: 30px;
 }
 
-::-webkit-scrollbar {
-  /*滚动条整体样式*/
+.comBs {
+  cursor: pointer;
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 20px;
+  height: 31px;
+  background: url('../../assets/img/slide.png');
+  background-size: 100% 100%;
+}
+
+/* ::-webkit-scrollbar {
   width: 1px;
-  /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
 }
 
 ::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px transparent;
   background: #8A7351;
 }
 
 ::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
   -webkit-box-shadow: inset 0 0 5px transparent;
   border-radius: 10px;
   background: transparent;
+} */
+.three .swiper-button-prev.swiper-button-disabled,
+.three .swiper-button-next.swiper-button-disabled {
+  cursor: pointer;
+  opacity: 1;
+  pointer-events: auto;
+}
+.three .swiper-button-prev, .three .swiper-button-next{
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background-color: rgba(0,0,0,.6);
+  left: -17px;
+  background-size: 20px 20px;
+}
+.three .swiper-button-next{
+  left: auto;
+  right: -17px;
 }

web/src/components/four.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="four">
+    <div class="comTit">{{ tit }}</div>
+    <div class="comMani">
+      <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'>
+            <el-carousel-item v-for="item in data.images" :key="item.id">
+              <img :src="baseURL + item.filePath" alt="" />
+            </el-carousel-item>
+            <el-carousel-item
+              class="videoBox"
+              v-for="item in data.videos"
+              :key="item.id"
+            >
+              <div class="videoName">{{item.name}}</div>
+              <video controls :src="baseURL + item.filePath"></video>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </div>
+      <div class="info" v-html="data.content"></div>
+    </div>
+    <div class="comBs"></div>
+  </div>
+</template>
+
+<script>
+import axios from "@/utils/request";
+export default {
+  name: "four",
+  props: {
+    tit: {
+      type: String,
+    },
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      baseURL: "",
+    };
+  },
+  //监听属性 类似于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() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.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 {
+    width: 100%;
+    height: calc(100% - 65px);
+    .conShow {
+      height: 330px;
+      width: 100%;
+      .conShowfloo {
+        position: relative;
+        width: 100%;
+        height: 300px;
+        .icon{
+          z-index: 9999;
+          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 {
+      width: 100%;
+      height: 300px;
+      color: #8a7351;
+      font-size: 16px;
+      line-height: 28px;
+      overflow-y: auto;
+    }
+  }
+}
+</style>

web/src/components/three.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="three">
+    <div class="comTit">{{ tit }}</div>
+    <div class="comMani">
+      <div class="info" v-html="data.content"></div>
+      <div class="conShow">
+        <div class="conShowTop">
+          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img'" />
+          <video controls :src="baseURL + bigSrc" v-else></video>
+        </div>
+        <div class="conShowfloo">
+          <!--基础存放容器-->
+
+          <div class="swiper-container">
+            <!-- 需要进行轮播的部分 -->
+            <div class="swiper-wrapper">
+              <!-- 每个节点 -->
+              <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
+                :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">{{ item.name }}</div>
+                <video :src="baseURL + item.filePath"></video>
+              </div>
+            </div>
+
+            <!-- 如果需要使用分页器 -->
+            <!-- <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>
+      </div>
+    </div>
+    <div class="comBs"></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: "img",
+    };
+  },
+  //监听属性 类似于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",
+          },
+        });
+        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;
+        }
+      }, 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%;
+}
+
+.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 {
+      padding: 30px 0;
+      padding-left: 20px;
+      height: calc(100% - 80px);
+      width: 40%;
+      flex: 1;
+      .conShowTop {
+        width: 100%;
+        height: 400px;
+        margin-bottom: 15px;
+        & > img {
+          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 {
+            position: absolute;
+            top: 1px;
+            left: 5px;
+            color: #fff;
+            font-size: 14px;
+          }
+        }
+        .active {
+          border: 3px solid #9f171c;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/components/tow.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="tow">
+    <div class="comTit">{{ tit }}</div>
+    <div class="comMain">
+      <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>{{item.name}}</div>
+          <p>{{item.txt}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="comBs"></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% - 130px);
+    .row {
+      color: #8a7351;
+      display: flex;
+      padding: 20px 20px 0px 0;
+      .rowLeft {
+        width: 60px;
+        display: flex;
+        align-items: center;
+        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>

web/src/utils/api.js

@@ -0,0 +1,38 @@
+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 getTreeMenuApi = () => {
+  return axios({
+    method: 'get',
+    url: '/web/getTreeMenu',
+  })
+} 
+
+// 获取内容列表
+export const getInfoApi = (villageId) => {
+  return axios({
+    method: 'get',
+    url: `/web/content/list/${villageId}`,
+  })
+}

web/src/utils/request.js

@@ -0,0 +1,38 @@
+import axios from 'axios'
+const service = axios.create({
+  baseURL: 'http://192.168.0.135:8016', // 本地调试
+  // baseURL: '', // 线上调试
+  // baseURL: '', // build
+  timeout: 5000
+})
+// 请求拦截器
+service.interceptors.request.use(function (config) {
+  // console.log('触发拦截器')
+  // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
+  const token = localStorage.getItem('JMYZU_token')
+  if (token) { // 判断是否有token,有，则
+    // config.headers['Authorization'] = token
+    config.headers.token = token
+  }
+
+  return config
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
+
+// 添加响应拦截器
+service.interceptors.response.use(function (response) {
+  // console.log('触发相应拦截器', response)
+  // 对响应数据做点什么--response就是发送每个请求的返回值
+  // if (response.data.code === 5001 || response.data.code === 5002) {
+  //   // Toast.fail('未登录，请先登录')
+  //   localStorage.removeItem('JMYZU_token')
+  // }
+  return response.data
+}, function (error) {
+  // 对响应错误做点什么
+  return Promise.reject(error)
+})
+
+export default service

web/src/views/Home.vue

@@ -91,9 +91,9 @@
             ></div>
             <div class="sonBox">
               <div
-                @click="$router.push(`/stair/${val.id}`)"
+                @click.stop="$router.push(`/stair/1`)"
                 :class="{ active: item.id === mapDataInd }"
-                v-for="val in item.son"
+                v-for="(val) in item.son"
                 :key="val.id"
               >
                 · {{ val.name }}
@@ -139,7 +139,7 @@ export default {
           id: 1000,
           name: "蓬江区",
           son: [
-            { id: 1001, name: "良溪村" },
+            { id: 1001, name: "东宁村" },
             { id: 1002, name: "卢边村" },
           ],
         },
@@ -184,6 +184,7 @@ export default {
       arr.push(v.num);
     });
     this.maxNum = arr.reduce((a, b) => (a > b ? a : b));
+    this.maxNum += 100;
     // 默认打开第一个区域筛选
     this.mapDataInd = this.mapData[0].id;
   },
@@ -278,7 +279,7 @@ export default {
     .top {
       & > p {
         text-align: center;
-        font-family: '思源宋体';
+        font-family: "思源宋体";
         font-size: 28px;
       }
     }

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

@@ -1,55 +1,81 @@
 <!--  -->
 <template>
-<div class='Son1'>
-  <One tit='建村历史'/>
-  <One tit='历史人物'/>
-  <One tit='历史人物1'/>
-  <One tit='历史人物2'/>
-  <One tit='历史人物3'/>
-  <One tit='历史人物4'/>
-</div>
+  <div class="Son1">
+    <One tit="建村历史" :data='data1' @pageNext="$emit('pageNext')"/>
+    <Tow tit="历史人物" :data='data2'/>
+    <Three tit="历史事件" :data='data3'/>
+    <Three tit="族谱家训" :data='data4'/>
+    <Four tit="口述史" :data='data5'/>
+  </div>
 </template>
 
 <script>
-import One from '@/components/one.vue'
+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";
 export default {
-name:'Son1',
-components: {One},
-data() {
-//这里存放数据
-return {
-
+  name: "Son1",
+  components: { One, Tow, Three,Four },
+  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===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缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
-.Son1{
+.Son1 {
   width: 100%;
   height: 100%;
 }
-
 </style>

web/src/views/info/index.vue

@@ -25,16 +25,15 @@
         <img src="../../assets/img/contCun/1001.png" alt="" />
         <div class="leftRow">
           <div
-            @click="cutScroll(item.id, index)"
             class="row"
-            :class="{ leAc: leftInd === item.id }"
+            :class="{ leAc: leftInd === index }"
             v-for="(item, index) in leftData"
             :key="item.id"
           >
             <img
               :src="
                 require(`@/assets/img/conBs${
-                  leftInd === item.id ? 'Ac' : ''
+                  leftInd === index ? 'Ac' : ''
                 }.png`)
               "
               alt=""
@@ -45,13 +44,14 @@
       </div>
       <!-- 主要切换内容 -->
       <div class="right">
-        <Son1 />
+        <Son1 @pageNext="pageNext" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getTreeMenuApi } from "@/utils/api";
 import Son1 from "./components/Son1.vue";
 export default {
   name: "info",
@@ -59,329 +59,95 @@ export default {
   data() {
     //这里存放数据
     return {
-      leftInd: "1001",
-      leftData: [
-        {
-          id: "1001",
-          parentId: "1000",
-          sort: 1001,
-          name: "建村历史",
-        },
-        {
-          id: "1002",
-          parentId: "1000",
-          sort: 1002,
-          name: "历史人物",
-        },
-        {
-          id: "1003",
-          parentId: "1000",
-          sort: 1003,
-          name: "历史事件",
-        },
-        {
-          id: "1004",
-          parentId: "1000",
-          sort: 1004,
-          name: "族谱家训",
-        },
-        {
-          id: "1005",
-          parentId: "1000",
-          sort: 1005,
-          name: "口述史",
-        },
-        {
-          id: "1006",
-          parentId: "1000",
-          sort: 1006,
-          name: "视频集",
-        },
-      ],
+      leftInd: 0,
+      leftData: [],
       topDataInd: "1000",
-      topData: [
-        {
-          id: "1000",
-          parentId: "0",
-          sort: 1000,
-          name: "历史文化",
-          children: [
-            {
-              id: "1001",
-              parentId: "1000",
-              sort: 1001,
-              name: "建村历史",
-            },
-            {
-              id: "1002",
-              parentId: "1000",
-              sort: 1002,
-              name: "历史人物",
-            },
-            {
-              id: "1003",
-              parentId: "1000",
-              sort: 1003,
-              name: "历史事件",
-            },
-            {
-              id: "1004",
-              parentId: "1000",
-              sort: 1004,
-              name: "族谱家训",
-            },
-            {
-              id: "1005",
-              parentId: "1000",
-              sort: 1005,
-              name: "口述史",
-            },
-            {
-              id: "1006",
-              parentId: "1000",
-              sort: 1006,
-              name: "视频集",
-            },
-          ],
-        },
-        {
-          id: "2000",
-          parentId: "0",
-          sort: 2000,
-          name: "环境格局",
-          children: [
-            {
-              id: "2001",
-              parentId: "2000",
-              sort: 2001,
-              name: "村落选址",
-            },
-            {
-              id: "2002",
-              parentId: "2000",
-              sort: 2002,
-              name: "村落格局",
-            },
-            {
-              id: "2003",
-              parentId: "2000",
-              sort: 2003,
-              name: "建村智慧",
-            },
-            {
-              id: "2004",
-              parentId: "2000",
-              sort: 2004,
-              name: "自然环境",
-            },
-            {
-              id: "2005",
-              parentId: "2000",
-              sort: 2005,
-              name: "风景名胜",
-            },
-            {
-              id: "2006",
-              parentId: "2000",
-              sort: 2006,
-              name: "文物古迹",
-            },
-            {
-              id: "2007",
-              parentId: "2000",
-              sort: 2007,
-              name: "历史环境要素",
-            },
-          ],
-        },
-        {
-          id: "3000",
-          parentId: "0",
-          sort: 3000,
-          name: "传统建筑",
-          children: [
-            {
-              id: "3001",
-              parentId: "3000",
-              sort: 3001,
-              name: "建筑信息",
-            },
-            {
-              id: "3002",
-              parentId: "3000",
-              sort: 3002,
-              name: "村落风貌",
-            },
-            {
-              id: "3003",
-              parentId: "3000",
-              sort: 3003,
-              name: "视频集",
-            },
-          ],
-        },
-        {
-          id: "4000",
-          parentId: "0",
-          sort: 4000,
-          name: "民俗文化",
-          children: [
-            {
-              id: "4001",
-              parentId: "4000",
-              sort: 4001,
-              name: "节日活动",
-            },
-            {
-              id: "4002",
-              parentId: "4000",
-              sort: 4002,
-              name: "祭祀崇礼",
-            },
-            {
-              id: "4003",
-              parentId: "4000",
-              sort: 4003,
-              name: "婚丧嫁娶",
-            },
-            {
-              id: "4004",
-              parentId: "4000",
-              sort: 4004,
-              name: "地方方言",
-            },
-            {
-              id: "4005",
-              parentId: "4000",
-              sort: 4005,
-              name: "特色文化",
-            },
-            {
-              id: "4006",
-              parentId: "4000",
-              sort: 4006,
-              name: "视频集",
-            },
-          ],
-        },
-        {
-          id: "5000",
-          parentId: "0",
-          sort: 5000,
-          name: "美食物产",
-          children: [
-            {
-              id: "5001",
-              parentId: "5000",
-              sort: 5001,
-              name: "特色物产",
-            },
-            {
-              id: "5002",
-              parentId: "5000",
-              sort: 5002,
-              name: "商业集市",
-            },
-            {
-              id: "5003",
-              parentId: "5000",
-              sort: 5003,
-              name: "生产工艺",
-            },
-            {
-              id: "5004",
-              parentId: "5000",
-              sort: 5004,
-              name: "服装服饰",
-            },
-            {
-              id: "5005",
-              parentId: "5000",
-              sort: 5005,
-              name: "美味美食",
-            },
-            {
-              id: "5006",
-              parentId: "5000",
-              sort: 5006,
-              name: "运输工具",
-            },
-            {
-              id: "5007",
-              parentId: "5000",
-              sort: 5007,
-              name: "村规民约",
-            },
-            {
-              id: "5008",
-              parentId: "5000",
-              sort: 5008,
-              name: "视频集",
-            },
-          ],
-        },
-        {
-          id: "6000",
-          parentId: "0",
-          sort: 6000,
-          name: "旅游导览",
-          children: [
-            {
-              id: "6001",
-              parentId: "6000",
-              sort: 6001,
-              name: "入村路线",
-            },
-            {
-              id: "6002",
-              parentId: "6000",
-              sort: 6002,
-              name: "村内导览",
-            },
-          ],
-        },
-      ],
+      topData: [],
       // 一个内容的高度
       pageHeight: null,
-      pageInd: 0,
+      oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
+      scrollTop: 0, // 记录当前的滚动距离
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
   watch: {
-    pageInd(val) {
-      let dom = document.querySelector(".conten");
-      dom.scrollTo({ top: this.pageHeight * val, behavior: "smooth" });
+    scrollTop(newValue, oldValue) {
+      setTimeout(() => {
+        if (newValue == window.scrollY) {
+          //延时执行后当newValue等于window.scrollY，代表滚动结束
+          // console.log("滚动结束");
+          this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
+        }
+      }, 20); //必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
+      if (this.oldScrollTop == oldValue) {
+        //每次滚动开始时oldScrollTop与oldValue相等
+        // console.log("滚动开始");
+      }
+    },
+
+    leftInd(val) {
+      window.scrollTo({ top: this.pageHeight * val, behavior: "smooth" });
     },
   },
   //方法集合
   methods: {
-    cutScroll(id, index) {
-      this.leftInd = id;
-      this.pageInd = index;
+    handleScroll() {
+      // 监听页面滚动事件
+      window.onscroll = () => {
+        this.scrollTop = window.scrollY;
+      };
+    },
+    pageNext() {
+      console.log(123);
+    },
+    cutScroll() {
+      if (this.leftInd === this.leftInd.length) return;
+      else {
+        this.leftInd++;
+        // 切换的时候暂时视频
+        this.$nextTick(() => {
+          setTimeout(() => {
+            let dom = document.querySelectorAll("video");
+            dom.forEach((v) => {
+              v.pause();
+            });
+          }, 100);
+        });
+      }
     },
     cutInfo(id, val) {
+      let dom = document.querySelector(".conten");
+      dom.scrollTo({ top: 0, behavior: "smooth" });
+      this.leftInd = 0;
       this.topDataInd = id;
       this.leftData = val;
-      this.leftInd = val[0].id;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  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;
+      let domH = document.querySelector(".info");
+      this.pageHeight = domH.clientHeight - 100;
     });
+    this.handleScroll();
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
+  beforeDestroy() {
+    window.onscroll = null;
+  }, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
@@ -391,9 +157,9 @@ export default {
   width: 100%;
   height: 100%;
   .top {
-    z-index: 10;
+    z-index: 9999;
     min-width: 1800px;
-    padding: 0 150px 0 120px;
+    padding: 0 0px 0 120px;
     color: #fff;
     position: fixed;
     top: 0;
@@ -412,7 +178,7 @@ export default {
       flex: 1;
       height: 100%;
       display: flex;
-      padding-left: 300px;
+      padding-left: 380px;
       .row {
         margin-right: 90px;
         cursor: pointer;
@@ -420,6 +186,9 @@ export default {
         height: 100px;
         line-height: 100px;
         font-size: 24px;
+        &:last-child {
+          margin-right: 0;
+        }
       }
       .active {
         pointer-events: none;
@@ -429,9 +198,7 @@ export default {
     }
   }
   .conten {
-    overflow: hidden;
     width: 100%;
-    height: 100%;
     padding: 100px 140px 0;
     background: url("../../assets/img/contenBG.png");
     .left {
@@ -440,7 +207,7 @@ export default {
       left: 140px;
       padding-top: 50px;
       width: 300px;
-      height: 100%;
+      height: calc(100% - 100px);
       & > img {
         width: 145px;
         height: 255px;
@@ -459,7 +226,6 @@ export default {
           font-family: "思源宋体";
           font-size: 24px;
           color: #d9c8a9;
-          cursor: pointer;
           & > img {
             position: absolute;
             top: 50%;
@@ -470,7 +236,6 @@ export default {
           }
         }
         .leAc {
-          pointer-events: none;
           color: #9f171c;
         }
       }

web/src/views/stair/index.vue

@@ -3,7 +3,7 @@
     <!-- 左上浏览量 -->
     <div class="upleft">
       <div class="el-icon-arrow-left" @click="$router.push('/')">返回</div>
-      <div class="eye">浏览量：1235</div>
+      <div class="eye">浏览量：{{ lookNum }}</div>
     </div>
     <!-- 右边村名 -->
     <div class="rightCM">
@@ -29,7 +29,7 @@
             require(`@/assets/img/${item.inco}${
               (btnDataInd === item.id && item.id !== 4) ||
               (item.id === 4) & isShowGood ||
-              (btnDataAc===item.id)
+              btnDataAc === item.id
                 ? '_active'
                 : ''
             }.png`)
@@ -56,24 +56,26 @@
       </div>
     </div>
     <!-- 简介组件 -->
-    <StairIntro v-if="btnDataAc===1" @close='btnDataAc=null'/>
+    <StairIntro v-if="btnDataAc === 1" @close="btnDataAc = null" />
     <!-- 打卡组件 -->
-    <StairCard v-if="btnDataAc===2" @close='btnDataAc=null'/>
+    <StairCard v-if="btnDataAc === 2" @close="btnDataAc = null" />
     <!-- 分享组件 -->
-    <StairShare v-if="btnDataAc===3" @close='btnDataAc=null'/>
+    <StairShare v-if="btnDataAc === 3" @close="btnDataAc = null" />
   </div>
 </template>
 
 <script>
-import StairIntro from './component/intro.vue'
-import StairCard from './component/card.vue'
-import StairShare from './component/share.vue'
+import { likeSaveApi, lookSaveApi, getCunNumApi } from "@/utils/api";
+import StairIntro from "./component/intro.vue";
+import StairCard from "./component/card.vue";
+import StairShare from "./component/share.vue";
 export default {
   name: "stair",
-  components: {StairIntro,StairCard,StairShare},
+  components: { StairIntro, StairCard, StairShare },
   data() {
     //这里存放数据
     return {
+      lookNum: 0,
       data: [
         { id: 1, name: "寅宇卢公祠" },
         { id: 2, name: "寅宇卢公祠" },
@@ -99,23 +101,37 @@ export default {
   watch: {},
   //方法集合
   methods: {
-    cutPage(id) {
+    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
+      } else if (id === 5) {
+        this.$router.push(
+          `/info/${this.$route.params.id}`
+        );
+      } else this.btnDataAc = id;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  async created() {
+    let id = Number(this.$route.params.id);
+    // 只有从首页进入的才保存浏览量
+    this.$router.beforeEach(async (to, from, next) => {
+      if (from.name === "Home") await lookSaveApi(id);
+      next();
+    });
+
+    let res = await getCunNumApi(id);
+    this.likeNum = res.data.star;
+    this.lookNum = res.data.visit;
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前