文化移风调整

src/views/next/dialog-module/zdyf-center/qyjj/index.vue

@@ -81,7 +81,7 @@
                 </div>
               </div>
               <screen-nodata
-                v-if="!unitDetail.honor && unitDetail.honor.length == 0"
+                v-if="!unitDetail.honor || unitDetail.honor.length == 0"
               />
             </div>
 
@@ -112,7 +112,7 @@
                 </vue-seamless-scroll>
               </div>
               <screen-nodata
-                v-if="!unitDetail.display && unitDetail.display.length == 0"
+                v-if="!unitDetail.display || unitDetail.display.length == 0"
               />
             </div>
             <div class="imgBox">
@@ -133,7 +133,7 @@
                 </div>
               </div>
               <screen-nodata
-                v-if="!unitDetail.monitor && unitDetail.monitor.length == 0"
+                v-if="!unitDetail.monitor || unitDetail.monitor.length == 0"
               />
             </div>
           </div>
@@ -271,7 +271,7 @@ export default {
   @include flex();
   align-items: center;
   justify-content: center;
-  z-index: 999999999999999999999999;
+  z-index: 999;
 
   > section {
     @include flex(column);

src/views/next/index.vue

@@ -29,7 +29,7 @@
     <div :class="navId == 'hsyf' ? 'top-border-red' : 'top-border'"></div>
 
     <ScreenHeader :navId="navId" />
-    <ScreenBottom :navId="navId" v-if="navId != 'whyf'" />
+    <ScreenBottom :navId="navId" />
     <ScreenContent />
     <ScreenContentLeft v-if="navId != 'whyf'" />
     <ScreenContentRight v-if="navId != 'whyf'" />

src/views/next/layout/screen-bottom.vue

@@ -5,6 +5,7 @@
         :class="{ item: true, active: active === item.id }"
         v-for="(item, index) in navListRed"
         @click="handelCLickNav(item, index)"
+        :key="'item'+index"
       >
         <img
           :src="item.imgSrcActive"
@@ -20,11 +21,12 @@
         :class="{ item: true, active: active === item.id }"
         v-for="(item, index) in navList"
         @click="handelCLickNav(item, index)"
+        :key="'item'+index"
       >
         <img
           :src="item.imgSrcActive"
           alt=""
-          v-if="item.id == active && item.id != 'whyf'"
+          v-if="item.id == active"
         />
         <img :src="item.imgSrc" alt="" v-else />
         <span>{{ item.name }}</span>
@@ -89,7 +91,7 @@ export default {
         },
         {
           imgSrc: require('@/assets/images/home/whyf.png'),
-          // imgSrcActive:require('@/assets/images/home/whyf-active.png'),
+          imgSrcActive: require('@/assets/images/home/whyf-active.png'),
           name: '文化移风',
           id: 'whyf'
         }
@@ -121,7 +123,7 @@ export default {
         },
         {
           imgSrc: require('@/assets/images/home/whyf-red.png'),
-          // imgSrcActive:require('@/assets/images/home/whyf-active.png'),
+          imgSrcActive: require('@/assets/images/home/whyf-active.png'),
           name: '文化移风',
           id: 'whyf'
         }

src/views/next/screen-content-left/zdyf-left/index.vue

@@ -649,6 +649,7 @@ export default {
       }
     }
     .item:nth-child(4) {
+      width: 38%;
       .item-image {
         background: url("~@/assets/images/index/yfys4.png") no-repeat;
         background-position-y: 0px;

src/views/next/screen-content-map/cpt/whyf.vue

@@ -1,13 +1,46 @@
 <template>
   <div style="width: 100%; height: 100%">
     <div class="bg_img">
-      <!--  -->
+      <div class="tabs-left">
+        <div class="tabs">
+          <div>
+            <img @click="onLast" src="@/assets/images/index/whyf/tab-top.png" alt="" />
+          </div>
           <section>
-        <!-- <img src="@/assets/images/index/whyf/left.png" alt=""> -->
+            <el-carousel ref="paomadeng" direction="vertical" :autoplay="false" height="740px">
+              <el-carousel-item
+                v-for="(item, index) in tabList"
+                :key="'item' + index"
+              >
+                <div class="card-item-whyf">
+                  <div
+                    :class="
+                      active[0] == index && active[1] == index1
+                        ? 'active'
+                        : 'item'
+                    "
+                    v-for="(item1, index1) in item"
+                    :key="index1"
+                    @click="handelTab(index, index1)"
+                  >
+                    <img :src="item1.cover" alt="" />
+                    <div class="bot">{{ item1.name }}</div>
+                  </div>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
+          </section>
+          <div>
+            <img @click="onNext" src="@/assets/images/index/whyf/tab-bottom.png" alt="" />
+          </div>
+        </div>
+      </div>
+      <div>
+        <section style="display: flex; left: 120px">
           <div class="left"></div>
           <div class="body">
             <div class="header">
-            <span></span><span>{{ tabList[active].name }}</span
+              <span></span><span>{{ tabList[active[0]][active[1]].name }}</span
               ><span></span>
             </div>
             <div class="content">
@@ -23,22 +56,7 @@
             </div>
           </div>
           <div class="right"></div>
-        <!-- <img src="@/assets/images/index/whyf/right.png" alt=""> -->
         </section>
-      <div class="tabs">
-        <img src="@/assets/images/index/whyf/tab-left.png" alt="" />
-        <section>
-          <div
-            :class="active == index ? 'active' : 'item'"
-            v-for="(item, index) in tabList"
-            :key="index"
-            @click="handelTab(index)"
-          >
-            <img :src="item.cover" alt="" />
-            <div class="bot">{{ item.name }}</div>
-          </div>
-        </section>
-        <img src="@/assets/images/index/whyf/tab-right.png" alt="" />
       </div>
     </div>
   </div>
@@ -48,68 +66,53 @@ import { cultureLegacyList } from '@/api/home'
 export default {
   data () {
     return {
-      tabList: [
+      tabList: [[]],
-        {
+      active: [0, 0],
-          name: '大欧鸟笼制作技艺',
-          src: require('@/assets/images/resource/whyf/1.jpg')
-        },
-        {
-          name: '虎头鞋虎头帽',
-          src: require('@/assets/images/resource/whyf/2.jpg')
-        },
-        {
-          name: '毛子埠升制作技艺',
-          src: require('@/assets/images/resource/whyf/5.jpg')
-        },
-        {
-          name: '大沽河的传说',
-          src: require('@/assets/images/resource/whyf/7.jpg'),
-          imageList: [
-            require('@/assets/images/resource/whyf/7.jpg'),
-            require('@/assets/images/resource/whyf/9.jpg'),
-            require('@/assets/images/resource/whyf/10.jpg')
-          ],
-          content:
-            '<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2008年公布为第一批即墨市级非物质文化遗产名录。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《大沾河的传说》，起始于春秋战国时期，距今已有二千余年历史。其流传区域.以即墨市移风店镇为中心，涉及到沿大洁河周边镇以及平度、胶州、莱西等区市。同时，有些故事在东北三省等地区也广为流传。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移风店镇历史您久，文化底蕴丰厚，新石器时代的龙山文化遗址、春秋棠邑古城遗址及即墨县抗日民主政府旧址均位于该镇，是即墨柳腔的发源地之一。该镇民风淳朴，人民群众勤劳朴实，有传统的布艺加工、草编等民间手工技艺，并流传着许多美丽的传说，其主要故事有:“大沽河的传说&quot;(两个版本)、“入洞房的传说&quot;、“老人是宝”、“三湾崖的传说&quot;、“三个日头”、“挂甲树”、“泰山石敢当二则”、“天地传说&quot;“神医乔范”、“油匠口子”、“徐仙姑传说”、“好人好报”、“吕洞宾典故”、“虎头鞋与虎头帽的传说”、&quot;李师傅的传说”、&quot;张柄寺的传说&quot;等。这些故事经当地百姓口口相传，深深地影响了一代又一代的大沽河人。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《大沽河的传说》，具有浓厚的民间文化底蕴，脍炙人口的故事都充分体现了沽河沿岸人民的勒劳朴实、宽厚仁爱的传统道德观念和坚忍不拔的奋斗精神</p><p><br/></p>'
-        },
-        {
-          name: '陈仙姑传说',
-          src: require('@/assets/images/resource/whyf/8.jpg')
-        },
-        {
-          name: '金吉友拳法',
-          src: require('@/assets/images/resource/whyf/3.jpg')
-        },
-        {
-          name: '张院簸箕制作技艺',
-          src: require('@/assets/images/resource/whyf/4.jpg')
-        },
-        {
-          name: '上泊金银器打造工艺',
-          src: require('@/assets/images/resource/whyf/6.jpg')
-        }
-      ],
-      active: 7,
       selfObj: {}
     }
   },
   created () {
+    // cultureLegacyList().then((res) => {
+    //   this.tabList = res.data.list
+    //   this.selfObj = {
+    //     content: this.tabList[7].content,
+    //     imageList: this.tabList[7].imageList
+    //   }
+    // })
     cultureLegacyList().then((res) => {
-      this.tabList = res.data.list
+      let num = 0
+      let index = 0
+      res.data.list.forEach((item) => {
+        if (num < 5) {
+          num = num + 1
+        } else {
+          num = 1
+          index = index + 1
+          this.tabList.push([])
+        }
+        this.tabList[index][num - 1] = item
+      })
+      console.log('tabList:', this.tabList)
       this.selfObj = {
-        content: this.tabList[7].content,
+        content: this.tabList[0][0].content,
-        imageList: this.tabList[7].imageList
+        imageList: this.tabList[0][0].imageList || []
       }
     })
   },
   mounted () {},
   methods: {
-    handelTab (index) {
+    handelTab (index, index1) {
-      this.active = index
+      this.active = [index, index1]
       this.selfObj = {
-        content: this.tabList[index].content,
+        content: this.tabList[index][index1].content,
-        imageList: this.tabList[index].imageList
+        imageList: this.tabList[index][index1].imageList
       }
+    },
+    onLast () {
+      this.$refs.paomadeng.prev()
+    },
+    onNext () {
+      this.$refs.paomadeng.next()
     }
   },
   components: {},
@@ -132,9 +135,8 @@ export default {
   section {
     width: 1488px;
     height: 630px;
-    margin-top: 106px;
+    // margin-top: 106px;
     position: relative;
-    display: flex;
     justify-content: center;
 
     > .left,
@@ -275,58 +277,73 @@ export default {
     }
   }
 
+  .tabs-left {
+    position: absolute;
+    top: 50px;
+    left: 0;
+    z-index: 20;
     .tabs {
-    width: 100%;
+      width: 192px;
-    height: 146px;
+      height: 100%;
-    margin-top: 43px;
+      // margin-top: 43px;
-    display: flex;
+      // display: flex;
-    justify-content: space-between;
+      // justify-content: space-between;
       align-items: center;
-    padding: 0 60px;
+      padding: 0 25px;
-    box-sizing: border-box;
+      // box-sizing: border-box;
-    z-index: 10;
+      z-index: 20;
 
+      > div {
+        width: 192px;
+        height: 64px;
+        padding-left: 66px;
         > img {
           width: 64px;
           height: 64px;
         }
+      }
 
       > section {
-      flex: 1;
+        // flex: 1;
-      display: flex;
+        // display: flex;
-      height: 100%;
+        height: 740px;
-      align-items: center;
+        width: 262px;
-      justify-content: center;
+        // align-items: center;
-      margin: 0;
+        // justify-content: center;
+        // margin: 0;
 
         .item,
         .active {
-        width: 190px;
+          width: 220px;
-        height: 146px;
+          height: 136px;
           cursor: pointer;
           @include flex(column);
           color: #bdceea;
           align-items: center;
           background: rgba(9, 41, 106, 0.66);
-        margin-right: 8px;
+          margin-bottom: 8px;
           padding: 8px 10px;
           box-sizing: border-box;
           border: 1px solid #9fccff;
 
           img {
-          min-width: 173px;
+            min-width: 204px;
-          min-height: 106px;
+            min-height: 100px;
-          margin-bottom: 6px;
+            // margin-bottom: 6px;
           }
         }
 
         .active {
           width: 260px;
-        height: 166px;
+          height: 160px;
-        position: relative;
+          // position: relative;
-        top: -10px;
+          // top: -10px;
+        }
       }
     }
   }
 }
+::v-deep .el-carousel__indicators{
+  display: none;
+}
 </style>

src/views/next/screen-content-right/zdyf-right/index.vue

@@ -608,104 +608,104 @@ export default {
 
 /* 假设我们有8个图标均匀分布在圆周上 */
 .tunnel-icon:nth-child(1) {
-  animation-duration: 5s;
+  animation-duration: 3s;
   animation-delay: -6s;
 }
 
 .tunnel-icon:nth-child(2) {
-  animation-duration: 6s;
+  animation-duration: 4.3s;
   animation-delay: -1s;
 }
 
 /* ...以此类推，直至最后一个图标 */
 .tunnel-icon:nth-child(3) {
-  animation-duration: 7s;
+  animation-duration: 5s;
   animation-delay: -5s;
 }
 
 .tunnel-icon:nth-child(4) {
-  animation-duration: 5s;
+  animation-duration: 3s;
   animation-delay: -2s;
 }
 
 .tunnel-icon:nth-child(5) {
-  animation-duration: 6s;
+  animation-duration: 4.3s;
   animation-delay: -3s;
 }
 
 .tunnel-icon:nth-child(6) {
-  animation-duration: 7s;
+  animation-duration: 4.6s;
   animation-delay: -6s;
 }
 
 .tunnel-icon:nth-child(7) {
-  animation-duration: 5s;
+  animation-duration: 2.8s;
   animation-delay: -1s;
 }
 .tunnel-icon:nth-child(8) {
-  animation-duration: 6s;
+  animation-duration: 4.5s;
   animation-delay: -3s;
 }
 
 .tunnel-icon:nth-child(9) {
-  animation-duration: 7s;
+  animation-duration: 5s;
   animation-delay: -6s;
 }
 
 .tunnel-icon:nth-child(10) {
-  animation-duration: 5s;
+  animation-duration: 4.5s;
   animation-delay: -1s;
 }
 
 /* 假设我们有8个图标均匀分布在圆周上 */
 .tunnel-icon1:nth-child(1) {
-  animation-duration: 5s;
+  animation-duration: 3s;
   animation-delay: -5s;
 }
 
 .tunnel-icon1:nth-child(2) {
-  animation-duration: 7s;
+  animation-duration: 4.7s;
   animation-delay: -4s;
 }
 
 /* ...以此类推，直至最后一个图标 */
 .tunnel-icon1:nth-child(3) {
-  animation-duration: 6s;
+  animation-duration: 4.6s;
   animation-delay: -2s;
 }
 
 .tunnel-icon1:nth-child(4) {
-  animation-duration: 5s;
+  animation-duration: 3.4s;
   animation-delay: -7s;
 }
 
 .tunnel-icon1:nth-child(5) {
-  animation-duration: 7s;
+  animation-duration: 4.4s;
   animation-delay: -4s;
 }
 
 .tunnel-icon1:nth-child(6) {
-  animation-duration: 6s;
+  animation-duration: 3.8s;
   animation-delay: -5s;
 }
 
 .tunnel-icon1:nth-child(7) {
-  animation-duration: 5s;
+  animation-duration: 2.5s;
   animation-delay: -2s;
 }
 
 .tunnel-icon1:nth-child(8) {
-  animation-duration: 7s;
+  animation-duration: 3.7s;
   animation-delay: -4s;
 }
 
 .tunnel-icon1:nth-child(9) {
-  animation-duration: 6s;
+  animation-duration: 4.3s;
   animation-delay: -5s;
 }
 
 .tunnel-icon1:nth-child(10) {
-  animation-duration: 5s;
+  animation-duration: 3.5s;
   animation-delay: -2s;
 }