Browse Source

文化移风调整

master
juwei001 1 year ago
parent
commit
460e724dc3
  1. BIN
      src/assets/images/home/whyf-active.png
  2. BIN
      src/assets/images/home/whyf-active/文化@2x.png
  3. BIN
      src/assets/images/index/bannerX.png
  4. BIN
      src/assets/images/index/ldgh.png
  5. BIN
      src/assets/images/index/whyf/tab-bottom.png
  6. BIN
      src/assets/images/index/whyf/tab-top.png
  7. 8
      src/views/next/dialog-module/zdyf-center/qyjj/index.vue
  8. 2
      src/views/next/index.vue
  9. 8
      src/views/next/layout/screen-bottom.vue
  10. 1
      src/views/next/screen-content-left/zdyf-left/index.vue
  11. 273
      src/views/next/screen-content-map/cpt/whyf.vue
  12. 40
      src/views/next/screen-content-right/zdyf-right/index.vue

BIN
src/assets/images/home/whyf-active.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
src/assets/images/home/whyf-active/文化@2x.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/images/index/bannerX.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/assets/images/index/ldgh.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 472 KiB

After

Width:  |  Height:  |  Size: 476 KiB

BIN
src/assets/images/index/whyf/tab-bottom.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/images/index/whyf/tab-top.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

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

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

2
src/views/next/index.vue

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

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

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

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

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

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

@ -1,44 +1,62 @@
<template> <template>
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: 100%">
<div class="bg_img"> <div class="bg_img">
<!-- --> <div class="tabs-left">
<section> <div class="tabs">
<!-- <img src="@/assets/images/index/whyf/left.png" alt=""> --> <div>
<div class="left"></div> <img @click="onLast" src="@/assets/images/index/whyf/tab-top.png" alt="" />
<div class="body">
<div class="header">
<span></span><span>{{ tabList[active].name }}</span
><span></span>
</div> </div>
<div class="content"> <section>
<div class="synopsis" v-html="selfObj.content"></div> <el-carousel ref="paomadeng" direction="vertical" :autoplay="false" height="740px">
<div class="imgs"> <el-carousel-item
<img v-for="(item, index) in tabList"
:src="item" :key="'item' + index"
alt="" >
v-for="item in selfObj.imageList" <div class="card-item-whyf">
:key="item" <div
/> :class="
</div> 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>
<div class="right"></div> </div>
<!-- <img src="@/assets/images/index/whyf/right.png" alt=""> --> <div>
</section> <section style="display: flex; left: 120px">
<div class="tabs"> <div class="left"></div>
<img src="@/assets/images/index/whyf/tab-left.png" alt="" /> <div class="body">
<section> <div class="header">
<div <span></span><span>{{ tabList[active[0]][active[1]].name }}</span
:class="active == index ? 'active' : 'item'" ><span></span>
v-for="(item, index) in tabList" </div>
:key="index" <div class="content">
@click="handelTab(index)" <div class="synopsis" v-html="selfObj.content"></div>
> <div class="imgs">
<img :src="item.cover" alt="" /> <img
<div class="bot">{{ item.name }}</div> :src="item"
alt=""
v-for="item in selfObj.imageList"
:key="item"
/>
</div>
</div>
</div> </div>
<div class="right"></div>
</section> </section>
<img src="@/assets/images/index/whyf/tab-right.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -48,68 +66,53 @@ import { cultureLegacyList } from '@/api/home'
export default { export default {
data () { data () {
return { 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: {} selfObj: {}
} }
}, },
created () { created () {
// cultureLegacyList().then((res) => {
// this.tabList = res.data.list
// this.selfObj = {
// content: this.tabList[7].content,
// imageList: this.tabList[7].imageList
// }
// })
cultureLegacyList().then((res) => { 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 = { 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 () {}, mounted () {},
methods: { methods: {
handelTab (index) { handelTab (index, index1) {
this.active = index this.active = [index, index1]
this.selfObj = { 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: {}, components: {},
@ -132,9 +135,8 @@ export default {
section { section {
width: 1488px; width: 1488px;
height: 630px; height: 630px;
margin-top: 106px; // margin-top: 106px;
position: relative; position: relative;
display: flex;
justify-content: center; justify-content: center;
> .left, > .left,
@ -275,58 +277,73 @@ export default {
} }
} }
.tabs { .tabs-left {
width: 100%; position: absolute;
height: 146px; top: 50px;
margin-top: 43px; left: 0;
display: flex; z-index: 20;
justify-content: space-between; .tabs {
align-items: center; width: 192px;
padding: 0 60px;
box-sizing: border-box;
z-index: 10;
> img {
width: 64px;
height: 64px;
}
> section {
flex: 1;
display: flex;
height: 100%; height: 100%;
// margin-top: 43px;
// display: flex;
// justify-content: space-between;
align-items: center; align-items: center;
justify-content: center; padding: 0 25px;
margin: 0; // box-sizing: border-box;
z-index: 20;
.item, > div {
.active { width: 192px;
width: 190px; height: 64px;
height: 146px; padding-left: 66px;
cursor: pointer; > img {
@include flex(column); width: 64px;
color: #bdceea; height: 64px;
align-items: center;
background: rgba(9, 41, 106, 0.66);
margin-right: 8px;
padding: 8px 10px;
box-sizing: border-box;
border: 1px solid #9fccff;
img {
min-width: 173px;
min-height: 106px;
margin-bottom: 6px;
} }
} }
.active { > section {
width: 260px; // flex: 1;
height: 166px; // display: flex;
position: relative; height: 740px;
top: -10px; width: 262px;
// align-items: center;
// justify-content: center;
// margin: 0;
.item,
.active {
width: 220px;
height: 136px;
cursor: pointer;
@include flex(column);
color: #bdceea;
align-items: center;
background: rgba(9, 41, 106, 0.66);
margin-bottom: 8px;
padding: 8px 10px;
box-sizing: border-box;
border: 1px solid #9fccff;
img {
min-width: 204px;
min-height: 100px;
// margin-bottom: 6px;
}
}
.active {
width: 260px;
height: 160px;
// position: relative;
// top: -10px;
}
} }
} }
} }
} }
::v-deep .el-carousel__indicators{
display: none;
}
</style> </style>

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

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

Loading…
Cancel
Save