Newer
Older
Nanping_sponge_GCYPG / src / assets / styles / cockpit.scss
@liyingjing liyingjing on 25 Oct 2023 27 KB 工程预评估
  1. #cockpit {
  2. width: 100%;
  3. // height: 852px;
  4. height: 100%;
  5. background: #081540;
  6. position: relative;
  7.  
  8. .entiretyBox {
  9. width: 100%;
  10. // height: calc(100vh - 64px);
  11. height: 100%;
  12. background: url('@/assets/images/home/bg.png') center no-repeat;
  13. position: relative;
  14. background-size: 100% 100%;
  15. }
  16.  
  17. .entiretyBox::before {
  18. // backdrop-filter: blur(5px);
  19. background-color: rgba(0, 0, 0, 0.5);
  20. content: '';
  21. display: block;
  22. height: 100%;
  23. left: 0;
  24. position: absolute;
  25. top: 0;
  26. width: 100%;
  27. z-index: 0;
  28. }
  29. }
  30.  
  31. .cockpit-box {
  32. width: 442px;
  33. height: calc(100% - 70px);
  34. // margin-top: 30px;
  35. position: absolute;
  36. z-index: 3;
  37. color: #fff;
  38. }
  39.  
  40. .cockpit-box-item {
  41. width: 100%;
  42. height: 33%;
  43. margin-bottom: 2%;
  44. .box-head {
  45. height: 37px;
  46. width: 100%;
  47. background: url('@/assets/images/cockpit/head-title.png') no-repeat;
  48. background-size: 100% 100%;
  49. // position: relative;
  50. display: flex;
  51. align-items: center;
  52. position: relative;
  53.  
  54. .head-title {
  55. width: 155px;
  56. text-align: center;
  57. font-size: 20px;
  58. color: #f6f9fe;
  59. font-weight: bold;
  60. font-style: italic;
  61. position: relative;
  62.  
  63. .right-word {
  64. position: absolute;
  65. font-size: 12px;
  66. top: 10px;
  67. right: -10px;
  68. }
  69.  
  70. .warn-right {
  71. position: absolute;
  72. top: -6px;
  73. left: 124px;
  74. width: 22px;
  75. height: 22px;
  76. background: #f55656;
  77. border-radius: 50%;
  78. text-align: center;
  79. }
  80. }
  81.  
  82. .head-right {
  83. cursor: pointer;
  84. position: absolute;
  85. font-size: 14px;
  86. top: 14px;
  87. right: 10px;
  88. color: #00d8ff;
  89. }
  90. }
  91.  
  92. .box-body {
  93. height: calc(100% - 37px);
  94. padding-left: 5px;
  95. position: relative;
  96.  
  97. // 气象预报
  98. .echart-title {
  99. height: 32px;
  100. display: flex;
  101. align-items: center;
  102. padding: 0 15px 0 10px;
  103. background: url('@/assets/images/cockpit/yujing_img.png') no-repeat;
  104. background-size: 100% 100%;
  105. }
  106.  
  107. .echart-word {
  108. padding-left: 10px;
  109. width: 87%;
  110. position: relative;
  111. .right-word {
  112. position: absolute;
  113. color: #28cfff;
  114. font-weight: bold;
  115. right: 5px;
  116. top: 50%;
  117. transform: translateY(-50%);
  118. }
  119. }
  120.  
  121. .echartitem {
  122. height: calc(100% - 32px);
  123. }
  124.  
  125. // 值班信息
  126. .box-body-zhiban {
  127. height: 90px;
  128. margin: 10px 0;
  129. display: flex;
  130. justify-content: space-between;
  131.  
  132. .zhiban-box {
  133. height: 100%;
  134. width: 49%;
  135. border-radius: 10px;
  136. overflow: hidden;
  137. background: linear-gradient(
  138. 90deg,
  139. rgba(17, 40, 94, 1),
  140. rgba(12, 29, 68, 0.58)
  141. );
  142. border-radius: 4px;
  143. display: flex;
  144.  
  145. .zhiban-left {
  146. width: 30px;
  147. height: 100%;
  148. color: #acf8ff;
  149. font-size: 18px;
  150. padding: 0 5px;
  151. display: flex;
  152. align-items: center;
  153. background: linear-gradient(
  154. 90deg,
  155. rgba(40, 82, 155.18),
  156. rgba(49, 98, 172, 0.18)
  157. );
  158. border-radius: 4px 0px 0px 4px;
  159. }
  160.  
  161. .zhiban-right {
  162. height: 100%;
  163. width: calc(100% - 30px);
  164. color: rgba(194, 220, 252, 1);
  165.  
  166. .right-box {
  167. height: 42%;
  168. padding: 0 10px;
  169. position: relative;
  170. display: flex;
  171. align-items: center;
  172.  
  173. .daowei {
  174. margin-left: 10px;
  175. padding: 1px;
  176. color: #4aebb0;
  177. border: 1px solid #4aebb0;
  178. background: #163b57;
  179. }
  180.  
  181. span {
  182. position: absolute;
  183. right: 10px;
  184. color: rgba(84, 165, 255, 1);
  185. }
  186. .right-line {
  187. position: absolute;
  188. bottom: 0;
  189. left: 3%;
  190. width: 94%;
  191. height: 1px;
  192. background: rgba(101, 136, 199, 0.5);
  193. }
  194.  
  195. .zhiban-phone {
  196. position: absolute;
  197. right: 10px;
  198. cursor: pointer;
  199. }
  200. }
  201. }
  202. }
  203. }
  204.  
  205. .zhiban-bottom {
  206. height: calc(100% - 110px);
  207. position: relative;
  208.  
  209. .left {
  210. height: 100%;
  211. width: 50%;
  212. }
  213.  
  214. .center {
  215. height: 100%;
  216. width: 34%;
  217. position: absolute;
  218. top: 50%;
  219. left: 50%;
  220. transform: translate(-50%, -50%);
  221. }
  222.  
  223. .zhiban-centername {
  224. position: absolute;
  225. left: 50%;
  226. transform: translateX(-50%);
  227. bottom: 12%;
  228. font-size: 12px;
  229. font-family: Source Han Sans CN;
  230. font-weight: 500;
  231. color: #3be3ff;
  232. }
  233.  
  234. .zhiban-bottom-box {
  235. cursor: pointer;
  236. position: absolute;
  237. color: rgba(131, 158, 203, 1);
  238. text-align: center;
  239. font-size: 14px;
  240. font-family: Adobe Heiti Std;
  241. }
  242.  
  243. .bengzhannumber {
  244. font-family: PangMenZhengDao;
  245. margin-top: 10px;
  246. color: #c3d4ee;
  247. font-size: 20px;
  248.  
  249. .bengzhansize {
  250. font-weight: 400;
  251. color: #1ed6c3;
  252. }
  253.  
  254. .weibanzheng {
  255. color: #ff5a5a;
  256. }
  257. }
  258.  
  259. .zhibanleft {
  260. top: 50%;
  261. transform: translateY(-50%);
  262. left: 30px;
  263. }
  264.  
  265. .zhibanright {
  266. top: 50%;
  267. transform: translateY(-50%);
  268. right: 30px;
  269. }
  270. }
  271.  
  272. // 案件信息 //排水管网
  273.  
  274. .table-head {
  275. display: flex;
  276. align-items: center;
  277. text-align: center;
  278. background: linear-gradient(180deg, rgb(7, 19, 58), rgba(37, 57, 109));
  279. height: 40px;
  280. border-bottom: 2px solid #6a8fe8;
  281.  
  282. .one {
  283. flex: 1;
  284. }
  285.  
  286. .two {
  287. flex: 1;
  288. }
  289. .three {
  290. flex: 1;
  291. }
  292. }
  293.  
  294. .box-table {
  295. width: 100%;
  296. height: 100%;
  297. overflow: hidden;
  298. overflow-y: auto;
  299. padding-top: 10px;
  300.  
  301. .table-item {
  302. height: 38px;
  303. background: rgba(26, 44, 92, 0.6);
  304. margin-bottom: 5px;
  305. display: flex;
  306. align-items: center;
  307. padding: 0 15px 0 10px;
  308. text-align: center;
  309. color: rgba(221, 229, 243, 1);
  310. cursor: pointer;
  311.  
  312. .one {
  313. flex: 1;
  314. }
  315.  
  316. .yellow {
  317. background: url('@/assets/images/cockpit/1.png') center no-repeat;
  318. background-size: 100% 100%;
  319. }
  320.  
  321. .green {
  322. background: url('@/assets/images/cockpit/2.png') center no-repeat;
  323. background-size: 100% 100%;
  324. }
  325.  
  326. .red {
  327. background: url('@/assets/images/cockpit/3.png') center no-repeat;
  328. background-size: 100% 100%;
  329. }
  330.  
  331. .two {
  332. flex: 2;
  333. }
  334. .three {
  335. flex: 6;
  336. text-align: left;
  337. overflow: hidden;
  338. text-overflow: ellipsis;
  339. white-space: nowrap;
  340. }
  341. .four {
  342. cursor: pointer;
  343. flex: 2;
  344. color: rgba(0, 216, 255, 1);
  345.  
  346. .radio-box {
  347. height: 20px;
  348. border: 1px solid rgba(0, 216, 255, 1);
  349. background: rgba(21, 55, 115);
  350. border-radius: 10px;
  351. }
  352.  
  353. .gray {
  354. height: 20px;
  355. border: 1px solid rgba(181, 181, 181, 1);
  356. background: rgba(35, 53, 92);
  357. color: rgba(181, 181, 181, 1);
  358. border-radius: 10px;
  359. }
  360. }
  361. }
  362.  
  363. .table-item:hover {
  364. background: rgba(26, 44, 92, 0.3);
  365. }
  366. }
  367.  
  368. // 排水管网
  369. .box-left {
  370. padding-top: 5px;
  371. width: 36px;
  372. height: 100%;
  373. color: rgba(246, 249, 254, 1);
  374.  
  375. .left-item {
  376. cursor: pointer;
  377. width: 32px;
  378. text-align: center;
  379. height: 30%;
  380. margin-top: 4px;
  381.  
  382. background: #0b2256;
  383. border-radius: 4px;
  384. display: flex;
  385. flex-direction: column;
  386. justify-content: center;
  387.  
  388. .one {
  389. margin-left: 5px;
  390. width: 22px;
  391. height: 22px;
  392. line-height: 22px;
  393. text-align: center;
  394. border-radius: 50%;
  395. }
  396. .yellow {
  397. background: #886d53;
  398. }
  399. .blue {
  400. background: #1b74c1;
  401. }
  402. .red {
  403. background: #7f395d;
  404. }
  405. }
  406.  
  407. .item-active {
  408. background: rgba(32, 96, 203, 0.5);
  409. border: 1px solid #009cff;
  410. }
  411. }
  412.  
  413. .box-right {
  414. .table-item {
  415. height: 38px;
  416. background: rgba(26, 44, 92, 0.6);
  417. margin-bottom: 5px;
  418. display: flex;
  419. align-items: center;
  420. padding: 0 15px 0 10px;
  421. text-align: center;
  422. color: rgba(221, 229, 243, 1);
  423.  
  424. .one {
  425. flex: 1;
  426. }
  427.  
  428. .yellow {
  429. background: url('@/assets/images/cockpit/1.png') center no-repeat;
  430. background-size: 100% 100%;
  431. }
  432.  
  433. .green {
  434. background: url('@/assets/images/cockpit/2.png') center no-repeat;
  435. background-size: 100% 100%;
  436. }
  437.  
  438. .red {
  439. background: url('@/assets/images/cockpit/3.png') center no-repeat;
  440. background-size: 100% 100%;
  441. }
  442.  
  443. .two {
  444. flex: 2;
  445. }
  446. .three {
  447. flex: 6;
  448. text-align: left;
  449. overflow: hidden;
  450. text-overflow: ellipsis;
  451. white-space: nowrap;
  452. }
  453. .four {
  454. cursor: pointer;
  455. flex: 2;
  456. color: rgba(0, 216, 255, 1);
  457.  
  458. .radio-box {
  459. height: 20px;
  460. border: 1px solid rgba(0, 216, 255, 1);
  461. background: rgba(21, 55, 115);
  462. border-radius: 10px;
  463. }
  464.  
  465. .gray {
  466. height: 20px;
  467. border: 1px solid rgba(181, 181, 181, 1);
  468. background: rgba(35, 53, 92);
  469. color: rgba(181, 181, 181, 1);
  470. border-radius: 10px;
  471. }
  472. }
  473. }
  474. }
  475.  
  476. .box-right {
  477. height: 100%;
  478. width: calc(100% - 46px);
  479. padding-top: 5px;
  480. }
  481.  
  482. // 排水设施
  483. .facilityBox {
  484. display: flex;
  485. flex-wrap: wrap;
  486. height: 100%;
  487.  
  488. .facility-item {
  489. width: 33%;
  490. height: 50%;
  491. text-align: center;
  492. display: flex;
  493. flex-direction: column;
  494. justify-content: center;
  495.  
  496. .facilitydz {
  497. background: url('@/assets/images/cockpit/facility.png') center
  498. no-repeat;
  499. height: 70px;
  500. // display: flex;
  501. // align-items: center;
  502. // justify-content: center;
  503. position: relative;
  504.  
  505. img {
  506. position: absolute;
  507. left: 50%;
  508. top: 32%;
  509. transform: translateX(-50%);
  510. }
  511. }
  512.  
  513. .facility-name {
  514. color: rgba(197, 223, 239, 1);
  515. }
  516.  
  517. .facility-value {
  518. color: rgba(33, 189, 245, 1);
  519. .value-one {
  520. font-size: 18px;
  521. }
  522. }
  523. }
  524. }
  525.  
  526. //办证统计上部分
  527. .box-banzheng {
  528. height: calc(100% - 164px);
  529. margin: 8px 0;
  530. display: flex;
  531. align-items: center;
  532. justify-content: center;
  533. background: linear-gradient(
  534. 90deg,
  535. rgba(15, 42, 76),
  536. rgba(15, 42, 76, 0.18)
  537. );
  538. border-radius: 4px;
  539. color: #9ebef8;
  540. font-size: 18px;
  541. font-family: Source Han Sans CN;
  542. font-weight: 500;
  543. color: #9ebef8;
  544.  
  545. .banzhenglv {
  546. font-size: 28px;
  547. font-family: PangMenZhengDao;
  548. font-weight: 400;
  549. color: #e3f5ff;
  550. margin-left: 20px;
  551. }
  552. }
  553.  
  554. .box-banzheng-bottom {
  555. height: 148px;
  556. }
  557.  
  558. // 区域统计
  559. .quyubox {
  560. margin-top: 2%;
  561. width: 48%;
  562. margin-right: 1%;
  563. height: 97%;
  564. .quyutitle {
  565. width: 100%;
  566. height: 30px;
  567. line-height: 30px;
  568. text-align: center;
  569. background: linear-gradient(
  570. 90deg,
  571. rgba(28, 61, 132),
  572. rgba(16, 35, 72, 0.9)
  573. );
  574. border-radius: 4px 4px 0px 0px;
  575. font-size: 16px;
  576. font-family: Source Han Sans CN;
  577. font-weight: 550;
  578. color: #9ebef8;
  579. }
  580.  
  581. .quyutwo {
  582. color: #74f0ff;
  583. }
  584.  
  585. .quyubody {
  586. position: relative;
  587. height: calc(100% - 30px);
  588. background: linear-gradient(
  589. 90deg,
  590. rgba(18, 41, 96),
  591. rgba(12, 29, 68, 0.9)
  592. );
  593. border-radius: 4px;
  594.  
  595. .yhc {
  596. position: absolute;
  597. width: 6px;
  598. height: 6px;
  599. background: #cbddff;
  600. box-shadow: 0 1px 15px #fff;
  601. }
  602.  
  603. .left {
  604. top: 43%;
  605. transform: translateY(-50%);
  606. left: 28%;
  607. }
  608.  
  609. .right {
  610. top: 43%;
  611. transform: translateY(-50%);
  612. right: 28%;
  613. }
  614. }
  615. }
  616. }
  617.  
  618. .box-flex {
  619. display: flex;
  620. }
  621. }
  622.  
  623. .fieldLeft {
  624. left: 46px;
  625. top: 20px;
  626. background: url('@/assets/images/cockpit/masklayer_img.png') no-repeat;
  627. background-size: cover;
  628. }
  629.  
  630. .fieldrigth {
  631. right: 16px;
  632. top: 20px;
  633. background: url('@/assets/images/cockpit/masklayer_img-right.png') no-repeat;
  634. background-size: cover;
  635. }
  636.  
  637. .flexdvideo {
  638. width: 442px;
  639. height: calc(100% - 160px);
  640. position: fixed;
  641. right: 46px;
  642. top: 90px;
  643. background: url('@/assets/images/cockpit/masklayer_img-right.png') no-repeat;
  644. background-size: cover;
  645. }
  646.  
  647. .line-l {
  648. position: absolute;
  649. left: 0px;
  650. top: 50%;
  651. transform: translateY(-50%);
  652. z-index: 999;
  653. }
  654.  
  655. .line-R {
  656. position: absolute;
  657. right: 0px;
  658. top: 50%;
  659. transform: translateY(-50%);
  660. z-index: 999;
  661. }
  662.  
  663. .line-bottom {
  664. position: absolute;
  665. bottom: -8px;
  666. left: 50%;
  667. transform: translate(-50%);
  668. z-index: 999;
  669. }
  670.  
  671. .allmap {
  672. width: 100%;
  673. height: 100%;
  674. color: #fff;
  675. }
  676.  
  677. .subassemblybox {
  678. width: 100%;
  679. height: 100%;
  680. }
  681.  
  682. // 通用弹框样式 谨慎修改原有类名和样式 除非全局修改 否则新加样式修改
  683. #pop-up {
  684. position: fixed;
  685. left: 50%;
  686. top: 50%;
  687. transform: translate(-50%, -50%);
  688. width: 530px;
  689. height: 375px;
  690. background: #021534;
  691. border: 1px solid #114f89;
  692. z-index: 2000;
  693.  
  694. .weather-head {
  695. position: relative;
  696. height: 36px;
  697. background: linear-gradient(0deg, #021f56 0%, #042d7b 100%);
  698.  
  699. .head-bg {
  700. position: absolute;
  701. width: 180px;
  702. line-height: 46px;
  703. height: 46px;
  704. left: 0;
  705. bottom: 0;
  706. background: url('@/assets/images/cockpit/dia-head.png') center no-repeat;
  707. font-size: 18px;
  708. font-family: Source Han Sans CN;
  709. font-weight: 550;
  710. color: #ffffff;
  711. padding-left: 20px;
  712. }
  713.  
  714. .weather-icon {
  715. cursor: pointer;
  716. position: absolute;
  717. right: 12px;
  718. top: 50%;
  719. transform: translateY(-50%);
  720. }
  721. }
  722.  
  723. .weather-body {
  724. padding: 0 11px;
  725. height: calc(100% - 36px);
  726. background: #021534;
  727. border: 1px solid #114f89;
  728. border-top: 1px solid #1096db;
  729.  
  730. .body-title {
  731. height: 46px;
  732. display: flex;
  733. align-items: center;
  734. padding-left: 11px;
  735.  
  736. .title-item {
  737. cursor: pointer;
  738. color: #4678d4;
  739. background: linear-gradient(0deg, #032463 0%, #042d7a 100%);
  740. border-radius: 2px;
  741. height: 26px;
  742. padding: 3px 13px;
  743. font-size: 14px;
  744. font-family: Source Han Sans CN;
  745. font-weight: 500;
  746. margin-right: 10px;
  747.  
  748. &.actived {
  749. border: 1px solid #50a3ff;
  750. color: #50a3ff;
  751. }
  752. }
  753. }
  754.  
  755. .body-two {
  756. height: 40px;
  757. background: rgba(11, 83, 149, 0.2);
  758. display: flex;
  759. align-items: center;
  760. padding: 0 10px;
  761. position: relative;
  762.  
  763. .ssd {
  764. font-size: 16px;
  765. font-family: Source Han Sans CN;
  766. font-weight: bold;
  767. color: #50a3ff;
  768. margin-left: 10px;
  769. }
  770.  
  771. .ssdtwo {
  772. margin-left: 30px;
  773. }
  774.  
  775. .ssdthree {
  776. font-size: 16px;
  777. font-family: Source Han Sans CN;
  778. font-weight: 500;
  779. color: #acd3ff;
  780. margin-right: 10px;
  781. }
  782.  
  783. .ssdfour {
  784. position: absolute;
  785. right: 10px;
  786. width: 60px;
  787. height: 26px;
  788. background: #e2be4a;
  789. border-radius: 2px;
  790. font-size: 16px;
  791. font-family: Source Han Sans CN;
  792. font-weight: 500;
  793. color: #ffffff;
  794. text-align: center;
  795. }
  796. }
  797.  
  798. .body-three {
  799. margin-top: 2px;
  800. height: calc(100% - 100px);
  801. background: rgba(11, 83, 149, 0.2);
  802. padding: 10px;
  803. position: relative;
  804.  
  805. .three-title {
  806. display: flex;
  807. align-items: center;
  808.  
  809. .three-item {
  810. cursor: pointer;
  811. width: 54px;
  812. height: 20px;
  813. line-height: 20px;
  814. background: rgba(11, 83, 149, 0.2);
  815. border-radius: 2px;
  816. text-align: center;
  817. font-size: 14px;
  818. font-family: Source Han Sans CN;
  819. font-weight: 500;
  820. color: #b4cded;
  821. margin-right: 4px;
  822.  
  823. &.actived {
  824. color: #1fdac5;
  825. background-color: #0b5395;
  826. }
  827. }
  828. }
  829.  
  830. .weather-echarts {
  831. margin-top: 5px;
  832. height: calc(100% - 25px);
  833. width: 100%;
  834. position: relative;
  835.  
  836. .weather-position {
  837. position: absolute;
  838. width: 100%;
  839. height: 100%;
  840. display: flex;
  841.  
  842. .zhuti {
  843. width: 10%;
  844. margin-left: 1.2%;
  845. height: 100%;
  846. background: #052c58;
  847. color: #b4cded;
  848. text-align: center;
  849. padding-top: 21px;
  850.  
  851. .zhutivalue {
  852. color: #25aaff;
  853. margin-top: 20px;
  854. font-size: 12px;
  855. font-family: Source Han Sans CN;
  856. font-weight: 500;
  857. color: #25aaff;
  858. }
  859. }
  860.  
  861. .zhuti:first-child {
  862. margin: 0;
  863. }
  864.  
  865. .zhuti:first-child .zhutitime {
  866. // margin: 0;
  867. color: #1fdac5;
  868. }
  869. }
  870. }
  871. }
  872.  
  873. .body-four {
  874. height: 60px;
  875. width: 100%;
  876. background: #042149;
  877. display: flex;
  878. align-items: center;
  879. padding: 0 10px;
  880.  
  881. .four-item {
  882. width: 40px;
  883. height: 40px;
  884. background: #03326c;
  885. border-radius: 2px;
  886. font-size: 14px;
  887. font-family: Source Han Sans CN;
  888. font-weight: 500;
  889. color: #4f9bff;
  890. text-align: center;
  891. }
  892.  
  893. .future-box {
  894. width: calc(100% - 40px);
  895. padding-left: 10px;
  896. display: flex;
  897. justify-content: space-between;
  898. text-align: center;
  899. }
  900.  
  901. .future-item {
  902. width: 80px;
  903. height: 40px;
  904. background: linear-gradient(
  905. 0deg,
  906. rgba(84, 127, 184, 0.2) 0%,
  907. rgba(84, 128, 184, 0.2) 100%
  908. );
  909. border-radius: 2px;
  910. color: #a1bada;
  911. font-size: 14px;
  912. font-family: Source Han Sans CN;
  913. font-weight: 500;
  914.  
  915. .future-value {
  916. color: #5681d2;
  917. }
  918. }
  919. }
  920.  
  921. .body-five {
  922. width: 100%;
  923. margin-top: 10px;
  924. height: calc(100% - 126px);
  925. background: #042149;
  926. display: flex;
  927. align-items: center;
  928. padding: 10px;
  929. }
  930.  
  931. ::v-deep .body-Custom {
  932. height: calc(100% - 60px);
  933. width: 100%;
  934.  
  935. .calendar-click {
  936. border: 1px solid #1096db;
  937. color: #1096db;
  938. display: flex;
  939. }
  940. .actived {
  941. cursor: pointer;
  942. background: #1096db;
  943. color: #021534;
  944. }
  945.  
  946. .clickitem {
  947. width: 50px;
  948. height: 24px;
  949. border-radius: 2px 0px 0px 2px;
  950. cursor: pointer;
  951. text-align: center;
  952. border-right: 1px solid #1096db;
  953. }
  954. .clickitem:last-child {
  955. border: none;
  956. }
  957.  
  958. .el-calendar {
  959. height: 100%;
  960. background: transparent;
  961. color: #b4cded;
  962. }
  963.  
  964. .el-calendar-table .el-calendar-day:hover {
  965. cursor: pointer;
  966. background-color: #064c7b;
  967. }
  968.  
  969. .el-calendar-table td.is-selected {
  970. background-color: #384d62;
  971. }
  972.  
  973. .el-calendar-table .el-calendar-day {
  974. width: 68px;
  975. height: 72px;
  976. padding: 0;
  977. text-align: center;
  978. background: #053a66;
  979. margin-right: 1px;
  980. margin-bottom: 1px;
  981. }
  982.  
  983. .data-title {
  984. height: 16px;
  985. line-height: 16px;
  986. background: #064c7b;
  987. }
  988.  
  989. .el-calendar-table:not(.is-range) td.prev {
  990. color: #b4cded;
  991. }
  992.  
  993. .el-calendar-table tr td {
  994. border: none;
  995. }
  996.  
  997. .el-calendar__body {
  998. padding: 10px;
  999. padding-top: 0;
  1000. background: #052146;
  1001. margin-bottom: 10px;
  1002. }
  1003.  
  1004. .el-calendar__header {
  1005. border: none;
  1006. font-size: 16px;
  1007. padding: 12px 5px;
  1008. }
  1009.  
  1010. .el-calendar-table thead th {
  1011. color: #50a3ff;
  1012. }
  1013.  
  1014. .daydiv {
  1015. display: flex;
  1016. align-items: center;
  1017. justify-content: center;
  1018. height: 25px;
  1019. color: #b4cded;
  1020. }
  1021.  
  1022. .head-title {
  1023. font-size: 14px;
  1024. display: flex;
  1025. .daydiv {
  1026. margin-right: 5px;
  1027. }
  1028. }
  1029.  
  1030. .dayshift {
  1031. margin-right: 7px;
  1032. width: 6px;
  1033. height: 6px;
  1034. background: #e9d390;
  1035. border-radius: 50%;
  1036. }
  1037.  
  1038. .nightshift {
  1039. margin-right: 7px;
  1040. width: 6px;
  1041. height: 6px;
  1042. background: #2186f6;
  1043. border-radius: 50%;
  1044. }
  1045. }
  1046.  
  1047. // 通用新增
  1048. .no-padding-left {
  1049. padding-left: 0;
  1050. }
  1051.  
  1052. // 通用body
  1053. .body-detail {
  1054. height: calc(100% - 51px);
  1055. width: 100%;
  1056. }
  1057. }
  1058.  
  1059. .imformation {
  1060. padding: 11px;
  1061. }
  1062.  
  1063. .leftangle {
  1064. position: absolute;
  1065. width: 14px;
  1066. height: 14px;
  1067. left: 0;
  1068. bottom: 0;
  1069. background: url('@/assets/images/cockpit/zj.png') center no-repeat;
  1070. }
  1071.  
  1072. .rightangle {
  1073. position: absolute;
  1074. width: 14px;
  1075. height: 14px;
  1076. right: 0;
  1077. bottom: 0;
  1078. background: url('@/assets/images/cockpit/yj.png') center no-repeat;
  1079. }
  1080. }
  1081.  
  1082. .dutyWH {
  1083. width: 530px !important;
  1084. // height: 521px !important;
  1085. height: auto !important;
  1086. }
  1087.  
  1088. .Layercontrol {
  1089. cursor: pointer;
  1090. z-index: 999;
  1091. position: absolute;
  1092. right: 520px;
  1093. top: 30px;
  1094. width: 40px;
  1095. height: 40px;
  1096. background: url('@/assets/images/cockpit/Layercontrol.png') center no-repeat;
  1097. }
  1098.  
  1099. ::v-deep .LayerControlBox {
  1100. position: absolute;
  1101. top: 30px;
  1102. right: 40px;
  1103. z-index: 2000;
  1104. width: 460px;
  1105. height: 708px;
  1106. border: 1px solid #2996da;
  1107. background: linear-gradient(0deg, #07133b 0%, #0e275f 100%);
  1108. border-radius: 2px;
  1109.  
  1110. .ControlBox-head {
  1111. position: relative;
  1112. font-size: 18px;
  1113. font-family: Source Han Sans CN;
  1114. font-weight: bold;
  1115. color: #f3fafe;
  1116. height: 50px;
  1117. padding-left: 20px;
  1118. background: linear-gradient(
  1119. 90deg,
  1120. rgba(40, 182, 232, 0.2) 0%,
  1121. rgba(40, 182, 232, 0) 100%
  1122. );
  1123. display: flex;
  1124. align-items: center;
  1125.  
  1126. .control-change {
  1127. position: absolute;
  1128. top: 50%;
  1129. transform: translateY(-50%);
  1130. right: 21px;
  1131. width: 83px;
  1132. height: 24px;
  1133. line-height: 24px;
  1134. border: 1px solid #1ba1ff;
  1135. font-size: 14px;
  1136. font-family: Source Han Sans CN;
  1137. font-weight: 500;
  1138. color: #839ecb;
  1139. background: linear-gradient(
  1140. 0deg,
  1141. rgba(27, 161, 255, 0.2) 0%,
  1142. rgba(27, 161, 255, 0.1) 100%
  1143. );
  1144. border-radius: 12px;
  1145. text-align: center;
  1146. }
  1147. }
  1148.  
  1149. .ControlBox-body {
  1150. height: calc(100% - 50px);
  1151.  
  1152. .one-controlbox {
  1153. margin-bottom: 30px;
  1154. }
  1155.  
  1156. .body-title {
  1157. padding-left: 21px;
  1158.  
  1159. .el-checkbox__label {
  1160. font-size: 16px;
  1161. font-family: Source Han Sans CN;
  1162. font-weight: 500;
  1163. color: #54a5ff;
  1164. }
  1165. }
  1166.  
  1167. .body-body {
  1168. margin-left: 50px;
  1169. }
  1170. }
  1171. }
  1172.  
  1173. ::v-deep .el-checkbox__inner {
  1174. background: #0d2357;
  1175. border: 1px solid #54a5ff;
  1176. }
  1177.  
  1178. ::v-deep .el-checkbox__label {
  1179. color: #b4cded;
  1180. display: flex;
  1181. align-items: center;
  1182. }
  1183.  
  1184. ::v-deep .el-radio__label {
  1185. color: #b4cded;
  1186. display: flex;
  1187. align-items: center;
  1188. }
  1189.  
  1190. ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  1191. background: #0d2357;
  1192. }
  1193.  
  1194. ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  1195. color: #b4cded;
  1196. }
  1197.  
  1198. ::v-deep .el-radio__inner {
  1199. border-radius: 0;
  1200. background: #0d2357;
  1201. border: 1px solid #54a5ff;
  1202. }
  1203.  
  1204. ::v-deep .el-radio__input.is-checked + .el-radio__label {
  1205. color: #b4cded;
  1206. }
  1207.  
  1208. ::v-deep .el-radio__inner::after {
  1209. width: 0;
  1210. }
  1211.  
  1212. .checkicon {
  1213. margin-right: 5px;
  1214. }
  1215. ::v-deep .el-checkbox-group {
  1216. width: 100%;
  1217. display: flex;
  1218. flex-wrap: wrap;
  1219. }
  1220.  
  1221. ::v-deep .el-checkbox {
  1222. width: 33%;
  1223. display: flex;
  1224. margin: 0;
  1225. }
  1226.  
  1227. // 地图图例
  1228. .legendtip {
  1229. z-index: 999;
  1230. position: absolute;
  1231. background: linear-gradient(90deg, rgba(18, 41, 95), rgba(13, 29, 68));
  1232. border: 1px solid #1475d8;
  1233. border-radius: 4px;
  1234. padding: 21px;
  1235.  
  1236. .legend-item {
  1237. height: 25px;
  1238. margin-bottom: 20px;
  1239. display: flex;
  1240. align-items: center;
  1241. font-size: 16px;
  1242. font-family: Source Han Sans CN;
  1243. font-weight: 400;
  1244. color: #9ebef8;
  1245.  
  1246. .legend-name {
  1247. margin-left: 10px;
  1248. }
  1249. }
  1250. .legend-item:last-child {
  1251. margin: 0;
  1252. }
  1253. }
  1254.  
  1255. // 管网工具栏
  1256. #gongjulan {
  1257. position: absolute;
  1258. left: 52px;
  1259. top: 140px;
  1260. z-index: 999;
  1261. }
  1262.  
  1263. .gw-checkbtn {
  1264. cursor: pointer;
  1265. position: absolute;
  1266. top: 36px;
  1267. left: 52px;
  1268. width: 40px;
  1269. height: 40px;
  1270. // background: rgba($color: #103c85, $alpha: 0.95);
  1271. // border: 1px solid #fff;
  1272. border-radius: 4px;
  1273. text-align: center;
  1274. line-height: 55px;
  1275. z-index: 3;
  1276.  
  1277. img {
  1278. width: 100%;
  1279. height: 100%;
  1280. }
  1281. }
  1282.  
  1283. .gw-checkbtn2 {
  1284. cursor: pointer;
  1285. margin-bottom: 5px;
  1286. width: 40px;
  1287. height: 40px;
  1288. // background: rgba($color: #103c85, $alpha: 0.95);
  1289. // border: 1px solid #fff;
  1290. border-radius: 4px;
  1291. text-align: center;
  1292. line-height: 55px;
  1293. z-index: 3;
  1294.  
  1295. img {
  1296. width: 100%;
  1297. height: 100%;
  1298. }
  1299.  
  1300. &.actived {
  1301. background: rgba(5, 15, 22, 0.95);
  1302. }
  1303. }
  1304.  
  1305. #rivermap-analyse {
  1306. top: 80px;
  1307. transition: all 0.5s ease-in;
  1308. }
  1309.  
  1310. .rivermap-analyse-check {
  1311. filter: invert(20%);
  1312. }
  1313.  
  1314. // 管网底部图例
  1315. .Gwlegend {
  1316. display: flex;
  1317. align-items: center;
  1318. padding: 0 50px;
  1319. justify-content: space-between;
  1320. position: absolute;
  1321. bottom: 35px;
  1322. left: 20px;
  1323. width: 1228px;
  1324. height: 54px;
  1325. background: rgba($color: #000000, $alpha: 0.8);
  1326. border: 1px solid #1e1e1e;
  1327. border-radius: 27px;
  1328. color: #7f7f7f;
  1329. font-size: 16px;
  1330. z-index: 999;
  1331. }
  1332.  
  1333. .LegendClass {
  1334. display: flex;
  1335.  
  1336. .legend-img {
  1337. width: 20px;
  1338. height: 19px;
  1339. margin-right: 5px;
  1340. img {
  1341. width: 100%;
  1342. height: 100%;
  1343. }
  1344. }
  1345. }
  1346.  
  1347. .leftbtn {
  1348. position: absolute;
  1349. left: 485px;
  1350. width: 16px;
  1351. height: 12px;
  1352. top: 23px;
  1353. z-index: 999;
  1354. }
  1355. .rightbtn {
  1356. position: absolute;
  1357. right: 485px;
  1358. width: 16px;
  1359. height: 12px;
  1360. top: 23px;
  1361. z-index: 999;
  1362. }
  1363.  
  1364. /* 设置持续时间和动画函数 */
  1365. .fade1-enter-active {
  1366. animation: test1 0.6s linear;
  1367. }
  1368.  
  1369. .fade1-leave-active {
  1370. animation: test1 0.6s linear reverse;
  1371. }
  1372.  
  1373. // 左边
  1374. @keyframes test1 {
  1375. 0% {
  1376. left: -490px;
  1377. opacity: 0;
  1378. }
  1379. 100% {
  1380. left: 46px;
  1381. opacity: 1;
  1382. }
  1383. }
  1384.  
  1385. /* 设置持续时间和动画函数 */
  1386. .fade2-enter-active {
  1387. animation: test2 0.6s linear;
  1388. }
  1389.  
  1390. .fade2-leave-active {
  1391. animation: test2 0.6s linear reverse;
  1392. }
  1393.  
  1394. // 左边
  1395. @keyframes test2 {
  1396. 0% {
  1397. right: -490px;
  1398. opacity: 0;
  1399. }
  1400. 100% {
  1401. right: 46px;
  1402. opacity: 1;
  1403. }
  1404. }
  1405.  
  1406. .buttonleft {
  1407. position: absolute !important;
  1408. left: 50px !important;
  1409. }
  1410.  
  1411. .clearbuttonleft {
  1412. position: absolute !important;
  1413. left: 485px !important;
  1414. }
  1415.  
  1416. .buttonright {
  1417. position: absolute !important;
  1418. right: 50px !important;
  1419. }
  1420.  
  1421. .clearbuttonright {
  1422. position: absolute !important;
  1423. right: 485px !important;
  1424. }
  1425.  
  1426. ::v-deep .m-2 {
  1427. width: 90px;
  1428. height: 26px;
  1429. border-radius: 1px;
  1430. .select-trigger {
  1431. height: 100%;
  1432. }
  1433.  
  1434. .el-input {
  1435. height: 100%;
  1436. }
  1437.  
  1438. .el-input__wrapper {
  1439. background: #02225e;
  1440. border: 1px solid #0f4980;
  1441. padding: 0 5px;
  1442. }
  1443. .el-input__inner {
  1444. color: #b2c7de;
  1445. }
  1446. }