fixed: tab样式

css/okadmin.css

@@ -367,52 +367,48 @@
 }
 
 /**顶部tab标签样式**/
-
+.ok-tab {
+    background: #F5F7F9;
+}
 .okadmin-pagetabs {
     padding: 0 80px 0 40px;
-    background-color: #fff;
+    background-color: transparent;
     width: 100%;
-    /*box-sizing: border-box;*/
     position: absolute;
     height: 40px;
     z-index: 1;
-    border-bottom: 1px solid #e6e6e6;
 }
-
 .okadmin-tabs-control {
-    height: 40px;
+    height: 32px;
-    line-height: 40px;
+    line-height: 32px;
     position: absolute;
-    top: 0;
+    top: 4px;
-    width: 40px;
+    width: 32px;
+    right: 4px;
     text-align: center;
     cursor: pointer;
     transition: all .3s;
     -webkit-transition: all .3s;
-    border-left: 1px solid #E6E6E6;
+    background: #F5F7F9;
-    border-bottom: 1px solid #E6E6E6;
+    /*border-left: 1px solid #E6E6E6;*/
-    background: #FFF;
+    /*border-bottom: 1px solid #E6E6E6;*/
+    /*background: #FFF;*/
     z-index: 10;
 }
-
 .okadmin-tabs-control:hover {
-    background: #F2F2F2;
+    /*background: #F2F2F2;*/
+    color: #009688;
 }
