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

<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>{{ tabList[active].name }}</span><span></span></div>
                    <div class="content">
                        <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>
                <!-- <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="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>
                </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'),
                    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: 3,
            selfObj: {}
        };
    },
    created() {
        this.selfObj = { content: this.tabList[3].content, imageList: this.tabList[3].imageList }
    },
    mounted() {

    },
    methods: {
        handelTab(index) {
            this.active = index
            this.selfObj = { content: this.tabList[index].content, imageList: this.tabList[index].imageList }
        }
    },
    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%;
    @include flex(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;
            z-index: 10;

            &::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(177deg);
            }
        }

        >.right {
            right: 20px;
            background: url('~@/assets/images/index/whyf/right.png');
            background-size: 100% 100%;

            &::after {
                right: 23%;
                transform: translate(0, 15px) rotate(2deg);
            }
        }

        .body {
            width: 1180px;
            height: 630px;
            background: url('~@/assets/images/index/whyf/content_bg.png');
            background-size: 100% 100%;
            overflow: hidden;

            .header {
                height: 110px;
                display: flex;
                justify-content: center;
                align-items: center;

                :nth-child(1) {
                    flex: 1;
                    height: 10px;
                    background: linear-gradient(to right, #1a5fc0, #9ac9ea);
                    background-position: -24px 0;

                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        right: 0;
                        top: 0;
                        width: 10px;
                        height: 10px;
                        background: #ffd4a2;
                    }
                }

                :nth-child(2) {
                    width: fit-content;
                    color: #F2F8FC;
                    font-size: 30px;
                    font-family: zaozigongfang;
                    text-align: center;
                    margin: 0 20px;
                }

                :nth-child(3) {
                    height: 10px;
                    flex: 1;
                    background: linear-gradient(to left, #1a5fc0, #9ac9ea);
                    position: relative;
                    background-position: 24px 0;

                    &::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        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 {
                    @include flex(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,
            .active {
                width: 190px;
                height: 146px;
                cursor: pointer;
                @include flex(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;
                }
            }

            .active {
                width: 260px;
                height: 166px;
                position: relative;
                top: -10px;
            }
        }

    }
}</style>