<template>
    <div>
        <!-- 头部 -->
        <page-header></page-header>
        <div class="background">
        </div>
        <div class="container">
            <div>
                <ul class="com">
                    <li @click="com='ip'">
                        <div :data-index="0" @click="setActive" :class="{'active':0 == navActive}">联系我们</div>
                    </li>
                    <li @click="com='help'">
                        <div :data-index="1" @click="setActive" :class="{'active':1 == navActive}">业务合作</div>
                    </li>
                </ul>
            </div>
            <div class="content">
                <keep-alive>
                    <component :is="com"></component>
                </keep-alive>
            </div>
        </div>
        <page-footer></page-footer>
    </div>
</template>
<script>
    // 公用
    import share from "./share.js";
    export default {
        name: "contact",
        // 混入
        mixins: [share],
        data() {
            return {
                msg: "contact",
                navActive: '',
                com: 'ip',
            };
        },
        methods: {
            setActive: function (event) {
                var target = event.target;
                var index = Number(target.getAttribute("data-index"));
                this.navActive = index;
                var flag = 0;
                if (flag == index) {
                    $(".background").css({"background-image":"url(../../static/images/con01.jpg)","background-size":'100% 100%'});
                    flag = 1;
                } else {
                    $(".background").css({"background-image":"url(../../static/images/con02.jpg)","background-size":'100% 100%'}) ;
                    flag = 0;
                }
            }
        }
    };

</script>
<style scoped>
    * {
        box-sizing: content-box;
    }
    /*背景图  */

    .background {
        min-width: 1200px;
        height: 300px;
        background-size: 100% 300px;
        background-repeat: no-repeat;
         background-image: url('../../static/images/con01.jpg'); 
    }

    .container {
        width: 1200px;
        margin: 0 auto;
        padding: 0;
        margin-bottom: 16vw;
    }

    .ip {
        display: inline-block;
        width: 3.6vw;
        margin-top: 7vw;
        margin-bottom: 5vw;
        border-left: 1px solid #aaa;
        border-right: 1px solid #aaa;
        color: #aaa;
    }

    .content {
        widows: 1200px;;
        margin: 0 auto;
        text-align: center;
    }

    .com {
        width: 480px;
        height: 60px;
        margin: 0 auto;
        margin-top: -30px;
        background-color: #fff;
        display: flex;
        box-shadow: 0px 4px 5px #ddd;
    }

    .com li {
        width: 100%;
        text-align: center;
        line-height: 60px;
    }

    .active {
        background-color: #B5A14E;
        color: #FFF;
    }
</style>