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

@@ -5,31 +5,29 @@
              :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"
-        >
-
-                    <section class="content-container">
-                        <div class="grid-content bg-purple-light">
-            <!--                <el-col :span="24" class="breadcrumb-container">-->
-            <!--                    <strong class="title">{{$route.name}}</strong>-->
-            <!--                    <el-breadcrumb separator="/" class="breadcrumb-inner">-->
-            <!--                        <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">-->
-            <!--                            {{ item.name }}-->
-            <!--                        </el-breadcrumb-item>-->
-            <!--                    </el-breadcrumb>-->
-            <!--                </el-col>-->
-                            <el-col :span="24" class="content-wrapper">
-                                <transition name="fade" mode="out-in">
-                                    <router-view></router-view>
-                                </transition>
-                            </el-col>
-                        </div>
-                    </section>
+                :name="item.route">
+            <section class="content-container">
+                <div class="grid-content bg-purple-light">
+                    <!--                <el-col :span="24" class="breadcrumb-container">-->
+                    <!--                    <strong class="title">{{$route.name}}</strong>-->
+                    <!--                    <el-breadcrumb separator="/" class="breadcrumb-inner">-->
+                    <!--                        <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">-->
+                    <!--                            {{ item.name }}-->
+                    <!--                        </el-breadcrumb-item>-->
+                    <!--                    </el-breadcrumb>-->
+                    <!--                </el-col>-->
+                    <el-col :span="24" class="content-wrapper">
+                        <transition name="fade" mode="out-in">
+                            <router-view></router-view>
+                        </transition>
+                    </el-col>
+                </div>
+            </section>
         </el-tab-pane>
         </el-tab-pane>
     </el-tabs>
     </el-tabs>
 </template>
 </template>
@@ -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>