elink-star
/
yifeng_integration
16
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

header自适应，tab切换

master
mk 2 years ago
parent
3c4994bd13
commit
1fc5235b0a
1 changed files with 47 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 66
      src/views/next/screen-content-map/cpt/whyf.vue

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

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

Write Preview
Loading…
Cancel
Save