| 提交 | 用户 | age | ||
| 439291 | 1 | @import (reference) '../../../design/index.less'; |
| V | 2 | |
| 3 | .layout-header { | |
| 4 | display: flex; | |
| 5 | height: @header-height; | |
| 6 | padding: 0 20px 0 0; | |
| cedba3 | 7 | margin-left: -1px; |
| 439291 | 8 | line-height: @header-height; |
| V | 9 | color: @white; |
| 10 | background: @white; | |
| 11 | align-items: center; | |
| 12 | justify-content: space-between; | |
| 13 | ||
| 0692b4 | 14 | &.fixed { |
| V | 15 | position: fixed; |
| 16 | top: 0; | |
| 17 | left: 0; | |
| 18 | z-index: 1000; | |
| 19 | width: 100%; | |
| 20 | } | |
| 21 | ||
| 439291 | 22 | &__left { |
| V | 23 | display: flex; |
| c303ec | 24 | height: 100%; |
| 439291 | 25 | align-items: center; |
| V | 26 | |
| 27 | .layout-trigger { | |
| c303ec | 28 | display: flex; |
| V | 29 | height: 100%; |
| 0692b4 | 30 | padding: 1px 10px 0 16px; |
| 439291 | 31 | cursor: pointer; |
| c303ec | 32 | align-items: center; |
| 439291 | 33 | |
| V | 34 | .anticon { |
| 35 | font-size: 17px; | |
| 36 | } | |
| 37 | ||
| 38 | &.light { | |
| 39 | &:hover { | |
| 40 | background: @header-light-bg-hover-color; | |
| 41 | } | |
| 42 | ||
| 43 | svg { | |
| 44 | fill: #000; | |
| 45 | } | |
| 46 | } | |
| 47 | ||
| 48 | &.dark { | |
| 49 | &:hover { | |
| 50 | background: @header-dark-bg-hover-color; | |
| 51 | } | |
| 52 | } | |
| 53 | } | |
| 54 | ||
| 55 | .layout-breadcrumb { | |
| c303ec | 56 | display: flex; |
| 439291 | 57 | padding: 0 8px; |
| c303ec | 58 | align-items: center; |
| V | 59 | |
| 60 | .ant-breadcrumb-link { | |
| 61 | .anticon { | |
| 62 | margin-right: 4px; | |
| 63 | margin-bottom: 2px; | |
| 64 | } | |
| 65 | } | |
| 439291 | 66 | } |
| V | 67 | } |
| 68 | ||
| 69 | &__content { | |
| 70 | display: flex; | |
| c303ec | 71 | height: 100%; |
| 439291 | 72 | flex-grow: 1; |
| V | 73 | align-items: center; |
| 74 | } | |
| 75 | ||
| 76 | &__header--light { | |
| 77 | background: @white; | |
| 78 | border-bottom: 1px solid @header-light-bottom-border-color; | |
| 79 | ||
| 80 | .layout-header__menu { | |
| 81 | height: calc(@header-height - 1px); | |
| 82 | ||
| 83 | .ant-menu-submenu { | |
| 84 | height: @header-height; | |
| 85 | line-height: @header-height; | |
| c303ec | 86 | } |
| V | 87 | } |
| 88 | ||
| 89 | .layout-breadcrumb { | |
| 90 | .ant-breadcrumb-link { | |
| 91 | color: @breadcrumb-item-normal-color; | |
| 92 | ||
| 93 | a { | |
| 94 | color: @text-color-base; | |
| 95 | ||
| 96 | &:hover { | |
| 97 | color: @primary-color; | |
| 98 | } | |
| 99 | } | |
| 100 | } | |
| 101 | ||
| 102 | .ant-breadcrumb-separator { | |
| 103 | color: @breadcrumb-item-normal-color; | |
| 439291 | 104 | } |
| V | 105 | } |
| 106 | ||
| 107 | .layout-header__logo { | |
| 108 | height: @header-height; | |
| 109 | color: @text-color-base; | |
| 110 | ||
| 111 | img { | |
| 112 | width: @logo-width; | |
| 113 | height: @logo-width; | |
| 114 | margin-right: 6px; | |
| 115 | } | |
| 116 | ||
| 117 | &:hover { | |
| 118 | background: @header-light-bg-hover-color; | |
| 119 | } | |
| 120 | } | |
| 121 | ||
| 122 | .layout-header__action { | |
| 123 | &-item { | |
| 124 | &:hover { | |
| 125 | background: @header-light-bg-hover-color; | |
| 126 | } | |
| e5f8ce | 127 | |
| V | 128 | &.locale { |
| 129 | padding: 0 10px; | |
| 130 | color: rgba(0, 0, 0, 0.65); | |
| 131 | } | |
| 439291 | 132 | } |
| V | 133 | |
| 134 | &-icon { | |
| 135 | color: @text-color-base; | |
| 136 | } | |
| 137 | } | |
| 138 | ||
| 139 | .layout-header__user-dropdown { | |
| 140 | &:hover { | |
| 141 | background: @header-light-bg-hover-color; | |
| 142 | } | |
| 143 | } | |
| 144 | ||
| 145 | .user-dropdown { | |
| 146 | &__name { | |
| 147 | color: @text-color-base; | |
| 148 | } | |
| 149 | ||
| 150 | &__desc { | |
| 151 | color: @header-light-desc-color; | |
| 152 | } | |
| 153 | } | |
| 154 | } | |
| 155 | ||
| 156 | &__header--dark { | |
| 157 | background: @header-dark-bg-color; | |
| 158 | ||
| 159 | .layout-header__action { | |
| 160 | &-item { | |
| 161 | &:hover { | |
| 162 | background: @header-dark-bg-hover-color; | |
| 163 | } | |
| 164 | } | |
| 165 | } | |
| 166 | ||
| 167 | .layout-header__logo { | |
| 168 | height: @header-height; | |
| 169 | ||
| 170 | img { | |
| 171 | width: @logo-width; | |
| 172 | height: @logo-width; | |
| 173 | margin-right: 10px; | |
| 174 | } | |
| 175 | ||
| 176 | &:hover { | |
| 177 | background: @header-dark-bg-hover-color; | |
| 178 | } | |
| 179 | } | |
| 180 | ||
| 181 | .layout-header__user-dropdown { | |
| 182 | &:hover { | |
| 183 | background: @header-dark-bg-hover-color; | |
| 184 | } | |
| 185 | } | |
| 186 | ||
| c303ec | 187 | .layout-breadcrumb { |
| V | 188 | .ant-breadcrumb-link { |
| 439291 | 189 | color: rgba(255, 255, 255, 0.6); |
| c303ec | 190 | |
| V | 191 | a { |
| 192 | color: rgba(255, 255, 255, 0.8); | |
| 193 | ||
| 194 | &:hover { | |
| 195 | color: @white; | |
| 196 | } | |
| 197 | } | |
| 439291 | 198 | } |
| V | 199 | |
| c303ec | 200 | .ant-breadcrumb-separator, |
| V | 201 | .anticon { |
| 202 | color: rgba(255, 255, 255, 0.8); | |
| 439291 | 203 | } |
| V | 204 | } |
| 205 | } | |
| 206 | ||
| 207 | &__logo { | |
| 208 | padding: 0 10px; | |
| 209 | } | |
| 210 | ||
| 211 | &__bread { | |
| 212 | display: none; | |
| 213 | flex: 1; | |
| 214 | } | |
| 215 | ||
| 216 | &__action { | |
| 217 | display: flex; | |
| 218 | align-items: center; | |
| 219 | ||
| 220 | &-item { | |
| 221 | display: flex; | |
| 222 | height: @header-height; | |
| 223 | padding: 0 2px; | |
| 224 | font-size: 1.2em; | |
| 225 | cursor: pointer; | |
| 226 | align-items: center; | |
| 227 | } | |
| 228 | ||
| 229 | &-icon { | |
| 230 | padding: 0 8px; | |
| 231 | } | |
| 232 | } | |
| 233 | ||
| 234 | &__menu { | |
| 25d43a | 235 | margin-left: 4px; |
| 439291 | 236 | overflow: hidden; |
| V | 237 | align-items: center; |
| 238 | } | |
| 239 | ||
| 240 | &__user-dropdown { | |
| 241 | height: @header-height; | |
| 242 | padding: 0 0 0 10px; | |
| 243 | } | |
| 244 | ||
| 245 | .user-dropdown { | |
| 246 | display: flex; | |
| 247 | padding-right: 10px; | |
| 248 | font-size: 12px; | |
| 249 | cursor: pointer; | |
| 250 | align-items: center; | |
| 251 | ||
| 252 | img { | |
| 253 | width: 26px; | |
| 254 | height: 26px; | |
| 255 | margin-right: 12px; | |
| 256 | } | |
| 257 | ||
| 258 | &__header { | |
| 259 | border-radius: 50%; | |
| 260 | } | |
| 261 | } | |
| 262 | } | |
| e5f8ce | 263 | |
| V | 264 | .app-layout-header-user-dropdown-overlay { |
| 265 | .ant-dropdown-menu-item { | |
| 266 | min-width: 160px; | |
| 267 | } | |
| 268 | } | |
