新增顶部导航栏组件 顶部背景图更改 index样式添加

@@ -5,14 +5,12 @@
              :closable = "tabCloseable"
              :closable = "tabCloseable"
              @tab-click='tabClick'
              @tab-click='tabClick'
              @tab-remove="tabRemove"
              @tab-remove="tabRemove"
-             style="width: 100%">
+             style="width: 100%;margin-top: 18px;height: 50px">
         <el-tab-pane
         <el-tab-pane
                 v-for="(item, index) in this.$store.state.openTab"
                 v-for="(item, index) in this.$store.state.openTab"
                 :key="item.name"
                 :key="item.name"
                 :label="item.name"
                 :label="item.name"
-                :name="item.route"
-        >
-
+                :name="item.route">
             <section class="content-container">
             <section class="content-container">
                 <div class="grid-content bg-purple-light">
                 <div class="grid-content bg-purple-light">
                     <!--                <el-col :span="24" class="breadcrumb-container">-->
                     <!--                <el-col :span="24" class="breadcrumb-container">-->
@@ -138,4 +136,48 @@
 </script>
 </script>
 
 
 <style>
 <style>
+/*底层背景色*/
+    .el-tabs__nav-scroll{
+        background-color: rgb(239,243,246);
+    }
+/*首个内部边框*/
+.el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
+    border: 1px solid rgba(80,109,130,.64);
+}
+/*其他内部边框*/
+.el-tabs--card>.el-tabs__header .el-tabs__item{
+    border: 1px solid rgba(80,109,130,.64);
+}
+/*外部大边框取消表格样式*/
+.el-tabs--card>.el-tabs__header .el-tabs__nav{
+    border: 0px;
+}
+/*黑框及内字体样式*/
+.el-tabs__item{
+        color:#495060;
+        height: 26px;
+        border: 1px solid rgba(80,109,130,.64);
+        margin: 4px 3px;
+        line-height: 26px;
+        border-radius: 5px 5px 0 0;
+        background-color: #fff;
+        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
+}
+/*    选中的黑框的样式*/
+.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
+    border-bottom: 1px solid rgba(80,109,130,.64);
+    border-radius: 5px 5px 0 0;
+    background-color: #398af1;
+    color: #fff;
+    border-color: #398af1;
+}
+    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active:before{
+        content: "";
+        background: #fff;
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin-right: 8px;
+    }
 </style>
 </style>

+<template>
+    <div id="me">
+        <div id="menu">
+            <ul>
+                <li> <a href="" class="drop">企业公共服务</a>
+                    <div class="dropdown_1column">
+                        <ul class="simple">
+                            <li><a href="">货主服务</a></li>
+                            <li><a href="">代理人服务</a></li>
+                            <li><a href="">航空公司服务</a></li>
+                            <li><a href="">卡车运输服务</a></li>
+                            <li><a href="">报关服务</a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li><a href="" class="drop">增值服务</a>
+                    <div class="dropdown_1column">
+                        <ul class="simple">
+                            <li><a href="">在线物流交易</a></li>
+                            <li><a href="">航空货运操作管理</a></li>
+                            <li><a href="">智能通关服务</a></li>
+                            <li><a href="">智慧组板服务</a></li>
+                            <li><a href="">物流金融服务</a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li><a href="" class="drop">综合查询</a>
+                    <div class="dropdown_1column">
+                        <ul class="simple">
+                            <li><a href="">实时查询服务</a></li>
+                            <li><a href="">综合查询服务</a></li>
+                        </ul>
+                    </div></li>
+                <li><a href="" class="drop">政府监管服务</a>
+                    <div class="dropdown_1column">
+                        <ul class="simple">
+                            <li><a href="">货物监管辅助管理</a></li>
+                            <li><a href="">卡口辅助管理</a></li>
+                            <li><a href="">安检信息服务</a></li>
+                            <li><a href="">特种货物监管</a></li>
+                            <li><a href="">企业信用监管</a></li>
+                        </ul>
+                    </div></li>
+
+            </ul>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+    export default {
+        name: "NaBar"
+    }
+</script>
+
+<style scoped>
+    /*去除序列点*/
+    li{
+        list-style-type: none;
+    }
+    #me{
+        height: 100px;
+    }
+    /*菜单栏底层div*/
+    #menu {
+        width: 1000px;
+        height: 50px;
+        border-bottom: 3px solid rgb(111,130,148);
+        position:relative;
+
+    }
+    /*一级菜单栏样式*/
+    #menu li{
+        float: left;
+        width: 130px;
+        height: 50px;
+        text-align: center;
+        /*position:relative;*/
+        border:none;
+    }
+    /*一级菜单栏字体*/
+    #menu li a {
+        font-size:17px;
+        display:block;
+        /*outline:0;*/
+        /*删除下划线*/
+        text-decoration:none;
+    }
+    /*鼠标放一级菜单时显示二级菜单样式(横向效果)*/
+    #menu li:hover .dropdown_1column {
+        left:0px;
+        top:45px;
+        float: left;
+        display:inline-block;
+        width: 720px;
+        font-size:17px;
+        color:#ffffff;
+    }
+    /*二级菜单栏样式*/
+    .dropdown_1column{
+        position: absolute;
+        left: -999em;
+        /*text-align: center;*/
+        background: rgb(14,119,238);
+        width: 160px;
+    }
+    /*鼠标移至二级菜单栏颜色改变*/
+    #menu li:hover div li:hover{background-color: rgb(18,170,255)}
+    /*二级菜单栏样式*/
+    #menu li ul li {
+        font-size:17px;
+        float:left;
+        line-height:50px;
+    }
+
+</style>