From 96f797f5c53f2d5d4ce482d3e161195b9d7566b1 Mon Sep 17 00:00:00 2001 From: zhizou Date: Sat, 21 Sep 2019 19:35:19 +0800 Subject: [PATCH] =?UTF-8?q?fixed:=20tab=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/okadmin.css | 197 +++++++++++++++++++++--------------------------- index.html | 10 +-- 2 files changed, 90 insertions(+), 117 deletions(-) diff --git a/css/okadmin.css b/css/okadmin.css index 4651e46..6fe270c 100644 --- a/css/okadmin.css +++ b/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; - line-height: 40px; + height: 32px; + line-height: 32px; position: absolute; - top: 0; - width: 40px; + top: 4px; + width: 32px; + right: 4px; text-align: center; cursor: pointer; transition: all .3s; -webkit-transition: all .3s; - border-left: 1px solid #E6E6E6; - border-bottom: 1px solid #E6E6E6; - background: #FFF; + background: #F5F7F9; + /*border-left: 1px solid #E6E6E6;*/ + /*border-bottom: 1px solid #E6E6E6;*/ + /*background: #FFF;*/ z-index: 10; } - .okadmin-tabs-control:hover { - background: #F2F2F2; + /*background: #F2F2F2;*/ + color: #009688; } - -.layui-icon-prev { +.ok-tab .move-left { left: 0; border-left: none; - border-right: 1px solid #E6E6E6; } - -.layui-icon-next { +.ok-tab .move-right { 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 { - -} - -.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 { +/**tab的菜单**/ +.okadmin-nav a, +.okadmin-tab a{ cursor: pointer; } - -.okadmin-nav .okadmin-nav-item .okadmin-link { +.ok-right-nav-menu{ + 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-nav .okadmin-nav-item .okadmin-nav-child:visited { +.okadmin-tab .okadmin-tab-item a:hover { + background: #F5F7F9; +} +.okadmin-tab .okadmin-tab-item .okadmin-tab-child:visited { display: none !important; } -.okadmin-nav .okadmin-nav-item a:hover { - background: #F2F2F2; +.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; + 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%*/ diff --git a/index.html b/index.html index e4f49a4..f762df2 100644 --- a/index.html +++ b/index.html @@ -97,13 +97,13 @@
-
-
+
+
-