初步对完移动端接口

web/src/components/six.vue

@@ -54,7 +54,7 @@
       </div>
       <div class="info sroolStop" v-html="data.content"></div>
     </div>
-    <div class="comBs" @click="$emit('pageNext')"></div>
+    <div class="comBs" @click="$emit('pageNext')" v-if="tit!=='村内导览'"></div>
     <!-- 加载动画 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />

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

@@ -56,8 +56,5 @@ export default {
 .Son6 {
   width: 100%;
   height: 100%;
-  /deep/.comBs{
-    display: none;
-  }
 }
 </style>

webM/src/components/five.vue

@@ -9,12 +9,12 @@
       <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>
+          <p><span>编号：</span>{{ item.txt1 }}</p>
+          <p><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>
+          <p><span>名称：</span>{{ item.name }}</p>
+          <p><span>年代：</span>{{ item.txt3 }}</p>
         </div>
         <!-- 详情按钮 -->
         <div class="detailBtn" @click="lookDetail(item)"></div>
@@ -24,7 +24,7 @@
     <div class="detailBox" v-if="detailShow">
       <div class="detailMain">
         <!-- 标题 -->
-        <h3 class="detailTit">环境信息</h3>
+        <h3 class="detailTit">历史环境要素</h3>
         <!-- 文字信息 -->
         <div class="detailRow">
           <p>
@@ -266,6 +266,9 @@ export default {
             flex: 1;
             font-style: normal;
           }
+          &:last-child {
+            display: block;
+          }
         }
       }
       .detailImg {

webM/src/components/six.vue

@@ -0,0 +1,322 @@
+<template>
+  <div class="six">
+    <div class="comTit">
+      <img src="../assets/img/comBs1.png" alt="" />
+      <span>{{ tit }}</span>
+      <img src="../assets/img/comBs2.png" alt="" />
+    </div>
+    <div class="main" :class="{ opcBase: conShowLoad }">
+      <div class="mainSm" :style="`height:${domHei}px`"></div>
+      <div class="row" v-for="item in data" :key="item.id">
+        <img :src="baseURL + imgSrc(item)" alt="" />
+        <div class="txtBox">
+          <div class="txt">
+            <p><span>建筑名称：</span>{{ item.name }}</p>
+            <p><span>产权归属：</span>{{ item.txt1 }}</p>
+          </div>
+          <div class="txt">
+            <p><span>占地面积：</span>{{ item.txt2 }}</p>
+            <p><span>建筑面积：</span>{{ item.txt3 }}</p>
+          </div>
+          <div class="txt">
+            <p class="lastP"><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">
+        <!-- 标题 -->
+        <h3 class="detailTit">建筑信息</h3>
+        <!-- 文字信息 -->
+        <div class="detailRow">
+          <p>
+            <span>建筑名称：</span><i>{{ detailData.name }}</i>
+          </p>
+          <p>
+            <span>产权归属：</span><i>{{ detailData.txt1 }}</i>
+          </p>
+          <p>
+            <span>占地面积：</span><i>{{ detailData.txt2 }}</i>
+          </p>
+          <p>
+            <span>建筑面积：</span><i>{{ detailData.txt3 }}</i>
+          </p>
+          <p>
+            <span>保护级别：</span><i>{{ detailData.txt4 }}</i>
+          </p>
+          <p>
+            <span>建筑概况：</span><i>{{ detailData.txt5 }}</i>
+          </p>
+        </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>
+          </div>
+        </div>
+        <!-- 关闭按钮 -->
+        <div class="detailClose" @click="detailShow = false"></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 "@/assets/swiper/swiper.js";
+import axios from "@/utils/request";
+export default {
+  name: "six",
+  props: {
+    tit: {
+      type: String,
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      conShowLoad: true,
+      baseURL: "",
+      detailData: {},
+      detailShow: false,
+      domHei:0
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    detailShow(val) {
+      if (val) {
+        this.$nextTick(() => {
+          new Swiper(".six .swiper-container", {
+            slidesPerView: 1.2,
+            spaceBetween: 10,
+          });
+        });
+      }
+    },
+  },
+  //方法集合
+  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;
+        // 获取主容器滚动高度
+        let dom =document.querySelector('.main')
+        this.domHei=dom.scrollHeight
+      }, 1000);
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+@import "../assets/swiper/swiper.css";
+.six {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .main {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 130px);
+    overflow-y: auto;
+    padding: 0 18px;
+    .mainSm {
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      min-height: 100%;
+      z-index: 1;
+      background-image: linear-gradient(
+        rgba(255, 255, 255, 0.0),
+        rgba(255, 245, 228, .5)
+      );
+    }
+    .row {
+      display: flex;
+      position: relative;
+      width: 100%;
+      height: 95px;
+      margin-bottom: 15px;
+      padding-bottom: 15px;
+      border-bottom: 1px solid #bfb094;
+      & > img {
+        width: 90px;
+        height: 80px;
+        object-fit: cover;
+        margin-right: 10px;
+      }
+      .txtBox {
+        width: calc(100% - 100px);
+        height: 100%;
+      }
+      .txt {
+        font-size: 14px;
+        color: #8a7351;
+        display: flex;
+        p {
+          width: 50%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-bottom: 5px;
+          & > span {
+            font-weight: 700;
+            font-family: "SYST";
+          }
+        }
+        .lastP {
+          width: 80%;
+        }
+      }
+      .detailBtn {
+        position: absolute;
+        bottom: 10px;
+        right: 8px;
+        width: 30px;
+        height: 30px;
+        background: url("../assets/img/btnDe.png");
+        background-size: 100% 100%;
+      }
+    }
+  }
+  // 点击详情出来的弹窗
+  .detailBox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      backdrop-filter: blur(20px);
+      z-index: -2;
+    }
+    .detailMain {
+      color: #fff;
+      border-radius: 5px;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      left: 50%;
+      width: calc(100% - 24px);
+      height: calc(100% - 60px);
+      background-color: rgba(0, 0, 0, 0.8);
+      padding: 0 25px;
+
+      .detailClose {
+        position: absolute;
+        right: 16px;
+        top: -4px;
+        width: 35px;
+        height: 60px;
+        background: url("../assets/img/close.png");
+        background-size: 100% 100%;
+      }
+      .detailTit {
+        font-family: "SYST";
+        letter-spacing: 5px;
+        text-align: center;
+        font-size: 24px;
+        height: 60px;
+        line-height: 60px;
+      }
+      .detailRow {
+        height: calc(100% - 400px);
+        overflow-y: auto;
+        & > p {
+          margin: 5px 0;
+          display: flex;
+          span {
+            width: 80px;
+            font-family: "SYST";
+          }
+          i {
+            flex: 1;
+            font-style: normal;
+          }
+          &:last-child {
+            display: block;
+          }
+        }
+      }
+      .detailImg {
+        margin-top: 20px;
+        width: 100%;
+        height: 300px;
+        .swiper-container {
+          width: 100%;
+          height: 100%;
+          .swiper-slide {
+            width: 100%;
+            height: 100%;
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

webM/src/components/three.vue

@@ -30,7 +30,7 @@
       :class="{ opcBase: conShowLoad }"
     ></div>
     <!-- 切换下一页 -->
-    <div class="comBs" @click="$emit('pageNext')"></div>
+    <div class="comBs" v-if="tit!=='村内导览'" @click="$emit('pageNext')"></div>
     <!-- 数据加载中 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />

webM/src/views/info/component/son3.vue

@@ -1,14 +1,28 @@
+<!--  -->
 <template>
-  <div class="son3">son3</div>
+  <div class="Son3">
+    <Six tit="传统建筑" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <Three tit="村落风貌" :data="data2" @pageNext="$emit('pageNext', 2)" />
+    <Four tit="视频集" :data="data3" />
+  </div>
 </template>
 
 <script>
+import { getInfoApi } from "@/utils/api";
+import Four from "@/components/four.vue";
+import Six from "@/components/six.vue";
+import Three from "@/components/three.vue";
 export default {
-  name: "son3",
-  components: {},
+  name: "Son3",
+  components: { Four, Six, Three },
+  props: {},
   data() {
     //这里存放数据
-    return {};
+    return {
+      data1: [],
+      data2: {},
+      data3: {},
+    };
   },
   //监听属性 类似于data概念
   computed: {},
@@ -17,7 +31,22 @@ export default {
   //方法集合
   methods: {},
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  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() {}, //生命周期 - 创建之前
@@ -30,10 +59,8 @@ export default {
 };
 </script>
 <style lang='less' scoped>
-.son3{
+.Son3 {
   width: 100%;
   height: 100%;
-  background-color: blue;
-  opacity: .3;
 }
 </style>

webM/src/views/info/component/son4.vue

@@ -0,0 +1,83 @@
+<!--  -->
+<template>
+  <div class="son4">
+    <Three2 tit="节日活动" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <One tit="祭祀崇礼" :data="data2" @pageNext="$emit('pageNext', 2)" />
+    <Three tit="婚丧嫁娶" :data="data3" @pageNext="$emit('pageNext', 3)" />
+    <One tit="地方方言" :data="data4" @pageNext="$emit('pageNext', 4)" />
+    <One2 tit="特色文化" :data="data5" @pageNext="$emit('pageNext', 5)" />
+    <Four tit="视频集" :data="data6" />
+  </div>
+</template>
+
+<script>
+import { getInfoApi } from "@/utils/api";
+import One from "@/components/one.vue";
+import One2 from "@/components/one2.vue";
+import Three from "@/components/three.vue";
+import Three2 from "@/components/three2.vue";
+import Four from "@/components/four.vue";
+export default {
+  name: "son4",
+  components: { One, One2, Three, Three2, 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 === 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>

webM/src/views/info/component/son5.vue

@@ -0,0 +1,97 @@
+<!--  -->
+<template>
+  <div class="son5">
+    <One tit="特色物产" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <Three tit="商业集市" :data="data2" @pageNext="$emit('pageNext', 2)" />
+    <Three tit="生产工艺" :data="data3" @pageNext="$emit('pageNext', 3)" />
+    <Three tit="生产工具" :data="data4" @pageNext="$emit('pageNext', 4)" />
+    <One2 tit="服装服饰" :data="data5" @pageNext="$emit('pageNext', 5)" />
+    <Three tit="美味美食" :data="data6" @pageNext="$emit('pageNext', 6)" />
+    <One2 tit="运输工具" :data="data7" @pageNext="$emit('pageNext', 7)" />
+    <One tit="村规民约" :data="data8" @pageNext="$emit('pageNext', 8)" />
+    <Four tit="视频集" :data="data9" />
+  </div>
+</template>
+
+<script>
+import { getInfoApi } from "@/utils/api";
+import One from "@/components/one.vue";
+import One2 from "@/components/one2.vue";
+import Three from "@/components/three.vue";
+import Four from "@/components/four.vue";
+export default {
+  name: "son5",
+  components: { One, One2, Three,Four },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      data1: {},
+      data2: {},
+      data3: {},
+      data4: {},
+      data5: {},
+      data6: {},
+      data7: {},
+      data8: {},
+      data9: {},
+    };
+  },
+  //监听属性 类似于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;
+      } else if (v.menuId === 5007) {
+        this.data7 = v;
+        return;
+      } else if (v.menuId === 5008) {
+        this.data8 = v;
+        return;
+      } else if (v.menuId === 5009) {
+        this.data9 = v;
+        return;
+      }
+    });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.son5 {
+  width: 100%;
+  height: 100%;
+}
+</style>

webM/src/views/info/component/son6.vue

@@ -0,0 +1,59 @@
+<!--  -->
+<template>
+  <div class="son6">
+    <Three tit="入村路线" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <Three tit="村内导览" :data="data2" />
+  </div>
+</template>
+
+<script>
+import { getInfoApi } from "@/utils/api";
+import Three from "@/components/three.vue";
+export default {
+  name: "son6",
+  components: { Three },
+  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%;
+}
+</style>

webM/src/views/info/index.vue

@@ -48,6 +48,9 @@
       <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>
 </template>
@@ -56,10 +59,13 @@
 import Son1 from "./component/son1.vue";
 import Son2 from "./component/son2.vue";
 import Son3 from "./component/son3.vue";
+import Son4 from "./component/son4";
+import Son5 from "./component/son5";
+import Son6 from "./component/son6";
 import { getTreeMenuApi } from "@/utils/api";
 export default {
   name: "info",
-  components: { Son1, Son2, Son3 },
+  components: { Son1, Son2, Son3, Son4, Son5, Son6 },
   data() {
     //这里存放数据
     return {
@@ -74,7 +80,7 @@ export default {
       // 顶部数据
       leftData: [],
       // 页面盒子的高度
-      pageHei:0
+      pageHei: 0,
     };
   },
   //监听属性 类似于data概念
@@ -86,7 +92,7 @@ export default {
       let dom = document.querySelector(".rowBox");
       dom.scrollTo({ left: 82 * (val - 1), behavior: "smooth" });
       // 控制页面滑动
-      let pageDom = document.querySelector('.mainBox')
+      let pageDom = document.querySelector(".mainBox");
       pageDom.scrollTo({ top: this.pageHei * val, behavior: "smooth" });
       // 切换的时候暂时视频
       this.$nextTick(() => {
@@ -107,6 +113,10 @@ export default {
     },
     // 点击菜单栏里面切换模块
     cutInfo(id, val) {
+      if(this.topDataInd===id) {
+        this.meanShow = false;
+        return
+      }
       let dom = document.querySelector(".rowBox");
       dom.scrollTo({ top: 0 });
       this.topDataInd = id;
@@ -124,8 +134,8 @@ export default {
   }, //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     // 获取页面盒子的高度
-    let pageDom = document.querySelector('.mainBox')
-    this.pageHei=pageDom.offsetHeight
+    let pageDom = document.querySelector(".mainBox");
+    this.pageHei = pageDom.offsetHeight;
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -209,7 +219,6 @@ export default {
           border-bottom: 1px solid #bfb094;
         }
         .active {
-          pointer-events: none;
           color: #9f171c;
           border-left: 5px solid #9f171c;
         }