dialog.less 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844
  1. .modal {
  2. &.el-dialog {
  3. background: fade(#121d1c, 95);
  4. border: 1px solid fade(@green, 50);
  5. box-shadow: 0px 8px 17px 1px rgba(5, 187, 76, 0.3);
  6. &.el-dialog--center .el-dialog__body,
  7. .el-dialog__body {
  8. padding: 16px 24px;
  9. }
  10. &.hide-header {
  11. .el-dialog__header {
  12. border: none;
  13. .el-dialog__title {
  14. display: none;
  15. }
  16. }
  17. }
  18. }
  19. }
  20. .parcel-box {
  21. padding: 0 30px;
  22. }
  23. .title-select .el-select .el-input__inner {
  24. width: 133px;
  25. max-width: 190px;
  26. height: 25px;
  27. background: rgba(67, 81, 107, 0.2);
  28. border: 0px solid #2a374f;
  29. border-radius: 0px;
  30. font-size: 13px;
  31. color: #b3b3b3;
  32. }
  33. .title-select .el-input__suffix {
  34. display: none;
  35. }
  36. .footerButton {
  37. justify-content: right;
  38. .el-button:first-child {
  39. width: 108px;
  40. background-color: rgba(84, 183, 90, 0.16) !important;
  41. color: #b3b3b3;
  42. border-color: transparent;
  43. }
  44. .el-button:last-of-type {
  45. background-color: rgba(5, 187, 76, 0.3);
  46. border: 1px solid #3b6c53;
  47. color: #b3b3b3;
  48. font-size: 14px;
  49. border: none;
  50. width: 108px;
  51. min-height: 25px !important;
  52. &:hover {
  53. background-color: rgba(5, 187, 76, 0.6);
  54. color: #ffffff;
  55. }
  56. }
  57. }
  58. .el-overlay {
  59. ul li {
  60. list-style: none;
  61. }
  62. .el-drawer.rtl {
  63. height: 100%;
  64. background-color: #161816 !important;
  65. .el-drawer__header {
  66. font-size: 18px;
  67. color: #d8dde3;
  68. }
  69. .el-drawer__body {
  70. height: calc(100% - 70px);
  71. .drawer-form {
  72. display: flex;
  73. align-items: center;
  74. margin-bottom: 15px;
  75. }
  76. .table-wrapper {
  77. height: calc(100% - 70px - 33px);
  78. }
  79. .select-item {
  80. margin-right: 10px;
  81. white-space: nowrap;
  82. display: flex;
  83. align-items: center;
  84. }
  85. .btns {
  86. align-items: center;
  87. display: flex;
  88. .buttons {
  89. background-color: rgba(5, 187, 76, 0.2);
  90. border: 1px solid #3b6c53;
  91. color: #b3b3b3;
  92. font-size: 14px;
  93. &:hover,
  94. &.active {
  95. background-color: rgba(5, 187, 76, 0.5);
  96. color: #ffffff;
  97. }
  98. }
  99. }
  100. .el-pagination {
  101. display: flex;
  102. justify-content: flex-end;
  103. padding-bottom: 15px;
  104. padding-top: 15px;
  105. }
  106. }
  107. }
  108. .el-dialog {
  109. &:not(.cDialog) {
  110. background: #081410;
  111. border: 1px solid #083d22;
  112. border-top: 0px;
  113. box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.35);
  114. border-radius: 12px 12px 6px 6px;
  115. }
  116. }
  117. .el-dialog__header {
  118. padding: 20px 0 !important;
  119. // border-bottom: 1px solid #323b3c;
  120. background: url("~@/assets/imgs/dialog-title1.png") no-repeat;
  121. background-size: 100% 100%;
  122. background-position: center;
  123. }
  124. .dialog-title {
  125. text-align: center;
  126. font-size: 18px;
  127. font-family: Microsoft YaHei;
  128. font-weight: 400;
  129. color: #ffffff;
  130. }
  131. .el-dialog__headerbtn {
  132. &:hover,
  133. &:active {
  134. .el-dialog__close {
  135. color: #fff;
  136. }
  137. }
  138. }
  139. .el-checkbox__input.is-checked .el-checkbox__inner {
  140. border-color: #05bb4c !important;
  141. }
  142. .el-date-editor--daterange {
  143. background: transparent;
  144. border: 1px solid #2a374f;
  145. border-radius: 30px;
  146. height: 25px;
  147. .el-range-input {
  148. background: transparent;
  149. color: #fff;
  150. }
  151. .el-range-separator {
  152. width: 10%;
  153. color: #fff;
  154. position: relative;
  155. }
  156. }
  157. .el-tabs__item.is-active::after {
  158. content: "";
  159. display: block;
  160. width: 100%;
  161. height: 7px;
  162. border-bottom: 1px solid #05bb4c;
  163. border-left: 1px solid #05bb4c;
  164. border-right: 1px solid #05bb4c;
  165. position: absolute;
  166. bottom: 0;
  167. left: 0px;
  168. box-sizing: border-box;
  169. }
  170. .el-tabs__item.is-active {
  171. color: #05bb4c !important;
  172. background: linear-gradient(
  173. 0deg,
  174. rgb(0 199 80 / 80%),
  175. rgb(0 199 80 / 20%),
  176. rgb(0 199 80 / 0%)
  177. );
  178. }
  179. .card {
  180. position: fixed;
  181. top: 120px;
  182. right: 20px;
  183. width: 383px;
  184. background: rgba(0, 0, 0, 0.3);
  185. border: none;
  186. color: #fff;
  187. border-radius: 8px;
  188. padding: 24px 13px;
  189. }
  190. .content {
  191. height: 100%;
  192. height: calc(100% - 59px);
  193. }
  194. .home_card .header {
  195. margin-bottom: 10px;
  196. }
  197. .home_card .header img {
  198. margin-right: 10px;
  199. vertical-align: -7%;
  200. }
  201. .el-menu {
  202. z-index: 2002 !important;
  203. }
  204. .el-menu .el-menu-item:hover {
  205. background-color: transparent !important;
  206. color: rgba(28, 153, 255, 1);
  207. }
  208. .el-menu-item-group .el-menu-item.is-active {
  209. color: #999999 !important;
  210. }
  211. .el-menu .el-menu-item .router-link-exact-active,
  212. .el-sub-menu .el-sub-menu__title .router-link-active {
  213. color: rgba(28, 153, 255, 1) !important;
  214. }
  215. .el-sub-menu__title i,
  216. .el-menu-item a {
  217. font-size: 18px !important;
  218. color: rgba(186, 197, 216, 1) !important;
  219. }
  220. .el-menu-item a .icon-State-monitoring {
  221. font-size: 21px !important;
  222. }
  223. .el-menu-item:hover a {
  224. color: rgba(28, 153, 255, 1) !important;
  225. }
  226. .el-sub-menu.is-opened::before {
  227. content: "";
  228. position: absolute;
  229. display: block;
  230. width: 5px;
  231. height: 40px;
  232. background: rgba(28, 153, 255, 1);
  233. border-top-left-radius: 4px;
  234. border-bottom-left-radius: 4px;
  235. top: 8px;
  236. right: 0;
  237. }
  238. .el-input__inner {
  239. background: rgba(83, 98, 104, 0.2) !important;
  240. border-radius: 12.5px !important;
  241. border: 0px solid #3b6c53 !important;
  242. }
  243. .tanchuc .el-dropdown-menu__item:hover {
  244. background: rgba(0, 70, 199, 0.3) !important;
  245. }
  246. .station .el-input-number__decrease {
  247. background: rgba(67, 81, 107, 0.2) !important;
  248. border-radius: 13px 0px 0px 13px !important;
  249. }
  250. .station .el-input-number__increase {
  251. background: rgba(67, 81, 107, 0.2) !important;
  252. border-radius: 0px 13px 13px 0px !important;
  253. }
  254. .tables .el-switch__core {
  255. background: none;
  256. }
  257. .el-picker__poppe {
  258. z-index: 999;
  259. }
  260. .station .el-picker-panel__footer {
  261. background: blue !important;
  262. }
  263. .elDatePicker {
  264. /*border: 1px solid #094493 !important;*/
  265. border: none;
  266. }
  267. .metse .el-table th {
  268. background: rgba(83, 89, 104, 0.1) !important;
  269. }
  270. .tables .el-input-number__increase,
  271. .tables .el-input-number__decrease {
  272. border: none !important;
  273. }
  274. .tables .el-input-number__increase,
  275. .tables .el-input-number__decrease {
  276. background: rgba(67, 81, 107, 0.2);
  277. }
  278. .tables .el-input-number span {
  279. height: 14.5px !important;
  280. color: #999a9d;
  281. }
  282. .metse .el-input-number span {
  283. height: 12px !important;
  284. color: #999a9d;
  285. }
  286. .metse .el-input-number.is-controls-right .el-input-number__decrease {
  287. top: 16px;
  288. }
  289. .metse .el-input-number__increase {
  290. top: 3px;
  291. }
  292. .changeButton .el-button--default {
  293. background: rgba(0, 70, 199, 0.4) !important;
  294. border: none !important;
  295. color: #ffffff;
  296. }
  297. .changeButton .el-switch.is-disabled {
  298. background: red !important;
  299. }
  300. // .el-popper .el-menu--popup {
  301. // min-width: 140px !important;
  302. // /*padding: 20px 0!important;*/
  303. // }
  304. // .el-popper .el-menu--popup .el-menu-item-group .el-menu-item {
  305. // height: 35px !important;
  306. // line-height: 35px !important;
  307. // font-size: 13px !important;
  308. // }
  309. // .el-popper
  310. // .el-menu--popup
  311. // .el-menu-item-group
  312. // .router-link-active
  313. // .el-menu-item {
  314. // background: linear-gradient(91deg, #1c99ff, transparent) !important;
  315. // color: #fff !important;
  316. // }
  317. // .el-popper.is-pure .el-menu-item:hover {
  318. // background: linear-gradient(91deg, #1c99ff, transparent) !important;
  319. // color: #fff !important;
  320. // }
  321. // .el-popper.is-light {
  322. // color: #d1d1d1 !important;
  323. // background-color: rgb(0, 0, 0, 0.9) !important;
  324. // border-color: #555555 !important;
  325. // border-radius: unset;
  326. // }
  327. // .el-popper.is-light .el-popper__arrow::before {
  328. // background-color: rgb(0, 0, 0, 0.8) !important;
  329. // /*border-left: 1px solid #555555 !important;*/
  330. // /*border-bottom: 1px solid #555555 !important;*/
  331. // }
  332. // .el-popper.is-pure {
  333. // border-image: linear-gradient(
  334. // 180deg,
  335. // transparent,
  336. // #1a7ccd,
  337. // #1a7ccd,
  338. // transparent
  339. // )
  340. // 2 1;
  341. // border: 1px solid #002767;
  342. // background: linear-gradient(278deg, #002767, transparent) !important;
  343. // border-radius: 5px !important;
  344. // backdrop-filter: blur(5px);
  345. // }
  346. .el-dialog--center .el-dialog__body,
  347. .el-dialog__body {
  348. padding: 25px 24px;
  349. }
  350. .parcel-box .el-dialog__body {
  351. padding: 0px 15px;
  352. }
  353. .el-select .el-select__tags .el-tag {
  354. background-color: rgba(30, 90, 163, 0.5);
  355. color: #ffffff;
  356. }
  357. /* .el-icon-close {
  358. background-color: rgba(30,90,163, .5);
  359. } */
  360. .el-select .el-input__inner {
  361. width: 190px;
  362. max-width: 190px;
  363. // height: 25px;
  364. background: rgba(67, 81, 107, 0.2);
  365. border: 1px solid #2a374f;
  366. border-radius: 12.5px;
  367. font-size: 13px;
  368. color: #b3b3b3;
  369. }
  370. .title-select .el-select .el-input__inner {
  371. width: 133px;
  372. max-width: 190px;
  373. height: 25px;
  374. background: rgba(67, 81, 107, 0.2);
  375. border: 0px solid #2a374f;
  376. border-radius: 0px;
  377. font-size: 13px;
  378. color: #b3b3b3;
  379. }
  380. .title-select .el-input__suffix {
  381. display: none;
  382. }
  383. .station .el-input__inner {
  384. max-width: 190px;
  385. height: 25px;
  386. background: rgba(67, 81, 107, 0.2);
  387. border: 1px solid #2a374f;
  388. border-radius: 12.5px;
  389. font-size: 13px;
  390. color: #b3b3b3;
  391. width: 150px;
  392. }
  393. .search-input {
  394. width: 160px;
  395. }
  396. .search-input .el-date-editor {
  397. --el-date-editor-width: 120px;
  398. }
  399. .search-input .el-input__inner {
  400. max-width: 190px;
  401. height: 25px;
  402. background: rgba(67, 81, 107, 0.2);
  403. border: 1px solid #2a374f;
  404. border-radius: 12.5px;
  405. font-size: 13px;
  406. color: #b3b3b3;
  407. width: 150px;
  408. }
  409. .el-select .el-input__icon {
  410. height: 40px;
  411. position: relative;
  412. top: -7px;
  413. }
  414. .el-icon-full-screen {
  415. position: absolute;
  416. right: 20px;
  417. top: 10px;
  418. color: #909399;
  419. }
  420. .s {
  421. min-width: 300px !important;
  422. }
  423. .el-message--warning {
  424. background: #090e19 !important;
  425. box-shadow: 0 0 22px rgba(0, 70, 199, 0.2) inset !important;
  426. border: 1px solid #094493 !important;
  427. }
  428. .el-message--warning .el-message__content {
  429. color: #ffffff !important;
  430. }
  431. .el-message .el-icon-warning {
  432. font-size: 16px;
  433. color: #ffd02b !important;
  434. }
  435. .el-menu-item-group__title {
  436. padding: 0 !important;
  437. }
  438. .economicTable1 .has-gutter .el-table__cell {
  439. padding: 0 !important;
  440. }
  441. .economicTable1 .el-table__row .el-table__cell {
  442. padding: 5px 0 !important;
  443. }
  444. .el-table {
  445. font-family: "MicrosoftYaHei" !important;
  446. background-color: transparent !important;
  447. /*font-size: 14px !important;*/
  448. }
  449. .el-checkbox__inner {
  450. background-color: transparent !important;
  451. border-color: #959595 !important;
  452. }
  453. .el-checkbox__input.is-checked + .el-checkbox__label {
  454. color: rgba(255, 255, 255, 1) !important;
  455. }
  456. .el-checkbox__label {
  457. color: #959595 !important;
  458. font-size: 13px !important;
  459. }
  460. .el-checkbox__input {
  461. display: inline-block;
  462. }
  463. .el-checkbox__label {
  464. padding-left: 0;
  465. }
  466. .el-button.is-round {
  467. padding: 0px 30px !important;
  468. }
  469. .el-button {
  470. min-height: 30px !important;
  471. }
  472. /* .el-button--default {
  473. background-color: rgba(0, 70, 199, 0.2) !important;
  474. border: none !important;
  475. color: #B3B3B3 !important;
  476. } */
  477. .el-button--primary {
  478. background-color: rgba(0, 70, 199, 0.4);
  479. border: none !important;
  480. }
  481. .mentues .el-table__cell {
  482. padding: 0 !important;
  483. }
  484. .mentuese .el-table__fixed-header-wrapper .el-table__cell .cell {
  485. color: #ffffff !important;
  486. }
  487. .met .el-table__body {
  488. font-size: 13px !important;
  489. }
  490. .mentuese .cell {
  491. text-overflow: ellipsis !important;
  492. white-space: nowrap !important;
  493. }
  494. .mentuese .el-table__cell {
  495. padding: 0 !important;
  496. }
  497. .met .has-gutter .el-table__cell .cell {
  498. line-height: 50px;
  499. color: #ffffff !important;
  500. }
  501. .metse .el-table__body .cell {
  502. line-height: 36px !important;
  503. }
  504. .metse .el-table__fixed-header-wrapper .cell {
  505. line-height: 45px !important;
  506. }
  507. .metse .el-input--small .el-input__inner {
  508. height: 26px !important;
  509. line-height: 26px !important;
  510. }
  511. .mentuese .el-table__cell .cell {
  512. line-height: 50px;
  513. /*color: #FFFFFF;*/
  514. }
  515. /*.el-table__cell{*/
  516. /* color: ;*/
  517. /*}*/
  518. .el-switch__action {
  519. background: transparent !important;
  520. }
  521. .mentues .el-table__body .el-table__cell {
  522. padding: 5px 0 !important;
  523. }
  524. .el-dialog__header {
  525. font-size: 16px;
  526. color: #fff;
  527. }
  528. .el-select__popper.is-light {
  529. background: #141a25 !important;
  530. border: 1px solid #2a374f !important;
  531. border-radius: unset !important;
  532. /* top: 100px !important; */
  533. }
  534. // .el-dialog--center .el-dialog__body,
  535. // .el-dialog__body {
  536. // padding: 20px !important;
  537. // }
  538. .el-select-dropdown__item.hover,
  539. .el-select-dropdown__item:hover {
  540. background-color: rgba(0, 70, 199, 0.4) !important;
  541. color: #fff !important;
  542. }
  543. .el-select-dropdown__item.selected {
  544. color: #fff !important;
  545. font-weight: normal !important;
  546. }
  547. .el-select-dropdown__item {
  548. color: #b3b3b3 !important;
  549. height: 36px !important;
  550. line-height: 36px !important;
  551. font-size: 12px !important;
  552. }
  553. .el-select__popper .el-popper__arrow::before {
  554. display: none;
  555. }
  556. .table-fixed .el-table__fixed-left {
  557. height: 100% !important;
  558. }
  559. .table-fixed .el-table__fixed {
  560. height: 100% !important;
  561. }
  562. .el-table__fixed-right::before,
  563. .el-table__fixed::before {
  564. background-color: transparent !important;
  565. }
  566. .is-opened .el-sub-menu__title i {
  567. color: rgba(28, 153, 255, 1) !important;
  568. }
  569. .el-tabs__nav-wrap::after {
  570. height: 1px !important;
  571. background-color: #3a3f43 !important;
  572. }
  573. .el-tabs__nav {
  574. padding-bottom: 10px;
  575. }
  576. .el-tabs__item {
  577. height: 28px !important;
  578. line-height: 28px !important;
  579. padding: 0 17px !important;
  580. margin-right: 30px;
  581. color: #b3b3b3 !important;
  582. }
  583. .el-tabs__nav-wrap {
  584. padding: 0 25px;
  585. }
  586. .el-tabs__header::before,
  587. .el-tabs__header::after {
  588. content: "";
  589. display: inline-block;
  590. width: 10px;
  591. height: 1px;
  592. background: #ffffff;
  593. position: absolute;
  594. bottom: 0px;
  595. z-index: 99;
  596. }
  597. .el-tabs__header::after {
  598. right: 0;
  599. }
  600. .el-tabs__active-bar {
  601. height: 1px !important;
  602. }
  603. // .el-dialog__body::before,
  604. // .el-dialog__body::after {
  605. // content: "";
  606. // display: block;
  607. // width: 5px;
  608. // height: 5px;
  609. // border-radius: 50%;
  610. // background: rgba(16, 73, 126, 1);
  611. // position: absolute;
  612. // }
  613. // .el-dialog__body::before {
  614. // bottom: 9px;
  615. // left: 9px;
  616. // }
  617. // .el-dialog__body::after {
  618. // bottom: 9px;
  619. // right: 9px;
  620. // }
  621. // .dialog-title {
  622. // position: relative;
  623. // }
  624. // .dialog-title .dialog-title-img {
  625. // position: absolute;
  626. // top: -25px;
  627. // }
  628. // .dialog-title .title {
  629. // margin-left: 20px;
  630. // color: #1c99ff;
  631. // // color: #05bb4c;
  632. // }
  633. .dialog-body {
  634. position: relative;
  635. }
  636. .dialog-body .dialog-img {
  637. position: absolute;
  638. right: -20px;
  639. bottom: 50px;
  640. }
  641. .economicTable .el-table__header-wrapper tr {
  642. background: rgba(83, 89, 104, 0.3) !important;
  643. }
  644. .economicTable .el-table__header-wrapper tr th {
  645. vertical-align: top !important;
  646. }
  647. .economicTable .el-table__header-wrapper tr .cell {
  648. color: #b3b3b3;
  649. font-family: MicrosoftYaHei;
  650. font-size: 14px;
  651. }
  652. .economicTable .el-table__body-wrapper tr .cell {
  653. color: #d8d8d9;
  654. font-family: ArialMT;
  655. font-size: 13px;
  656. height: 25px !important;
  657. }
  658. .economicTable .el-table__body-wrapper tr .cell .el-checkbox {
  659. height: 25px;
  660. }
  661. .el-message-box {
  662. background: fade(#121d1c, 95);
  663. border: 1px solid fade(@green, 50);
  664. box-shadow: 0px 8px 17px 1px rgba(5, 187, 76, 0.3);
  665. }
  666. .el-message-box__header {
  667. .el-message-box__title {
  668. color: @gray;
  669. }
  670. }
  671. .el-message-box__content {
  672. color: @white;
  673. }
  674. .el-message-box__btns {
  675. .el-button {
  676. height: 30px;
  677. flex: 0 0 auto;
  678. background: transparent;
  679. border: 1px solid @gray;
  680. padding: 0 1.481vh;
  681. color: @gray;
  682. font-size: 1.296vh;
  683. cursor: pointer;
  684. &.el-button--primary {
  685. border-color: @green;
  686. color: @green;
  687. background: fade(@green, 20);
  688. }
  689. }
  690. }
  691. }
  692. .el-message {
  693. &.el-message--info {
  694. border-color: @gray;
  695. background-color: fade(@gray, 20);
  696. color: @gray;
  697. }
  698. &.el-message--success {
  699. border-color: @green;
  700. background-color: fade(@green, 20);
  701. color: @green;
  702. }
  703. &.el-message--warning {
  704. border-color: @yellow;
  705. background-color: fade(@yellow, 20);
  706. color: @yellow;
  707. }
  708. &.el-message--error {
  709. border-color: @red;
  710. background-color: fade(@red, 20);
  711. color: @red;
  712. }
  713. }