初步对接内容页面接口

houtai/src/views/tab1Main/index.vue

@@ -66,7 +66,7 @@ export default {
       data: [],
       info: {},
       towCom: '1002',
-      threeCom: '1006,3003,4006,5008',
+      threeCom: '1006,3003,4006,5009',
       fourCom: '2007',
       fiveCom: '3001'
     }

houtai/src/views/tab1Main/one.vue

@@ -120,10 +120,11 @@ export default {
         5001: '特色物产：',
         5002: '商业集市：',
         5003: '生产工艺：',
-        5004: '服装服饰：',
-        5005: '美味美食：',
-        5006: '运输工具：',
-        5007: '村规民约：',
+        5004: '生产工具：',
+        5005: '服装服饰：',
+        5006: '美味美食：',
+        5007: '运输工具：',
+        5008: '村规民约：',
         6001: '入村路线：',
         6002: '村内导览：'
       },

web/src/assets/css/base.css

@@ -67,6 +67,7 @@ ul li {
   background-color: rgba(0,0,0,.6);
   left: -17px;
   background-size: 20px 20px;
+  margin-top:-17px;
 }
 #app .swiper-button-next{
   left: auto;

web/src/components/eight.vue

@@ -174,6 +174,7 @@ export default {
   object-fit: cover;
 }
 .swiper-slide {
+  transition: all .3s;
   opacity: 0.5;
 }
 .swiper-slide-active {

web/src/components/four.vue

@@ -3,8 +3,40 @@
     <div class="comTit">{{ tit }}</div>
     <div class="comMani" :class="{ swShow: !conShowLoad }">
       <div class="conShow">
+        <!-- 如果需要使用前进后退按钮 -->
+        <div
+          class="swiper-button-prev swiper-button-white"
+          v-show="Numm > 1"
+        ></div>
+        <div
+          class="swiper-button-next swiper-button-white"
+          v-show="Numm > 1"
+        ></div>
+
         <div class="conShowfloo">
-          <div
+          <div class="swiper-container">
+            <div class="swiper-wrapper">
+              <div
+                class="swiper-slide"
+                v-for="item in data.images"
+                :key="item.id"
+              >
+                <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>
+                <video controls :src="baseURL + item.filePath"></video>
+              </div>
+            </div>
+            <!-- Add Pagination -->
+            <!-- <div class="swiper-pagination"></div> -->
+          </div>
+
+          <!-- <div
             class="icon el-icon-arrow-left"
             v-show="Numm > 1"
             @click="arrowClick(0)"
@@ -35,7 +67,7 @@
               <div class="videoName">{{ item.name }}</div>
               <video controls :src="baseURL + item.filePath"></video>
             </el-carousel-item>
-          </el-carousel>
+          </el-carousel> -->
         </div>
       </div>
       <div class="info sroolStop" v-html="data.content"></div>
@@ -49,6 +81,7 @@
 </template>
 
 <script>
+import Swiper from "./data/swiper.js";
 import axios from "@/utils/request";
 export default {
   name: "four",
@@ -67,7 +100,7 @@ export default {
     return {
       baseURL: "",
       Numm: 0,
-      conShowLoad:true
+      conShowLoad: true,
     };
   },
   //监听属性 类似于data概念
@@ -91,7 +124,6 @@ export default {
   mounted() {
     this.$nextTick(() => {
       setTimeout(() => {
-        this.conShowLoad = false;
         // 看看图片和视频加起来的数量
         let imgNum = 0;
         let videoNum = 0;
@@ -100,6 +132,25 @@ export default {
         if (this.data.videos && this.data.videos.length)
           videoNum = this.data.videos.length;
         this.Numm = imgNum + videoNum;
+        // 初始化sw
+        new Swiper(".four .swiper-container", {
+          slidesPerView: 3,
+          spaceBetween: 0,
+          centeredSlides: true,
+          initialSlide: 1,
+          // // 如果需要分页器
+          // pagination: {
+          //   el: ".swiper-pagination",
+          //   clickable: true, // 分页器可以点击
+          // },
+
+          // 如果需要前进后退按钮
+          navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+          },
+        });
+        this.conShowLoad = false;
       }, 1000);
     });
   },
@@ -113,6 +164,44 @@ export default {
 };
 </script>
 <style lang='less' scoped>
+@import "./data/swiper.css";
+.swiper-container {
+  width: 100%;
+  height: 250px;
+  overflow: visible !important;
+  .swiperVideo {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    .videoName {
+      position: absolute;
+      top: 1px;
+      left: 5px;
+      color: #fff;
+      font-size: 14px;
+    }
+    video {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.swiper-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.swiper-slide {
+  transition: all 0.3s;
+  opacity: 0.5;
+}
+.swiper-slide-active {
+  transform: scale(1.3);
+  opacity: 1;
+  z-index: 999;
+}
 .info::-webkit-scrollbar {
   /*滚动条整体样式*/
   width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
@@ -161,12 +250,16 @@ export default {
     width: 100%;
     height: calc(100% - 65px);
     .conShow {
+      position: relative;
       height: 330px;
       width: 100%;
       .conShowfloo {
+        padding-top: 40px;
         position: relative;
+        height: 100%;
         width: 100%;
-        height: 300px;
+        margin: 0px auto 0;
+        overflow: hidden;
         .icon {
           z-index: 9998;
           position: absolute;
@@ -191,8 +284,9 @@ export default {
       }
     }
     .info {
+      margin-top: 10px;
       width: 100%;
-      height: 280px;
+      height: 270px;
       color: #8a7351;
       font-size: 16px;
       line-height: 28px;

web/src/components/one.vue

@@ -122,13 +122,11 @@ export default {
 }
 
 .swiper-slide img {
-  cursor: pointer;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .swiper-slide video {
-  cursor: pointer;
   width: 100%;
   height: 100%;
 }

web/src/components/seven.vue

@@ -155,6 +155,7 @@ export default {
   object-fit: cover;
 }
 .swiper-slide {
+  transition: all .3s;
   opacity: 0.5;
 }
 .swiper-slide-active {

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

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="Son4">
-    <Four tit="节庆活动" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <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)" />

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

@@ -5,8 +5,11 @@
     <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" /> -->
+    <Four tit="服装服饰" :data="data5" @pageNext="$emit('pageNext', 5)" />
+    <Six tit="美味美食" :data='data6' @pageNext="$emit('pageNext',6)"/>
+    <Three tit="运输工具" :data="data7" @pageNext="$emit('pageNext', 7)" />
+    <Four tit="村规民约" :data="data8" @pageNext="$emit('pageNext', 8)" />
+    <Five tit="视频集" :data="data9" />
   </div>
 </template>
 
@@ -30,6 +33,9 @@ export default {
       data4: {},
       data5: {},
       data6: {},
+      data7: {},
+      data8: {},
+      data9: {},
     };
   },
   //监听属性 类似于data概念
@@ -61,6 +67,15 @@ export default {
       } 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;
       }
     });
   },

web/src/views/info/index.vue

@@ -128,69 +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 && 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;
+      // let sroolDom = document.querySelector(".info .conten");
+      // sroolDom.addEventListener(
+      //   "wheel",
+      //   (e) => {
+      //     let evt = e || sroolDom.event; //考虑兼容性
+      //     let dom = evt.target;
+      //     if (dom.className && dom.className.includes("detail")) return;
+      //     // if (dom.className.includes("sroolStop")) {
+      //     //   // 可能会有滚动条的元素
+      //     //   if (dom.scrollHeight > dom.clientHeight) {
+      //     //     // 确定有滚动条的元素
+      //     //     dom.addEventListener("scroll", () => {
+      //     //       const clientHeight = dom.clientHeight;
+      //     //       const scrollTop = dom.scrollTop;
+      //     //       const scrollHeight = dom.scrollHeight;
+      //     //       // console.log(clientHeight , scrollTop,scrollHeight);
+      //     //       if (
+      //     //         clientHeight + scrollTop < scrollHeight &&
+      //     //         scrollTop !== 0
+      //     //       ) {
+      //     //         console.log("在元素中滚动");
+      //     //         return;
+      //     //       } else {
+      //     //         setTimeout(() => {
+      //     //         }, 100);
+      //     //         console.log("滚动到了顶部或者底部");
+      //     //       }
+      //     //     });
+      //     //   }
+      //     // }
+      //     // evt.preventDefault();
+      //     if (this.sroolFlag) return;
+      //     this.sroolFlag = true;
 
-          if (evt.deltaY > 0) {
-            //在火狐中 向下滚动是3 谷歌是125
-            if (this.pageInd === this.leftData.length - 1) {
-              this.sroolFlag = false;
-              return;
-            }
-            this.pageInd++;
+      //     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("向下滚动");
+      //     } 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,
-        }
-      );
+      //       // console.log("向上滚动");
+      //       //在火狐中 向上滚动是-3 谷歌是-125
+      //     }
+      //     setTimeout(() => {
+      //       this.sroolFlag = false;
+      //     }, 500);
+      //     // //检查事件
+      //     // console.log(evt.type, evt.deltaX, evt.deltaY, evt.deltaZ);
+      //   },
+      //   {
+      //     passive: false,
+      //   }
+      // );
     });
   },
   beforeCreate() {}, //生命周期 - 创建之前