移动的导航小三角

<template>
    <div id="all">
        <div class="log_title">
            <p><a href="javascript:;">logo</a></p>
            <p><span>资产设备树</span></p>
        </div>
        <div class="nav">
            <ul class="navBar clearfix">
                <li @click="current='leader_board'" :class="{active:current=='leader_board'}"><router-link to="">领导看板</router-link></li>
                <li @click="current='monthly_work_report'" :class="{active:current=='monthly_work_report'}"><router-link to="">月度工作汇报</router-link></li>
            </ul>
        </div>
        <div class="back_home">
            <p><router-link to="">返回系统</router-link></p>
        </div>
    </div>
</template>

<script>

  export default {
    data() {
      return {
        current:'monthly_work_report',
      }
    },
    mounted() {

    },
    methods: {}
  }
</script>
<style scoped>
    #all{
        width: 100%;
        height: 67px;
        line-height: 66px;
        margin-bottom: 10px;
    }
    .log_title{
        float: left;
        width: 300px;
    }
    .log_title p{
        float: left;
        width: 140px;
    }
    .nav ul{
        float: left;
        width: 300px;
    }
    .nav ul li{
        float: left;
        width: 114px;
        position: relative;
    }
    .back_home{
        float: right;
        width: 96px;
    }

    .navBar:before{
        content: "";
        position: absolute;
        left: 0;
        top:66px;
        height: 1px;
        width: 100%;
        z-index: 2;
        -webkit-box-shadow: 0 1px 6px #075f94;
        -moz-box-shadow:  0 1px 6px #076599;
        /*box-shadow:  0 2px 6px #076599,0 1px 6px #077bb9;*/
        box-shadow: 0 0px 0px #00fff6, 0 0px 0px #00fff6;
        border-bottom: 2px solid #00fff6;
    }
    .active:before{
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        border-left: 10px solid transparent;  /* 左边框的宽 */
        border-right: 10px solid transparent; /* 右边框的宽 */
        border-bottom: 10px solid #00fff6; /* 下边框的长度|高,以及背景色 */
        bottom:-1px;
        /*让三角形居中*/
        left: 50%;
        margin-left:-12px ;
    }
</style>

 

转载于:https://www.cnblogs.com/xiaomili/p/7844448.html