Skip to content

D
DC-TOM
Commit 5a77e1a8 authored by Cai Wei's avatar Cai Wei
Browse files
Options

feat(*): 除尘器监控样式主题修改

parent ee53da0e
Hide whitespace changes
Inline Side-by-side
Showing with 475 additions and 99 deletions
src/layout/index.vue
View file @ 5a77e1a8
......@@ -239,12 +239,13 @@ export default {
box-sizing: border-box;
overflow: hidden;
padding: 1.25rem 1.25rem 2rem;
background: #e7eef5;
background: #000;
}
}
.extend {
width: calc(100% - 63px);
}
}
</style>
<style>
......
src/main.js
View file @ 5a77e1a8
import { createApp } from "vue";
import "./style.css";
import "./theme.scss";
import App from "./App.vue";
import { router } from "./router";
import "@/router/routePermission.js";
......
src/style.css
View file @ 5a77e1a8
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--bg-primary: #101418;
--bg-secondary: #181d21;
--text-primary: #ffffff;
--text-secondary: #8a9199;
--accent: #36f1cd;
--success: #36f1cd;
--warning: #f5b83d;
--danger: #ff4d4d;
--chart-blue: #4e7bfa;
--chart-teal: #36f1cd;
--chart-green: #36f1cd;
--chart-yellow: #f5b83d;
--border-color: #131619;
--panel-bg: #181d21;
--header-bg: #131619;
}
* {
padding: 0;
margin: 0;
padding: 0;
margin: 0;
}
.page-container {
width: 100%;
background: #ffffff;
border-radius: 6px;
box-shadow: 0px 3px 6px 0px rgba(13,15,18,0.10);
padding: 1rem;
box-sizing: border-box;
width: 100%;
background: #ffffff;
border-radius: 6px;
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
padding: 1rem;
box-sizing: border-box;
}
.view-btn {
color: #2182a0 !important;
color: #2182a0 !important;
}
.edit-btn {
color: #2182a0 !important;
color: #2182a0 !important;
}
.el-button--primary {
background-color: #2182a0 !important;
border-color: #2182a0 !important;
background-color: #2182a0 !important;
border-color: #2182a0 !important;
}
\ No newline at end of file
src/theme.scss 0 → 100644
View file @ 5a77e1a8
.el-form-item__label {
font-size: 14px;
color: #909399 !important;
}
.el-select {
width: 230px;
.el-select__placeholder {
color: #d9dbdc !important;
}
.el-select__wrapper {
background-color: var(--bg-secondary) !important;
box-shadow: 0 0 0 1px #2a2a2a inset !important;
}
.el-input {
background-color: var(--bg-secondary);
input {
color: #d9dbdc;
background-color: transparent;
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
}
}
}
.el-select-dropdown {
background-color: var(--bg-secondary);
border: none;
.el-select-dropdown__item {
color: #d9dbdc;
&.selected {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
background-color: rgba(255, 255, 255, 0.05);
}
}
}
.el-popper.is-light, .el-popper.is-light>.el-popper__arrow:before {
background: var(--bg-secondary) !important;
border: 1px solid var(--bg-secondary) !important;
}
.el-select-dropdown__item.is-hovering {
background-color: rgba(255, 255, 255, 0.1) !important;
}
.el-select-dropdown__item {
color: #d9dbdc;
&.selected {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
background-color: rgba(255, 255, 255, 0.05);
}
}
.el-select-dropdown__item.is-hovering {
background-color: rgba(255, 255, 255, 0.1);
}
.el-popper__arrow {
background-color: #253a67 !important;
}
.el-range-editor {
background-color: var(--bg-secondary) !important;
border-color: var(--bg-secondary) !important;
.el-range__icon {
display: none !important;
}
.el-range-input {
color: #d9dbdc !important;
background-color: transparent !important;
font-size: 15px !important;
&::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
}
.el-range-separator {
color: rgba(255, 255, 255, 0.7) !important;
}
}
.el-icon {
color: rgba(255, 255, 255, 0.7) !important;
}
.el-date-editor.el-input__wrapper {
box-shadow: 0 0 0 1px #2a2a2a inset !important;
}
.el-popper.is-light {
border: 1px solid #181d21 !important;
}
.date-picker-popper {
border: 1px solid #181d21 !important;
box-shadow: #181d21 !important;
.el-date-editor {
background: #00000040;
box-shadow: 0 0 0 2px #181d21 inset !important;
}
.el-input__wrapper {
box-shadow: 0 0 0 1px #535252 inset !important;
}
.el-date-range-picker__time-header {
border-bottom: 1px solid #8a9199 !important;
}
.el-picker-panel {
color: #d9dbdc !important;
}
.el-picker-panel__body {
background: #181d21;
}
.el-date-range-picker__content.is-left {
border-right: 1px solid #181d21 !important;
}
.el-date-table th {
border-bottom: 1px solid #181d21 !important;
}
.el-date-table th {
color: #d9dbdc !important;
}
.el-date-table td.in-range .el-date-table-cell {
background-color: #181d21 !important;
}
.el-date-editor .el-range__icon,
.el-date-editor .el-range-separator,
.el-date-editor .el-range-input {
color: #d9dbdc !important;
font-size: 14px !important;
}
.el-picker-panel__footer {
background-color: #181d21 !important;
border-top-color: #181d21 !important;
}
.el-input__wrapper {
background-color: #181d21 !important;
}
.el-button.is-text {
color: #d9dbdc !important;
}
.el-button.is-plain {
color: #4e7bfa !important;
background-color: rgba(78, 123, 250, 0.2) !important;
border-color: #4e7bfa !important;
}
.el-button.is-text:not(.is-disabled):hover {
background-color: #9b9a9a !important;
}
.el-select__wrapper {
background-color: #181d21 !important;
}
.el-input__inner {
color: #d9dbdc !important;
}
.el-picker-panel .el-time-panel {
background-color: #181d21 !important;
border-color: #181d21 !important;
}
.el-time-panel__footer {
border-color: #181d21 !important;
}
.el-time-spinner__item.is-active:not(.is-disabled) {
color: #d9dbdc !important;
}
.el-select-dropdown {
background-color: #181d21 !important;
}
.el-select-dropdown__item {
color: #d9dbdc !important;
}
.el-select-dropdown__item .is-hovering {
color: #181d21 !important;
}
.date-picker-popper .el-picker-panel__body {
background-color: #181d21 !important;
}
}
\ No newline at end of file
src/utils/chart.js
View file @ 5a77e1a8
......@@ -3,7 +3,13 @@ import { color } from "echarts";
export const getLineOption = (xData = [], seriesData = []) => ({
tooltip: {
trigger: "axis",
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
}
},
grid: {
left: "3%",
right: "4%",
......@@ -18,6 +24,9 @@ export const getLineOption = (xData = [], seriesData = []) => ({
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
color: '#fff'
}
},
xAxis: {
type: "category",
......@@ -26,22 +35,22 @@ export const getLineOption = (xData = [], seriesData = []) => ({
},
axisLine: {
lineStyle: {
color: "#E9ECF2",
color: "#3a3f45",
},
},
axisLabel: {
color: "rgba(0,0,0,0.6)",
color: "#909399",
},
data: xData,
},
yAxis: {
type: "value",
axisLabel: {
color: "rgba(0,0,0,0.6)",
color: "#909399",
},
splitLine: {
lineStyle: {
color: "#E9ECF2",
color: "#3a3f45",
type: "dashed",
},
},
......@@ -74,6 +83,9 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({
itemWidth: 20,
itemHeight: 10,
itemGap: 10,
textStyle: {
color: '#fff'
}
},
xAxis: {
type: "category",
......@@ -82,22 +94,22 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({
},
axisLine: {
lineStyle: {
color: "#E9ECF2",
color: "#3a3f45",
},
},
axisLabel: {
color: "rgba(0,0,0,0.6)",
color: "#909399",
},
data: xData,
},
yAxis: {
type: "value",
axisLabel: {
color: "rgba(0,0,0,0.6)",
color: "#909399",
},
splitLine: {
lineStyle: {
color: "#E9ECF2",
color: "#3a3f45",
type: "dashed",
},
},
......@@ -120,7 +132,7 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
axisPointer: {
type: "line",
lineStyle: {
color: "#6E7079",
color: "#909399",
width: 1,
},
},
......@@ -138,11 +150,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#E9ECF2",
color: "#3a3f45",
},
},
axisLabel: {
color: "rgba(0,0,0,0.6)",
color: "#909399",
fontSize: 12,
interval: "auto",
rotate: 0,
......@@ -161,12 +173,12 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
// max: 600,
// interval: 200,
axisLabel: {
color: "rgba(0,0,0,0.6)",
color: "#909399",
formatter: "{value}",
},
splitLine: {
lineStyle: {
color: "#E9ECF2",
color: "#3a3f45",
type: "dashed",
},
},
......@@ -211,8 +223,11 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康度指数（%）") => ({
tooltip: {
trigger: "axis",
axisPointer: {
// type: "none"
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 2,
textStyle: {
color: '#fff'
}
},
grid: {
......@@ -228,6 +243,9 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
itemWidth: 10,
itemHeight: 10,
itemGap: 10,
textStyle: {
color: '#fff'
}
},
xAxis: {
type: "category",
......@@ -236,22 +254,22 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
},
axisLine: {
lineStyle: {
color: "#E9ECF2",
color: "#3a3f45",
},
},
axisLabel: {
color: "rgba(0,0,0,0.6)",
color: "#909399",
},
data: xData,
},
yAxis: {
type: "value",
axisLabel: {
color: "rgba(0,0,0,0.6)",
color: "#909399",
},
splitLine: {
lineStyle: {
color: "#E9ECF2",
color: "#3a3f45",
type: "dashed",
},
},
......@@ -298,7 +316,7 @@ export const getGaugeOption = (option) => {
distance: -30,
length: 10,
lineStyle: {
color: "#fff",
color: "#909399",
width: 2,
},
},
......@@ -306,13 +324,13 @@ export const getGaugeOption = (option) => {
distance: -30,
length: 38,
lineStyle: {
color: '#fff',
color: '#909399',
width: 2
},
},
axisLabel: {
color: 'inherit',
color: '#909399',
fontSize: 10,
distance: 30,
rotate: "tangential",
......@@ -322,6 +340,7 @@ export const getGaugeOption = (option) => {
offsetCenter: [0, "70%"],
fontSize: 14,
fontWeight: "bolder",
color: "#fff"
},
detail: {
fontSize: 20,
......@@ -330,7 +349,7 @@ export const getGaugeOption = (option) => {
formatter: function (value) {
return value;
},
color: "inherit",
color: "#fff",
},
data: [
{
......
src/views/dustMonitoring/components/healthyProgress.vue
View file @ 5a77e1a8
......@@ -2,7 +2,7 @@
<!-- 方形进度条 -->
<div class="healthy-progress">
<div
class="h-8 bg-slate-800/60 rounded overflow-hidden border border-slate-700 healthy-progress-bar"
class="h-8 rounded overflow-hidden border healthy-progress-bar"
:class="borderColor"
>
<div
......@@ -87,15 +87,15 @@ onMounted(() => {
<style scoped>
.box-color-60 {
background-color: #fff;
background-color: #181d21;
border-color: rgba(255, 106, 106, 1);
}
.box-color-90 {
background-color: #fff;
background-color: #181d21;
border-color: rgba(245, 199, 1, 1);
}
.box-color-default {
background-color: #fff;
background-color: #181d21;
border-color: rgba(8, 199, 51, 1);
}
.healthy-text-position {
......@@ -105,6 +105,7 @@ onMounted(() => {
left: 0;
transform: translateY(-50%);
padding-left: 10px;
color: #fff;
}
.healthy-progress {
height: calc(100%);
......@@ -121,7 +122,7 @@ onMounted(() => {
rgba(255, 106, 106, 1),
rgba(255, 106, 106, 1) 10px,
rgba(255, 106, 106, 1) 15px,
rgba(255, 255, 255, 0.1) 20px
rgba(255, 106, 106, 0.3) 20px
);
background-size: 28px 28px;
}
......@@ -131,7 +132,7 @@ onMounted(() => {
rgba(245, 199, 1, 1),
rgba(245, 199, 1, 1) 10px,
rgba(245, 199, 1, 1) 15px,
rgba(255, 255, 255, 0.1) 20px
rgba(245, 199, 1, 0.3) 20px
);
background-size: 28px 28px;
}
......@@ -141,7 +142,7 @@ onMounted(() => {
rgba(8, 199, 51, 1),
rgba(8, 199, 51, 1) 10px,
rgba(8, 199, 51, 1) 15px,
rgba(8, 199, 51, 0.1) 20px
rgba(8, 199, 51, 0.3) 20px
);
background-size: 28px 28px;
}
......
src/views/dustMonitoring/components/warn.vue
View file @ 5a77e1a8
......@@ -51,10 +51,12 @@ const toDetail = () => {
align-items: center;
margin-bottom: 5px;
padding: 4px 0px 4px 2px;
box-shadow: rgba(53, 58, 62, 0.04) 0px 1px 10px 0px,
rgba(53, 58, 62, 0.04) 0px 2px 4px 0px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px,
rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
font-size: 14px;
color: #333;
color: #fff;
background-color: #232a31;
border-radius: 4px;
img {
width: 20px;
height: auto;
......@@ -65,7 +67,7 @@ const toDetail = () => {
.content::-webkit-scrollbar {
width: 0px;
background-color: rgba(13, 15, 18, 0.1);
background-color: rgba(58, 63, 69, 0.5);
}
.layout1 {
......
src/views/dustMonitoring/index.vue
View file @ 5a77e1a8
......@@ -25,9 +25,11 @@
<el-form-item label="分析时间">
<el-date-picker
v-model="form.dateValue"
type="daterange"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 450px"
popper-class="date-picker-popper"
@calendar-change="calendarChange"
@visible-change="visibleChange"
:disabled-date="disabledFn"
......@@ -62,8 +64,8 @@
<div class="info-item" v-for="item in dustInfo" :key="item.label">
<span class="label">{{ item.label }}</span>
<span class="value"
>{{ item.value }} （<span class="unit">{{ item.unit }}</span
>）
>{{ item.value }} <span class="unit">({{ item.unit }})</span
>
</span>
</div>
<div></div>
......@@ -209,7 +211,7 @@ const chartLinkageFun = (target) => {
item.off("showTip");
item.off("globalout");
item.on("globalout", function () {
instanceList.forEach((item_, index) => {
instanceList.forEach((item_) => {
item_.dispatchAction({
type: "hideTip",
});
......@@ -284,24 +286,24 @@ const dustInfo = reactive([
{
label: "压差",
value: "0.0",
unit: "",
unit: "kPa",
key: "pressureDiff",
unitKey: "pressureDiffUnit",
},
{
label: "粉尘浓度",
value: "0.0",
unit: "",
unit: "mg/m³",
key: "dustConcentration",
unitKey: "dustConcentrationUnit",
},
{ label: "电磁阀数量", value: "0.0", unit: "", key: "valveNum" },
{ label: "仓室数量", value: "0.0", unit: "", key: "compartNum" },
{ label: "布袋检测仪数量", value: "0.0", unit: "", key: "bagDetectorNum" },
{ label: "电磁阀数量", value: "0.0", unit: "个", key: "valveNum" },
{ label: "仓室数量", value: "0.0", unit: "个", key: "compartNum" },
{ label: "布袋检测仪数量", value: "0.0", unit: "个", key: "bagDetectorNum" },
{
label: "脉冲检测仪数量",
value: "0.0",
unit: "",
unit: "个",
key: "pulseDetectorNum",
},
]);
......@@ -714,7 +716,7 @@ const handleStatusDotClick = () => {
};
</script>
<style lang="scss" scoped>
$borderColor: #bbbdc391;
$borderColor: #3a3f45;
.dust-box {
width: 100%;
height: calc(100% - 14px);
......@@ -724,24 +726,28 @@ $borderColor: #bbbdc391;
overflow: auto;
display: flex;
flex-direction: column;
// background-color: #181d21;
color: #909399;
}
.top-box {
width: 100%;
padding-top: 18px;
padding-left: 10px;
background: #fff;
box-sizing: border-box;
background: #181d21;
border-radius: 6px;
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
}
.left-box {
width: 50%;
.part1 {
border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
border: 1px solid rgba(58, 63, 69, 0.5);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
width: 100%;
height: 63vh;
background: #fff;
background: #181d21;
.chart-box {
width: 100%;
height: 31%;
......@@ -752,6 +758,15 @@ $borderColor: #bbbdc391;
}
}
}
.value {
color: #fff;
}
.unit {
color: #909399;
}
.right-box {
width: 50%;
......@@ -759,9 +774,9 @@ $borderColor: #bbbdc391;
width: 100%;
height: 5vh;
border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
background: #fff;
border: 1px solid rgba(58, 63, 69, 0.5);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
background: #181d21;
padding: 1%;
box-sizing: border-box;
.battery {
......@@ -774,13 +789,13 @@ $borderColor: #bbbdc391;
width: 100%;
height: calc(58vh - 10px);
border-radius: 6px;
border: 1px solid rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
border: 1px solid rgba(58, 63, 69, 0.5);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
background: #fff;
background: #181d21;
position: relative;
.dust-title {
text-align: center;
......@@ -789,10 +804,11 @@ $borderColor: #bbbdc391;
padding-bottom: 20px;
border-bottom: 1px solid $borderColor;
width: 100%;
color: #fff;
}
.dust-info {
padding: 0.5rem 1rem;
background: #e7eef5;
background: #232a31;
border-radius: 8px;
margin: 20px 0;
display: flex;
......@@ -805,7 +821,7 @@ $borderColor: #bbbdc391;
box-sizing: border-box;
margin: 0.5rem 0;
padding: 0.4rem 0.6rem;
background: white;
background: #181d21;
border-radius: 6px;
height: 35px;
font-size: 14px;
......@@ -813,7 +829,7 @@ $borderColor: #bbbdc391;
align-items: center;
justify-content: space-between;
.label {
color: #4e5058;
color: #909399;
}
}
.indicator-box {
......@@ -835,10 +851,7 @@ $borderColor: #bbbdc391;
padding: 5px;
width: 100%;
flex-wrap: wrap;
// box-shadow: 0 9px 20px 0 rgba(164, 162, 171, 0.842);
box-shadow: color(srgb 0.360784 0.788235 0.654902 / 0.5) 0px 0px 20px
0px;
// box-shadow: 0px 0px 10px 0px rgba(164, 162, 171, 0.842);
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px 0px;
}
.part {
display: flex;
......@@ -879,7 +892,7 @@ $borderColor: #bbbdc391;
&-item {
padding: 10px;
height: 70px;
background: #e7eef5;
background: #232a31;
border-radius: 6px;
flex: 1;
overflow-y: auto;
......@@ -888,24 +901,23 @@ $borderColor: #bbbdc391;
width: 0;
}
.label {
color: #4e5058;
}
.value {
color: #909399;
}
}
}
.part2::-webkit-scrollbar {
width: 2px;
background-color: rgba(13, 15, 18, 0.1);
background-color: rgba(58, 63, 69, 0.5);
}
}
.warn-info {
margin-top: 20px;
height: 17vh;
border-radius: 6px;
box-shadow: 0px 3px 6px 0px rgba(13, 15, 18, 0.1);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
padding: 10px 30px;
background: #fff;
background: #181d21;
}
.layout1 {
display: flex;
......
src/views/dustOverview/index.vue
View file @ 5a77e1a8
......@@ -525,6 +525,7 @@ onBeforeUnmount(() => {});
width: 100%;
height: calc(100% - 14px);
box-sizing: border-box;
background-color: #181d21;
.header {
display: flex;
......@@ -535,10 +536,10 @@ onBeforeUnmount(() => {});
flex: 1;
max-width: 420px;
height: 130px;
background-color: #fff;
border: 1.5px solid #e8e8e8;
background-color: rgba(255, 255, 255, 0.07);
border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
box-shadow: 0px 1.33px 16px 0px rgba(83, 100, 170, 0.1);
box-shadow: 0px 1.33px 16px 0px rgba(0, 0, 0, 0.2);
padding: 16px;
box-sizing: border-box;
display: flex;
......@@ -554,7 +555,7 @@ onBeforeUnmount(() => {});
width: 100%;
span {
color: rgba(36, 48, 71, 0.75);
color: #909399;
line-height: 22px;
font-size: 14px;
font-weight: 500;
......@@ -562,7 +563,7 @@ onBeforeUnmount(() => {});
}
.content {
color: #273849;
color: #fff;
line-height: 30px;
font-size: 42px;
font-weight: 600;
......@@ -584,15 +585,77 @@ onBeforeUnmount(() => {});
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
:deep(.el-form-item__label) {
color: #fff;
}
:deep(.el-input__inner),
:deep(.el-select__input) {
background-color: #242a30;
border-color: #2c3136;
color: #fff;
}
:deep(.el-select-dropdown__item) {
color: #fff;
}
:deep(.el-select-dropdown) {
background-color: #242a30;
border-color: #2c3136;
}
}
.table-box {
width: 100%;
height: calc(100vh - 400px);
:deep(.el-table) {
background-color: #181d21;
color: #fff;
th.el-table__cell {
background-color: #242a30;
color: #fff;
border-bottom: 1px solid #2c3136;
}
td.el-table__cell {
background-color: #181d21;
border-bottom: 1px solid #2c3136;
}
.el-table__header-wrapper,
.el-table__body-wrapper {
background-color: #181d21;
}
}
:deep(.el-pagination) {
background-color: #181d21;
color: #909399;
.el-pagination__total,
.el-pagination__jump,
.btn-prev,
.btn-next {
color: #909399;
}
.el-input__inner {
background-color: #242a30;
border-color: #2c3136;
color: #fff;
}
}
}
}
.default-btn {
width: 85px;
background-color: #242a30;
border-color: #2c3136;
color: #fff;
}
.search-btn {
width: 85px;
......@@ -601,6 +664,8 @@ onBeforeUnmount(() => {});
}
.add-btn {
width: 85px;
background-color: #67c23a;
border-color: #67c23a;
}
.health-score {
......@@ -619,10 +684,10 @@ onBeforeUnmount(() => {});
flex-direction: column;
align-items: flex-start;
gap: 6px;
border: 1px solid #e4e7ed;
border: 1px solid #2c3136;
border-radius: 4px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
background-color: #242a30;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
.matrix-row {
display: flex;
......@@ -656,9 +721,11 @@ onBeforeUnmount(() => {});
.view-btn {
margin-right: 8px;
cursor: pointer;
color: #409EFF;
}
.edit-btn {
cursor: pointer;
color: #409EFF;
}
.dialog-footer {
......@@ -667,8 +734,28 @@ onBeforeUnmount(() => {});
gap: 12px;
}
:deep(.el-dialog__body) {
padding: 20px;
:deep(.el-dialog) {
background-color: #242a30;
.el-dialog__title {
color: #fff;
}
.el-dialog__body {
padding: 20px;
color: #909399;
}
.el-form-item__label {
color: #fff;
}
.el-input__inner,
.el-textarea__inner {
background-color: #181d21;
border-color: #2c3136;
color: #fff;
}
}
.distribution-table {
......@@ -716,7 +803,7 @@ onBeforeUnmount(() => {});
flex-direction: column;
gap: 8px;
padding: 12px;
background: #f5f7fa;
background: #242a30;
border-radius: 4px;
.valve-row {
......@@ -727,11 +814,11 @@ onBeforeUnmount(() => {});
.valve-cell {
width: 41px;
background: white;
background: #181d21;
padding: 4px;
border-radius: 4px;
text-align: center;
border: 1px solid #dcdfe6;
border: 1px solid #2c3136;
.cell-index {
font-size: 12px;
......@@ -742,6 +829,12 @@ onBeforeUnmount(() => {});
.cell-value {
:deep(.el-input-number) {
width: 100px;
.el-input__inner {
background-color: #181d21;
border-color: #2c3136;
color: #fff;
}
}
}
}
......@@ -749,7 +842,7 @@ onBeforeUnmount(() => {});
.readonly-value {
font-size: 14px;
color: #606266;
color: #909399;
line-height: 32px;
padding: 0 12px;
}
......@@ -763,12 +856,12 @@ onBeforeUnmount(() => {});
&.warning-more {
color: #e6a23c;
background-color: #fdf6ec;
background-color: rgba(230, 162, 60, 0.2);
}
&.warning-less {
color: #f56c6c;
background-color: #fef0f0;
background-color: rgba(245, 108, 108, 0.2);
}
}
}
......@@ -780,6 +873,30 @@ onBeforeUnmount(() => {});
.el-table__header th {
user-select: none;
background-color: #242a30 !important;
color: #fff !important;
border-bottom: 1px solid #2c3136 !important;
}
.el-table__row {
background-color: #181d21 !important;
td {
border-bottom: 1px solid #2c3136 !important;
color: #fff;
}
&:hover > td {
background-color: #242a30 !important;
}
}
.el-table__empty-block {
background-color: #181d21;
.el-table__empty-text {
color: #909399;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment