Newer
Older
DH_Apicture / src / assets / styles / pictureOnMap.scss
@leishan leishan on 4 Dec 8 KB 渍水调度
  1. .flex_sbc {
  2. display: flex;
  3. justify-content: space-between;
  4. align-items: center;
  5. }
  6.  
  7. .flex_cen {
  8. display: flex;
  9. justify-content: center;
  10. align-items: center;
  11. }
  12.  
  13. .h100 {
  14. height: 100%;
  15. }
  16.  
  17. .w100 {
  18. width: 100%;
  19. }
  20.  
  21. // 左右模块背景
  22. .moduleBoxLeft {
  23. left: 18px;
  24. }
  25.  
  26. .moduleBoxRight {
  27. right: 18px;
  28. }
  29.  
  30. .moduleBox {
  31. width: 450px;
  32. height: calc(100vh - 108px);
  33. position: fixed;
  34. top: 88px;
  35. padding: 8px 10px;
  36. background: url('@/assets/images/pictureOnMap/contentBgc.png') no-repeat center;
  37. background-size: 100% 100%;
  38. z-index: 10;
  39. }
  40.  
  41. .typeList {
  42. padding-bottom: 2px;
  43. border-bottom: 1px solid #0D356F;
  44. overflow: hidden;
  45. margin-top: 8px;
  46. margin-bottom: 14px;
  47.  
  48. .tab {
  49. margin: 0 1px;
  50. line-height: 28px;
  51. background: linear-gradient(0deg, rgba(0, 98, 183, 0.3) 0%, rgba(0, 98, 183, 0.1) 100%);
  52. font-weight: 400;
  53. font-size: 16px;
  54. color: #8FBFFE;
  55. text-align: center;
  56. cursor: pointer;
  57.  
  58. &.active {
  59. color: #E0E5FA;
  60. background: linear-gradient(0deg, rgba(9, 216, 241, 0.9) 0%, rgba(0, 98, 183, 0.3) 100%);
  61. }
  62. }
  63. }
  64.  
  65. .yjBtn {
  66. height: 60px;
  67. background: url('@/assets/images/pictureOnMap/yjbtn.png') no-repeat;
  68. background-size: 100% 60px;
  69. padding-left: 32px;
  70. font-weight: 500;
  71. font-size: 16px;
  72. color: #FFFFFF;
  73.  
  74. div {
  75. margin-left: 40px;
  76. width: 196px;
  77. text-align: center;
  78. font-weight: 500;
  79. font-size: 18px;
  80. position: relative;
  81. line-height: 15px;
  82.  
  83. &::before {
  84. content: '';
  85. width: 18px;
  86. height: 15px;
  87. background: url('@/assets/images/pictureOnMap/jtr.png') no-repeat;
  88. background-size: 100% 100%;
  89. position: absolute;
  90. left: 0;
  91. top: 0;
  92. }
  93.  
  94. &::after {
  95. content: '';
  96. width: 18px;
  97. height: 15px;
  98. background: url('@/assets/images/pictureOnMap/jtl.png') no-repeat;
  99. background-size: 100% 100%;
  100. position: absolute;
  101. right: 0;
  102. top: 0;
  103. }
  104. }
  105. }
  106.  
  107. .blue {
  108. color: #2CB7FF;
  109. }
  110.  
  111. .blueD {
  112. color: #00FCFF;
  113. }
  114.  
  115. .leve2Title {
  116. height: 48px;
  117. background: url('@/assets/images/pictureOnMap/leve2.png') no-repeat center bottom;
  118. background-size: 103% auto;
  119. font-weight: bold;
  120. font-size: 18px;
  121. color: #E0E5FA;
  122. padding-left: 45px;
  123. line-height: 60px;
  124. }
  125.  
  126. .chartWbox {
  127. height: calc(100% - 48px);
  128. overflow: hidden;
  129. }
  130.  
  131. // 弹框
  132. .pmpSitNewDialog {
  133. .el-dialog__header {
  134. display: none;
  135. }
  136.  
  137. .el-dialog__body {
  138. height: 100%;
  139. padding: 0 !important;
  140. }
  141.  
  142. .dialogTitle {
  143. width: 100%;
  144. min-height: 44px;
  145. background: url('@/assets/images/pictureOnMap/dialogTab.png') no-repeat center bottom;
  146. background-size: 100% 100%;
  147. display: flex;
  148. justify-content: space-between;
  149. align-items: center;
  150. padding-right: 20px;
  151.  
  152. .title {
  153. padding-left: 51px;
  154. font-family: PangMenZhengDao;
  155. font-weight: 400;
  156. font-size: 24px;
  157. color: #FFFFFF;
  158. }
  159.  
  160. .closeIcon {
  161. width: 22px;
  162. height: 22px;
  163. background: url('@/assets/images/pictureOnMap/closeIcon.png') no-repeat center bottom;
  164. background-size: 100% 100%;
  165. cursor: pointer;
  166. }
  167. }
  168.  
  169. .contentBox {
  170. background: #071645;
  171. border: 1px solid #163F80;
  172. }
  173.  
  174. }
  175.  
  176. // 表格样式
  177. .dispatchTable {
  178. &.el-table {
  179. background: none;
  180. color: #D2E2FF;
  181. }
  182.  
  183. .el-table__inner-wrapper::before {
  184. height: 0;
  185. }
  186.  
  187. tr {
  188. background: linear-gradient(0deg, #00134F 0%, #003065 100%);
  189. }
  190.  
  191. td.el-table__cell,
  192. th.el-table__cell.is-leaf {
  193. border-color: #163F80;
  194. }
  195.  
  196. &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  197. background: linear-gradient(0deg, #001F75 0%, #284F93 100%);
  198. }
  199.  
  200. .el-table__header-wrapper th {
  201. // background: linear-gradient(0deg, rgba(0,98,183,0.8) 0%, rgba(0,98,183,0.1) 100%);
  202. background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%) !important;
  203. }
  204.  
  205. .el-table__header-wrapper {
  206. border: 1px solid #0B9BFF;
  207. }
  208.  
  209. th {
  210. color: #FFFFFF !important;
  211. font-size: 16px;
  212. }
  213.  
  214. &.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  215. background: rgba(13, 57, 139, 0.7);
  216. }
  217. }
  218. // 弹框表格
  219. .popUpTable {
  220. .el-table{
  221. font-weight: 400;
  222. font-size: 14px;
  223. color: #CCDFFF;
  224. &.el-table--striped .el-table__body tr.el-table__row {
  225. background: #0D2359;
  226. }
  227. &.el-table--enable-row-transition .el-table__body td.el-table__cell{
  228. background: #0D2359;
  229. }
  230. &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  231. background: rgba(7, 22, 69, 1);
  232. }
  233. td.el-table__cell, th.el-table__cell.is-leaf {
  234. border: 0;
  235. }
  236. .el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
  237. background: #153990!important;
  238. font-weight: bold;
  239. font-size: 14px;
  240. color: #FFFFFF;
  241. }
  242.  
  243. .el-table--border .el-table__inner-wrapper::after, .el-table--border::after, .el-table--border::before, .el-table__inner-wrapper::before{
  244. background: 0;
  245. }
  246. .el-table__empty-block {
  247. background: rgba(7, 22, 69, 1);
  248. }
  249. &.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  250. background: rgba(13, 57, 139, 0.7);
  251. }
  252. }
  253.  
  254. }
  255. // 降雨日历
  256. .dayListPop {
  257. // background: rgba(11, 52, 116, 0.8) !important;
  258. // border: 1px solid rgba(11, 52, 116, 1) !important;
  259.  
  260. background: linear-gradient(90deg, rgba(10, 36, 121, 0.8) 0%, rgba(1, 28, 71, 0.6) 100%) !important;
  261. border-radius: 6px !important;
  262. border: 1px solid !important;
  263. border-image: linear-gradient(0deg, #47AFFF, #47AFFF) 10 10 !important;
  264.  
  265.  
  266.  
  267. border-radius: 10px !important;
  268.  
  269. .el-date-picker {
  270. width: 400px;
  271. }
  272.  
  273. .el-picker-panel__content {
  274. width: 370px;
  275. }
  276.  
  277. .el-date-table td.disabled .el-date-table-cell {
  278. background: rgba(4, 69, 142, 1);
  279. }
  280.  
  281. .el-date-table td .el-date-table-cell {
  282. background: rgba(37, 123, 234, 1);
  283. height: 40px;
  284. color: #fff;
  285.  
  286. .day {
  287. line-height: 20px;
  288. }
  289.  
  290. .num {
  291. line-height: 1;
  292. white-space:nowrap;
  293. }
  294.  
  295. &.current {
  296. background: rgba(59, 219, 237, 1);
  297. }
  298. }
  299.  
  300. .el-date-table td.today {
  301. .day {
  302. color: rgba(59, 219, 237, 1);
  303. font-weight: bold;
  304. }
  305. }
  306.  
  307. .el-picker-panel {
  308. background: none;
  309. }
  310.  
  311. .el-popper__arrow::before {
  312. display: none;
  313. background: rgba(11, 52, 116, 0.8) !important;
  314. }
  315.  
  316. .el-date-picker__header {
  317. span {
  318. color: #00ffff;
  319. }
  320. }
  321.  
  322. .el-picker-panel__icon-btn {
  323. color: #fff;
  324. }
  325.  
  326. .el-date-table th {
  327. color: #fff;
  328. }
  329.  
  330. .el-date-table th {
  331. border-color: rgba(11, 52, 116, 1) !important;
  332. }
  333. }
  334.  
  335. // 分页样式
  336. .paginationBox {
  337. padding-top: 15px;
  338. text-align: right;
  339. display: flex;
  340. justify-content: center;
  341.  
  342. .el-pagination {
  343. color: #fff;
  344.  
  345. .btn-next,
  346. .btn-prev {
  347. background: none;
  348. color: #fff;
  349. }
  350.  
  351. .el-pager li {
  352. background: none;
  353. color: #9d9d9d;
  354. }
  355. .el-pager li.is-active{
  356. color: #409eff;
  357.  
  358. }
  359.  
  360. .el-input__wrapper {
  361. background: linear-gradient(90deg,
  362. rgba(32, 127, 244, 0.3) 0%,
  363. rgba(32, 127, 244, 0.1) 100%);
  364. border: 1px solid #0497e9;
  365. color: #fff;
  366. box-shadow: none;
  367. }
  368.  
  369. .el-input__wrapper:hover {
  370. box-shadow: none;
  371.  
  372. }
  373.  
  374. .el-input__inner {
  375. color: #fff;
  376. }
  377.  
  378. .el-pager li.btn-quicknext,
  379. .el-pager li.btn-quickprev {
  380. color: #fff;
  381. }
  382.  
  383. .el-pagination__total {
  384. color: #fff;
  385. }
  386.  
  387. .el-pagination__jump {
  388. color: #fff;
  389. }
  390. }
  391. }
  392.  
  393. /*
  394. 进入和离开动画可以使用不同
  395. 持续时间和速度曲线。
  396. */
  397. .fade_left-enter-active,
  398. .fade_left-leave-active {
  399. transition: all 0.5s ease;
  400. }
  401.  
  402. .fade_left-enter-from,
  403. .fade_left-leave-to {
  404. transform: translateX(-500px);
  405. opacity: 0;
  406. }
  407.  
  408. .fade_right-enter-active,
  409. .fade_right-leave-active {
  410. transition: all 0.5s ease;
  411. }
  412.  
  413. .fade_right-enter-from,
  414. .fade_right-leave-to {
  415. transform: translateX(500px);
  416. opacity: 0;
  417. }
  418.  
  419. .fade_bottom-enter-active,
  420. .fade_bottom-leave-active {
  421. transition: all 0.5s ease;
  422. }
  423.  
  424. .fade_bottom-enter-from,
  425. .fade_bottom-leave-to {
  426. transform: translateY(350px);
  427. opacity: 0;
  428. }
  429.  
  430. .mapTotalDialog{
  431. .el-dialog{
  432. background: #071645;
  433. .el-dialog__title{
  434. font-family: 'PangMenZhengDao';
  435. font-weight: 400;
  436. font-size: 24px;
  437. color: #FFFFFF;
  438. line-height: 44px;
  439. }
  440. }
  441. .el-dialog__header{
  442. height: 44px;
  443. background: url('@/assets/images/pictureOnMap/titlePop.png') no-repeat;
  444. background-size:100% 100%;
  445. margin: 0;
  446. padding: 0 20px 0 50px;
  447. }
  448. .el-dialog__headerbtn{
  449. width: 44px;
  450. height: 44px;
  451. font-size: 30px;
  452. font-weight: bold;
  453. top: 0;
  454. right: 10px;
  455. .el-dialog__close{
  456. color: #3FA4F6;
  457. background: linear-gradient(0deg, #3FA4F6 0%, #F7FDFF 100%);
  458. -webkit-background-clip: text;
  459. -webkit-text-fill-color: transparent;
  460. }
  461. }
  462. .el-dialog__body{
  463. padding: 10px !important;
  464. border: 1px solid #163F80;
  465. }
  466. }
  467.  
  468. .curCick{
  469. cursor: pointer;
  470. }