分布图-环路详细信息框深色模式下详细信息看不清

src/theme/dark.scss

@@ -2,57 +2,57 @@
 ------------------------------- */
 [data-theme='dark'] {
 	// 变量(自定义时，只需修改这里的值)
-	--next-bg-main: #1f1f1f;
-	--next-color-white: #ffffff;
-	--next-color-disabled: #191919;
-	--next-color-bar: #dadada;
-	--next-color-primary: #303030;
-	--next-border-color: #424242;
-	--next-border-black: #333333;
-	--next-border-columns: #2a2a2a;
-	--next-color-seting: #505050;
-	--next-text-color-regular: #9b9da1;
+	--next-bg-main               : #1f1f1f;
+	--next-color-white           : #ffffff;
+	--next-color-disabled        : #191919;
+	--next-color-bar             : #dadada;
+	--next-color-primary         : #303030;
+	--next-border-color          : #424242;
+	--next-border-black          : #333333;
+	--next-border-columns        : #2a2a2a;
+	--next-color-seting          : #505050;
+	--next-text-color-regular    : #9b9da1;
 	--next-text-color-placeholder: #7a7a7a;
-	--next-color-hover: #3c3c3c;
-	--next-color-hover-rgba: #000000;
+	--next-color-hover           : #3c3c3c;
+	--next-color-hover-rgba      : #000000;
 
 
 	// root
-	--next-bg-main-color: var(--next-bg-main) !important;
-	--next-bg-topBar: var(--next-color-disabled) !important;
-	--next-bg-topBarColor: var(--next-color-bar) !important;
-	--next-bg-menuBar: var(--next-color-disabled) !important;
-	--next-bg-menuBarColor: var(--next-color-bar) !important;
-	--next-bg-columnsMenuBar: var(--next-color-disabled) !important;
+	--next-bg-main-color         : var(--next-bg-main) !important;
+	--next-bg-topBar             : var(--next-color-disabled) !important;
+	--next-bg-topBarColor        : var(--next-color-bar) !important;
+	--next-bg-menuBar            : var(--next-color-disabled) !important;
+	--next-bg-menuBarColor       : var(--next-color-bar) !important;
+	--next-bg-columnsMenuBar     : var(--next-color-disabled) !important;
 	--next-bg-columnsMenuBarColor: var(--next-color-bar) !important;
-	--next-border-color-light: var(--next-border-black) !important;
-	--next-color-primary-lighter: var(--next-color-primary) !important;
-	--next-bg-color: var(--next-color-primary) !important;
-	--next-color-dark-hover: var(--next-color-hover) !important;
-	--next-color-menu-hover: var(--next-color-hover-rgba) !important;
-	--next-color-user-hover: var(--next-color-hover-rgba) !important;
-	--next-color-seting-main: var(--next-color-seting) !important;
-	--next-color-seting-aside: var(--next-color-hover) !important;
-	--next-color-seting-header: var(--next-color-primary) !important;
+	--next-border-color-light    : var(--next-border-black) !important;
+	--next-color-primary-lighter : var(--next-color-primary) !important;
+	--next-bg-color              : var(--next-color-primary) !important;
+	--next-color-dark-hover      : var(--next-color-hover) !important;
+	--next-color-menu-hover      : var(--next-color-hover-rgba) !important;
+	--next-color-user-hover      : var(--next-color-hover-rgba) !important;
+	--next-color-seting-main     : var(--next-color-seting) !important;
+	--next-color-seting-aside    : var(--next-color-hover) !important;
+	--next-color-seting-header   : var(--next-color-primary) !important;
 
 	// element plus
-	--el-color-white: var(--next-color-disabled) !important;
-	--el-text-color-primary: var(--next-color-bar) !important;
-	--el-border-color-base: var(--next-border-black) !important;
-	--el-border-color-light: var(--next-border-black) !important;
-	--el-text-color-regular: var(--next-text-color-regular) !important;
-	--el-bg-color: var(--next-color-hover-rgba) !important;
-	--el-color-success-lighter: var(--next-color-primary) !important;
-	--el-color-warning-lighter: var(--next-color-primary) !important;
-	--el-color-danger-lighter: var(--next-color-primary) !important;
-	--el-color-primary-lighter: var(--next-color-primary) !important;
-	--el-color-primary-light-9: var(--next-color-hover) !important;
+	--el-color-white             : var(--next-color-disabled) !important;
+	--el-text-color-primary      : var(--next-color-bar) !important;
+	--el-border-color-base       : var(--next-border-black) !important;
+	--el-border-color-light      : var(--next-border-black) !important;
+	--el-text-color-regular      : var(--next-text-color-regular) !important;
+	--el-bg-color                : var(--next-color-hover-rgba) !important;
+	--el-color-success-lighter   : var(--next-color-primary) !important;
+	--el-color-warning-lighter   : var(--next-color-primary) !important;
+	--el-color-danger-lighter    : var(--next-color-primary) !important;
+	--el-color-primary-lighter   : var(--next-color-primary) !important;
+	--el-color-primary-light-9   : var(--next-color-hover) !important;
 	--el-text-color-disabled-base: var(--el-color-primary) !important;
-	--el-text-color-disabled: var(--next-text-color-placeholder) !important;
-	--el-border-color-lighter: var(--next-border-black) !important;
-	--el-text-color-placeholder: var(--next-text-color-placeholder) !important;
-	--el-disabled-bg-color: var(--next-color-disabled) !important;
-	--el-fill-base: var(--next-color-white) !important;
+	--el-text-color-disabled     : var(--next-text-color-placeholder) !important;
+	--el-border-color-lighter    : var(--next-border-black) !important;
+	--el-text-color-placeholder  : var(--next-text-color-placeholder) !important;
+	--el-disabled-bg-color       : var(--next-color-disabled) !important;
+	--el-fill-base               : var(--next-color-white) !important;
 
 	// button
 	.el-button {
@@ -60,22 +60,26 @@
 			border-color: var(--next-border-color) !important;
 		}
 	}
