Newer
Older
DH_Apicture / src / assets / styles / PublicOpinionAnalysis.scss
@zhangqy zhangqy on 29 Nov 14 KB first commit
  1. .PublicOpinionAnalysis {
  2. position: relative;
  3. .YqToday {
  4. height: 20%;
  5. .rqNumContent {
  6. height: calc(100% - 55px);
  7. overflow: hidden;
  8. width: 430px;
  9. margin: 5px auto;
  10. background: url('@/assets/images/pictureOnMap/szbj_img.png') no-repeat center;
  11. background-size: 100% 100%;
  12. .yqNumber {
  13. position: relative;
  14. top: 10px;
  15. left: 65px;
  16. width: 70%;
  17. height: 85%;
  18. .Onnumber {
  19. height: 58%;
  20. .OnnumberText{
  21. margin-right: 6px;
  22. width: 44px;
  23. height: 50px;
  24. background: url('@/assets/images/pictureOnMap/szbj.png');
  25. .OnnumberTextA{
  26. font-family: DINPro;
  27. font-weight: 500;
  28. font-size: 50px;
  29. color: #FFFFFF;
  30. line-height: 50px;
  31. background: linear-gradient(0deg, #3FA4F6 0%, #F7FDFF 100%);
  32. -webkit-background-clip: text;
  33. -webkit-text-fill-color: transparent;
  34. text-align: center;
  35. }
  36.  
  37. }
  38. }
  39. .Upnumber {
  40. font-family: Source Han Sans CN;
  41. font-weight: 400;
  42. font-size: 16px;
  43. color: #ccdfff;
  44. height: 42%;
  45. img {
  46. height: 20px;
  47. margin-left: 10px;
  48. }
  49. .green {
  50. color: rgba(16, 126, 86, 1);
  51. font-family: Source Han Sans CN;
  52. font-weight: bold;
  53. font-size: 26px;
  54. color: #3ae58b;
  55. line-height: 23px;
  56. font-style: italic;
  57. }
  58. .red {
  59. color: rgba(234, 87, 90, 1);
  60. font-family: Source Han Sans CN;
  61. font-weight: bold;
  62. font-size: 26px;
  63. color: #ef4054;
  64. line-height: 23px;
  65. font-style: italic;
  66. }
  67. }
  68. }
  69. }
  70. }
  71. .YqSeven {
  72. height: 36%;
  73. .listBox {
  74. margin-top: 10px;
  75. .Yqtjabove {
  76. height: 20px;
  77. .typepattern{
  78. margin-left: 5px;
  79. font-family: Source Han Sans CN;
  80. font-weight: 500;
  81. font-size: 14px;
  82. color: #fff7f4;
  83. width: 20%;
  84. }
  85. .leve4 {
  86. width: 70px;
  87. background: linear-gradient(0deg, rgba(44, 183, 255, 0.2) 0%, rgba(44, 183, 255, 0.1) 100%);
  88. border-radius: 2px;
  89. border: 1px solid #2cb7ff;
  90. color: #2cb7ffff;
  91. font-family: Source Han Sans CN;
  92. font-weight: 400;
  93. font-size: 14px;
  94. }
  95. .red1 {
  96. width: 70%;
  97. text-align: right;
  98. font-family: Source Han Sans CN;
  99. font-weight: 400;
  100. font-size: 14px;
  101. color: #ef4054;
  102. }
  103. .red1 {
  104. width: 70%;
  105. text-align: right;
  106. font-family: Source Han Sans CN;
  107. font-weight: 400;
  108. font-size: 14px;
  109. color: #ef4054;
  110. }
  111. .green1 {
  112. width: 70%;
  113. text-align: right;
  114. font-family: Source Han Sans CN;
  115. font-weight: 400;
  116. font-size: 14px;
  117. color: #3ae58b;
  118. }
  119. }
  120. .Yqtjbelow {
  121. margin-top: 3px;
  122. height: 14px;
  123. background: #0b3178;
  124. .zb {
  125. background: linear-gradient(-90deg, #1bcdfb 0%, rgba(6, 207, 253, 0) 100%);
  126. border: 1px solid #22a5dd;
  127. height: 100%;
  128. position: relative;
  129. .WzA {
  130. font-family: Source Han Sans CN;
  131. font-size: 14px;
  132. height: 14px;
  133. position: relative;
  134. top: -3px;
  135. text-align: right;
  136. }
  137. }
  138. .Arrows {
  139. width: 15px;
  140. height: 12px;
  141. margin-left: 5px;
  142. background: url('@/assets/images/pictureOnMap/warningArrows.png') no-repeat center;
  143. background-size: 100% 100%;
  144. }
  145. .Wz {
  146. font-family: Source Han Sans CN;
  147. font-size: 14px;
  148. position: relative;
  149. top: -3px;
  150. left: 5px;
  151. }
  152. }
  153. .icon {
  154. position: relative;
  155. top: 7px;
  156. width: 8px;
  157. height: 8px;
  158. background: url('@/assets/images/pictureOnMap/xtb_img.png');
  159. }
  160. }
  161. }
  162. .YqThirty {
  163. height: 41%;
  164. }
  165. .DclYq {
  166. height: 40%;
  167. .sevenPublic {
  168. height: 100%;
  169. .hader {
  170. width: 100%;
  171. height: 40px;
  172. background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%);
  173. border: 1px solid #0b9bff;
  174. border-radius: 2px;
  175. display: flex;
  176. .tableHeaderList {
  177. font-family: Source Han Sans CN;
  178. font-weight: 400;
  179. font-size: 14px;
  180. color: #ffffff;
  181. height: 34px;
  182. line-height: 34px;
  183. padding-left: 10px;
  184. }
  185. .tableList1 {
  186. width: 50%;
  187. }
  188. .tableList2 {
  189. width: 25%;
  190. text-align: center;
  191. }
  192. .tableList3 {
  193. width: 25%;
  194. text-align: center;
  195. }
  196. }
  197. .ListBox {
  198. height: calc(100% - 45px);
  199. width: 100%;
  200. overflow: auto;
  201. .tableBodyList {
  202. line-height: 60px;
  203. width: 100%;
  204. display: flex;
  205. /* 选择偶数行 */
  206. &:nth-child(even) {
  207. background: linear-gradient(0deg, #001f75 0%, #284f93 100%);
  208. border: 1px solid #163f80;
  209. }
  210. .tableBodyList_span1 {
  211. font-family: Source Han Sans CN;
  212. font-weight: 500;
  213. font-size: 14px;
  214. color: #18a7f2;
  215. height: 60px;
  216. line-height: 60px;
  217. text-align: center;
  218. width: 50%;
  219. overflow: hidden;
  220. white-space: nowrap; /* 防止文字换行 */
  221. text-overflow: ellipsis; /* 超出部分显示省略号 */
  222. }
  223. .tableBodyList_span2 {
  224. font-family: Source Han Sans CN;
  225. font-weight: 500;
  226. font-size: 14px;
  227. color: #D2E2FF;
  228. height: 60px;
  229. line-height: 60px;
  230. text-align: center;
  231. width: 25%;
  232. overflow: hidden;
  233. white-space: nowrap; /* 防止文字换行 */
  234. text-overflow: ellipsis; /* 超出部分显示省略号 */
  235. }
  236. .tableBodyList_span3 {
  237. font-family: Source Han Sans CN;
  238. font-weight: 500;
  239. font-size: 14px;
  240. color: #D2E2FF;
  241. height: 60px;
  242. line-height: 60px;
  243. text-align: center;
  244. width: 25%;
  245. }
  246. }
  247. }
  248. }
  249. }
  250. .YqLy {
  251. height: 38%;
  252. // background: red;
  253. }
  254. .BoxContent {
  255. position: relative;
  256. left: 480px;
  257. width: 50%;
  258. height: calc(100vh - 108px);
  259. position: fixed;
  260. top: 88px;
  261. z-index:10;
  262. .YqOneYear {
  263. height: 34%;
  264. background: url('@/assets/images/pictureOnMap/Abovemiddle.png') no-repeat center;
  265. background-size: 100% 100%;
  266. .YqOneYearContent {
  267. margin: 5px auto;
  268. width: 98%;
  269. height: 79%;
  270. }
  271. }
  272. .YqTrack {
  273. margin-top: 20px;
  274. height: 63%;
  275. background: url('@/assets/images/pictureOnMap/Belowmiddle.png') no-repeat center;
  276. background-size: 100% 100%;
  277. .YqTracContent {
  278. margin: 5px auto;
  279. width: 98%;
  280. height: 74%;
  281. // background: red;
  282. .greening{
  283. font-family: Source Han Sans CN;
  284. font-weight: 500;
  285. font-size: 14px;
  286. color: #3AE58B;
  287. }
  288. }
  289. }
  290. }
  291. }
  292. .rqTitle {
  293. background: url('@/assets/images/pictureOnMap/eachBgc.png') no-repeat center;
  294. background-size: 100% 100%;
  295. height: 44px;
  296. padding-left: 50px;
  297. padding-top: 5px;
  298. // align-items: center;
  299. font-family: Source Han Sans CN;
  300. font-weight: bold;
  301. font-size: 18px;
  302. color: #ffffff;
  303. margin-top: 5px;
  304. span {
  305. margin-left: 10px;
  306. margin-top: 2px;
  307. font-family: Source Han Sans CN;
  308. font-weight: 500;
  309. font-size: 16px;
  310. color: #ccdfff;
  311. }
  312. }
  313. .rqTitleA {
  314. background: url('@/assets/images/pictureOnMap/eachBgcA.png') no-repeat center;
  315. background-size: 100% 100%;
  316. height: 44px;
  317. padding-left: 50px;
  318. padding-top: 5px;
  319. // align-items: center;
  320. font-family: Source Han Sans CN;
  321. font-weight: bold;
  322. font-size: 18px;
  323. color: #ffffff;
  324. margin-top: 3px;
  325. span {
  326. margin-left: 10px;
  327. margin-top: 2px;
  328. font-family: Source Han Sans CN;
  329. font-weight: 500;
  330. font-size: 16px;
  331. color: #ccdfff;
  332. }
  333. .TabList {
  334. position: relative;
  335. top: -26px;
  336. height: 90%;
  337. width: 62%;
  338. left: 330px;
  339. // background: yellow;
  340. .tabData {
  341. justify-content: center;
  342. text-align: center;
  343. .eachClick {
  344. // width: 64px;
  345. height: 26px;
  346. background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%);
  347. border-radius: 1px;
  348. border: 1px solid #0b9bff;
  349. margin-left: 10px;
  350. padding: 0 12px;
  351. font-family: Source Han Sans CN;
  352. font-size: 14px;
  353. color: #8FBFFEFF;
  354. line-height: 26px;
  355. cursor: pointer;
  356. }
  357. .active {
  358. background: linear-gradient(0deg, rgba(6, 227, 209, 0.8) 0%, rgba(12, 59, 85, 0.1) 100%);
  359. border: 1px solid #2ff6e8;
  360. color: #FFFFFF;
  361. }
  362. }
  363. .aaa{
  364. margin-top:8px;
  365. color: #00fcff;
  366. font-size: 22px;
  367. }
  368. }
  369. }
  370.  
  371. .rqContent {
  372. height: calc(100% - 55px);
  373. overflow: hidden;
  374. width: 420px;
  375. margin: 5px auto;
  376. }
  377. ::-webkit-scrollbar {
  378. width: 5px; /* 设置滚动条的宽度 */
  379. }
  380. .tableLiName {
  381. width: 100%;
  382. white-space: nowrap;
  383. text-overflow: ellipsis;
  384. overflow: hidden;
  385. cursor: pointer;
  386. font-family: Source Han Sans CN;
  387. font-weight: 500;
  388. font-size: 14px;
  389. color: #00fcff !important;
  390. }
  391. :deep(.el-table td.el-table__cell div) {
  392. font-family: Source Han Sans CN;
  393. font-weight: 500;
  394. font-size: 14px;
  395. color: #D2E2FF;
  396. }
  397. :deep(.dispatchTable) {
  398. &.el-table {
  399. background: none;
  400. color: #d2e2ff;
  401. }
  402.  
  403. .el-table__inner-wrapper::before {
  404. height: 0;
  405. }
  406. tr {
  407. background: linear-gradient(0deg, #00134f 0%, #003065 100%);
  408. }
  409. td.el-table__cell,
  410. th.el-table__cell.is-leaf {
  411. border-color: #163f80;
  412. }
  413. &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  414. background: linear-gradient(0deg, #001f75 0%, #284f93 100%);
  415. }
  416. .el-table__header-wrapper th {
  417. background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%) !important;
  418. }
  419. .el-table__header-wrapper {
  420. border: 1px solid #0b9bff;
  421. }
  422. th {
  423. color: #ffffff;
  424. font-size: 16px;
  425. }
  426. }
  427. :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  428. background-color: #163f80;
  429. }
  430. :deep(.pagination-container) {
  431. background: #ff000000;
  432. }
  433. :deep(.el-pagination__total) {
  434. color: #f7f7f7;
  435. }
  436. :deep(.el-pagination__goto) {
  437. color: #f7f7f7;
  438. }
  439. :deep(.el-pagination__classifier) {
  440. color: #f7f7f7;
  441. }
  442. :deep(.el-input__wrapper) {
  443. background: linear-gradient(0deg, rgba(0,98,183,0.8) 0%, rgba(0,98,183,0.1) 100%);
  444. box-shadow: 0 0 0 0.00521rem #0B9BFF inset;
  445. color: #ffffff !important;
  446. }
  447. :deep(.el-pagination.is-background .el-pager li) {
  448. background-color: #f0f2f500;
  449. color: #c6c6c6;
  450. }
  451. :deep(.el-pagination.is-background .el-pager li.is-active) {
  452. background: linear-gradient(0deg, rgba(0,98,183,0.8) 0%, rgba(0,98,183,0.1) 100%);
  453. border: 1px solid #0B9BFF;
  454. color: #ffffff;
  455. }
  456. :deep(.el-pagination .el-input__inner) {
  457. text-align: center;
  458. color: #ffffff;
  459. }
  460. :deep(.el-pagination.is-background .btn-prev) {
  461. text-align: center;
  462. color: #ffffff;
  463. background: #ff000000;
  464. }
  465. :deep(.el-pagination.is-background .btn-next) {
  466. text-align: center;
  467. color: #ffffff;
  468. background: #ff000000;
  469. }
  470. :deep(.el-form-item--default .el-form-item__label) {
  471. text-align: center;
  472. color: #c6c6c6;
  473. }
  474. :deep(.el-select .el-input__inner) {
  475. font-family: Source Han Sans CN;
  476. font-weight: 400;
  477. font-size: 14px;
  478. color: #ffffff;
  479. cursor: pointer;
  480. }
  481. :deep( .el-input__inner) {
  482. color: #ffffff;
  483. cursor: pointer;
  484. }
  485. :deep(.drainageResponseBox) {
  486. // .el-select .el-input__inner{
  487. // font-family: Source Han Sans CN;
  488. // font-weight: 400;
  489. // font-size: 14px;
  490. // color: #ffffff;
  491. // cursor: pointer;
  492. // }
  493. .el-select .el-form-item__label {
  494. font-family: Source Han Sans CN;
  495. font-weight: 400;
  496. font-size: 14px;
  497. color: #ffffff !important;
  498. }
  499. .el-select .el-input__wrapper {
  500. background: linear-gradient(0deg, rgba(0, 98, 183, 0.8) 0%, rgba(0, 98, 183, 0.1) 100%);
  501. border: 1px solid #0b9bff;
  502. box-shadow: none;
  503. color: #ffffff !important;
  504. }
  505. }
  506. :deep(.el-input__inner::placeholder) {
  507. font-family: Source Han Sans CN;
  508. font-weight: bold;
  509. font-size: 14px;
  510. color: #8FBFFE;
  511. }
  512. :deep(.publicDialog) {
  513. .el-dialog {
  514. background: linear-gradient(180deg, rgba(1, 42, 88, 0.85) 0%, rgba(1, 42, 87, 0.9) 100%);
  515. }
  516.  
  517. .el-dialog__header {
  518. width: 100%;
  519. height: 44px;
  520. background: url('@/assets/images/pictureOnMap/dialogTab.png') no-repeat center;
  521. background-size: 100% 100%;
  522. display: flex;
  523. align-items: center;
  524. .el-dialog__title {
  525. color: #FFFFFF;
  526. line-height: 20px;
  527. padding-left: 21px;
  528. margin-top: -15px;
  529. }
  530. .el-dialog__headerbtn {
  531. .el-icon-close {
  532. color: #ff6767;
  533. font-size: 20px;
  534. }
  535. }
  536. &::after {
  537. display: none;
  538. }
  539. }
  540.  
  541. .el-dialog__body {
  542. background: #071645;
  543. border-bottom: 1px solid #163f80;
  544. padding: 0px 24px 24px 24px;
  545. height: calc(100% - 40px);
  546. }
  547. .el-dialog__footer {
  548. background: #071645;
  549. }
  550. }
  551.  
  552. .publicDBox {
  553. overflow: hidden;
  554. color: #fff;
  555. font-size: 14px;
  556. padding: 20px 0;
  557. .info {
  558. overflow: hidden;
  559. background: rgba(4, 50, 101, 1);
  560. position: relative;
  561. padding: 0 10px;
  562. padding-top: 50px;
  563. .boxName {
  564. position: absolute;
  565. top: 0;
  566. left: 0;
  567. right: 0;
  568. height: 40px;
  569. line-height: 40px;
  570. border-left: 2px solid #3dc1ff;
  571. padding-left: 20px;
  572. color: #3dc1ff;
  573. font-size: 16px;
  574. background: linear-gradient(90deg, rgba(51, 114, 246, 0.2) 0%, rgba(51, 114, 246, 0) 100%);
  575. }
  576. .list {
  577. display: flex;
  578. border-bottom: 1px solid #0e407c;
  579. }
  580. .box {
  581. flex: 1;
  582. display: flex;
  583. align-items: center;
  584. height: 50px;
  585. .title {
  586. width: 100px;
  587. padding-right: 10px;
  588. text-align: right;
  589. overflow: hidden;
  590. }
  591. a {
  592. max-width: 260px;
  593. display: block;
  594. color: rgba(61, 193, 255, 1);
  595. white-space: nowrap;
  596. text-overflow: ellipsis;
  597. overflow: hidden;
  598. }
  599. }
  600. }
  601. }