<template>
    <div>
        <!-- 头部 -->
        <page-header></page-header>
        <div class="background">
        </div>
        <div class="container">
            <div class="top">
                 <ul class="com">
                    <li @click="com='territory'"><div :data-index="0"  @click="setActive" :class="{'active':0 == navActive}">投资领域</div></li>
                    <li @click="com='group'"><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: "about",
        // 混入
        mixins: [share],
        data() {
            return {
                msg: "about",
                com:'territory',
                navActive:0,
            };
        },
        methods: {
                setActive: function (event) {
                    var target = event.target;
                    var index = Number(target.getAttribute("data-index"));
                    this.navActive = index;
                }
            },
    };

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

    .background {
        min-width: 1200px;
        width: 100%;
        height: 300px;
        background-size: 100% 100%;
        background-image: url('../assets/images/in01.jpg');
    }
      .container {
        width: 1200px;
         margin: 0 auto;
         padding: 0;
    }  
    .top .content{
        width: 1200px;
        margin: 0 auto;
    }
    .com {
        width: 480px;
        height: 60px;
        margin: 0 auto; 
        margin-top: -30px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        /* border: 1px solid red; */
        box-shadow: 0px 4px 5px #ddd;
    }

    .com li {
        font-size: 22px;
        width: 50%;
        text-align: center;
        line-height: 60px;
    }
    .active{
        background-color: #B5A14E;
        color: #fff;
    }
</style>