From 1fc5235b0a70d7c597a074f7379659b362111581 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Tue, 30 Jan 2024 18:38:51 +0800
Subject: [PATCH] =?UTF-8?q?header=E8=87=AA=E9=80=82=E5=BA=94=EF=BC=8Ctab?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../next/screen-content-map/cpt/whyf.vue      | 66 +++++++++++++------
 1 file changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/views/next/screen-content-map/cpt/whyf.vue b/src/views/next/screen-content-map/cpt/whyf.vue
index 84011bd..1411464 100644
--- a/src/views/next/screen-content-map/cpt/whyf.vue
+++ b/src/views/next/screen-content-map/cpt/whyf.vue
@@ -1,14 +1,15 @@
 <template>
     <div style="width: 100% ;height: 100%;">
         <div class='bg_img'>
+            <!--  -->
             <section>
                 <!-- <img src="@/assets/images/index/whyf/left.png" alt=""> -->
                 <div class="left"></div>
                 <div class="body">
-                    <div class="header"><span></span><span>大沽河传说</span><span></span></div>
+                    <div class="header"><span></span><span>{{ tabList[active].name }}</span><span></span></div>
                     <div class="content">
-                        <div class="synopsis" v-html="content"></div>
-                        <div class="imgs"> <img :src="item" alt="" v-for="item in imgList" :key="item"></div>
+                        <div class="synopsis" v-html="selfObj.content"></div>
+                        <div class="imgs"> <img :src="item" alt="" v-for="item in selfObj.imageList" :key="item"></div>
                     </div>
                 </div>
                 <div class="right"></div>
@@ -17,7 +18,8 @@
             <div class="tabs">
                 <img src="@/assets/images/index/whyf/tab-left.png" alt="">
                 <section>
-                    <div class="item" v-for="(item, index) in tabList" :key="index">
+                    <div :class="active == index ? 'active' : 'item'" v-for="(item, index) in tabList" :key="index"
+                        @click="handelTab(index)">
                         <img :src="item.src" alt="">
                         <div class="bot">{{ item.name }}</div>
                     </div>
@@ -35,7 +37,8 @@ export default {
             tabList: [
                 {
                     name: '大欧鸟笼制作技艺',
-                    src: require('@/assets/images/resource/whyf/1.jpg')
+                    src: require('@/assets/images/resource/whyf/1.jpg'),
+
                 },
                 {
                     name: '虎头鞋虎头帽',
@@ -47,7 +50,9 @@ export default {
                 },
                 {
                     name: '大沽河的传说',
-                    src: require('@/assets/images/resource/whyf/7.jpg')
+                    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: '陈仙姑传说',
@@ -66,16 +71,22 @@ export default {
                     src: require('@/assets/images/resource/whyf/6.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>`,
-            imgList: [require('@/assets/images/resource/whyf/7.jpg'), require('@/assets/images/resource/whyf/9.jpg'), require('@/assets/images/resource/whyf/10.jpg')]
+            active: 3,
+            selfObj: {}
         };
     },
     created() {
+        this.selfObj = { content: this.tabList[3].content, imageList: this.tabList[3].imageList }
     },
     mounted() {
 
     },
-    methods: {},
+    methods: {
+        handelTab(index) {
+            this.active = index
+            this.selfObj = { content: this.tabList[index].content, imageList: this.tabList[index].imageList }
+        }
+    },
     components: {},
     computed: {},
     watch: {},
@@ -107,6 +118,7 @@ export default {
             width: 174px;
             height: 650px;
             position: relative;
+            z-index: 10;
 
             &::after {
                 content: '';
@@ -126,7 +138,7 @@ export default {
 
             &::after {
                 left: 23%;
-                transform: translate(0, 15px) rotate(2deg);
+                transform: translate(0, 15px) rotate(177deg);
             }
         }
 
@@ -137,7 +149,7 @@ export default {
 
             &::after {
                 right: 23%;
-                transform: translate(0, 15px) rotate(177deg);
+                transform: translate(0, 15px) rotate(2deg);
             }
         }
 
@@ -146,6 +158,7 @@ export default {
             height: 630px;
             background: url('~@/assets/images/index/whyf/content_bg.png');
             background-size: 100% 100%;
+            overflow: hidden;
 
             .header {
                 height: 110px;
@@ -154,15 +167,17 @@ export default {
                 align-items: center;
 
                 :nth-child(1) {
+                    flex: 1;
                     height: 10px;
-                    width: 460px;
                     background: linear-gradient(to right, #1a5fc0, #9ac9ea);
+                    background-position: -24px 0;
+
                     position: relative;
 
                     &::after {
                         content: '';
                         position: absolute;
-                        right: -20px;
+                        right: 0;
                         top: 0;
                         width: 10px;
                         height: 10px;
@@ -171,23 +186,25 @@ export default {
                 }
 
                 :nth-child(2) {
-                    flex: 1;
+                    width: fit-content;
                     color: #F2F8FC;
                     font-size: 30px;
                     font-family: zaozigongfang;
                     text-align: center;
+                    margin: 0 20px;
                 }
 
                 :nth-child(3) {
                     height: 10px;
-                    width: 460px;
+                    flex: 1;
                     background: linear-gradient(to left, #1a5fc0, #9ac9ea);
                     position: relative;
+                    background-position: 24px 0;
 
                     &::after {
                         content: '';
                         position: absolute;
-                        left: -20px;
+                        left: 0;
                         top: 0;
                         width: 10px;
                         height: 10px;
@@ -204,11 +221,13 @@ export default {
                 box-sizing: border-box;
                 color: #fff;
                 line-height: 1.8;
-                .synopsis{
+
+                .synopsis {
                     flex: 1;
                     margin-right: 49px;
-                   
+
                 }
+
                 .imgs {
                     display: flex;
                     flex-direction: column;
@@ -262,9 +281,11 @@ export default {
             justify-content: center;
             margin: 0;
 
-            .item {
+            .item,
+            .active {
                 width: 190px;
                 height: 146px;
+                cursor: pointer;
                 display: flex;
                 flex-direction: column;
                 color: #BDCEEA;
@@ -281,6 +302,13 @@ export default {
                     margin-bottom: 6px;
                 }
             }
+
+            .active {
+                width: 260px;
+                height: 166px;
+                position: relative;
+                top: -10px;
+            }
         }
 
     }