From cb9ade2afd2a367ad767bc605ab7086c695dd010 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 09 十二月 2022 15:53:32 +0800 Subject: [PATCH] 2022-12-09 --- src/components/header/index.scss | 47 +++++++++++++++++++++++++++++++++-------------- 1 files changed, 33 insertions(+), 14 deletions(-) diff --git a/src/components/header/index.scss b/src/components/header/index.scss index 27850ef..0c8a8d0 100644 --- a/src/components/header/index.scss +++ b/src/components/header/index.scss @@ -6,9 +6,9 @@ font-weight: bold!important; width: 100%; height: 48px; + display: flex; .header-logo { - float: left; width: 180px; line-height: 48px; text-align: center; @@ -28,7 +28,6 @@ } .header-collapse { - float: left; width: 35px; min-height: 48px; line-height: 48px; @@ -48,13 +47,17 @@ padding-left: 20px; } .header-menu { - float: left; margin: 0; + min-height: 20px; line-height: 48px; + flex: 1; + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; li { - float: left; font-size: 1.3rem; cursor: pointer; + display: inline-block; span { padding: 0 10px; height: 42px; @@ -83,8 +86,22 @@ } } + .header-menu::-webkit-scrollbar { + height: 5px; + } + .header-menu::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13); + background: rgba(0, 0, 0, 0.13); + border-radius: 5px; + } + .header-menu::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + border: 1px solid rgba(0, 0, 0, 0.07); + background: rgba(0, 0, 0, 0); + border-radius: 3px; + } + .header-setting { - float: right; line-height: 48px; margin-right: 10px; img { @@ -117,10 +134,10 @@ } .search-menu { - float: right; font-size: 18px; margin-top: 17px; margin-right: 20px; + margin-left: 10px; cursor: pointer; } .menu-select-dropdown { @@ -196,7 +213,7 @@ border-radius: 4px; box-shadow: 0 0 3px #959595; position: relative; - left: 11.8%; + // left: 11.8%; .menu-wrap { .title { color: #1890ff; @@ -205,21 +222,23 @@ } .menu-detail { max-width: 60vw; - padding: 5px 0 10px 15px; + padding: 5px 0 5px 15px; div { - float: left; - margin-bottom: 5px; + // float: left; + display: inline-block; + vertical-align: top; + margin-bottom: 8px; width: 120px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + // overflow: hidden; + // white-space: nowrap; + // text-overflow: ellipsis; cursor: pointer; } div:hover { color: #40a9ff; } div:not(:last-child) { - margin-right: 20px; + margin-right: 15px; } } .menu-detail::after { -- Gitblit v1.8.0