global.less 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645
  1. @import './index.less';
  2. body {
  3. &.colorWeak {
  4. filter: invert(80%);
  5. }
  6. &.userLayout {
  7. overflow: auto;
  8. }
  9. .ant-modal-content{
  10. .ant-form-item{
  11. margin-bottom: 10px;
  12. }
  13. }
  14. }
  15. .layout.ant-layout {
  16. height: auto;
  17. overflow-x: hidden;
  18. &.mobile,
  19. &.tablet {
  20. .ant-layout-content {
  21. .content {
  22. margin: 12px 0 0;
  23. }
  24. }
  25. /**
  26. * ant-table-wrapper
  27. * 覆盖的表格手机模式样式,如果想修改在手机上表格最低宽度,可以在这里改动
  28. */
  29. .ant-table-wrapper {
  30. .ant-table-content {
  31. overflow-y: auto;
  32. }
  33. .ant-table-body {
  34. min-width: 800px;
  35. }
  36. }
  37. .topmenu {
  38. /* 必须为 topmenu 才能启用流式布局 */
  39. &.content-width-Fluid {
  40. .header-index-wide {
  41. margin-left: 0;
  42. }
  43. }
  44. }
  45. }
  46. &.mobile {
  47. .sidemenu {
  48. .ant-header-fixedHeader {
  49. &.ant-header-side-opened,
  50. &.ant-header-side-closed {
  51. width: 100%;
  52. }
  53. }
  54. }
  55. }
  56. &.ant-layout-has-sider {
  57. flex-direction: row;
  58. }
  59. .trigger {
  60. font-size: 20px;
  61. line-height: 44px;
  62. padding: 0 24px;
  63. cursor: pointer;
  64. transition: color 0.3s;
  65. &:hover {
  66. background: rgba(0, 0, 0, 0.025);
  67. }
  68. }
  69. .topmenu {
  70. .ant-header-fixedHeader {
  71. position: fixed;
  72. top: 0;
  73. right: 0;
  74. z-index: 9;
  75. width: 100%;
  76. transition: width 0.2s;
  77. &.ant-header-side-opened {
  78. width: 100%;
  79. }
  80. &.ant-header-side-closed {
  81. width: 100%;
  82. }
  83. }
  84. .ant-header-multiTab{
  85. margin: auto;
  86. }
  87. .ant-header-fixedMultiTab{
  88. position: fixed;
  89. z-index: 8;
  90. width: 100%;
  91. top: 44px;
  92. right:0;
  93. margin: auto;
  94. }
  95. /* 必须为 topmenu 才能启用流式布局 */
  96. &.content-width-Fluid {
  97. .header-index-wide {
  98. max-width: unset;
  99. .header-index-left {
  100. flex: 1 1 1000px;
  101. .logo{
  102. margin:0 5px;
  103. }
  104. .ant-menu.ant-menu-horizontal{
  105. max-width: calc(100vw - 160px - 238px - 25px);
  106. flex: 1 1 calc(100vw - 160px - 238px - 25px);
  107. }
  108. }
  109. .header-index-right{
  110. margin-right:25px;
  111. }
  112. }
  113. .page-header-index-wide {
  114. max-width: unset;
  115. }
  116. }
  117. }
  118. .sidemenu {
  119. .ant-header-fixedHeader {
  120. position: fixed;
  121. top: 0;
  122. right: 0;
  123. z-index: 9;
  124. width: 100%;
  125. transition: width 0.2s;
  126. &.ant-header-side-opened {
  127. width: calc(100% - 160px);
  128. }
  129. &.ant-header-side-closed {
  130. width: calc(100% - 80px);
  131. }
  132. }
  133. .ant-header-multiTab{
  134. margin: auto;
  135. }
  136. .ant-header-fixedMultiTab{
  137. position: fixed;
  138. z-index: 8;
  139. width: 100%;
  140. top: 44px;
  141. right:0;
  142. margin: auto;
  143. &.ant-header-side-opened {
  144. width: calc(100% - 160px);
  145. }
  146. &.ant-header-side-closed {
  147. width: calc(100% - 80px);
  148. }
  149. }
  150. }
  151. .header {
  152. height: 44px;
  153. padding: 0 12px 0 0;
  154. background: #fff;
  155. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  156. position: relative;
  157. }
  158. .ant-layout-header{
  159. height: 44px;
  160. line-height: 44px;
  161. }
  162. .header,
  163. .top-nav-header-index {
  164. .user-wrapper {
  165. float: right;
  166. height: 100%;
  167. .action {
  168. cursor: pointer;
  169. padding: 0 12px;
  170. display: inline-block;
  171. transition: all 0.3s;
  172. height: 100%;
  173. color: rgba(0, 0, 0);
  174. &:hover {
  175. background: rgba(0, 0, 0, 0.025);
  176. }
  177. .avatar {
  178. margin: 20px 8px 20px 0;
  179. color: #1890ff;
  180. background: hsla(0, 0%, 100%, 0.85);
  181. vertical-align: middle;
  182. }
  183. .icon {
  184. font-size: 16px;
  185. padding: 4px;
  186. }
  187. }
  188. }
  189. &.dark {
  190. .user-wrapper {
  191. .action {
  192. color: rgba(255, 255, 255, 0.85);
  193. a {
  194. color: rgba(255, 255, 255, 0.85);
  195. }
  196. &:hover {
  197. background: rgba(255, 255, 255, 0.16);
  198. }
  199. }
  200. }
  201. }
  202. }
  203. &.mobile,
  204. &.tablet {
  205. .top-nav-header-index {
  206. .header-index-wide {
  207. .header-index-left {
  208. .trigger {
  209. color: rgba(255, 255, 255, 0.85);
  210. padding: 0 12px;
  211. }
  212. .logo.top-nav-header {
  213. flex: 0 0 36px;
  214. text-align: center;
  215. line-height: 38px;
  216. h1 {
  217. display: none;
  218. }
  219. }
  220. }
  221. }
  222. &.light {
  223. .header-index-wide {
  224. .header-index-left {
  225. .trigger {
  226. color: rgba(0, 0, 0);
  227. }
  228. }
  229. }
  230. //
  231. }
  232. }
  233. }
  234. &.tablet {
  235. // overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
  236. .top-nav-header-index {
  237. .header-index-wide {
  238. .header-index-left {
  239. .logo > a {
  240. overflow: hidden;
  241. text-overflow: ellipsis;
  242. white-space: nowrap;
  243. }
  244. }
  245. .ant-menu.ant-menu-horizontal {
  246. flex: 1 1 auto;
  247. white-space: normal;
  248. }
  249. }
  250. }
  251. }
  252. .top-nav-header-index {
  253. box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  254. position: relative;
  255. transition: background 0.3s, width 0.2s;
  256. .header-index-wide {
  257. max-width: 1200px;
  258. margin: auto;
  259. padding-left: 0;
  260. display: flex;
  261. height: 44px;
  262. .ant-menu.ant-menu-horizontal {
  263. max-width: 835px;
  264. flex: 0 1 835px;
  265. border: none;
  266. height: 44px;
  267. line-height: 44px;
  268. }
  269. .header-index-left {
  270. flex: 0 1 1000px;
  271. display: flex;
  272. .logo.top-nav-header {
  273. flex: 0 0 auto;
  274. width: auto;
  275. height: 44px;
  276. position: relative;
  277. line-height: 44px;
  278. transition: all 0.3s;
  279. overflow: hidden;
  280. img,
  281. svg {
  282. display: inline-block;
  283. vertical-align: middle;
  284. height: 42px;
  285. width: 42px;
  286. }
  287. h1 {
  288. color: #fff;
  289. display: inline-block;
  290. vertical-align: top;
  291. font-size: 12px;
  292. margin: 0 0 0 3px;
  293. font-weight: 400;
  294. }
  295. }
  296. }
  297. .header-index-right {
  298. flex: 0 0 238px;
  299. align-self: flex-end;
  300. height: 44px;
  301. overflow: hidden;
  302. .content-box {
  303. float: right;
  304. }
  305. }
  306. }
  307. &.light {
  308. background-color: #fff;
  309. .header-index-wide {
  310. .header-index-left {
  311. .logo {
  312. h1 {
  313. color: #002140;
  314. }
  315. }
  316. }
  317. }
  318. }
  319. }
  320. // 内容区
  321. .layout-content {
  322. margin: 24px 24px 0px;
  323. height: 100%;
  324. height: 64px;
  325. padding: 0 12px 0 0;
  326. }
  327. // footer
  328. .ant-layout-footer {
  329. padding: 0;
  330. }
  331. }
  332. .topmenu {
  333. .page-header-index-wide {
  334. max-width: 1200px;
  335. margin: 0 auto;
  336. }
  337. }
  338. // drawer-sider 自定义
  339. .ant-drawer.drawer-sider {
  340. .sider {
  341. box-shadow: none;
  342. }
  343. &.dark {
  344. .ant-drawer-content {
  345. background-color: rgb(0, 21, 41);
  346. }
  347. }
  348. &.light {
  349. box-shadow: none;
  350. .ant-drawer-content {
  351. background-color: #fff;
  352. }
  353. }
  354. .ant-drawer-body {
  355. padding: 0;
  356. }
  357. }
  358. // 菜单样式
  359. .sider {
  360. box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  361. position: relative;
  362. z-index: @ant-global-sider-zindex;
  363. min-height: 100vh;
  364. .ant-layout-sider-children {
  365. overflow-y: hidden;
  366. &:hover {
  367. overflow-y: auto;
  368. }
  369. }
  370. &.ant-fixed-sidemenu {
  371. position: fixed;
  372. height: 100%;
  373. }
  374. .logo {
  375. position: relative;
  376. height: 44px;
  377. padding-left: 10px;
  378. overflow: hidden;
  379. line-height: 44px;
  380. background: #002140;
  381. transition: all .3s;
  382. img,
  383. svg,
  384. h1 {
  385. display: inline-block;
  386. vertical-align: middle;
  387. }
  388. img,
  389. svg {
  390. height: 42px;
  391. width: 42px;
  392. }
  393. h1 {
  394. color: #fff;
  395. font-size: 16px;
  396. margin: 0 0 0 6px;
  397. font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  398. font-weight: 600;
  399. vertical-align: middle;
  400. }
  401. }
  402. &.ant-layout-sider-collapsed{
  403. .logo{
  404. // padding-left: 20px;
  405. }
  406. }
  407. &.light {
  408. background-color: #fff;
  409. box-shadow: 2px 0px 8px 0px rgba(29, 35, 41, 0.05);
  410. .logo {
  411. background: #fff;
  412. box-shadow: 1px 1px 0px 0px #e8e8e8;
  413. h1 {
  414. color: unset;
  415. }
  416. }
  417. .ant-menu-light {
  418. border-right-color: transparent;
  419. }
  420. }
  421. }
  422. // 外置的样式控制
  423. .user-dropdown-menu {
  424. span {
  425. user-select: none;
  426. }
  427. }
  428. .user-dropdown-menu-wrapper.ant-dropdown-menu {
  429. padding: 4px 0;
  430. .ant-dropdown-menu-item {
  431. // width: 160px;
  432. width: 100%;
  433. }
  434. .ant-dropdown-menu-item > .anticon:first-child,
  435. .ant-dropdown-menu-item > a > .anticon:first-child,
  436. .ant-dropdown-menu-submenu-title > .anticon:first-child .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
  437. min-width: 12px;
  438. margin-right: 8px;
  439. }
  440. }
  441. /*
  442. * The following styles are auto-applied to elements with
  443. * transition="page-transition" when their visibility is toggled
  444. * by Vue.js.
  445. *
  446. * You can easily play with the page transition by editing
  447. * these styles.
  448. */
  449. .vidio_cont .ant-modal-body {
  450. padding: 0;
  451. }
  452. .vidio_cont .ant-modal-close-x {
  453. width: 36px;
  454. height: 36px;
  455. text-align: center;
  456. line-height: 36px;
  457. color: #fff;
  458. background-color: rgba(0, 0, 0, 0.6);
  459. border-radius: 50%;
  460. position: absolute;
  461. top: 10px;
  462. right: 10px;
  463. }
  464. .page-transition-enter {
  465. opacity: 0;
  466. }
  467. .page-transition-leave-active {
  468. opacity: 0;
  469. }
  470. .page-transition-enter .page-transition-container,
  471. .page-transition-leave-active .page-transition-container {
  472. -webkit-transform: scale(1.1);
  473. transform: scale(1.1);
  474. }
  475. .setting-drawer-content{
  476. .ant-drawer-content{
  477. overflow: visible
  478. }
  479. }
  480. // 数据列表 样式
  481. .table-alert {
  482. margin-bottom: 16px;
  483. }
  484. // 内容样式
  485. .content {
  486. .table-operator {
  487. padding: 0 0 8px;
  488. button {
  489. margin-right: 8px;
  490. margin-left: 0;
  491. }
  492. }
  493. .table-operator-nobor{
  494. padding: 0 0 10px 0;
  495. button {
  496. margin-right: 5px;
  497. }
  498. }
  499. // 查询条件底部距离
  500. .searchBox{
  501. margin-bottom: 6px;
  502. &:first-child{
  503. .ant-card-body{
  504. padding: 10px 12px;
  505. }
  506. }
  507. }
  508. .searchBoxNormal{
  509. margin-bottom: 6px;
  510. &:first-child{
  511. .ant-card-body{
  512. padding: 10px 12px 0;
  513. }
  514. }
  515. }
  516. .flex-center{
  517. display: flex;
  518. align-items: center;
  519. }
  520. // 统计样式白底黑子
  521. .tongji-bar{}
  522. // 底部按钮浮动栏
  523. .affix-cont{
  524. z-index: 99;
  525. position: absolute;
  526. bottom: 0;
  527. left: 0;
  528. width: 100%;
  529. text-align: center;
  530. background-color: #fff;
  531. padding: 7px 0 4px;
  532. box-shadow: 0 0 20px #dcdee2;
  533. }
  534. }
  535. // 查询条件样式
  536. .table-page-search-wrapper {
  537. .ant-form.ant-form-inline .ant-form-item .ant-input, .ant-form.ant-form-inline .ant-form-item .ant-select-selection{
  538. border:0;
  539. box-shadow: none !important;
  540. }
  541. .ant-form.ant-form-inline .ant-form-item{
  542. border:1px solid #dadada;
  543. border-radius: 3px;
  544. overflow: hidden;
  545. margin-bottom: 10px!important;
  546. .ant-form-item-label{
  547. padding-left: 11px;
  548. padding-right: 0!important;
  549. }
  550. }
  551. .ant-input-group-addon{
  552. border: 0;
  553. }
  554. .table-page-search-submitButtons {
  555. margin-bottom: 9px;
  556. }
  557. }
  558. .table-page-search-wrapper {
  559. .ant-form-inline {
  560. .ant-form-item {
  561. display: flex;
  562. margin-bottom: 24px;
  563. margin-right: 0;
  564. .ant-form-item-control-wrapper {
  565. flex: 1 1;
  566. display: inline-block;
  567. vertical-align: middle;
  568. }
  569. > .ant-form-item-label {
  570. line-height: 32px;
  571. padding-right: 8px;
  572. width: auto;
  573. }
  574. .ant-form-item-control {
  575. height: 32px;
  576. line-height: 32px;
  577. }
  578. }
  579. }
  580. }