global.less 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758
  1. @import './index.less';
  2. body {
  3. &.colorWeak {
  4. filter: invert(80%);
  5. }
  6. &.userLayout {
  7. overflow: auto;
  8. }
  9. }
  10. .layout.ant-layout {
  11. height: auto;
  12. overflow-x: hidden;
  13. &.mobile,
  14. &.tablet {
  15. .ant-layout-content {
  16. .content {
  17. margin: 24px 0 0;
  18. }
  19. }
  20. /**
  21. * ant-table-wrapper
  22. * 覆盖的表格手机模式样式,如果想修改在手机上表格最低宽度,可以在这里改动
  23. */
  24. .ant-table-wrapper {
  25. .ant-table-content {
  26. overflow-y: auto;
  27. }
  28. .ant-table-body {
  29. min-width: 800px;
  30. }
  31. }
  32. .topmenu {
  33. /* 必须为 topmenu 才能启用流式布局 */
  34. &.content-width-Fluid {
  35. .header-index-wide {
  36. margin-left: 0;
  37. }
  38. }
  39. }
  40. }
  41. &.mobile {
  42. .sidemenu {
  43. .ant-header-fixedHeader {
  44. &.ant-header-side-opened,
  45. &.ant-header-side-closed {
  46. width: 100%;
  47. }
  48. }
  49. }
  50. }
  51. &.ant-layout-has-sider {
  52. flex-direction: row;
  53. }
  54. .trigger {
  55. font-size: 20px;
  56. line-height: 64px;
  57. padding: 0 24px;
  58. cursor: pointer;
  59. transition: color 0.3s;
  60. &:hover {
  61. background: rgba(0, 0, 0, 0.025);
  62. }
  63. }
  64. .topmenu {
  65. .ant-header-fixedHeader {
  66. position: fixed;
  67. top: 0;
  68. right: 0;
  69. z-index: 9;
  70. width: 100%;
  71. transition: width 0.2s;
  72. &.ant-header-side-opened {
  73. width: 100%;
  74. }
  75. &.ant-header-side-closed {
  76. width: 100%;
  77. }
  78. }
  79. .ant-header-multiTab{
  80. margin: auto;
  81. }
  82. .ant-header-fixedMultiTab{
  83. position: fixed;
  84. z-index: 8;
  85. width: 100%;
  86. top: 64px;
  87. right:0;
  88. margin: auto;
  89. }
  90. /* 必须为 topmenu 才能启用流式布局 */
  91. &.content-width-Fluid {
  92. .header-index-wide {
  93. max-width: unset;
  94. .header-index-left {
  95. flex: 1 1 1000px;
  96. .logo{
  97. margin:0 25px;
  98. }
  99. .ant-menu.ant-menu-horizontal{
  100. max-width: calc(100vw - 190px - 238px - 25px);
  101. flex: 1 1 calc(100vw - 190px - 238px - 25px);
  102. }
  103. }
  104. .header-index-right{
  105. margin-right:25px;
  106. }
  107. }
  108. .page-header-index-wide {
  109. max-width: unset;
  110. }
  111. }
  112. }
  113. .sidemenu {
  114. .ant-header-fixedHeader {
  115. position: fixed;
  116. top: 0;
  117. right: 0;
  118. z-index: 9;
  119. width: 100%;
  120. transition: width 0.2s;
  121. &.ant-header-side-opened {
  122. width: calc(100% - 256px);
  123. }
  124. &.ant-header-side-closed {
  125. width: calc(100% - 80px);
  126. }
  127. }
  128. .ant-header-multiTab{
  129. margin: auto;
  130. }
  131. .ant-header-fixedMultiTab{
  132. position: fixed;
  133. z-index: 8;
  134. width: 100%;
  135. top: 64px;
  136. right:0;
  137. margin: auto;
  138. &.ant-header-side-opened {
  139. width: calc(100% - 256px);
  140. }
  141. &.ant-header-side-closed {
  142. width: calc(100% - 80px);
  143. }
  144. }
  145. }
  146. .header {
  147. height: 64px;
  148. padding: 0 12px 0 0;
  149. background: #fff;
  150. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  151. position: relative;
  152. }
  153. .header,
  154. .top-nav-header-index {
  155. .user-wrapper {
  156. float: right;
  157. height: 100%;
  158. .action {
  159. cursor: pointer;
  160. padding: 0 12px;
  161. display: inline-block;
  162. transition: all 0.3s;
  163. height: 100%;
  164. color: rgba(0, 0, 0, 0.65);
  165. &:hover {
  166. background: rgba(0, 0, 0, 0.025);
  167. }
  168. .avatar {
  169. margin: 20px 8px 20px 0;
  170. color: #1890ff;
  171. background: hsla(0, 0%, 100%, 0.85);
  172. vertical-align: middle;
  173. }
  174. .icon {
  175. font-size: 16px;
  176. padding: 4px;
  177. }
  178. }
  179. }
  180. &.dark {
  181. .user-wrapper {
  182. .action {
  183. color: rgba(255, 255, 255, 0.85);
  184. a {
  185. color: rgba(255, 255, 255, 0.85);
  186. }
  187. &:hover {
  188. background: rgba(255, 255, 255, 0.16);
  189. }
  190. }
  191. }
  192. }
  193. }
  194. &.mobile,
  195. &.tablet {
  196. .top-nav-header-index {
  197. .header-index-wide {
  198. .header-index-left {
  199. .trigger {
  200. color: rgba(255, 255, 255, 0.85);
  201. padding: 0 12px;
  202. }
  203. .logo.top-nav-header {
  204. flex: 0 0 56px;
  205. text-align: center;
  206. line-height: 58px;
  207. h1 {
  208. display: none;
  209. }
  210. }
  211. }
  212. }
  213. &.light {
  214. .header-index-wide {
  215. .header-index-left {
  216. .trigger {
  217. color: rgba(0, 0, 0, 0.65);
  218. }
  219. }
  220. }
  221. //
  222. }
  223. }
  224. }
  225. &.tablet {
  226. // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
  227. .top-nav-header-index {
  228. .header-index-wide {
  229. .header-index-left {
  230. .logo > a {
  231. overflow: hidden;
  232. text-overflow: ellipsis;
  233. white-space: nowrap;
  234. }
  235. }
  236. .ant-menu.ant-menu-horizontal {
  237. flex: 1 1 auto;
  238. white-space: normal;
  239. }
  240. }
  241. }
  242. }
  243. .top-nav-header-index {
  244. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  245. position: relative;
  246. transition: background 0.3s, width 0.2s;
  247. .header-index-wide {
  248. max-width: 1200px;
  249. margin: auto;
  250. padding-left: 0;
  251. display: flex;
  252. height: 64px;
  253. .ant-menu.ant-menu-horizontal {
  254. max-width: 835px;
  255. flex: 0 1 835px;
  256. border: none;
  257. height: 64px;
  258. line-height: 64px;
  259. }
  260. .header-index-left {
  261. flex: 0 1 1000px;
  262. display: flex;
  263. .logo.top-nav-header {
  264. flex: 0 0 auto;
  265. width: auto;
  266. height: 64px;
  267. position: relative;
  268. line-height: 64px;
  269. transition: all 0.3s;
  270. overflow: hidden;
  271. img,
  272. svg {
  273. display: inline-block;
  274. vertical-align: middle;
  275. height: 42px;
  276. width: 42px;
  277. }
  278. h1 {
  279. color: #fff;
  280. display: inline-block;
  281. vertical-align: top;
  282. font-size: 16px;
  283. margin: 0 0 0 12px;
  284. font-weight: 400;
  285. }
  286. }
  287. }
  288. .header-index-right {
  289. flex: 0 0 238px;
  290. align-self: flex-end;
  291. height: 64px;
  292. overflow: hidden;
  293. .content-box {
  294. float: right;
  295. }
  296. }
  297. }
  298. &.light {
  299. background-color: #fff;
  300. .header-index-wide {
  301. .header-index-left {
  302. .logo {
  303. h1 {
  304. color: #002140;
  305. }
  306. }
  307. }
  308. }
  309. }
  310. }
  311. // 内容区
  312. .layout-content {
  313. margin: 24px 24px 0px;
  314. height: 100%;
  315. height: 64px;
  316. padding: 0 12px 0 0;
  317. }
  318. // footer
  319. .ant-layout-footer {
  320. padding: 0;
  321. }
  322. }
  323. .topmenu {
  324. .page-header-index-wide {
  325. max-width: 1200px;
  326. margin: 0 auto;
  327. }
  328. }
  329. // drawer-sider 自定义
  330. .ant-drawer.drawer-sider {
  331. .sider {
  332. box-shadow: none;
  333. }
  334. &.dark {
  335. .ant-drawer-content {
  336. background-color: rgb(0, 21, 41);
  337. }
  338. }
  339. &.light {
  340. box-shadow: none;
  341. .ant-drawer-content {
  342. background-color: #fff;
  343. }
  344. }
  345. .ant-drawer-body {
  346. padding: 0;
  347. }
  348. }
  349. // 菜单样式
  350. .sider {
  351. box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  352. position: relative;
  353. z-index: @ant-global-sider-zindex;
  354. min-height: 100vh;
  355. .ant-layout-sider-children {
  356. overflow-y: hidden;
  357. &:hover {
  358. overflow-y: auto;
  359. }
  360. }
  361. &.ant-fixed-sidemenu {
  362. position: fixed;
  363. height: 100%;
  364. }
  365. .logo {
  366. position: relative;
  367. height: 64px;
  368. padding-left: 10px;
  369. overflow: hidden;
  370. line-height: 64px;
  371. background: #002140;
  372. transition: all .3s;
  373. img,
  374. svg,
  375. h1 {
  376. display: inline-block;
  377. vertical-align: middle;
  378. }
  379. img,
  380. svg {
  381. height: 42px;
  382. width: 42px;
  383. }
  384. h1 {
  385. color: #fff;
  386. font-size: 16px;
  387. margin: 0 0 0 6px;
  388. font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  389. font-weight: 600;
  390. vertical-align: middle;
  391. }
  392. }
  393. &.ant-layout-sider-collapsed{
  394. .logo{
  395. padding-left: 20px;
  396. }
  397. }
  398. &.light {
  399. background-color: #fff;
  400. box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
  401. .logo {
  402. background: #fff;
  403. box-shadow: 1px 1px 0px 0px #e8e8e8;
  404. h1 {
  405. color: unset;
  406. }
  407. }
  408. .ant-menu-light {
  409. border-right-color: transparent;
  410. }
  411. }
  412. }
  413. // 外置的样式控制
  414. .user-dropdown-menu {
  415. span {
  416. user-select: none;
  417. }
  418. }
  419. .user-dropdown-menu-wrapper.ant-dropdown-menu {
  420. padding: 4px 0;
  421. .ant-dropdown-menu-item {
  422. width: 160px;
  423. }
  424. .ant-dropdown-menu-item > .anticon:first-child,
  425. .ant-dropdown-menu-item > a > .anticon:first-child,
  426. .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
  427. min-width: 12px;
  428. margin-right: 8px;
  429. }
  430. }
  431. // 数据列表 样式
  432. .table-alert {
  433. margin-bottom: 16px;
  434. }
  435. .table-page-search-wrapper {
  436. .ant-form-inline {
  437. .ant-form-item {
  438. display: flex;
  439. margin-bottom: 24px;
  440. margin-right: 0;
  441. .ant-form-item-control-wrapper {
  442. flex: 1 1;
  443. display: inline-block;
  444. vertical-align: middle;
  445. }
  446. > .ant-form-item-label {
  447. line-height: 32px;
  448. padding-right: 8px;
  449. width: auto;
  450. }
  451. .ant-form-item-control {
  452. height: 32px;
  453. line-height: 32px;
  454. }
  455. }
  456. }
  457. .table-page-search-submitButtons {
  458. display: block;
  459. margin-bottom: 24px;
  460. white-space: nowrap;
  461. }
  462. }
  463. .content {
  464. .table-operator {
  465. padding: 15px 0;
  466. border-top: 1px solid #eee;
  467. button {
  468. margin-right: 8px;
  469. }
  470. }
  471. .table-operator-nobor{
  472. padding: 0 0 15px 0;
  473. button {
  474. margin-right: 8px;
  475. }
  476. }
  477. }
  478. /* 扩展ant design pro按钮组件颜色 */
  479. .ant-btn-primary.button-primary {
  480. background-color: #39f;
  481. border-color: #39f;
  482. margin: 0 5px;
  483. font-size: 12px;
  484. &:hover, &:focus {
  485. background-color: #52a6fb;
  486. border-color: #52a6fb;
  487. }
  488. &:active, &.active {
  489. background-color: #3d80bf;
  490. border-color: #3d80bf;
  491. }
  492. }
  493. .ant-btn-primary.button-info {
  494. background-color: #2db7f5;
  495. border-color: #2db7f5;
  496. margin: 0 5px;
  497. font-size: 12px;
  498. &:hover, &:focus {
  499. background-color: #32c8f5;
  500. border-color: #32c8f5;
  501. }
  502. &:active, &.active {
  503. background-color: #27a3d8;
  504. border-color: #27a3d8;
  505. }
  506. }
  507. .ant-btn-primary.button-success {
  508. background-color: #0c6;
  509. border-color: #0c6;
  510. margin: 0 5px;
  511. font-size: 12px;
  512. &:hover, &:focus {
  513. background-color: #01dc8c;
  514. border-color: #01dc8c;
  515. }
  516. &:active, &.active {
  517. background-color: #00af57;
  518. border-color: #00af57;
  519. }
  520. }
  521. .ant-btn-primary.button-warning {
  522. background-color: #f90;
  523. border-color: #f90;
  524. margin: 0 5px;
  525. font-size: 12px;
  526. &:hover, &:focus {
  527. background-color: #ffb60a;
  528. border-color: #ffb60a;
  529. }
  530. &:active, &.active {
  531. background-color: #dd8500;
  532. border-color: #dd8500;
  533. }
  534. }
  535. .ant-btn-primary.button-error {
  536. background-color: #f30;
  537. border-color: #f30;
  538. margin: 0 5px;
  539. font-size: 12px;
  540. &:hover, &:focus {
  541. background-color: #ff6666;
  542. border-color: #ff6666;
  543. }
  544. &:active, &.active {
  545. background-color: #d62a00;
  546. border-color: #d62a00;
  547. }
  548. }
  549. .ant-btn-primary.button-geekblue {
  550. background-color: #2F54EB;
  551. border-color: #2F54EB;
  552. margin: 0 5px;
  553. font-size: 12px;
  554. &:hover, &:focus {
  555. background-color: #1d39c4;
  556. border-color: #1d39c4;
  557. }
  558. &:active, &.active {
  559. background-color: #597ef7;
  560. border-color: #597ef7;
  561. }
  562. }
  563. .ant-btn-primary.button-purple {
  564. background-color: #722ED1;
  565. border-color: #722ED1;
  566. margin: 0 5px;
  567. font-size: 12px;
  568. &:hover, &:focus {
  569. background-color: #9254de;
  570. border-color: #9254de;
  571. }
  572. &:active, &.active {
  573. background-color: #531dab;
  574. border-color: #531dab;
  575. }
  576. }
  577. .ant-btn-primary.button-grey {
  578. background-color: #82848a;
  579. border-color: #82848a;
  580. margin: 0 5px;
  581. font-size: 12px;
  582. &:hover, &:focus {
  583. background-color: #909399;
  584. border-color: #909399;
  585. }
  586. &:active, &.active {
  587. background-color: #c8c9cc;
  588. border-color: #c8c9cc;
  589. }
  590. }
  591. // btn-link
  592. .ant-btn-link.button-primary {
  593. color: #39f;
  594. &:hover, &:focus {
  595. color: #52a6fb;
  596. }
  597. &:active, &.active {
  598. color: #3d80bf;
  599. }
  600. }
  601. .ant-btn-link.button-info {
  602. color: #2db7f5;
  603. &:hover, &:focus {
  604. color: #32c8f5;
  605. }
  606. &:active, &.active {
  607. color: #27a3d8;
  608. }
  609. }
  610. .ant-btn-link.button-success {
  611. color: #0c6;
  612. &:hover, &:focus {
  613. color: #01dc8c;
  614. }
  615. &:active, &.active {
  616. color: #00af57;
  617. }
  618. }
  619. .ant-btn-link.button-warning {
  620. color: #e89105;
  621. &:hover, &:focus {
  622. color: #ffb60a;
  623. }
  624. &:active, &.active {
  625. color: #dd8500;
  626. }
  627. }
  628. .ant-btn-link.button-error {
  629. color: #f30;
  630. &:hover, &:focus {
  631. color: #ff6666;
  632. }
  633. &:active, &.active {
  634. color: #d62a00;
  635. }
  636. }
  637. .ant-btn-link.button-geekblue {
  638. color: #2F54EB;
  639. &:hover, &:focus {
  640. color: #1d39c4;
  641. }
  642. &:active, &.active {
  643. color: #597ef7;
  644. }
  645. }
  646. .ant-btn-link.button-purple {
  647. color: #722ED1;
  648. &:hover, &:focus {
  649. color: #9254de;
  650. }
  651. &:active, &.active {
  652. color: #531dab;
  653. }
  654. }
  655. .ant-btn-link.button-grey {
  656. color: #82848a;
  657. &:hover, &:focus {
  658. color: #909399;
  659. }
  660. &:active, &.active {
  661. color: #c8c9cc;
  662. }
  663. }