-
+.ok-tab .move-left {
-.layui-icon-prev {
     left: 0;
     border-left: none;
-    border-right: 1px solid #E6E6E6;
 }
-
+.ok-tab .move-right {
-.layui-icon-next {
     right: 40px;
 }
-
 .layui-icon-down {
     right: 0;
 }
-
 .okadmin-tabs-select.layui-nav {
     position: absolute;
     left: 0;
@@ -423,40 +419,39 @@
     background: 0 0;
 }
 
-.ok-tab {
+/**tab的菜单**/
-
+.okadmin-nav a,
-}
+.okadmin-tab a{
-
-.ok-tab .layui-tab-title {
-    margin: 0 80px 0 40px;
-    overflow-x: hidden !important;
-    overflow-y: hidden !important;
-    width: max-content !important;
-    z-index: 9;
-    position: relative;
-    left: 0;
-}
-
-.ok-tab-title cite {
-    padding-left: 5px;
-    font-style: normal;
-}
-
-.okadmin-nav a {
     cursor: pointer;
 }
-
+.ok-right-nav-menu{
-.okadmin-nav .okadmin-nav-item .okadmin-link {
+    top:0;
+    right: 0;
+    width: 40px;
+    height: 40px;
+    line-height: normal;
+    background: #F5F7F9;
+    display: flex;
+    align-items: center;
+}
+.okadmin-tab{
+    height: 32px;
+    line-height: 32px;
+    width: 32px;
+}
+.okadmin-tab .okadmin-tab-item .okadmin-link {
     display: block;
     width: 100%;
     height: 100%;
+    background: #FFFFFF;
+    border-radius: 3px;
 }
 
-.okadmin-nav .okadmin-nav-item:hover .okadmin-nav-child {
+.ok-right-nav-menu:hover .okadmin-tab-item .okadmin-tab-child {
     display: block !important;
 }
 
-.okadmin-nav .okadmin-nav-item .okadmin-nav-child {
+.okadmin-tab .okadmin-tab-item .okadmin-tab-child {
     position: absolute;
     top: 40px;
     right: 0;
@@ -471,7 +466,7 @@
     border-radius: 2px;
 }
 
-.okadmin-nav .okadmin-nav-item a {
+.okadmin-tab .okadmin-tab-item a {
     display: block;
     padding: 0 20px;
     color: #000;
@@ -479,13 +474,53 @@
     -webkit-transition: all .3s;
     font-size: 14px;
 }
-
+.okadmin-tab .okadmin-tab-item a:hover {
-.okadmin-nav .okadmin-nav-item .okadmin-nav-child:visited {
+    background: #F5F7F9;
+}
+.okadmin-tab .okadmin-tab-item .okadmin-tab-child:visited {
     display: none !important;
 }
 
-.okadmin-nav .okadmin-nav-item a:hover {
+.ok-tab .layui-tab-title {
-    background: #F2F2F2;
+    margin: 0 80px 0 40px;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    width: max-content !important;
+    z-index: 9;
+    position: relative;
+    left: 0;
+    height: 40px;
+    line-height: 40px;
+    border: 0;
+}
+.ok-tab .layui-tab-title li{
+    height: 32px;
+    line-height: 32px;
+    background: #fff;
+    border-radius: 3px;
+    margin-right: 15px;
+}
+.ok-tab .layui-tab-brief > .layui-tab-more li.layui-this,
+.ok-tab .layui-tab-brief > .layui-tab-title .layui-this,
+.ok-tab .layui-tab-title li.layui-this {
+    background-color: #ffffff;
+    color: #009688;
+    /*background: #F6F6F6;*/
+}
+
+.ok-tab .layui-tab-brief > .layui-tab-more li.layui-this:after,
+.ok-tab .layui-tab-brief > .layui-tab-title .layui-this:after,
+.ok-tab .layui-tab-title .layui-this:after {
+    display: none;
+}
+
+.ok-tab .layui-tab-title .layui-this:after {
+    display: none;
+}
+
+.ok-tab-title cite {
+    padding-left: 5px;
+    font-style: normal;
 }
 
 /*中国天气样式*/
@@ -517,19 +552,6 @@
     overflow: hidden
 }
 
-.okadmin .content-body:after {
-    content: "";
-    max-height: 1px;
-    min-height: 1px;
-    height: 1px;
-    background: #e6e6e6;
-    z-index: 999;
-    width: 100%;
-    display: block;
-    position: absolute;
-    top: 40px;
-}
-
 .okadmin-tabs-select.layui-nav .layui-nav-item {
     line-height: 40px;
 }
@@ -561,56 +583,7 @@
     right: 0;
 }
 
-.ok-tab .layui-tab-title li:hover {
-    background: #F6F6F6;
-}
 
-.ok-tab .layui-tab-title li:hover:after {
-    width: 100%;
-}
-
-.ok-tab .layui-tab-title li {
-    border-right: 1px solid #f6f6f6;
-}
-
-.ok-tab .layui-tab-title li:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    -ms-transform: translateX(-50%); /* IE 9 */
-    -webkit-transform: translateX(-50%); /* Safari and Chrome */
-    width: 0;
-    height: 2px;
-    border-radius: 0;
-    background-color: #292B34;
-    transition: all .3s;
-    -webkit-transition: all .3s;
-}
-
-
-.ok-tab .layui-tab-brief > .layui-tab-more li.layui-this,
-.ok-tab .layui-tab-brief > .layui-tab-title .layui-this,
-.ok-tab .layui-tab-title li.layui-this {
-    background: #F6F6F6;
-}
-
-.ok-tab .layui-tab-brief > .layui-tab-more li.layui-this:after,
-.ok-tab .layui-tab-brief > .layui-tab-title .layui-this:after,
-.ok-tab .layui-tab-title .layui-this:after {
-    border-color: #000 !important;
-    border-bottom: 0 !important;
-    border-top: 2px solid #000 !important;
-    width: 100%;
-}
-
-.ok-tab .layui-tab-title .layui-this:after {
-    background: #20222A !important;
-    bottom: auto;
-    top: 0 !important;
-    height: 2px;
-}
 
 
 /*使iframe高度100%,它的父类高度也需要100%*/

index.html

@@ -97,13 +97,13 @@
             <!-- 内容主体区域 -->
             <div class="content-body">
                 <div class="layui-tab ok-tab" lay-filter="ok-tab" lay-allowClose="true" lay-unauto>
-                    <div data-id="left" id="okLeftMove" class="layui-icon okadmin-tabs-control layui-icon-prev okNavMove"></div>
+                    <div data-id="left" id="okLeftMove" class="ok-icon ok-icon-back okadmin-tabs-control move-left okNavMove"></div>
-                    <div data-id="right" id="okRightMove" class="layui-icon okadmin-tabs-control layui-icon-next okNavMove"></div>
+                    <div data-id="right" id="okRightMove" class="ok-icon ok-icon-right okadmin-tabs-control move-right okNavMove"></div>
                     <div class="layui-icon okadmin-tabs-control ok-right-nav-menu" style="right: 0;">
-                        <ul class="okadmin-nav">
+                        <ul class="okadmin-tab">
-                            <li class="no-line okadmin-nav-item">
+                            <li class="no-line okadmin-tab-item">
                                 <div class="okadmin-link layui-icon-down" href="javascript:;"></div>
-                                <dl id="tabAction" class="okadmin-nav-child layui-anim-upbit layui-anim">
+                                <dl id="tabAction" class="okadmin-tab-child layui-anim-upbit layui-anim">
                                     <dd><a data-num="1" href="javascript:">关闭当前标签页</a></dd>
                                     <dd><a data-num="2" href="javascript:">关闭其他标签页</a></dd>
                                     <dd><a data-num="3" href="javascript:">关闭所有标签页</a></dd>