<template>
    <div>
        <!-- 头部 -->
        <page-header></page-header>
        <div class="background">
             <p>ABOUT US</p>
            <!-- <img src="../assets/images/aus.png" alt=""> -->
        </div>
        <div class="container">
            <div class="top">

                <ul class="com">
                    <router-link to="/xmsig/about/intro" class="active" tag="li">公司简介</router-link>
                    <router-link to="/xmsig/about/company" tag="li">公司文化</router-link>
                    <router-link to="/xmsig/about/Memorabilia" tag="li">大事记</router-link>
                    <router-link to="/xmsig/about/manager" tag="li">总经理致辞</router-link>
                    <router-link to="/xmsig/about/team" tag="li">公司团队</router-link>
                </ul>
                    
            </div>
            <div class="content">
                <router-view></router-view>
            </div>

        </div>
        <page-footer></page-footer>
    </div>
</template>
<script>
    // 公用
    import share from "./share.js";
    import {mapGetters,mapActions } from 'vuex';
    export default {
        name: "about",
        // 混入
        mixins: [share],
        data() {
            return {
                msg: "about",
                com:'intro',
                navActive:0,
                component:''
            }
        },
        watch: {
            watch: {
          // 如果路由有变化，会再次执行该方法
        //   "$route": "fetchDate"
        }  
        },
        methods: {
            },
            computed: {...mapGetters(['gettersMsg'])},
            created () {

            }
            
        
    };

</script>
<style scoped>
    * {
        box-sizing: border-box;
    }
    /*背景图  */
    .router-link-active{
        /* background-color: red; */
        background-color: #B5A14E;
        color: #fff;
    }
    .background {
        min-width: 1200px;
        /* width: 100%; */
        height: 300px;
        background-size: 100% 100%;
        background-image: url('../assets/images/aus01.jpg');
    }

    .background p {
        /* width: 62.5vw; */
        color: rgba(236, 237, 223, 0.8);
        font-size: 120px;
        width: 620px;
        margin-left: 364px;
        padding-top: 102px;
        user-select:none;
    }
    .container {
        width: 1200px;
        margin: 0 auto;
    }

    .com {
        width: 1200px;
        height: 60px;
        margin-top: -30px;
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        font-size: 22px;
        box-shadow: 0px 4px 5px #ddd;
    }

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