Newer
Older
KaiFengPC / src / assets / styles / publicXG.scss
@zhangdeliang zhangdeliang on 23 May 8 KB 初始化项目
  1. //main-container全局样式
  2. .publicContainer {
  3. padding: 20px;
  4. color: #fff;
  5. }
  6. // 公共字体
  7. @font-face {
  8. font-family: 'YouSheBiaoTiHei';
  9. src: url('./../fonts/YouSheBiaoTiHei.TTF');
  10. }
  11. .text-center {
  12. text-align: center;
  13. }
  14.  
  15. .multiselect {
  16. line-height: 16px;
  17. }
  18.  
  19. .multiselect--active {
  20. z-index: 1000 !important;
  21. }
  22. .dialog-detail-box {
  23. .dialog-form-detail {
  24. border-bottom: 1px solid $mainColor2;
  25. border-right: 1px solid $mainColor2;
  26. .flex-r {
  27. border-right: 1px solid $mainColor2;
  28. border-top: 1px solid $mainColor2;
  29. width: 50%;
  30. }
  31.  
  32. .detail-label {
  33. width: 118px;
  34. text-align: center;
  35. padding: 10px;
  36. background: $mainColor1;
  37. border-radius: 0px 0px 0px 0px;
  38. opacity: 1;
  39. border: 1px solid $mainColor2;
  40. border-bottom: 0;
  41. font-size: 14px;
  42. font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
  43. font-weight: 700;
  44. color: #c6c6c6;
  45. }
  46. .detail-value {
  47. font-size: 14px;
  48. font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  49. font-weight: 400;
  50. color: #fff;
  51. padding: 8px 8px;
  52. flex: 1;
  53. }
  54. }
  55. }
  56. // 长效考核标题
  57. .longTermTitle {
  58. position: absolute;
  59. left: 35%;
  60. top: 20px;
  61. font-size: 22px;
  62. color: #21adda;
  63. z-index: 99;
  64. }
  65. // 一张图标题 排水防涝
  66. .selectTitle {
  67. display: flex;
  68. align-items: center;
  69. justify-content: space-between;
  70. height: 45px;
  71. background: url('@/assets/images/setting/titleBg.png') no-repeat;
  72. background-size: 100% 100%;
  73. .name {
  74. font-family: YouSheBiaoTiHei;
  75. font-size: 22px;
  76. font-style: normal;
  77. font-weight: bold;
  78. line-height: normal;
  79. letter-spacing: 2px;
  80. color: #21adda;
  81. margin-left: 70px;
  82. background: linear-gradient(180deg, #fff 26.56%, #21adda 100%);
  83. background-clip: text;
  84. -webkit-background-clip: text;
  85. -webkit-text-fill-color: transparent;
  86. }
  87. .titleEnd {
  88. font-size: 14px;
  89. .el-button {
  90. margin-left: 8px;
  91. }
  92. }
  93. }
  94. // 一张图标题 海绵综合
  95. .selectTitleHM {
  96. display: flex;
  97. align-items: center;
  98. justify-content: space-between;
  99. height: 45px;
  100. background: url('@/assets/images/Sponge_screen/ListBox_Header_BG.png') no-repeat;
  101. background-size: 100% 100%;
  102. .name {
  103. font-family: YouSheBiaoTiHei;
  104. font-size: 18px;
  105. font-style: normal;
  106. font-weight: bold;
  107. line-height: normal;
  108. letter-spacing: 2px;
  109. color: #21adda;
  110. margin-left: 40px;
  111. background: linear-gradient(180deg, #fff 26.56%, #21adda 100%);
  112. background-clip: text;
  113. -webkit-background-clip: text;
  114. -webkit-text-fill-color: transparent;
  115. }
  116. .titleEnd {
  117. font-size: 14px;
  118. .el-button {
  119. margin-left: 8px;
  120. }
  121. }
  122. }
  123. .el-textarea .el-input__count {
  124. background: transparent !important;
  125. }
  126. // 公共的表单提交
  127. .publicForm {
  128. .el-select,
  129. .el-input,
  130. .el-textarea {
  131. width: 100% !important;
  132. }
  133. }
  134. .red {
  135. color: $red !important;
  136. }
  137. .green {
  138. color: $green !important;
  139. }
  140. // 省略号
  141. .ellipsis {
  142. overflow: hidden;
  143. white-space: nowrap; /* 防止文字换行 */
  144. text-overflow: ellipsis; /* 超出部分显示省略号 */
  145. }
  146. // 公共的弹窗详情
  147. .publicDetail {
  148. display: flex;
  149. flex-wrap: wrap;
  150. margin-bottom: 30px;
  151. .part {
  152. display: flex;
  153. flex-wrap: wrap;
  154. align-items: center;
  155. width: 48%;
  156. margin-right: 2%;
  157. line-height: 30px;
  158. color: #c6c6c6;
  159. .title {
  160. font-weight: bold;
  161. }
  162.  
  163. .content {
  164. margin-left: 10px;
  165. .el-image {
  166. width: 100px;
  167. height: 100px;
  168. }
  169. }
  170. }
  171. }
  172.  
  173. // 表单提交 flex50 一行两列
  174. .flex50 {
  175. display: flex;
  176. flex-wrap: wrap;
  177. .el-form-item {
  178. width: 48%;
  179. margin-right: 2%;
  180. }
  181. }
  182.  
  183. // 批量新增
  184. .batchAdd {
  185. display: flex;
  186. flex-direction: column;
  187. margin: 0px 0px 20px 0px;
  188.  
  189. .batchTitle {
  190. width: 100%;
  191. display: flex;
  192. justify-content: space-between;
  193. font-weight: bold;
  194. height: 30px;
  195.  
  196. p {
  197. text-align: center;
  198. width: 150px;
  199. }
  200. }
  201.  
  202. .batchCon {
  203. display: flex;
  204. justify-content: space-between;
  205. align-items: center;
  206. border-top: 1px dashed #c6c6c6;
  207. margin-top: 20px;
  208.  
  209. .el-form-item {
  210. margin: 10px 0px 0px 5px;
  211. width: 150px;
  212. .el-form-item__content {
  213. margin-left: 0px !important;
  214. }
  215. }
  216. }
  217. }
  218. // 一张图公共样式
  219. .mapTitle {
  220. font-weight: bold;
  221. font-size: 15px;
  222. color: #fff;
  223. width: 100%;
  224. height: 25px;
  225. line-height: 25px;
  226. border-left: 5px solid #00c7f2;
  227. background-size: 100% 100%;
  228. padding-left: 15px;
  229. }
  230.  
  231. .tableLineMonitor {
  232. display: flex;
  233. justify-content: flex-end;
  234. margin-bottom: 5px;
  235. .el-icon {
  236. font-size: 26px;
  237. color: #5796ff;
  238. margin-right: 15px;
  239. cursor: pointer;
  240. }
  241. }
  242.  
  243. // 图例色块
  244. .mapLegendColor {
  245. position: absolute;
  246. bottom: 20px;
  247. right: 430px;
  248. z-index: 99;
  249. background: $mainColor2;
  250. box-shadow: 0px 0px 20px $mainColor1;
  251. padding: 10px;
  252. border-radius: 8px;
  253. p {
  254. line-height: 25px;
  255. span {
  256. display: inline-block;
  257. width: 20px;
  258. height: 10px;
  259. border-radius: 5px;
  260. margin-right: 6px;
  261. }
  262. .info {
  263. background: #47e44e;
  264. }
  265. .primary {
  266. background: #4fd4ff;
  267. }
  268. .yellow {
  269. background: #f4e443;
  270. }
  271. .blue {
  272. background: $light-blue;
  273. }
  274. .pink {
  275. background: #f28c3a;
  276. }
  277. .red {
  278. background: #dd3737;
  279. }
  280. .green {
  281. background: #47e44e;
  282. }
  283. .reds {
  284. background: #ff0303;
  285. }
  286. }
  287. .title {
  288. font-size: 16px;
  289. font-weight: bold;
  290. }
  291. }
  292. // 暂无数据
  293. .noData {
  294. width: 100%;
  295. text-align: center;
  296. color: #c6c6c6;
  297. line-height: 200px;
  298. }
  299. // 长效考核板块
  300. .rightZkCX {
  301. right: 520px;
  302. }
  303. .rightSqCX {
  304. right: 10px;
  305. }
  306. .videoImgRCX {
  307. width: 13px;
  308. height: 147px;
  309. background: url('@/assets/newImgs/down.png');
  310. background-size: 100% 100%;
  311. transform: rotate(180deg);
  312. color: #fff;
  313. position: absolute;
  314. top: 340px;
  315. z-index: 99;
  316. cursor: pointer;
  317. transition: 0.5s ease-in-out;
  318. }
  319.  
  320. // gis地图公共popup样式
  321. .popupMapPoint {
  322. background: $mainColor1;
  323. border-radius: 8px;
  324. .title {
  325. text-align: center;
  326. font-weight: bold;
  327. font-size: 16px;
  328. background: $mainColor2;
  329. padding: 5px;
  330. }
  331. .part {
  332. padding: 5px 10px;
  333. }
  334. }
  335. // 工改文件上传的列表展示
  336. .ggFileListShow {
  337. flex-wrap: wrap;
  338. display: flex;
  339. width: 100%;
  340. margin-top: 10px;
  341. .part {
  342. cursor: pointer;
  343. align-items: center;
  344. margin-right: 10px;
  345. margin-bottom: 5px;
  346. background: $mainColor2;
  347. padding: 1px 6px;
  348. border-radius: 5px;
  349. &:hover {
  350. background: $mainColor1;
  351. }
  352. .name {
  353. width: 150px;
  354. }
  355. .el-icon {
  356. margin-left: 8px;
  357. }
  358. }
  359. }
  360.  
  361. // 一张图左右面板公共样式
  362. .rightZkCXHK {
  363. right: 470px;
  364. }
  365. .leftZkHM {
  366. left: 470px;
  367. }
  368. .leftSqHM {
  369. left: 10px;
  370. }
  371. .videoImgHM {
  372. width: 13px;
  373. height: 147px;
  374. background: url('@/assets/newImgs/down.png');
  375. background-size: 100% 100%;
  376. color: #fff;
  377. position: absolute;
  378. top: 340px;
  379. z-index: 99;
  380. cursor: pointer;
  381. transition: 0.5s ease-in-out;
  382. }
  383. .assContentLeftHM {
  384. width: 450px;
  385. height: calc(100vh - 100px);
  386. background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);
  387. border-radius: 8px;
  388. position: absolute;
  389. top: 20px;
  390. left: 20px;
  391. z-index: 90;
  392. padding: 15px;
  393. overflow: auto;
  394. }
  395. .assContentRightHM {
  396. width: 450px;
  397. height: calc(100vh - 100px);
  398. background: linear-gradient(0deg, #011431 0%, rgba(1, 20, 49, 0.8) 100%);
  399. border-radius: 8px;
  400. position: absolute;
  401. top: 20px;
  402. right: 20px;
  403. z-index: 90;
  404. padding: 15px;
  405. overflow-x: hidden;
  406. overflow-y: auto;
  407. }
  408. .OneLine {
  409. display: flex;
  410. align-items: center;
  411. justify-content: space-between;
  412. width: 410px;
  413. background: url('@/assets/newImgs/HaiMianScreen/natural.png');
  414. background-size: 100% 100%;
  415. z-index: 115;
  416. padding: 8px;
  417. margin: 8px auto;
  418. }
  419. .lineLeft {
  420. margin-left: 30px;
  421. color: #2482e6;
  422. font-weight: 600;
  423. }
  424. .lineRight {
  425. font-size: 14px;
  426. }
  427. .planCont {
  428. margin: 10px auto;
  429. font-size: 13px;
  430. .activePlan {
  431. background: $mainColor1;
  432. }
  433. .flex {
  434. margin-bottom: 5px;
  435. padding: 5px 10px;
  436. border-radius: 8px;
  437. align-items: center;
  438. cursor: pointer;
  439. .title {
  440. width: 110px;
  441. color: $--color-primary;
  442. }
  443. .el-progress {
  444. flex: 1;
  445. margin: 0px 15px;
  446. .name {
  447. font-size: 15px;
  448. font-weight: bold;
  449. padding-right: 10px;
  450. }
  451. }
  452. }
  453. }