阅行客电子档案
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1175 lines
24 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. .head-container {
  2. // padding: 20px;
  3. .filter-item {
  4. // display: inline-block;
  5. vertical-align: middle;
  6. margin-right: 10px;
  7. input {
  8. @include input_style;
  9. background-color: transparent;
  10. height: 30px;
  11. line-height: 30px;
  12. }
  13. .iconfont{
  14. line-height: 30px;
  15. }
  16. }
  17. .el-select__caret.el-input__icon.el-icon-arrow-up{
  18. line-height: 30px;
  19. }
  20. .date-item {
  21. display: inline-block;
  22. vertical-align: middle;
  23. @include bg_color;
  24. @include input_style;
  25. margin-right: 10px;
  26. height: 30px !important;
  27. width: 230px !important;
  28. }
  29. }
  30. .el-tabs{
  31. margin-bottom: 25px;
  32. }
  33. // xu
  34. // 四角边线
  35. // 有左右分区时
  36. .container-main{
  37. display: flex;
  38. justify-content: space-between;
  39. margin-left: 0 !important;
  40. margin-right: 0 !important;
  41. }
  42. .container-left{
  43. // margin-right: 20px;
  44. // @include box_padding;
  45. }
  46. .container-left,
  47. .container-right,
  48. .container-wrap,
  49. .el-card,
  50. .header-container-wrap{
  51. position: relative;
  52. min-height: 100%;
  53. @include user_cont;
  54. min-height: calc(100vh - 190px);
  55. &::before,
  56. &::after{
  57. content: "";
  58. position: absolute;
  59. width: 17px;
  60. height: 17px;
  61. z-index: 99;
  62. }
  63. &::before{
  64. top: -1px;
  65. left: -1px;
  66. @include before_line_color;
  67. }
  68. &::after{
  69. right: -1px;
  70. bottom: -1px;
  71. @include after_line_color;
  72. }
  73. }
  74. .el-card,
  75. .container-left{
  76. background-color: transparent;
  77. min-height: auto;
  78. border-radius: 0;
  79. overflow: visible;
  80. .el-card__header{
  81. background-color: #02255F;
  82. border-bottom: none;
  83. .role-span{
  84. color: #fff;
  85. }
  86. }
  87. .el-card__body{
  88. padding: 0;
  89. .head-container{
  90. padding: 0;
  91. }
  92. }
  93. .crud-opts{
  94. justify-content: center;
  95. padding: 20px 0 !important;
  96. border-bottom: 1px solid #113D72;
  97. }
  98. .el-tree{
  99. margin: 20px 0;
  100. }
  101. }
  102. // xu el-button
  103. .head-search{
  104. display: flex;
  105. justify-content: flex-start;
  106. margin-bottom: 20px;
  107. .el-button{
  108. margin-left: 0;
  109. background-color: $desPreviewColor;
  110. }
  111. }
  112. .el-button,
  113. .el-button--info.is-plain{
  114. font-size: 14px;
  115. background-color: transparent;
  116. @include elButton-style;
  117. }
  118. .el-button.is-disabled,
  119. .el-button.is-disabled:hover,
  120. .el-button.is-disabled:focus{
  121. @include elButton-disabled-style;
  122. }
  123. .el-button:hover,
  124. .el-button:focus,
  125. .el-button--info.is-plain:hover,
  126. .el-button--info.is-plain:focus{
  127. @include elButton-hover-style;
  128. }
  129. .el-button--mini{
  130. padding: 7px 10px;
  131. }
  132. .el-message-box,
  133. .el-popover{
  134. .el-button{
  135. border-color: #dcdfe6;
  136. color: #606266;
  137. }
  138. .el-button:focus,
  139. .el-button:hover {
  140. color: #1890ff;
  141. border-color: #badeff;
  142. background-color: #e8f4ff;
  143. }
  144. .el-button--primary,
  145. .el-button--primary:focus,
  146. .el-button--primary:hover {
  147. background: #46a6ff;
  148. border-color: #46a6ff;
  149. color: #fff;
  150. }
  151. }
  152. .header-container-wrap{
  153. min-height: auto;
  154. }
  155. .right-top-line,
  156. .left-bottom-line,
  157. .right-bottom-line{
  158. display: block;
  159. position: absolute;
  160. width: 17px;
  161. height: 17px;
  162. z-index: 99;
  163. }
  164. .left-bottom-line{
  165. bottom: -1px;
  166. left: -1px;
  167. @include left_bottom_line_color;
  168. }
  169. .right-top-line{
  170. right: -1px;
  171. top: -1px;
  172. @include right_top_line_color;
  173. }
  174. .right-bottom-line{
  175. right: -1px;
  176. bottom: -1px;
  177. @include after_line_color;
  178. }
  179. .el-tree{
  180. background: transparent !important;
  181. .el-tree-node:focus>.el-tree-node__content {
  182. background-color: transparent !important;
  183. }
  184. .is-current>.el-tree-node__content {
  185. @include tree_active;
  186. }
  187. .el-tree-node__content{
  188. height: 40px;
  189. @include tree_style;
  190. background-color: transparent;
  191. .el-tree-node__label{
  192. font-size: 16px;
  193. font-weight: 600;
  194. }
  195. &:hover{
  196. @include tree_hover;
  197. }
  198. }
  199. .el-tree-node__expand-icon{
  200. font-size: 16px;
  201. @include tree_font_color;
  202. }
  203. .el-tree-node__children{
  204. padding: 0 18px;
  205. .el-tree-node__content{
  206. @include tree_children_padding;
  207. height: 30px;
  208. }
  209. .el-tree-node__label{
  210. @include tree_children_font;
  211. font-size: 14px;
  212. font-weight: normal;
  213. }
  214. }
  215. }
  216. .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  217. @include tree_hover;
  218. }
  219. .el-tree .el-tree-node__children .is-current .el-tree-node__label{
  220. @include tree_active;
  221. }
  222. .el-date-editor .el-range-input{
  223. background: transparent;
  224. @include tree_font_color;
  225. }
  226. // table
  227. .el-table{
  228. background: transparent;
  229. tr{
  230. background: transparent;
  231. .el-table__cell{
  232. height: 40px;
  233. background-color: transparent;
  234. }
  235. }
  236. .el-table__header-wrapper,
  237. .el-table__header{
  238. th.el-table__cell{
  239. @include elTable-style;
  240. border-bottom: none;
  241. &>.cell{
  242. font-size: 14px;
  243. @include elTable-font-style;
  244. }
  245. }
  246. }
  247. .el-table__body-wrapper,
  248. .el-table__fixed-right{
  249. td.el-table__cell{
  250. @include elTable-td-font-style;
  251. font-size: 14px;
  252. padding: 5px 0;
  253. }
  254. }
  255. &::before,
  256. .el-table--group::after,
  257. .el-table--border::after,
  258. .el-table__fixed::before,
  259. .el-table__fixed-right::before{
  260. background-color: transparent;
  261. }
  262. .el-checkbox__input.is-checked .el-checkbox__inner{
  263. @include checkbox-active-style;
  264. }
  265. .el-checkbox__input.is-disabled .el-checkbox__inner{
  266. @include checkbox-disabled-style;
  267. }
  268. .el-table__body tr.hover-row > td,
  269. .el-table__body tr.hover-row.current-row > td,
  270. .el-table__body tr.hover-row.el-table__row--striped > td,
  271. .el-table__body tr.hover-row.el-table__row--striped.current-row > td {
  272. @include elTable-hover-style;
  273. .el-checkbox__input.is-checked .el-checkbox__inner{
  274. @include checkbox-active-style;
  275. }
  276. }
  277. .el-button{
  278. padding: 7px 15px;
  279. }
  280. .el-button--primary {
  281. background-color: #1890ff;
  282. border-color: #1890ff;
  283. }
  284. .el-button--danger {
  285. background-color: #ff4949;
  286. border-color: #ff4949;
  287. }
  288. .el-button.is-disabled,
  289. .el-button.is-disabled:hover,
  290. .el-button.is-disabled:focus{
  291. color: #fff;
  292. background-color: #ffa4a4;
  293. border-color: #ffa4a4;
  294. }
  295. }
  296. .el-table__body tr.el-table__row:hover>td.el-table__cell,
  297. .el-table__body tr.el-table__row:focus>td.el-table__cell,
  298. .el-table__body tr.current-row:hover>td.el-table__cell,
  299. .el-table__body tr.current-row:focus>td.el-table__cell{
  300. @include elTable-hover-style;
  301. .el-checkbox__input.is-checked .el-checkbox__inner{
  302. @include checkbox-active-style;
  303. }
  304. }
  305. .el-table__body tr.current-row>td.el-table__cell{
  306. background-color: transparent;
  307. }
  308. .el-checkbox__inner{
  309. background: transparent;
  310. @include checkbox-style;
  311. }
  312. .el-icon-arrow-right:before{
  313. color: #fff;
  314. }
  315. .el-picker-panel__icon-btn:before{
  316. color: #303133;
  317. }
  318. // 分页
  319. .el-pagination{
  320. display: flex;
  321. justify-content: flex-end;
  322. // padding: 2px 10px;
  323. margin: 64px 0 10px 0 !important;
  324. .el-pagination__total{
  325. color: $mainColor;
  326. }
  327. button{
  328. height: 24px;
  329. line-height: 24px;
  330. background-color: transparent;
  331. &:disabled{
  332. background-color: transparent;
  333. }
  334. }
  335. .el-pager li{
  336. min-width: 24px;
  337. height: 24px;
  338. line-height: 24px;
  339. color: $mainColor;
  340. background-color: transparent;
  341. }
  342. .el-pager li.active{
  343. color: #fff;
  344. background-color: #2072D2;
  345. }
  346. .el-select .el-input .el-input__inner{
  347. background-color: transparent;
  348. color: $mainColor;
  349. border-color: $mainColor;
  350. }
  351. .el-icon-arrow-right:before{
  352. color: $mainColor;
  353. }
  354. .btn-prev,
  355. .btn-next{
  356. color: $mainColor;
  357. background-color: transparent;
  358. }
  359. .el-select .el-input .el-select__caret{
  360. color: $mainColor;
  361. }
  362. }
  363. // 弹框
  364. .el-dialog{
  365. position: relative;
  366. position: fixed;
  367. width: 620px;
  368. padding: 2px;
  369. left: 50%;
  370. top: 50%;
  371. transform: translate(-50%, -50%);
  372. margin-top: 2vh !important;
  373. background: linear-gradient(135deg, transparent 10px, $mainColor 0) top left,
  374. linear-gradient(-135deg, transparent 10px, $mainColor 0) top right,
  375. linear-gradient(-45deg, transparent 10px, $mainColor 0) bottom right,
  376. linear-gradient(45deg, transparent 10px, $mainColor 0) bottom left;
  377. background-size: 50% 50%;
  378. background-repeat: no-repeat;
  379. &::before,
  380. &::after,
  381. .dialog-right-top,
  382. .dialog-left-bottom{
  383. position: absolute;
  384. content: "";
  385. width: 134px;
  386. height: 63px;
  387. z-index: 99;
  388. }
  389. &::before{
  390. left: -6px;
  391. top: -6px;
  392. background: url(~@/assets/images/dialog_left_top.png) no-repeat;
  393. background-size: contain;
  394. }
  395. &::after{
  396. right: -18px;
  397. bottom: -7px;
  398. background: url(~@/assets/images/dialog_right_bottom.png) no-repeat;
  399. background-size: contain;
  400. }
  401. .dialog-right-top{
  402. right: -23px;
  403. top: -6px;
  404. background: url(~@/assets/images/dialog_right_top.png) no-repeat;
  405. background-size: contain;
  406. }
  407. .dialog-left-bottom{
  408. left: -6px;
  409. bottom: -7px;
  410. background: url(~@/assets/images/dialog_left_bottom.png) no-repeat;
  411. background-size: contain;
  412. }
  413. .el-dialog__header{
  414. position: absolute;
  415. top: -40px;
  416. left: 50%;
  417. width: 360px;
  418. padding: 0;
  419. transform: translateX(-50%);
  420. &::before{
  421. position: absolute;
  422. left: -23px;
  423. top: 0;
  424. content: "";
  425. width: 23px;
  426. height: 42px;
  427. background: url(~@/assets/images/dialog_left.png) no-repeat;
  428. background-size: cover;
  429. }
  430. &::after{
  431. position: absolute;
  432. right: -23px;
  433. top: 0;
  434. content: "";
  435. width: 23px;
  436. height: 42px;
  437. background: url(~@/assets/images/dialog_right.png) no-repeat;
  438. background-size: cover;
  439. }
  440. .el-dialog__title{
  441. display: block;
  442. font-size: 18px;
  443. font-weight: bold;
  444. line-height: 38px;
  445. color: #fff;
  446. text-align: center;
  447. background-color: $boxBg;
  448. border-top: 2px solid $mainColor;
  449. border-bottom: 2px solid $mainColor;
  450. }
  451. .el-dialog__headerbtn{
  452. top: 4px;
  453. right: -160px;
  454. }
  455. .el-dialog__close{
  456. font-family: "iconfont" !important;
  457. font-style: normal;
  458. -webkit-font-smoothing: antialiased;
  459. -moz-osx-font-smoothing: grayscale;
  460. font-size: 24px;
  461. color: $mainColor;
  462. &::before{
  463. content: "\e60c";
  464. }
  465. }
  466. }
  467. .el-dialog__body{
  468. width: 100%;
  469. background-color: $boxBg;
  470. // border: 2px solid $mainColor;
  471. // min-height: 400px;
  472. // background: linear-gradient(135deg, transparent 12px, $boxBg 0) top left,
  473. // linear-gradient(-135deg, transparent 12px, $boxBg 0) top right,
  474. // linear-gradient(-45deg, transparent 12px, $boxBg 0) bottom right,
  475. // linear-gradient(45deg, transparent 12px, $boxBg 0) bottom left;
  476. // background-size: 50% 50%;
  477. // background-repeat: no-repeat;
  478. // box-shadow: inset 0px 0px 8px 1px rgba(51, 156, 255, 0.6);
  479. }
  480. .dialog-footer{
  481. margin: 30px auto 0 auto;
  482. text-align: center;
  483. .el-button{
  484. font-size: 16px;
  485. padding: 8px 28px;
  486. }
  487. .el-button--primary{
  488. background-color: $desPreviewColor;
  489. }
  490. }
  491. }
  492. .el-dialog,
  493. .right-preview{
  494. .el-form{
  495. .el-form-item__label{
  496. color: $mainColor;
  497. }
  498. .el-input__inner{
  499. color: #fff;
  500. border: 1px solid $mainColor;
  501. background-color: transparent !important;
  502. }
  503. .vue-treeselect__control,
  504. .vue-treeselect__placeholder,
  505. .vue-treeselect__single-value{
  506. height: 28px;
  507. // line-height: 28px;
  508. color: #fff;
  509. }
  510. .vue-treeselect__control{
  511. border: 1px solid $mainColor;
  512. background-color: transparent;
  513. .vue-treeselect__control-arrow{
  514. color: $mainColor;
  515. }
  516. }
  517. .el-radio{
  518. color: #fff;
  519. }
  520. .el-textarea__inner{
  521. color: #fff;
  522. border: 1px solid $mainColor;
  523. background-color: transparent;
  524. }
  525. .el-input-number.is-controls-right[class*=small] [class*=increase],
  526. .el-input-number.is-controls-right[class*=small] [class*=decrease]{
  527. background-color: transparent;
  528. }
  529. .el-input-number__decrease,
  530. .el-input-number__increase{
  531. border-left-color: $mainColor;
  532. &>i{
  533. color: #fff;
  534. }
  535. }
  536. .el-input-number__increase{
  537. border-bottom-color: $mainColor;
  538. }
  539. .el-select .el-input .el-select__caret{
  540. color: $mainColor;
  541. }
  542. .vue-treeselect .vue-treeselect__control:focus,
  543. .vue-treeselect .vue-treeselect__control:hover{
  544. border-color: $mainColor !important;
  545. }
  546. .vue-treeselect.vue-treeselect--disabled .vue-treeselect__control,
  547. .el-input.is-disabled .el-input__inner,
  548. .el-textarea.is-disabled .el-textarea__inner{
  549. color: $desPreviewColor !important;
  550. border: none !important;
  551. background-color: #02255f!important;
  552. }
  553. }
  554. }
  555. // el-tree 最终节点不显示箭头
  556. .is-leaf::before {
  557. color: transparent;
  558. }
  559. .el-input__prefix{
  560. left: 8px;
  561. }
  562. // tab样式布局
  563. .tab-content{
  564. margin-top: 40px;
  565. border-top: none;
  566. background-color: #021941;
  567. &::before{
  568. display: none;
  569. }
  570. .tab-nav{
  571. display: flex;
  572. justify-content: flex-start;
  573. height: 41px;
  574. line-height: 41px;
  575. margin: -41px 0 30px -1px;
  576. font-size: 16px;
  577. font-weight: bold;
  578. color: #359AFC;
  579. border-bottom: 1px solid #113D72;
  580. li{
  581. position: relative;
  582. padding: 0 24px;
  583. margin: -1px 30px 0 0;
  584. letter-spacing: 2px;
  585. border-top: 1px solid #113D72;
  586. background-color: #021941;
  587. cursor: pointer;
  588. &::before,
  589. &::after{
  590. content: "";
  591. position: absolute;
  592. top: 0;
  593. width: 33px;
  594. height: 41px;
  595. }
  596. &::before{
  597. left: -15px;
  598. background: url(~@/assets/images/tab_left.png) no-repeat;
  599. background-size: contain;
  600. }
  601. &::after{
  602. right: -32px;
  603. background: url(~@/assets/images/tab_right.png) no-repeat;
  604. background-size: contain;
  605. }
  606. &:first-child{
  607. border-left: 1px solid #113d72;;
  608. &::before{
  609. width: 17px;
  610. height: 17px;
  611. left: -1px;
  612. top: -1px;
  613. border-left: 1px solid $mainColor;
  614. border-top: 1px solid $mainColor;
  615. }
  616. }
  617. &.active-tab-nav{
  618. color: #fff;
  619. &::before{
  620. background: url(~@/assets/images/tab_left_active.png) no-repeat;
  621. background-size: contain;
  622. }
  623. &::after{
  624. background: url(~@/assets/images/tab_right_active.png) no-repeat;
  625. background-size: contain;
  626. }
  627. i{
  628. display: block;
  629. position: absolute;
  630. bottom: -1px;
  631. left: 0;
  632. width: 100%;
  633. height: 1px;
  634. border-bottom: 1px solid #021941;
  635. }
  636. }
  637. }
  638. .tab-right-img{
  639. display: block;
  640. width: 93px;
  641. margin: 4px 0 0 -14px;
  642. background: url(~@/assets/images/tab_img.png) no-repeat;
  643. background-size: contain;
  644. }
  645. }
  646. .el-table__header{
  647. border-top: 1px solid #113D72;
  648. }
  649. }
  650. // 默认底图 - 暂时只有头像
  651. .user-img-cover{
  652. border-radius: 50%;
  653. background: url(~@/assets/images/avatar.png) no-repeat #fff;
  654. background-size: cover;
  655. overflow: hidden;
  656. }
  657. // 著录界面表单
  658. .des-form{
  659. .el-form-item__label{
  660. font-weight: normal;
  661. color: $desPreviewColor;
  662. }
  663. .el-input__inner{
  664. color: $desPreviewColor;
  665. background: #021941 !important;
  666. border: none;
  667. &::placeholder{
  668. color: $desPreviewColor !important;
  669. }
  670. &::-webkit-input-placeholder{
  671. color: $desPreviewColor !important;
  672. }
  673. }
  674. .el-input.is-disabled .el-input__inner{
  675. color: $desPreviewColor !important;
  676. border: none;
  677. background-color: #02255f!important;
  678. }
  679. .el-input__icon{
  680. color: $desPreviewColor !important;
  681. }
  682. .checkbox-item{
  683. height: 36px;
  684. line-height: 36px;
  685. text-align: right;
  686. .el-form-item__content{
  687. margin-left: 0 !important;
  688. }
  689. .el-checkbox__input.is-disabled .el-checkbox__inner{
  690. background-color: transparent;
  691. border-color: $mainColor;
  692. &::after{
  693. border-color: $desPreviewColor;
  694. }
  695. }
  696. span{
  697. color: $desPreviewColor;
  698. }
  699. }
  700. .input-num{
  701. display: flex;
  702. justify-content: flex-end;
  703. .el-input__inner{
  704. width: 50px;
  705. }
  706. .el-form-item__content{
  707. display: flex;
  708. justify-content: flex-start;
  709. margin-left: 0 !important;
  710. .el-input,
  711. .el-input-number--small{
  712. width: 60px;
  713. }
  714. .el-input-number.is-controls-right {
  715. .el-input-number__decrease,
  716. .el-input-number__increase{
  717. display: none;
  718. }
  719. .el-input__inner{
  720. padding-left: 0;
  721. padding-right: 0;
  722. }
  723. }
  724. }
  725. span{
  726. color: $desPreviewColor;
  727. line-height: 36px;
  728. }
  729. }
  730. }
  731. .setting-dialog{
  732. z-index: 100;
  733. position: relative;
  734. color: #fff;
  735. .des-form{
  736. width: 100% !important;
  737. margin-top: 0 !important;
  738. padding: 20px 38px 0 20px !important;
  739. background-color: transparent !important;
  740. .el-select,
  741. .el-input__inner{
  742. width: 100% !important;
  743. }
  744. .input-num{
  745. .el-input{
  746. margin-right: 10px !important;
  747. }
  748. }
  749. }
  750. }
  751. .preview-dialog{
  752. .el-dialog{
  753. width: 680px !important;
  754. .preview-content{
  755. max-height: calc(100vh - 330px) !important;
  756. overflow: hidden !important;
  757. overflow-y: auto !important;
  758. border: none !important;
  759. .el-textarea__inner{
  760. border: 1px solid $mainColor !important;
  761. background-color: transparent !important;
  762. }
  763. }
  764. .el-dialog__header{
  765. width: 420px !important;
  766. }
  767. }
  768. }
  769. .preview-dialog{
  770. .el-dialog__body{
  771. padding: 30px 0 !important;
  772. }
  773. }
  774. // 去除element ui 中el-input type=“number“的上下箭头
  775. input::-webkit-outer-spin-button,
  776. input::-webkit-inner-spin-button {
  777. -webkit-appearance: none !important;
  778. }
  779. input[type ='number'] {
  780. -moz-appearance: textfield !important;
  781. }
  782. // 弹框-删除等提示
  783. .setting-dialog{
  784. .dialog-delt{
  785. line-height: 26px;
  786. color: #fff;
  787. margin-bottom: 20px;
  788. }
  789. .delt-tip{
  790. margin-top: 10px;
  791. color: #EF3147;
  792. }
  793. }
  794. // alert 样式
  795. .el-message-box{
  796. position: relative;
  797. width: 588px;
  798. border: 2px solid $mainColor;
  799. border-bottom: none;
  800. border-radius: 4px 4px 0 0;
  801. background-color: $boxBg;
  802. overflow: visible;
  803. &::after{
  804. position: absolute;
  805. left: -2px;
  806. bottom: -30px;
  807. content: "";
  808. width: 589px;
  809. height: 30px;
  810. background: url(~@/assets/images/alert_bottom.png) no-repeat;
  811. background-size: contain;
  812. }
  813. .el-message-box__header{
  814. padding: 18px 60px;
  815. background-color: $mainColor;
  816. .el-message-box__title{
  817. font-weight: bold;
  818. color: #fff;
  819. }
  820. .el-message-box__headerbtn{
  821. top: -36px;
  822. right: -16px;
  823. }
  824. .el-icon-close{
  825. font-family: "iconfont" !important;
  826. font-style: normal;
  827. -webkit-font-smoothing: antialiased;
  828. -moz-osx-font-smoothing: grayscale;
  829. font-size: 24px;
  830. color: $mainColor;
  831. &::before{
  832. content: "\E60C";
  833. }
  834. }
  835. }
  836. .el-message-box__content{
  837. height: 110px;
  838. padding: 35px 60px 15px 60px;
  839. color: #fff;
  840. }
  841. }
  842. .el-message-box .el-button,
  843. .el-popover .el-button{
  844. color: #fff;
  845. border-color: $mainColor;
  846. background-color: transparent;
  847. }
  848. .el-message-box .el-button:hover,
  849. .el-popover .el-button:focus{
  850. color: #fff;
  851. background-color: #02255F;
  852. border-color: $mainColor;
  853. }
  854. .el-message-box .el-button--primary,
  855. .el-message-box .el-button--primary:focus,
  856. .el-message-box .el-button--primary:hover {
  857. background: #46a6ff;
  858. border-color: #46a6ff;
  859. color: #fff;
  860. }
  861. .el-table__header-wrapper{
  862. @include elTable-style;
  863. }
  864. .svg-style{
  865. margin-right: 5px;
  866. }
  867. .svg-arc-style{
  868. margin-right: 10px;
  869. }
  870. .el-form-item__error--inline{
  871. margin-left: 0;
  872. vertical-align: top;
  873. }
  874. .inline-error-item .el-form-item__content{
  875. line-height: normal;
  876. margin-bottom: -15px;
  877. }
  878. .el-select-dropdown,
  879. .el-dropdown-menu{
  880. margin: 0;
  881. padding: 17px 0;
  882. @include dropdown_bg;
  883. border: none;
  884. }
  885. .el-dropdown-menu{
  886. top: 46px !important;
  887. }
  888. .el-select-dropdown__item{
  889. // color: $mainColor;
  890. @include icon_color;
  891. }
  892. .el-select-dropdown__item.hover,
  893. .el-select-dropdown__item:hover{
  894. // background-color: #13439E;
  895. @include dropdown_bg_hover;
  896. }
  897. .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
  898. background-color: transparent;
  899. color: #fff;
  900. }
  901. .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
  902. background-color: #13439E;
  903. color: #fff;
  904. }
  905. .el-popper[x-placement^=bottom] .popper__arrow{
  906. opacity: 0;
  907. }
  908. .el-popper[x-placement^=bottom] .popper__arrow::after{
  909. content: '';
  910. border: none;
  911. }
  912. .el-dropdown-menu .el-dropdown-menu__item{
  913. @include icon_color;
  914. }
  915. .el-dropdown-menu .el-dropdown-menu__item:hover{
  916. @include dropdown_bg_hover;
  917. }
  918. //vue-treeselect
  919. .vue-treeselect__multi-value-item{
  920. background:#13439E !important;
  921. border: none !important;
  922. }
  923. .vue-treeselect__multi-value-label{
  924. color: #fff;
  925. }
  926. .vue-treeselect__value-remove{
  927. border-left: none !important;
  928. }
  929. .vue-treeselect__value-remove > svg{
  930. color: #fff;
  931. }
  932. .el-dropdown-menu--small .el-dropdown-menu__item{
  933. font-size: 14px;
  934. line-height: 32px;
  935. padding: 0 32px;
  936. }
  937. .el-dropdown-menu--small .el-dropdown-menu__item.message-list-item{
  938. padding: 0;
  939. }
  940. .message-list-item a{
  941. display: flex;
  942. justify-content: space-between;
  943. padding: 0 20px;
  944. height: 40px;
  945. font-size: 14px;
  946. border-bottom: 1px solid #113D72;
  947. p, span, i{
  948. line-height: 40px;
  949. }
  950. p{
  951. width: 220px;
  952. overflow: hidden;
  953. text-overflow: ellipsis;
  954. display: -webkit-box;
  955. -webkit-line-clamp: 1;
  956. -webkit-box-orient: vertical;
  957. }
  958. span{
  959. display: block;
  960. }
  961. i.el-icon-arrow-right:before{
  962. font-size: 16px;
  963. color: $mainColor;
  964. }
  965. }
  966. .message-dropdown.el-popper[x-placement^=bottom]{
  967. .popper__arrow{
  968. width: 89px;
  969. height: 20px;
  970. top: -8px;
  971. background: url('~@/assets/images/pop-message.png') no-repeat !important;
  972. border: none;
  973. transform: rotate(0);
  974. }
  975. }
  976. // 库房空气质量监控
  977. .msg-list{
  978. position: absolute;
  979. top: 0;
  980. left: 0;
  981. width: calc(100vw - 800px);
  982. }
  983. .msg-list,
  984. .screen-env-list{
  985. display: flex;
  986. li{
  987. display: flex;
  988. flex-wrap: nowrap;
  989. align-items: center;
  990. align-content: center;
  991. justify-content: center;
  992. width: calc(100%/6);
  993. height: 80px;
  994. margin-right: 20px;
  995. background: url('~@/assets/images/data_border_default.png') no-repeat;
  996. background-size: 100% 100%;
  997. position: relative;
  998. &.li-warn{
  999. background: url('~@/assets/images/data_border_warn.png') no-repeat;
  1000. background-size: 100% 100%;
  1001. }
  1002. .msg-list-svg{
  1003. font-size: 36px;
  1004. display: inline-block;
  1005. height: 80px;
  1006. line-height: 80px;
  1007. margin-left: 30px;
  1008. }
  1009. .msg-pm{
  1010. font-size: 46px;
  1011. }
  1012. .msg-txt{
  1013. position: relative;
  1014. flex: 1;
  1015. height: 80px;
  1016. text-align: center;
  1017. }
  1018. .msg-list-unit{
  1019. position: absolute;
  1020. left: 0;
  1021. bottom: 12px;
  1022. width: 100%;
  1023. font-size: 14px;
  1024. color: $mainColor;
  1025. }
  1026. .msg-list-num{
  1027. color: #fff;
  1028. font-size: 26px;
  1029. position: absolute;
  1030. left: 0;
  1031. top: 14px;
  1032. width: 100%;
  1033. }
  1034. }
  1035. }
  1036. .el-tag--small{
  1037. margin: 2px 0;
  1038. border: 1px solid $mainColor;
  1039. background-color: #02255f;
  1040. }
  1041. .el-tag.el-tag--warning {
  1042. background-color: transparent;
  1043. border-color: #FD8042;
  1044. color: #FD8042;
  1045. }
  1046. .el-tag.el-tag--danger {
  1047. background-color: transparent;
  1048. border-color: #f65163;
  1049. color: #f65163;
  1050. }
  1051. // table 选中状态
  1052. .el-table__body .rowStyle>td {
  1053. color: #fff !important;
  1054. background-color: #13439E !important;
  1055. }
  1056. // 数据为空
  1057. .empty-main{
  1058. display: flex;
  1059. height: calc(100% - 40px);
  1060. flex-flow: column;
  1061. justify-content: center;
  1062. align-items: center;
  1063. .empty-img{
  1064. width: 140px !important;
  1065. height: 140px !important;
  1066. vertical-align: middle !important;
  1067. }
  1068. p{
  1069. font-size: 12px;
  1070. color: #999;
  1071. margin-top: -10px;
  1072. }
  1073. }
  1074. // 日期控件btn
  1075. .el-date-range-picker{
  1076. .el-picker-panel__footer .el-button{
  1077. border: 1px solid $mainColor;
  1078. color: $mainColor !important;
  1079. }
  1080. .el-picker-panel__footer .el-button:hover{
  1081. background-color: transparent;
  1082. }
  1083. .el-picker-panel__footer .el-button.is-plain {
  1084. background-color: #1890ff;
  1085. border-color: #1890ff;
  1086. color: #fff !important;
  1087. }
  1088. }
  1089. // 档案统计title
  1090. .table-title {
  1091. // color: #fff;
  1092. @include font-color($font-color-dark);
  1093. font-size: 16px;
  1094. text-align: center;
  1095. height: 40px;
  1096. line-height: 40px;
  1097. }
  1098. .warehouse-svg {
  1099. margin: 0 10px 1px 0;
  1100. }
  1101. .title-arrow {
  1102. position: relative;
  1103. display: inline-block;
  1104. &::before {
  1105. content: '';
  1106. width: 36px;
  1107. height: 12px;
  1108. position: absolute;
  1109. right: -60px;
  1110. top: 50%;
  1111. transform: translateY(-50%);
  1112. background: url('~@/assets/images/warehouse_arrow_left.png') no-repeat;
  1113. }
  1114. &::after {
  1115. content: '';
  1116. width: 36px;
  1117. height: 12px;
  1118. position: absolute;
  1119. left: -60px;
  1120. top: 50%;
  1121. transform: translateY(-50%);
  1122. background: url('~@/assets/images/warehouse_arrow_right.png') no-repeat;
  1123. }
  1124. }