提交内容

whychdw

2020-04-13 ac5a11036e1c4c6d080b1d6168d56f70b1571090

 src/components/PageNav.vue

@@ -2,29 +2,11 @@
    <div class="page-nav">
        <div class="page-nav-list">
            <ul>
                <li class="active-nav">
                    <a href="javascript:;">首页</a>
                </li>
                <li>
                    <a href="javascript:;">动环监控中心</a>
                </li>
                <li>
                    <a href="javascript:;">动力设备监控</a>
                </li>
                <li>
                    <a href="javascript:;">环境设备监控</a>
                </li>
                <li>
                    <a href="javascript:;">安防设备监控</a>
                </li>
                <li>
                    <a href="javascript:;">报警管理</a>
                </li>
                <li>
                    <a href="javascript:;">统计分析</a>
                </li>
                <li>
                    <a href="javascript:;">系统管理</a>
                <li 
                v-for="(nav, key) in navs" :key="key"
                :class="{'active-nav': nav.active}"
                @click="navClick(nav)">
                    <a href="javascript:;">{{nav.txt}}</a>
                </li>
            </ul>
        </div>
@@ -35,41 +17,100 @@
    name: 'PageNav',
    data() {
        return  {
            
            navs: [
                {
                    txt: '首页',
                    active: false
                },
                {
                    txt: '动环监控中心',
                    active: false
                },
                {
                    txt: '动力设备监控',
                    active: true
                },
                {
                    txt: '环境设备监控',
                    active: false
                },
                {
                    txt: '安防设备监控',
                    active: false
                },
                {
                    txt: '报警管理',
                    active: false
                },
                {
                    txt: '统计分析',
                    active: false
                },
                {
                    txt: '系统管理',
                    active: false
                }
            ],
        }
    },
    methods: {
        initNavActive: function() {     // 初始化导航的激活状态，全部设置为false
            for(var i=0; i<this.navs.length; i++) {
                this.navs[i].active = false;
            }
        },
        navClick: function(data) {
            // 已经激活
            if(data.active) {
                return;
            }
            // 初始化导航的激活状态
            this.initNavActive();
            for(var i=0; i<this.navs.length; i++) {
                var nav = this.navs[i];
                if(nav.txt == data.txt) {
                    this.navs[i].active = true;
                }
            }

        }
    }
}
</script>
<style scoped>
    .page-nav {
        background-color: none; /* 浏览器不支持时显示 */
        border-radius: 0.08rem;
        background-image: linear-gradient(#49DFED, #016A95,#00638D, #006999, #009EE3);
        font-size: 0.15rem;
        text-align: center;
    }
    .page-nav::after {
        clear: both;
        content: "";
        display: block;
        width: 0;
        height: 0;
    }
    .page-nav li {
        float: left;
        width: 12.5%;
    }
    .page-nav li.active-nav {
        background-color: #15E3F3;
    }
    .page-nav li a {
        display: block;
        text-align: center;
        min-width: 1rem;
        line-height: 0.45rem;
        padding-left: 0.18rem;
        padding-right: 0.18rem;
    }
.page-nav {
    background-color: none; /* 浏览器不支持时显示 */
    border-radius: 0.08rem;
    background-image: linear-gradient(#49DFED, #016A95,#00638D, #006999, #009EE3);
    font-size: 0.15rem;
    text-align: center;
    overflow: hidden;
}
.page-nav::after {
    clear: both;
    content: "";
    display: block;
    width: 0;
    height: 0;
}
.page-nav li {
    float: left;
    width: 12.5%;
}
.page-nav li:hover {
    background-color: #12c4d1;
}
.page-nav li.active-nav {
    background-color: #15E3F3;
}
.page-nav li a {
    display: block;
    text-align: center;
    min-width: 1rem;
    line-height: 0.45rem;
    padding-left: 0.18rem;
    padding-right: 0.18rem;
}
</style>