文化移风

src/views/next/index.vue

@@ -4,16 +4,16 @@
     height: height + 'px',
     transform: `scale(${scale}) translate(-50%, -50%)`,
   }">
-    <div class="left-border"></div>
-    <div class="right-border"></div>
+    <div :class="navId != 'whyf' ? 'left-border' : 'whyf-left'"></div>
+    <div :class="navId != 'whyf' ? 'right-border' : 'whyf-right'"></div>
     <div class="bot-border"></div>
     <div class="top-border"></div>
 
     <ScreenHeader />
-    <ScreenBottom v-if="navId != 'whyf'"/>
+    <ScreenBottom v-if="navId != 'whyf'" />
     <ScreenContent />
-    <ScreenContentLeft />
-    <ScreenContentRight />
+    <ScreenContentLeft v-if="navId != 'whyf'" />
+    <ScreenContentRight v-if="navId != 'whyf'" />
     <ZdyfLeftYfcj />
     <ZdyfRightGarden />
     <ZdyfRightTalents />
@@ -47,7 +47,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['scale','navId'])
+    ...mapGetters(['scale', 'navId'])
   },
   components: {
     ScreenHeader,
@@ -147,6 +147,28 @@ export default {
     z-index: 10;
   }
 
+  .whyf-left {
+    width: 516px;
+    height: 100%;
+    background: url("~@/assets/images/index/whyf/left-border.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    left: -1px;
+    top: 0;
+    z-index: 10;
+  }
+
+  .whyf-right {
+    width: 516px;
+    height: 100%;
+    background: url("~@/assets/images//index/whyf/right-border.png") no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    right: 0px;
+    top: 0;
+    z-index: 10;
+  }
+
   .bot-border {
     width: 100%;
     height: 130px;
@@ -169,5 +191,4 @@ export default {
     transform: scaleY(-1);
     z-index: 10;
   }
-}
-</style>
+}</style>

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

@@ -0,0 +1,287 @@
+<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="content">
+                        <div class="synopsis" v-html="content"></div>
+                        <div class="imgs"> <img :src="item" alt="" v-for="item in imgList" :key="item"></div>
+                    </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="item" v-for="(item, index) in tabList" :key="index">
+                        <img :src="item.src" alt="">
+                        <div class="bot">{{ item.name }}</div>
+                    </div>
+                </section>
+                <img src="@/assets/images/index/whyf/tab-right.png" alt="">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    data() {
+        return {
+            tabList: [
+                {
+                    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')
+                },
+                {
+                    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')
+                }
+            ],
+            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')]
+        };
+    },
+    created() {
+    },
+    mounted() {
+
+    },
+    methods: {},
+    components: {},
+    computed: {},
+    watch: {},
+}
+</script>
+
+<style lang="scss" scoped>
+.bg_img {
+    background: url('~@/assets/images/index/whyf/bg.jpg');
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    section {
+        width: 1488px;
+        height: 630px;
+        margin-top: 106px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+
+        >.left,
+        .right {
+            width: 174px;
+            height: 650px;
+            position: relative;
+
+            &::after {
+                content: '';
+                width: 36px;
+                height: 36px;
+                background: url('~@/assets/images/index/whyf/arrows.png');
+                background-size: 100% 100%;
+                position: absolute;
+                bottom: 50%;
+            }
+        }
+
+        .left {
+            left: 20px;
+            background: url('~@/assets/images/index/whyf/left.png');
+            background-size: 100% 100%;
+
+            &::after {
+                left: 23%;
+                transform: translate(0, 15px) rotate(2deg);
+            }
+        }
+
+        >.right {
+            right: 20px;
+            background: url('~@/assets/images/index/whyf/right.png');
+            background-size: 100% 100%;
+
+            &::after {
+                right: 23%;
+                transform: translate(0, 15px) rotate(177deg);
+            }
+        }
+
+        .body {
+            width: 1180px;
+            height: 630px;
+            background: url('~@/assets/images/index/whyf/content_bg.png');
+            background-size: 100% 100%;
+
+            .header {
+                height: 110px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                :nth-child(1) {
+                    height: 10px;
+                    width: 460px;
+                    background: linear-gradient(to right, #1a5fc0, #9ac9ea);
+                    position: relative;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        right: -20px;
+                        top: 0;
+                        width: 10px;
+                        height: 10px;
+                        background: #ffd4a2;
+                    }
+                }
+
+                :nth-child(2) {
+                    flex: 1;
+                    color: #F2F8FC;
+                    font-size: 30px;
+                    font-family: zaozigongfang;
+                    text-align: center;
+                }
+
+                :nth-child(3) {
+                    height: 10px;
+                    width: 460px;
+                    background: linear-gradient(to left, #1a5fc0, #9ac9ea);
+                    position: relative;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        left: -20px;
+                        top: 0;
+                        width: 10px;
+                        height: 10px;
+                        background: #ffd4a2;
+                    }
+
+                }
+            }
+
+            .content {
+                display: flex;
+                flex: 1;
+                padding: 0 80px;
+                box-sizing: border-box;
+                color: #fff;
+                line-height: 1.8;
+                .synopsis{
+                    flex: 1;
+                    margin-right: 49px;
+                   
+                }
+                .imgs {
+                    display: flex;
+                    flex-direction: column;
+                    width: 280px;
+                    height: 480px;
+
+                    img {
+                        width: 280px;
+                        height: 150px;
+                        margin-top: 10px;
+                    }
+                }
+            }
+
+            &::after {
+                content: '';
+                width: 20px;
+                height: 20px;
+                background: url('~@/assets/images/index/whyf/arrows.png');
+                background-size: 100% 100%;
+                position: absolute;
+                bottom: -15px;
+                left: 50%;
+                transform: rotate(268deg);
+            }
+        }
+
+    }
+
+    .tabs {
+        width: 100%;
+        height: 146px;
+        margin-top: 43px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 60px;
+        box-sizing: border-box;
+        z-index: 10;
+
+        >img {
+            width: 64px;
+            height: 64px;
+        }
+
+        >section {
+            flex: 1;
+            display: flex;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+            margin: 0;
+
+            .item {
+                width: 190px;
+                height: 146px;
+                display: flex;
+                flex-direction: column;
+                color: #BDCEEA;
+                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;
+                }
+            }
+        }
+
+    }
+}</style>

src/views/next/screen-content-map/index.vue

@@ -11,6 +11,8 @@ import hsyfIframe from './cpt/hsyf-iframe.vue'
 import szyfImg from './cpt/szyf-img.vue'
 import homeMap from './cpt/home-map.vue'
 import zdyfMap from './cpt/zdyf-map.vue'
+import whyf from './cpt/whyf.vue'
+
 export default {
   name: 'screen-content-map',
   data() {
@@ -28,10 +30,12 @@ export default {
         return homeMap
       } else if (this.navId === 'szyf') {
         return szyfImg
+      }  else if (this.navId === 'whyf') {
+        return whyf
       } 
     }
   },
-  components: { hsyfIframe, szyfImg, homeMap, zdyfMap },
+  components: { hsyfIframe, szyfImg, homeMap, zdyfMap,whyf },
   watch: {
     scale: {
       immediate: true,