|
|
|
@ -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> 2008年公布为第一批即墨市级非物质文化遗产名录。</p><p> 《大沾河的传说》，起始于春秋战国时期，距今已有二千余年历史。其流传区域.以即墨市移风店镇为中心，涉及到沿大洁河周边镇以及平度、胶州、莱西等区市。同时，有些故事在东北三省等地区也广为流传。</p><p> 移风店镇历史您久，文化底蕴丰厚，新石器时代的龙山文化遗址、春秋棠邑古城遗址及即墨县抗日民主政府旧址均位于该镇，是即墨柳腔的发源地之一。该镇民风淳朴，人民群众勤劳朴实，有传统的布艺加工、草编等民间手工技艺，并流传着许多美丽的传说，其主要故事有:“大沽河的传说"(两个版本)、“入洞房的传说"、“老人是宝”、“三湾崖的传说"、“三个日头”、“挂甲树”、“泰山石敢当二则”、“天地传说"“神医乔范”、“油匠口子”、“徐仙姑传说”、“好人好报”、“吕洞宾典故”、“虎头鞋与虎头帽的传说”、"李师傅的传说”、"张柄寺的传说"等。这些故事经当地百姓口口相传，深深地影响了一代又一代的大沽河人。</p><p> 《大沽河的传说》，具有浓厚的民间文化底蕴，脍炙人口的故事都充分体现了沽河沿岸人民的勒劳朴实、宽厚仁爱的传统道德观念和坚忍不拔的奋斗精神</p><p><br/></p>' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '陈仙姑传说', |
|
|
|
@ -66,16 +71,22 @@ export default { |
|
|
|
src: require('@/assets/images/resource/whyf/6.jpg') |
|
|
|
} |
|
|
|
], |
|
|
|
content: `<p> 2008年公布为第一批即墨市级非物质文化遗产名录。</p><p> 《大沾河的传说》，起始于春秋战国时期，距今已有二千余年历史。其流传区域.以即墨市移风店镇为中心，涉及到沿大洁河周边镇以及平度、胶州、莱西等区市。同时，有些故事在东北三省等地区也广为流传。</p><p> 移风店镇历史您久，文化底蕴丰厚，新石器时代的龙山文化遗址、春秋棠邑古城遗址及即墨县抗日民主政府旧址均位于该镇，是即墨柳腔的发源地之一。该镇民风淳朴，人民群众勤劳朴实，有传统的布艺加工、草编等民间手工技艺，并流传着许多美丽的传说，其主要故事有:“大沽河的传说"(两个版本)、“入洞房的传说"、“老人是宝”、“三湾崖的传说"、“三个日头”、“挂甲树”、“泰山石敢当二则”、“天地传说"“神医乔范”、“油匠口子”、“徐仙姑传说”、“好人好报”、“吕洞宾典故”、“虎头鞋与虎头帽的传说”、"李师傅的传说”、"张柄寺的传说"等。这些故事经当地百姓口口相传，深深地影响了一代又一代的大沽河人。</p><p> 《大沽河的传说》，具有浓厚的民间文化底蕴，脍炙人口的故事都充分体现了沽河沿岸人民的勒劳朴实、宽厚仁爱的传统道德观念和坚忍不拔的奋斗精神</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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