+
 	.el-button--primary,
 	.el-button--info,
 	.el-button--danger,
 	.el-button--success,
 	.el-button--warning {
-		--el-button-text-color: var(--next-color-white) !important;
-		--el-button-hover-text-color: var(--next-color-white) !important;
+		--el-button-text-color         : var(--next-color-white) !important;
+		--el-button-hover-text-color   : var(--next-color-white) !important;
 		--el-button-disabled-text-color: var(--next-color-white) !important;
+
 		&:hover {
 			border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
 		}
 	}
+
 	.el-button--text,
 	.link-type,
 	.link-type:focus {
 		color: var(--next-color-white) !important;
+
 		&:hover {
 			border-color: var(--el-color-white) !important;
 		}
@@ -85,6 +89,7 @@
 	.el-divider__text {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.el-drawer {
 		border-left: 1px solid var(--next-border-color-light) !important;
 	}
@@ -92,15 +97,17 @@
 	// tabs
 	.el-tabs--border-card {
 		background-color: var(--el-color-white) !important;
-		border-color: var(--next-border-color-light) !important;
+		border-color    : var(--next-border-color-light) !important;
 	}
-	.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
-		background: var(--next-color-primary-lighter);
+
+	.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+		background  : var(--next-color-primary-lighter);
 		border-color: var(--next-border-color-light) !important;
 	}
+
 	.el-table__header,
 	.el-table__body {
-		border-collapse :  collapse !important;
+		border-collapse: collapse !important;
 	}
 
 	.el-divider--horizontal {
@@ -110,6 +117,7 @@
 	.el-loading-mask {
 		background: var(--next-color-primary-lighter) !important;
 	}
+
 	// 
 	.el-drawer.rtl.open {
 		background: var(--el-color-white) !important;
@@ -124,12 +132,12 @@
 		background: var(--next-border-color-light) !important;
 	}
 
-	input:-webkit-autofill{
-		-webkit-box-shadow:0 0 0 1000px var(--next-border-color-light) inset !important;
+	input:-webkit-autofill {
+		-webkit-box-shadow: 0 0 0 1000px var(--next-border-color-light) inset !important;
 	}
-	 
+
 	// 组态管理-组态设计
-	.page-wrapper > iframe {
+	.page-wrapper>iframe {
 		background: var(--next-color-primary-lighter) !important;
 	}
 
@@ -137,98 +145,128 @@
 	.home-card-item {
 		border: 1px solid var(--next-border-color-light) !important;
 	}
+
 	.el-card {
 		background-color: var(--el-color-white) !important;
-		color: var(--el-text-color-primary) !important;
-		border: 1px solid var(--next-border-color-light) !important;
+		color           : var(--el-text-color-primary) !important;
+		border          : 1px solid var(--next-border-color-light) !important;
 	}
-	.el-button.is-text:not(.is-disabled):focus, .el-button.is-text:not(.is-disabled):hover {
+
+	.el-button.is-text:not(.is-disabled):focus,
+	.el-button.is-text:not(.is-disabled):hover {
 		background-color: transparent;
 	}
+
 	.el-scrollbar__view {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.pagination-container {
 		background-color: var(--el-color-white) !important;
 	}
+
 	// .el-tag {
 	// 	background-color: var(--el-color-white) !important;
 	// }
 	.el-collapse {
 		--el-collapse-header-bg-color: var(--el-color-white) !important;
 	}
+
 	// .el-switch__core {
 	// 	background-color: var(--el-text-color-primary) !important;
 	// }
 	.el-select-dropdown__item.selected {
 		background-color: var(--el-color-white) !important;
 	}
-	.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+
+	.el-select-dropdown__item.hover,
+	.el-select-dropdown__item:hover {
 		background-color: var(--el-bg-color) !important;
 	}
+
 	.el-dialog {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.el-dialog__body {
 		border-top-color: var(--next-border-color-light) !important;
 	}
+
 	.el-textarea__inner {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.el-textarea {
 		--el-input-border-color: var(--next-border-color-light) !important;
 	}
+
 	.el-button--large {
 		background-color: var(--el-color-white) !important;
-		border: 1px solid var(--next-border-color-light) !important;
+		border          : 1px solid var(--next-border-color-light) !important;
 	}
+
 	.el-input-number__decrease,
 	.el-input-number__increase {
 		border-color: var(--next-border-color-light) !important;
 	}
+
 	.el-collapse-item__wrap {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.el-input__wrapper {
 		background-color: var(--el-color-white) !important;
-		color: var(--el-text-color-primary) !important;
+		color           : var(--el-text-color-primary) !important;
 	}
+
 	.el-input {
 		--el-input-border-color: var(--next-border-color-light) !important;
 		--el-input-hover-border: var(--el-text-color-disabled) !important;
 
 	}
+
 	.el-date-editor {
-		--el-input-border-color: var(--next-border-color-light) !important;
+		--el-input-border-color      : var(--next-border-color-light) !important;
 		--el-input-hover-border-color: var(--el-text-color-disabled) !important;
 	}
+
 	.el-date-range-picker {
 		--el-datepicker-inrange-bg-color: var(--el-bg-color) !important;
 	}
+
 	.el-date-table td.in-range .el-date-table-cell:hover {
 		background-color: var(--next-border-color-light) !important;
 	}
 
 	.el-tree {
-		background-color: var(--el-color-white) !important;
+		background-color             : var(--el-color-white) !important;
 		--el-tree-node-hover-bg-color: var(--el-color-white) !important;
-		
+
 	}
+
 	.el-tree-node__content .el-select-dropdown__item.hover {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.el-tree-node__content:hover {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.el-table th.el-table__cell,
 	.el-table tr {
 		background-color: var(--el-color-white) !important;
-		color: var(--el-text-color-primary) !important;
+		color           : var(--el-text-color-primary) !important;
+
+		.cell {
+			color: var(--el-text-color-primary) !important;
+		}
 	}
+
 	.el-scrollbar__view .el-table__body tr:hover>td.el-table__cell,
 	.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
 		background-color: var(--el-bg-color) !important;
 	}
+
 	.el-table__body-wrapper tr td.el-table-fixed-column--left,
 	.el-table__body-wrapper tr td.el-table-fixed-column--right,
 	.el-table__body-wrapper tr th.el-table-fixed-column--left,
@@ -243,54 +281,70 @@
 	.el-table__header-wrapper tr th.el-table-fixed-column--right {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.add-flag-container {
 		border-bottom-color: var(--next-border-color-light) !important;
 	}
+
 	.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.help-wrap .help-item .help-item-label {
 		background-color: var(--next-border-color-light) !important;
 	}
+
 	.table-wrap .table-item-wrap .label {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.el-alert,
 	.notice-bar {
-		border: 1px solid var(--next-border-color) !important;
+		border          : 1px solid var(--next-border-color) !important;
 		background-color: var(--next-color-disabled) !important;
 	}
+
 	.system-dic-container {
+
 		.content,
 		.content-box {
 			background-color: var(--next-color-disabled) !important;
-			color: var(--el-text-color-primary) !important;
+			color           : var(--el-text-color-primary) !important;
 		}
+
 		.ant-descriptions-row {
 			border-bottom-color: var(--next-border-color-light) !important;
 		}
+
 		.ant-descriptions-view {
 			border-color: var(--next-border-color-light) !important;
 		}
+
 		.ant-descriptions-item-label,
 		.ant-descriptions-item-content {
 			background-color: var(--next-color-disabled) !important;
-			color: var(--el-text-color-primary) !important;
-			border-color: var(--next-border-color-light) !important;
+			color           : var(--el-text-color-primary) !important;
+			border-color    : var(--next-border-color-light) !important;
 		}
 	}
-	.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
+
+	.el-cascader-node:not(.is-disabled):focus,
+	.el-cascader-node:not(.is-disabled):hover {
 		background-color: var(--el-bg-color) !important;
 	}
+
 	.el-tabs--border-card>.el-tabs__header {
 		background-color: var(--next-color-disabled) !important;
 	}
+
 	.el-upload--picture-card {
 		background-color: var(--next-color-disabled) !important;
-		
+
 	}
+
 	.wu-box {
 		border-color: var(--next-border-color-light) !important;
+
 		.wu-title {
 			border-color: var(--next-border-color-light) !important;
 		}
@@ -305,6 +359,7 @@
 	.el-color-picker__mask {
 		background: unset !important;
 	}
+
 	.el-color-picker__trigger {
 		border: 1px solid var(--next-border-color-light) !important;
 	}
@@ -312,22 +367,27 @@
 	// popper / dropdown
 	.el-popper {
 		border: 1px solid var(--next-border-color) !important;
-		color: var(--el-text-color-primary) !important;
+		color : var(--el-text-color-primary) !important;
+
 		.el-popper__arrow:before {
 			background: var(--el-color-white) !important;
-			border: 1px solid var(--next-border-color);
+			border    : 1px solid var(--next-border-color);
 		}
+
 		a {
 			color: var(--el-text-color-primary) !important;
 		}
 	}
+
 	.el-popper,
 	.el-dropdown-menu {
 		background: var(--el-color-white) !important;
 	}
+
 	.el-dropdown-menu__item:hover:not(.is-disabled) {
 		background: var(--el-bg-color) !important;
 	}
+
 	.el-dropdown-menu__item.is-disabled {
 		font-weight: 700 !important;
 	}
@@ -335,11 +395,12 @@
 	// input
 	.el-input-group__append,
 	.el-input-group__prepend {
-		border: var(--el-input-border) !important;
+		border      : var(--el-input-border) !important;
 		border-right: none !important;
-		background: var(--next-color-disabled) !important;
-		border-left: 0 !important;
+		background  : var(--next-color-disabled) !important;
+		border-left : 0 !important;
 	}
+
 	.el-input-number__decrease,
 	.el-input-number__increase {
 		background: var(--next-color-disabled) !important;
@@ -354,6 +415,7 @@
 	.el-pagination.is-background .el-pager li:not(.disabled).active {
 		color: var(--next-color-white) !important;
 	}
+
 	.el-pagination.is-background .btn-next,
 	.el-pagination.is-background .btn-prev,
 	.el-pagination.is-background .el-pager li {
@@ -362,9 +424,10 @@
 
 	// radio
 	.el-radio-button:not(.is-active) .el-radio-button__inner {
-		border: 1px solid var(--next-border-color-light) !important;
+		border     : 1px solid var(--next-border-color-light) !important;
 		border-left: 0 !important;
 	}
+
 	.el-radio-button.is-active .el-radio-button__inner {
 		color: var(--next-color-white) !important;
 	}
@@ -378,17 +441,21 @@
 	.editor-container {
 		.w-e-toolbar {
 			background: var(--el-color-white) !important;
-			border: 1px solid var(--next-border-color-light) !important;
+			border    : 1px solid var(--next-border-color-light) !important;
+
 			.w-e-menu:hover {
 				background: var(--next-color-user-hover) !important;
+
 				i {
 					color: var(--el-text-color-primary) !important;
 				}
 			}
 		}
+
 		.w-e-text-container {
-			border: 1px solid var(--next-border-color-light) !important;
+			border    : 1px solid var(--next-border-color-light) !important;
 			border-top: none !important;
+
 			.w-e-text {
 				background: var(--el-color-white) !important;
 			}
@@ -403,6 +470,7 @@
 	// dialog
 	.el-dialog {
 		border: 1px solid var(--el-border-color-lighter);
+
 		.el-dialog__header {
 			color: var(--el-text-color-primary) !important;
 		}
@@ -412,19 +480,21 @@
 	.layout-columns-aside ul .layout-columns-active {
 		color: var(--next-color-white) !important;
 	}
+
 	.layout-columns-aside {
 		border-right: 1px solid var(--next-border-columns);
 	}
 
-	.data-overview  .home-card-one .home-card-item *span{
+	.data-overview .home-card-one .home-card-item *span {
 		color: var(--next-color-white) !important;
 	}
 
 	.monitor-weather {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.monitor-weather .left .city-weather-data-overview-wrap section {
-		color: #fff!important;
+		color: #fff !important;
 
 	}
 
@@ -432,13 +502,16 @@
 	.monitor-weather .left .city-weather-data-overview-wrap section span:nth-child(2) {
 		border-color: var(--next-border-color-light) !important;
 	}
+
 	.monitor-weather .left .city-weather-data-overview-wrap section:nth-child(2n+1) {
 		background-color: var(--el-color-white) !important;
 	}
+
 	.monitor-weather .left .city-weather-data-overview-wrap section:nth-child(2n) {
 		background-color: var(--next-border-color-light) !important;
 	}
+
 	.monitor-weather .left .city-weather-data-overview-wrap section.active {
 		background-color: #1d3f4b !important;
 	}
-}
+}

src/views/heating/monitor/map.vue

@@ -14,7 +14,7 @@
         </el-select>
       </div>
       <!-- 显示弹层区域 -->
-      <div class="view">
+      <div class="view map-hover-station">
         <div class="view-div" v-for="(item, index) in viewList" :key="index">
           <div class="view-div-head">
             <div class="title">{{ item.name }}环路</div>
@@ -213,6 +213,14 @@ const renderStation = (list: any[]) => {
 </script>
 
 <style lang="scss">
+[data-theme='dark'] .map-hover-station {
+	.view-div-head,
+	.view-div {
+		color: #fff;
+		background: #222;
+	}
+}
+
 .BMap_bubble_pop {
 	width: 220px;
 	padding: 0 !important;
@@ -285,6 +293,10 @@ const renderStation = (list: any[]) => {
 }
 </style>
 <style scoped lang="scss">
+.map-hover-station {
+	max-height: 98%;
+	overflow-y: auto;
+}
 .view {
 	position: absolute;
 	top: 10px;