Skip to content

D
DC-TOM
Commit b5fe419e authored by 田争光's avatar 田争光
Browse files
Options

feat(*):菜单样式修改

parents ff2b80cc 14bd703d
Show whitespace changes
Inline Side-by-side
Showing with 561 additions and 181 deletions
src/components/commonTable/index.vue
View file @ b5fe419e
...@@ -224,6 +224,7 @@ watch( ...@@ -224,6 +224,7 @@ watch(
} }
} }
</style> </style>
<<<<<<< HEAD
<style lang="scss"> <style lang="scss">
.el-table__header, .el-table__header,
...@@ -242,3 +243,5 @@ watch( ...@@ -242,3 +243,5 @@ watch(
} }
} }
</style> </style>
=======
>>>>>>> 14bd703db4380d50659b719495c761ed24c2c0d5
src/css/elementUiSelf.css
View file @ b5fe419e
:root { :root {
--table-border-color: #c6dae0; --table-border-color: #434343;
--table-head-bg-color: #fafafa; --table-head-bg-color: #fafafa;
--table-item-border-color: #ebeef5; --table-item-border-color: #ebeef5;
} }
......
src/layout/index.vue
View file @ b5fe419e
...@@ -213,8 +213,8 @@ export default { ...@@ -213,8 +213,8 @@ export default {
position: absolute; position: absolute;
right: 200px; right: 200px;
color: #ffffff; color: #ffffff;
background: #2182a0; background-color: var(--bg-primary);
border: 1px solid #2182a0; border: 1px solid var(--success);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
......
src/style.css
View file @ b5fe419e
...@@ -54,16 +54,16 @@ ...@@ -54,16 +54,16 @@
} }
.view-btn { .view-btn {
color: #2182a0 !important; color: var(--success) !important;
} }
.edit-btn { .edit-btn {
color: #2182a0 !important; color: var(--success) !important;
} }
.el-button--primary { .el-button--primary {
background-color: #2182a0 !important; background-color: var(--chart-blue) !important;
border-color: #2182a0 !important; border-color: var(--chart-blue) !important;
} }
.login-container .el-form-item { .login-container .el-form-item {
......
src/theme.scss
View file @ b5fe419e
.el-form-item__label { .el-form-item__label {
font-size: 14px; font-size: 14px;
color: #909399 !important; color: #909399 !important;
font-size: 14px;
color: #909399 !important;
} }
.el-select { .el-select {
width: 230px; width: 230px;
.el-select__placeholder { .el-select__placeholder {
color: #d9dbdc !important; color: #d9dbdc !important;
} }
.el-select__wrapper { .el-select__wrapper {
background-color: var(--bg-secondary) !important; background-color: var(--bg-secondary) !important;
box-shadow: 0 0 0 1px #2a2a2a inset !important; box-shadow: 0 0 0 1px #434343 inset !important;
} }
.el-input { .el-input {
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
...@@ -46,6 +50,10 @@ ...@@ -46,6 +50,10 @@
} }
} }
.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-popper.is-light, .el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before { .el-popper.is-light>.el-popper__arrow:before {
background: var(--bg-secondary) !important; background: var(--bg-secondary) !important;
...@@ -54,15 +62,27 @@ ...@@ -54,15 +62,27 @@
.el-select-dropdown__item.is-hovering { .el-select-dropdown__item.is-hovering {
background-color: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
} }
.el-select-dropdown__item { .el-select-dropdown__item {
color: #d9dbdc; color: #d9dbdc;
color: #d9dbdc;
&.selected { &.selected {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
&.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);
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.05); background-color: rgba(255, 255, 255, 0.05);
} }
...@@ -84,6 +104,17 @@ ...@@ -84,6 +104,17 @@
display: none !important; display: none !important;
} }
.el-range-input {
color: #d9dbdc !important;
background-color: transparent !important;
font-size: 15px !important;
background-color: var(--bg-secondary) !important;
border-color: var(--bg-secondary) !important;
.el-range__icon {
display: none !important;
}
.el-range-input { .el-range-input {
color: #d9dbdc !important; color: #d9dbdc !important;
background-color: transparent !important; background-color: transparent !important;
...@@ -93,11 +124,19 @@ ...@@ -93,11 +124,19 @@
color: rgba(255, 255, 255, 0.5) !important; color: rgba(255, 255, 255, 0.5) !important;
} }
} }
&::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
}
.el-range-separator { .el-range-separator {
color: rgba(255, 255, 255, 0.7) !important; color: rgba(255, 255, 255, 0.7) !important;
} }
} }
.el-range-separator {
color: rgba(255, 255, 255, 0.7) !important;
}
}
.el-icon { .el-icon {
color: rgba(255, 255, 255, 0.7) !important; color: rgba(255, 255, 255, 0.7) !important;
...@@ -108,6 +147,11 @@ ...@@ -108,6 +147,11 @@
box-shadow: 0 0 0 1px #2a2a2a inset !important; box-shadow: 0 0 0 1px #2a2a2a inset !important;
} }
.el-popper.is-light {
border: 1px solid #181d21 !important;
}
.el-popper.is-light { .el-popper.is-light {
border: 1px solid #181d21 !important; border: 1px solid #181d21 !important;
} }
...@@ -121,6 +165,7 @@ ...@@ -121,6 +165,7 @@
box-shadow: 0 0 0 2px #181d21 inset !important; box-shadow: 0 0 0 2px #181d21 inset !important;
} }
.el-input__wrapper { .el-input__wrapper {
box-shadow: 0 0 0 1px #535252 inset !important; box-shadow: 0 0 0 1px #535252 inset !important;
} }
...@@ -129,14 +174,17 @@ ...@@ -129,14 +174,17 @@
border-bottom: 1px solid #8a9199 !important; border-bottom: 1px solid #8a9199 !important;
} }
.el-picker-panel { .el-picker-panel {
color: #d9dbdc !important; color: #d9dbdc !important;
} }
.el-picker-panel__body { .el-picker-panel__body {
background: #181d21; background: #181d21;
} }
.el-date-range-picker__content.is-left { .el-date-range-picker__content.is-left {
border-right: 1px solid #181d21 !important; border-right: 1px solid #181d21 !important;
} }
...@@ -145,14 +193,17 @@ ...@@ -145,14 +193,17 @@
border-bottom: 1px solid #181d21 !important; border-bottom: 1px solid #181d21 !important;
} }
.el-date-table th { .el-date-table th {
color: #d9dbdc !important; color: #d9dbdc !important;
} }
.el-date-table td.in-range .el-date-table-cell { .el-date-table td.in-range .el-date-table-cell {
background-color: #181d21 !important; background-color: #181d21 !important;
} }
.el-date-editor .el-range__icon, .el-date-editor .el-range__icon,
.el-date-editor .el-range-separator, .el-date-editor .el-range-separator,
.el-date-editor .el-range-input { .el-date-editor .el-range-input {
...@@ -160,50 +211,62 @@ ...@@ -160,50 +211,62 @@
font-size: 14px !important; font-size: 14px !important;
} }
.el-picker-panel__footer { .el-picker-panel__footer {
background-color: #181d21 !important; background-color: #181d21 !important;
border-top-color: #181d21 !important; border-top-color: #181d21 !important;
} }
.el-input__wrapper { .el-input__wrapper {
background-color: #181d21 !important; background-color: #181d21 !important;
} }
.el-button.is-text { .el-button.is-text {
color: #d9dbdc !important; color: #d9dbdc !important;
} }
.el-button.is-plain { .el-button.is-plain {
color: #4e7bfa !important; color: #4e7bfa !important;
background-color: rgba(78, 123, 250, 0.2) !important; background-color: rgba(78, 123, 250, 0.2) !important;
border-color: #4e7bfa !important; border-color: #4e7bfa !important;
} }
.el-button.is-text:not(.is-disabled):hover { .el-button.is-text:not(.is-disabled):hover {
background-color: #9b9a9a !important; background-color: #9b9a9a !important;
} }
}
.el-select__wrapper { .el-select__wrapper {
background-color: #181d21 !important; background-color: #181d21 !important;
} }
.el-input__inner { .el-input__inner {
color: #d9dbdc !important; color: #d9dbdc !important;
} }
.el-picker-panel .el-time-panel { .el-picker-panel .el-time-panel {
background-color: #181d21 !important; background-color: #181d21 !important;
border-color: #181d21 !important; border-color: #181d21 !important;
} }
.el-time-panel__footer { .el-time-panel__footer {
border-color: #181d21 !important; border-color: #181d21 !important;
} }
.el-time-spinner__item.is-active:not(.is-disabled) { .el-time-spinner__item.is-active:not(.is-disabled) {
color: #d9dbdc !important; color: #d9dbdc !important;
} }
.el-select-dropdown { .el-select-dropdown {
background-color: #181d21 !important; background-color: #181d21 !important;
} }
...@@ -219,7 +282,7 @@ ...@@ -219,7 +282,7 @@
.date-picker-popper .el-picker-panel__body { .date-picker-popper .el-picker-panel__body {
background-color: #181d21 !important; background-color: #181d21 !important;
} }
}
.common-table { .common-table {
...@@ -261,3 +324,132 @@ ...@@ -261,3 +324,132 @@
background-color: #181d21 !important; background-color: #181d21 !important;
color: #ccc; color: #ccc;
} }
.el-table__header,
.el-table__body {
width: 100% !important;
}
.el-table__header th {
user-select: none;
}
.el-table {
// 设置表头样式
th.el-table__cell {
background-color: #181D21 !important;
color: #dce0e4;
font-weight: 600;
border-bottom: 1px solid #434343 !important;
border-right: 1px solid #434343 !important;
}
td.el-table__cell {
background-color: #181D21 !important;
color: #c5c8cc;
border-bottom: 1px solid #434343 !important;
border-right: 1px solid #434343 !important;
}
.el-table__border-left-patch,
.el-table__inner-wrapper:after,
.el-table__inner-wrapper:before {
background-color: #434343 !important;
}
.el-table__body-wrapper {
background-color: #181D21;
}
}
.el-table--border:after {
background-color: #434343 !important;
}
.all-select-btn {
.search-btn-balck-theme {
background-color: #36f1cd33;
color: #36f1cd;
border-color: #36f1cd;
}
.reset-btn-balck-theme {
background-color: #4e7bfa33;
color: #4e7bfa;
border-color: #4e7bfa;
}
.export-btn-balck-theme {
background-color: #f5b83d33;
color: #f5b83d;
border-color: #f5b83d;
}
.cancel-btn-balck-theme {
background-color: #8a898933;
color: #8a8989;
border-color: #8a8989;
}
}
.green-color {
color: #36f1cd !important;
}
.black-theme {
background-color: #181D21 !important;
}
.el-input {
.el-input__wrapper {
background-color: #181d21 !important;
box-shadow: 0 0 0 1px #434343 inset !important;
}
}
.el-pagination button {
background: var(--bg-secondary) !important;
}
.el-pager li {
background: var(--bg-secondary) !important;
}
.el-pager li.is-active, .el-pager li:hover {
color: var(--success) !important;
}
.el-pager li {
color: var(--text-secondary) !important;
&:hover {
color: var(--success) !important;
}
}
.el-pagination__total {
color: var(--text-secondary) !important;
}
.el-radio__input.is-checked .el-radio__inner {
border-color: #36f1cd !important;
background-color: #36f1cd !important;
}
.el-radio__input.is-checked+.el-radio__label {
color: #36f1cd !important;
}
.el-dialog {
background-color: #181d21 !important;
.el-dialog__title {
color: #fff !important;
}
}
.el-textarea {
.el-textarea__inner {
background-color: #181d21 !important;
box-shadow: 0 0 0 1px #434343 inset !important;
color: #fff !important;
}
.el-textarea__inne:focus {
box-shadow: 0 0 0 1px #36f1cd inset !important;
outline: none !important;
}
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #36f1cd !important;
border-color: #36f1cd !important;
}
\ No newline at end of file
src/utils/chart.js
View file @ b5fe419e
import { color } from "echarts"; import * as echarts from "echarts";
// 设置图表主题颜色
const chartColors = {
background: '#181d21',
textColor: '#8a9199',
axisLineColor: '#2a2f33',
splitLineColor: '#2a2f33',
blue: '#4e7bfa',
teal: '#36f1cd',
green: '#36f1cd',
yellow: '#f5b83d',
red: '#ff4d4d',
purple: '#6366f1'
};
// 通用图表配置
const commonConfig = {
backgroundColor: chartColors.background,
textStyle: {
color: chartColors.textColor
},
legend: {
icon: 'circle',
textStyle: {
color: chartColors.textColor
}
},
xAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: chartColors.axisLineColor
}
},
axisLabel: {
color: chartColors.textColor
},
nameTextStyle: {
color: chartColors.textColor
},
splitLine: {
lineStyle: {
color: chartColors.splitLineColor,
type: 'dashed'
}
}
},
tooltip: {
backgroundColor: 'rgba(24, 29, 33, 0.9)',
borderColor: '#2a2f33',
textStyle: {
color: '#fff'
}
}
};
export const getLineOption = (xData = [], seriesData = []) => ({ export const getLineOption = (xData = [], seriesData = []) => ({
tooltip: { tooltip: {
...@@ -129,13 +199,7 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({ ...@@ -129,13 +199,7 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({
export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { ...commonConfig.tooltip,
type: "line",
lineStyle: {
color: "#909399",
width: 1,
},
},
}, },
grid: { grid: {
left: "20", left: "20",
...@@ -148,13 +212,8 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -148,13 +212,8 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
axisLine: {
lineStyle: {
color: "#3a3f45",
},
},
axisLabel: { axisLabel: {
color: "#909399", color: chartColors.textColor,
fontSize: 12, fontSize: 12,
interval: "auto", interval: "auto",
rotate: 0, rotate: 0,
...@@ -162,9 +221,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -162,9 +221,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
return value.split(' ')[1]; return value.split(' ')[1];
} }
}, },
axisLine: {
lineStyle: {
color: "#3a3f45",
},
},
axisTick: { axisTick: {
show: false, show: false,
}, },
data: xData, data: xData,
}, },
yAxis: { yAxis: {
...@@ -173,28 +239,24 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -173,28 +239,24 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
// max: 600, // max: 600,
// interval: 200, // interval: 200,
axisLabel: { axisLabel: {
color: "#909399",
formatter: "{value}", formatter: "{value}",
...commonConfig.yAxis.axisLabel
}, },
splitLine: { ...commonConfig.yAxis
lineStyle: {
color: "#3a3f45",
type: "dashed",
},
},
}, },
series: [ series: [
{ {
name: "监测值", name: "监测值",
type: "line", type: "line",
smooth: false, smooth: true,
symbol: "none", symbol: 'circle',
sampling: "average", symbolSize: 0,
itemStyle: {
color: "#7B68EE",
},
lineStyle: { lineStyle: {
width: 1, width: 2,
color: chartColors.teal
},
itemStyle: {
color: chartColors.teal
}, },
areaStyle: { areaStyle: {
color: { color: {
...@@ -206,15 +268,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({ ...@@ -206,15 +268,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: "rgba(123, 104, 238, 0.4)", color: "rgba(54, 241, 205, 0.8)",
}, },
{ {
offset: 1, offset: 1,
color: "rgba(123, 104, 238, 0.1)", color: "rgba(54, 241, 205, 0)",
}, },
], ],
}, },
}, },
data: seriesData, data: seriesData,
}, },
], ],
......
src/views/AboutView/AboutView.vue
View file @ b5fe419e
<template> <template>
<div class="page-container collectorList"> <div class="page-container collectorList all-select-btn">
<div class="content-box"> <div class="content-box">
<div class="search"> <div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
...@@ -48,16 +48,16 @@ ...@@ -48,16 +48,16 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="default" class="default-btn" @click="onReset" <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
>重置</el-button >重置</el-button
> >
<el-button type="primary" class="search-btn" @click="onSubmit" <el-button type="default" class="search-btn-balck-theme" @click="onSubmit"
>查询</el-button >查询</el-button
> >
<el-button <el-button
type="success" type="default"
style="width: 140px" style="width: 140px"
class="add-btn" class="export-btn-balck-theme"
@click="openRound()" @click="openRound()"
>挂起设备</el-button >挂起设备</el-button
> >
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
{{ getIndex($index) }} {{ getIndex($index) }}
</template> </template>
<template #operate="{ row }"> <template #operate="{ row }">
<span class="health-score" @click="openDialog(row)">暂挂起</span> <span class="health-score green-color" @click="openDialog(row)">暂挂起</span>
</template> </template>
</common-table> </common-table>
</div> </div>
...@@ -141,9 +141,9 @@ ...@@ -141,9 +141,9 @@
</div> </div>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer ">
<el-button @click="equDialog = false">取消</el-button> <el-button type="default" class="cancel-btn-balck-theme" @click="equDialog = false">取消</el-button>
<el-button type="primary" @click="equPending(ruleFormRef)"> <el-button type="default" class="reset-btn-balck-theme" @click="equPending(ruleFormRef)">
确认 确认
</el-button> </el-button>
</span> </span>
...@@ -425,15 +425,15 @@ onBeforeUnmount(() => {}); ...@@ -425,15 +425,15 @@ onBeforeUnmount(() => {});
} }
.search-btn { .search-btn {
width: 85px; width: 85px;
background: #2182a0; background-color: var(--bg-primary);
border: 1px solid #2182a0; border: 1px solid var(--success);
} }
.add-btn { .add-btn {
width: 85px; width: 85px;
} }
.health-score { .health-score {
color: #027ffc; color: var(--success);
cursor: pointer; cursor: pointer;
display: block; display: block;
width: 100%; width: 100%;
...@@ -503,7 +503,7 @@ onBeforeUnmount(() => {}); ...@@ -503,7 +503,7 @@ onBeforeUnmount(() => {});
.table-title { .table-title {
font-size: 14px; font-size: 14px;
color: #2182a0; color: var(--success);
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 500; font-weight: 500;
} }
...@@ -602,6 +602,7 @@ onBeforeUnmount(() => {}); ...@@ -602,6 +602,7 @@ onBeforeUnmount(() => {});
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #dce0e4;
} }
.bold { .bold {
font-weight: bold; font-weight: bold;
......
src/views/closeManage/components/dialog.vue
View file @ b5fe419e
...@@ -11,8 +11,8 @@ ...@@ -11,8 +11,8 @@
</div> </div>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button @click="closeDialog">关闭</el-button> <el-button type="default" @click="closeDialog" class="reset-btn-balck-them">关闭</el-button>
<el-button type="primary" v-if="btnGroup.length" v-for="item in btnGroup" class="real-btn" :key="item.attrKey" @click="handleBtn(item.attrKey)"> <el-button type="default" v-if="btnGroup.length" v-for="item in btnGroup" class="real-btn reset-btn-balck-them" :key="item.attrKey" @click="handleBtn(item.attrKey)">
{{item.label}} {{item.label}}
</el-button> </el-button>
</div> </div>
...@@ -103,5 +103,10 @@ const handleSave = ()=> { ...@@ -103,5 +103,10 @@ const handleSave = ()=> {
margin-right: 16px; margin-right: 16px;
cursor: pointer; cursor: pointer;
} }
.reset-btn-balck-them {
background-color: #4e7bfa33;
color: #4e7bfa;
border-color: #4e7bfa;
}
} }
</style> </style>
\ No newline at end of file
src/views/closeManage/myAgency.vue
View file @ b5fe419e
<template> <template>
<div class="my-agency"> <div class="my-agency all-select-btn">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="事件名称："> <el-form-item label="事件名称：">
<el-input v-model="formInline.eventName"> <el-input v-model="formInline.eventName">
...@@ -46,8 +46,8 @@ ...@@ -46,8 +46,8 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button class="default-btn" @click="onReset">重置</el-button> <el-button class="default-btn reset-btn-balck-theme" @click="onReset">重置</el-button>
<el-button type="primary" class="default-btn" @click="onSearch">查询</el-button> <el-button type="default" class="default-btn search-btn-balck-theme" @click="onSearch">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="table-box"> <div class="table-box">
...@@ -74,15 +74,15 @@ ...@@ -74,15 +74,15 @@
</span> </span>
</template> </template>
<template #operation="{ row }"> <template #operation="{ row }">
<span class="view-btn" @click="handleDone(row)"> <span class="view-btn green-color" @click="handleDone(row)">
处理 处理
</span> </span>
<span class="table-btn">|</span> <span class="table-btn">|</span>
<span class="view-btn" @click="handleDispatch(row)"> <span class="view-btn green-color" @click="handleDispatch(row)">
分派 分派
</span> </span>
<span class="table-btn">|</span> <span class="table-btn">|</span>
<span class="view-btn" @click="changeBag(row)"> <span class="view-btn green-color" @click="changeBag(row)">
更换布袋 更换布袋
</span> </span>
</template> </template>
...@@ -574,7 +574,7 @@ ...@@ -574,7 +574,7 @@
:value="item.id" :value="item.id"
></el-option> ></el-option>
</el-select> </el-select>
<el-button type="primary" class="addBtn" @click="addPerson">新增</el-button> <el-button type="default" class="addBtn search-btn-balck-theme" @click="addPerson">新增</el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="已分派人:"> <el-form-item label="已分派人:">
...@@ -1246,7 +1246,7 @@ const handlePaginationChange = (pagination) => { ...@@ -1246,7 +1246,7 @@ const handlePaginationChange = (pagination) => {
width: 100%; width: 100%;
height: calc(100% - 14px); height: calc(100% - 14px);
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #181D21;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -1319,12 +1319,13 @@ const handlePaginationChange = (pagination) => { ...@@ -1319,12 +1319,13 @@ const handlePaginationChange = (pagination) => {
font-weight: 700; font-weight: 700;
font-size: 19px; font-size: 19px;
overflow: hidden; overflow: hidden;
color: #dce0e4;
&::before { &::before {
content: ""; content: "";
width: 4px; width: 4px;
height: 4px; height: 4px;
border-radius: 50%; border-radius: 50%;
background: #1890ff; background: #36f1cd;
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 50%; top: 50%;
...@@ -1335,7 +1336,7 @@ const handlePaginationChange = (pagination) => { ...@@ -1335,7 +1336,7 @@ const handlePaginationChange = (pagination) => {
width: 100%; width: 100%;
height: 0px; height: 0px;
position: absolute; position: absolute;
border-bottom: dashed 1px rgb(209, 209, 209); border-bottom: dashed 1px #8a9199;
left: 130px; left: 130px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -1358,12 +1359,13 @@ const handlePaginationChange = (pagination) => { ...@@ -1358,12 +1359,13 @@ const handlePaginationChange = (pagination) => {
text-align: right; text-align: right;
width: 140px; width: 140px;
margin-right: 10px; margin-right: 10px;
color: #8a9199;
} }
.change-style { .change-style {
width: auto; width: auto;
} }
.value { .value {
color: #000000; color: #fff;
flex: 1; flex: 1;
} }
.alarm-value { .alarm-value {
...@@ -1632,6 +1634,11 @@ const handlePaginationChange = (pagination) => { ...@@ -1632,6 +1634,11 @@ const handlePaginationChange = (pagination) => {
margin-bottom: 28px; margin-bottom: 28px;
} }
} }
.form-box::-webkit-scrollbar {
width: 0px;
height: 8px;
background-color: #434343; /* or add it to the track */
}
.input-style { .input-style {
padding-left: 50px; padding-left: 50px;
...@@ -1649,8 +1656,8 @@ const handlePaginationChange = (pagination) => { ...@@ -1649,8 +1656,8 @@ const handlePaginationChange = (pagination) => {
} }
.search-btn { .search-btn {
width: 85px; width: 85px;
background: #2182a0; background-color: var(--bg-primary);
border: 1px solid #2182a0; border: 1px solid var(--success);
} }
:deep(.el-tag) { :deep(.el-tag) {
margin-right: 10px; margin-right: 10px;
......
src/views/closeManage/myDone.vue
View file @ b5fe419e
<template> <template>
<div class="my-agency"> <div class="my-agency all-select-btn">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="事件名称："> <el-form-item label="事件名称：">
<el-input v-model="formInline.eventName"> <el-input v-model="formInline.eventName">
...@@ -46,8 +46,8 @@ ...@@ -46,8 +46,8 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button class="default-btn" @click="onReset">重置</el-button> <el-button type="default" class="reset-btn-balck-theme" @click="onReset">重置</el-button>
<el-button type="primary" class="default-btn" @click="onSearch">查询</el-button> <el-button type="default" class="search-btn-balck-theme" @click="onSearch">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="table-box"> <div class="table-box">
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
</span> </span>
</template> </template>
<template #operation="{ row }"> <template #operation="{ row }">
<span class="view-btn" @click="handleView(row)"> <span class="view-btn green-color" @click="handleView(row)">
查看 查看
</span> </span>
<!-- <span class="table-btn">|</span> <!-- <span class="table-btn">|</span>
...@@ -1235,7 +1235,7 @@ const handlePaginationChange = (pagination) => { ...@@ -1235,7 +1235,7 @@ const handlePaginationChange = (pagination) => {
width: 100%; width: 100%;
height: calc(100% - 14px); height: calc(100% - 14px);
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #181D21;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -1399,12 +1399,13 @@ const handlePaginationChange = (pagination) => { ...@@ -1399,12 +1399,13 @@ const handlePaginationChange = (pagination) => {
font-weight: 700; font-weight: 700;
font-size: 19px; font-size: 19px;
overflow: hidden; overflow: hidden;
color: #dce0e4;
&::before { &::before {
content: ""; content: "";
width: 4px; width: 4px;
height: 4px; height: 4px;
border-radius: 50%; border-radius: 50%;
background: #1890ff; background: #36f1cd;
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 50%; top: 50%;
...@@ -1415,7 +1416,7 @@ const handlePaginationChange = (pagination) => { ...@@ -1415,7 +1416,7 @@ const handlePaginationChange = (pagination) => {
width: 100%; width: 100%;
height: 0px; height: 0px;
position: absolute; position: absolute;
border-bottom: dashed 1px rgb(209, 209, 209); border-bottom: dashed 1px #8a9199;
left: 130px; left: 130px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -1438,12 +1439,13 @@ const handlePaginationChange = (pagination) => { ...@@ -1438,12 +1439,13 @@ const handlePaginationChange = (pagination) => {
text-align: right; text-align: right;
width: 140px; width: 140px;
margin-right: 10px; margin-right: 10px;
color: #8a9199;
} }
.change-style { .change-style {
width: auto; width: auto;
} }
.value { .value {
color: #000000; color: #fff;
flex: 1; flex: 1;
} }
.alarm-value { .alarm-value {
...@@ -1683,6 +1685,7 @@ const handlePaginationChange = (pagination) => { ...@@ -1683,6 +1685,7 @@ const handlePaginationChange = (pagination) => {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.label-title-content { .label-title-content {
width: 90%; width: 90%;
padding-left: 30px; padding-left: 30px;
...@@ -1692,6 +1695,18 @@ const handlePaginationChange = (pagination) => { ...@@ -1692,6 +1695,18 @@ const handlePaginationChange = (pagination) => {
overflow: auto; overflow: auto;
width: 100%; width: 100%;
} }
.deal-line-wrap::-webkit-scrollbar {
width: 0;
height: 0;
background-color: #434343; /* or add it to the track */
}
.deal-line-wrap::-webkit-scrollbar-track {
background-color: #434343;
border-radius: 2px;
}
.deal-line-wrap::-webkit-thumb {
background-color: red;
}
.qusetion-records { .qusetion-records {
padding: 5px 20px; padding: 5px 20px;
.qusetion-records-item { .qusetion-records-item {
...@@ -1712,6 +1727,11 @@ const handlePaginationChange = (pagination) => { ...@@ -1712,6 +1727,11 @@ const handlePaginationChange = (pagination) => {
margin-bottom: 28px; margin-bottom: 28px;
} }
} }
.form-box::-webkit-scrollbar {
width: 0px;
height: 8px;
background-color: #434343; /* or add it to the track */
}
:deep(.el-tag) { :deep(.el-tag) {
margin-right: 10px; margin-right: 10px;
...@@ -1733,8 +1753,8 @@ const handlePaginationChange = (pagination) => { ...@@ -1733,8 +1753,8 @@ const handlePaginationChange = (pagination) => {
} }
.search-btn { .search-btn {
width: 85px; width: 85px;
background: #2182a0; background-color: var(--bg-primary);
border: 1px solid #2182a0; border: 1px solid var(--success);
} }
} }
</style> </style>
\ No newline at end of file
src/views/collectorList/collectorList.vue
View file @ b5fe419e
<template> <template>
<div class="page-container collectorList"> <div class="page-container collectorList all-select-btn">
<div class="content-box"> <div class="content-box">
<div class="search"> <div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
...@@ -30,16 +30,16 @@ ...@@ -30,16 +30,16 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="default" class="default-btn" @click="onReset" <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
>重置</el-button >重置</el-button
> >
<el-button type="primary" class="search-btn" @click="onSubmit" <el-button type="default" class="search-btn-balck-theme" @click="onSubmit"
>查询</el-button >查询</el-button
> >
<el-button <el-button
type="success" type="default"
style="width: 140px" style="width: 140px"
class="add-btn" class="export-btn-balck-theme"
@click="openDialog()" @click="openDialog()"
>更换周期分析</el-button >更换周期分析</el-button
> >
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
{{ getIndex($index) }} {{ getIndex($index) }}
</template> </template>
<template #dusterName="{ row }"> <template #dusterName="{ row }">
<span class="health-score" @dblclick="openDialog(row.dusterName)">{{ <span class="health-score green-color" @dblclick="openDialog(row.dusterName)">{{
row.dusterName row.dusterName
}}</span> }}</span>
</template> </template>
...@@ -361,15 +361,15 @@ onBeforeUnmount(() => {}); ...@@ -361,15 +361,15 @@ onBeforeUnmount(() => {});
} }
.search-btn { .search-btn {
width: 85px; width: 85px;
background: #2182a0; background-color: var(--bg-primary);
border: 1px solid #2182a0; border: 1px solid var(--success);
} }
.add-btn { .add-btn {
width: 85px; width: 85px;
} }
.health-score { .health-score {
color: #027ffc; color: var(--success);
cursor: pointer; cursor: pointer;
display: block; display: block;
width: 100%; width: 100%;
...@@ -439,7 +439,7 @@ onBeforeUnmount(() => {}); ...@@ -439,7 +439,7 @@ onBeforeUnmount(() => {});
.table-title { .table-title {
font-size: 14px; font-size: 14px;
color: #2182a0; color: var(--success);
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 500; font-weight: 500;
} }
......
src/views/dustMonitoring/bag-monitoring.vue
View file @ b5fe419e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="page-container bag-monitoring-container"> <div class="page-container bag-monitoring-container">
<div class="header"> <div class="header">
<div class="select-container"> <div class="select-container">
<span>检测仪器</span> <span class="select-label">检测仪器</span>
<el-select v-model="selectedDevice" placeholder="1#布袋检测仪" @change="handleDeviceChange"> <el-select v-model="selectedDevice" placeholder="1#布袋检测仪" @change="handleDeviceChange">
<el-option <el-option
v-for="item in deviceList" v-for="item in deviceList"
...@@ -70,7 +70,8 @@ ...@@ -70,7 +70,8 @@
<div class="time-controls"> <div class="time-controls">
<div class="time-desc"> <div class="time-desc">
<span class="icon"></span> <span class="icon"></span>
当前实时信号：{{ currentData.compartNo }}仓 / {{ currentData.row }}排 <span class="time-desc-text">当前实时信号：</span>
<span class="time-desc-value">{{ currentData.compartNo }}仓 / {{ currentData.row }}排</span>
</div> </div>
<div> <div>
<el-button @click="navigateBackward"> <el-button @click="navigateBackward">
...@@ -556,6 +557,7 @@ onBeforeUnmount(() => { ...@@ -556,6 +557,7 @@ onBeforeUnmount(() => {
box-sizing: border-box; box-sizing: border-box;
// overflow-x: hidden; // overflow-x: hidden;
position: relative; position: relative;
background-color: #181d21;
.header { .header {
position: relative; position: relative;
...@@ -572,10 +574,13 @@ onBeforeUnmount(() => { ...@@ -572,10 +574,13 @@ onBeforeUnmount(() => {
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 99; z-index: 99;
.select-label {
color: #909399 !important;
font-size: 14px;
}
span { span {
display: block; display: block;
width: 110px; width: 80px;
margin-right: 10px; margin-right: 10px;
} }
...@@ -590,14 +595,14 @@ onBeforeUnmount(() => { ...@@ -590,14 +595,14 @@ onBeforeUnmount(() => {
.title { .title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
color: #2182a0; color: var(--success);
} }
} }
.chart-container { .chart-container {
width: 100%; width: 100%;
height: calc(100% - 350px); height: calc(100% - 350px);
background-color: #fff; background-color: #000;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -614,7 +619,7 @@ onBeforeUnmount(() => { ...@@ -614,7 +619,7 @@ onBeforeUnmount(() => {
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
color: #999; color: #999;
background-color: #f5f7fa; background-color: #000;
border-radius: 4px; border-radius: 4px;
} }
} }
...@@ -644,13 +649,16 @@ onBeforeUnmount(() => { ...@@ -644,13 +649,16 @@ onBeforeUnmount(() => {
position: absolute; position: absolute;
width: 25px; width: 25px;
height: 30px; height: 30px;
background: #fff; background: #232a31;
top: 1px; top: 0px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
.el-icon {
color: var(--success) !important;
}
} }
.collapsed-icon { .collapsed-icon {
...@@ -662,9 +670,9 @@ onBeforeUnmount(() => { ...@@ -662,9 +670,9 @@ onBeforeUnmount(() => {
.data-box { .data-box {
padding: 10px; padding: 10px;
background-color: rgba(255, 255, 255, 0.9); background-color: #232a31;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ebeef5; border: 1px solid #3a3f45;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 10px; margin-bottom: 10px;
...@@ -686,7 +694,7 @@ onBeforeUnmount(() => { ...@@ -686,7 +694,7 @@ onBeforeUnmount(() => {
} }
.data-table { .data-table {
background-color: #fff; background-color: #181d21;
border-radius: 4px; border-radius: 4px;
padding: 10px 0; padding: 10px 0;
box-sizing: border-box; box-sizing: border-box;
...@@ -697,15 +705,20 @@ onBeforeUnmount(() => { ...@@ -697,15 +705,20 @@ onBeforeUnmount(() => {
th, th,
td { td {
border: 1px solid #ebeef5; border: 1px solid #434343;
text-align: center; text-align: center;
padding: 8px; padding: 8px;
font-size: 14px; font-size: 14px;
font-weight: 400;
}
td {
color: #afafaf;
} }
th { th {
background-color: #f5f7fa; background-color: #181d21;
color: #606266; color: #bababd;
font-weight: 600;
} }
.error { .error {
...@@ -713,7 +726,7 @@ onBeforeUnmount(() => { ...@@ -713,7 +726,7 @@ onBeforeUnmount(() => {
} }
.highlight { .highlight {
background-color: #fcf8e3; background-color: #181d21;
position: relative; position: relative;
&::after { &::after {
...@@ -730,8 +743,9 @@ onBeforeUnmount(() => { ...@@ -730,8 +743,9 @@ onBeforeUnmount(() => {
} }
} }
.online-style { .online-style {
background-color: rgba(33, 130, 160, 1); color: var(--accent);
color: #fff; font-weight: 600;
background-color: #58595a;
} }
} }
...@@ -742,13 +756,28 @@ onBeforeUnmount(() => { ...@@ -742,13 +756,28 @@ onBeforeUnmount(() => {
justify-content: space-between; justify-content: space-between;
.el-button { .el-button {
background-color: #2182a0; border-color: var(--accent);
border-color: #2182a0; color: var(--accent);
color: #fff; background-color: #181d21;
&:hover { &:hover {
background-color: #1a6980; border-color: var(--accent);
border-color: #1a6980; color: var(--accent);
}
.el-icon {
color: var(--accent) !important;
}
}
:deep(.el-input__wrapper) {
background-color: #181d21;
box-shadow: 0 0 0 1px var(--accent) inset;
color: var(--accent);
&:hover {
box-shadow: 0 0 0 1px var(--accent) inset;
color: var(--accent);
}
.el-input__inner {
color: var(--accent);
} }
} }
...@@ -765,6 +794,10 @@ onBeforeUnmount(() => { ...@@ -765,6 +794,10 @@ onBeforeUnmount(() => {
border-radius: 50%; border-radius: 50%;
margin-right: 5px; margin-right: 5px;
} }
.time-desc-value {
color: #fff;
font-weight: 600;
}
} }
.time-label, .time-label,
.time-unit { .time-unit {
......
src/views/dustMonitoring/components/warn.vue
View file @ b5fe419e
...@@ -5,7 +5,8 @@ ...@@ -5,7 +5,8 @@
</div> </div>
<div class="content"> <div class="content">
<div class="item" v-for="item in listInfo" :key="item"> <div class="item" v-for="item in listInfo" :key="item">
<img src="@/assets/icons/notice.png" alt="" />{{ item }} <span class="msg-icon"></span>
{{ item }}
</div> </div>
</div> </div>
</template> </template>
...@@ -30,12 +31,15 @@ const toDetail = () => { ...@@ -30,12 +31,15 @@ const toDetail = () => {
height: 20px; height: 20px;
.warn-title { .warn-title {
font-weight: bold; font-weight: bold;
color: rgb(217, 10, 10); color: var(--warning);
} }
.jump-icon { .jump-icon {
font-weight: bold; font-weight: bold;
color: #018796; color: #909399;
cursor: pointer; cursor: pointer;
&:hover {
color: #fff;
}
} }
} }
.content { .content {
...@@ -54,13 +58,16 @@ const toDetail = () => { ...@@ -54,13 +58,16 @@ const toDetail = () => {
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px, box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 0px,
rgba(0, 0, 0, 0.15) 0px 2px 4px 0px; rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
font-size: 14px; font-size: 14px;
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #fff; color: #fff;
background-color: #232a31; .msg-icon {
border-radius: 4px; display: inline-block;
img { width: 15px;
width: 20px; height: 15px;
height: auto; background-color: var(--danger);
margin-right: 10px; border-radius: 50%;
margin-right: 6px;
} }
} }
} }
......
src/views/dustMonitoring/index.vue
View file @ b5fe419e
...@@ -761,10 +761,12 @@ $borderColor: #3a3f45; ...@@ -761,10 +761,12 @@ $borderColor: #3a3f45;
.value { .value {
color: #fff; color: #fff;
font-size: 14px;
} }
.unit { .unit {
color: #909399; color: #909399;
font-size: 12px;
} }
.right-box { .right-box {
...@@ -793,7 +795,7 @@ $borderColor: #3a3f45; ...@@ -793,7 +795,7 @@ $borderColor: #3a3f45;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 20px 20px 0 20px;
box-sizing: border-box; box-sizing: border-box;
background: #181d21; background: #181d21;
position: relative; position: relative;
...@@ -827,6 +829,7 @@ $borderColor: #3a3f45; ...@@ -827,6 +829,7 @@ $borderColor: #3a3f45;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 600;
justify-content: space-between; justify-content: space-between;
.label { .label {
color: #909399; color: #909399;
...@@ -838,14 +841,14 @@ $borderColor: #3a3f45; ...@@ -838,14 +841,14 @@ $borderColor: #3a3f45;
justify-content: space-between; justify-content: space-between;
.indicator-item { .indicator-item {
width: 50%; width: 50%;
height: 200px; height: 180px;
} }
} }
.position-info { .position-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 40px 20px 20px 20px; padding: 10px 20px 20px 20px;
.left, .left,
.right { .right {
padding: 5px; padding: 5px;
...@@ -853,6 +856,12 @@ $borderColor: #3a3f45; ...@@ -853,6 +856,12 @@ $borderColor: #3a3f45;
flex-wrap: wrap; flex-wrap: wrap;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px 0px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 20px 0px;
} }
.left {
background-color: #232a31;
border-radius: 6px;
padding: 10px;
box-sizing: border-box;
}
.part { .part {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -864,6 +873,11 @@ $borderColor: #3a3f45; ...@@ -864,6 +873,11 @@ $borderColor: #3a3f45;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.2);
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
}
} }
.point::after { .point::after {
content: ""; content: "";
...@@ -886,16 +900,22 @@ $borderColor: #3a3f45; ...@@ -886,16 +900,22 @@ $borderColor: #3a3f45;
padding: 20px; padding: 20px;
border-top: 1px solid $borderColor; border-top: 1px solid $borderColor;
display: flex; display: flex;
align-items: center; align-items: normal;
justify-content: space-between; justify-content: space-between;
font-size: 14px;
gap: 10px; gap: 10px;
&-item { &-item {
padding: 10px; padding: 10px;
height: 70px; min-height: 70px;
background: #232a31; background: #232a31;
border-radius: 6px; border-radius: 6px;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
p:nth-child(2) {
font-size: 14px;
font-weight: 600;
color: #fff;
}
} }
&-item::-webkit-scrollbar { &-item::-webkit-scrollbar {
width: 0; width: 0;
......
src/views/dustOverview/components/roomSettingDialog.vue
View file @ b5fe419e
...@@ -191,7 +191,7 @@ const handleConfirm = () => { ...@@ -191,7 +191,7 @@ const handleConfirm = () => {
.table-title { .table-title {
font-size: 14px; font-size: 14px;
color: #2182a0; color: var(--success);
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 500; font-weight: 500;
} }
......
src/views/dustOverview/components/valveSettingDialog.vue
View file @ b5fe419e
...@@ -375,7 +375,7 @@ const cancel = () => { ...@@ -375,7 +375,7 @@ const cancel = () => {
.table-title { .table-title {
font-size: 14px; font-size: 14px;
color: #2182a0; color: var(--success);
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 500; font-weight: 500;
......
src/views/dustOverview/index.vue
View file @ b5fe419e
...@@ -586,25 +586,25 @@ onBeforeUnmount(() => {}); ...@@ -586,25 +586,25 @@ onBeforeUnmount(() => {});
align-items: center; align-items: center;
margin-bottom: 16px; margin-bottom: 16px;
:deep(.el-form-item__label) { // :deep(.el-form-item__label) {
color: #fff; // color: #fff;
} // }
:deep(.el-input__inner), // :deep(.el-input__inner),
:deep(.el-select__input) { // :deep(.el-select__input) {
background-color: #242a30; // background-color: #242a30;
border-color: #2c3136; // border-color: #2c3136;
color: #fff; // color: #fff;
} // }
:deep(.el-select-dropdown__item) { // :deep(.el-select-dropdown__item) {
color: #fff; // color: #fff;
} // }
:deep(.el-select-dropdown) { // :deep(.el-select-dropdown) {
background-color: #242a30; // background-color: #242a30;
border-color: #2c3136; // border-color: #2c3136;
} // }
} }
.table-box { .table-box {
width: 100%; width: 100%;
...@@ -643,7 +643,7 @@ onBeforeUnmount(() => {}); ...@@ -643,7 +643,7 @@ onBeforeUnmount(() => {});
} }
.el-input__inner { .el-input__inner {
background-color: #242a30; // background-color: #242a30;
border-color: #2c3136; border-color: #2c3136;
color: #fff; color: #fff;
} }
...@@ -653,14 +653,14 @@ onBeforeUnmount(() => {}); ...@@ -653,14 +653,14 @@ onBeforeUnmount(() => {});
.default-btn { .default-btn {
width: 85px; width: 85px;
background-color: #242a30; background-color: var(--text-secondary);
border-color: #2c3136; border-color: #2c3136;
color: #fff; color: #fff;
} }
.search-btn { .search-btn {
width: 85px; width: 85px;
background: #2182a0; background-color: var(--bg-primary);
border: 1px solid #2182a0; border: 1px solid var(--success);
} }
.add-btn { .add-btn {
width: 85px; width: 85px;
...@@ -669,7 +669,7 @@ onBeforeUnmount(() => {}); ...@@ -669,7 +669,7 @@ onBeforeUnmount(() => {});
} }
.health-score { .health-score {
color: #027ffc; color: var(--success);
cursor: pointer; cursor: pointer;
display: block; display: block;
width: 100%; width: 100%;
...@@ -766,7 +766,7 @@ onBeforeUnmount(() => {}); ...@@ -766,7 +766,7 @@ onBeforeUnmount(() => {});
.table-title { .table-title {
font-size: 14px; font-size: 14px;
color: #2182a0; color: var(--success);
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 500; font-weight: 500;
} }
......
src/views/equipmentManagement/components/paramsSetings.vue
View file @ b5fe419e
<template> <template>
<div class="container" v-if="dialogVisible"> <div class="container el-self-container" v-if="dialogVisible">
<div class="close-box" @click="cancelFun"> <div class="close-box" @click="cancelFun">
<el-icon size="25"><Close /></el-icon> <el-icon size="25"><Close /></el-icon>
</div> </div>
...@@ -374,6 +374,7 @@ body { ...@@ -374,6 +374,7 @@ body {
padding: 0.8rem 1.2rem 1.2rem; padding: 0.8rem 1.2rem 1.2rem;
z-index: 100; z-index: 100;
// overflow-y: auto; // overflow-y: auto;
background: #181d21;
.content-box { .content-box {
overflow: auto; overflow: auto;
height: 55vh; height: 55vh;
...@@ -385,11 +386,11 @@ body { ...@@ -385,11 +386,11 @@ body {
.title { .title {
color: #3b82f6; color: #fff;
font-size: 1.8rem; font-size: 1.8rem;
margin-bottom: 1rem; margin-bottom: 1rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
border-bottom: 2px solid #e2e8f0; border-bottom: 2px solid rgb(51 50 50);
} }
.grid-container { .grid-container {
...@@ -402,6 +403,7 @@ body { ...@@ -402,6 +403,7 @@ body {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: #f8fafc; background: #f8fafc;
border-radius: 8px; border-radius: 8px;
background: #00000080;
} }
.setting-row { .setting-row {
...@@ -410,7 +412,7 @@ body { ...@@ -410,7 +412,7 @@ body {
align-items: center; align-items: center;
margin: 0.5rem 0; margin: 0.5rem 0;
padding: 0.4rem 0.4rem 0.4rem 0.4rem; padding: 0.4rem 0.4rem 0.4rem 0.4rem;
background: white; background: rgb(51 50 50);
border-radius: 6px; border-radius: 6px;
height: 35px; height: 35px;
} }
...@@ -425,7 +427,7 @@ body { ...@@ -425,7 +427,7 @@ body {
} }
.label { .label {
color: #64748b; color: #c5c8cc;
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 15px;
min-width: 130px; min-width: 130px;
...@@ -516,12 +518,13 @@ body { ...@@ -516,12 +518,13 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
color: #c5c8cc;
} }
input[type="checkbox"] { input[type="checkbox"] {
width: 18px; width: 18px;
height: 18px; height: 18px;
accent-color: #3b82f6; accent-color: #36f1cd;
} }
.chamber-list { .chamber-list {
...@@ -564,20 +567,20 @@ input[type="checkbox"] { ...@@ -564,20 +567,20 @@ input[type="checkbox"] {
} }
.btn-confirm { .btn-confirm {
background: #3b82f6; background: #4e7bfa4d;
color: white; color: #437bfa;
} }
.btn-confirm:hover { .btn-confirm:hover {
background: #0e53c2; background: #4e7cfa88;
} }
.btn-cancel { .btn-cancel {
background: #e2e8f0; background: #8a89894d;
color: #64748b; color: #fff;
} }
.btn-cancel:hover { .btn-cancel:hover {
background: #b2c3da; background: #8a89899d;
} }
.highlight { .highlight {
...@@ -590,3 +593,29 @@ input[type="checkbox"] { ...@@ -590,3 +593,29 @@ input[type="checkbox"] {
cursor: pointer; cursor: pointer;
} }
</style> </style>
<style>
/* .el-self-container .el-input__wrapper{
background: #181D21;
box-shadow: 0 0 0 1px #697b78b6;
}
.el-self-container .el-input__inner {
color: #fff;
}
.el-self-container .el-select__wrapper {
color: #fff;
background: #181D21;
box-shadow: 0 0 0 1px #697b78b6 !important;
}
.el-self-container .el-textarea__inner {
color: #fff;
background: #181D21;
box-shadow: 0 0 0 1px #434343 !important;
border: 1px solid #434343 !important;
}
.el-self-container .device-label {
color: #fff;
} */
.el-self-container .device-label {
color: #fff;
}
</style>
\ No newline at end of file
src/views/equipmentManagement/index.vue
View file @ b5fe419e
<template> <template>
<div class="equipment-management"> <div class="equipment-management black-theme all-select-btn">
<div class="search"> <div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="工序"> <el-form-item label="工序">
...@@ -48,12 +48,12 @@ ...@@ -48,12 +48,12 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="default" class="default-btn" @click="onReset" <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
>重置</el-button >重置</el-button
> >
<el-button <el-button
type="primary" type="default"
class="search-btn margin-right-10" class="search-btn-balck-theme margin-right-10"
@click="onQuery" @click="onQuery"
>查询</el-button >查询</el-button
> >
...@@ -70,14 +70,14 @@ ...@@ -70,14 +70,14 @@
token: getToken('TOKEN'), token: getToken('TOKEN'),
}" }"
> >
<el-button type="success" class="add-btn margin-right-10" <el-button type="default" class="export-btn-balck-theme margin-right-10"
>导入</el-button >导入</el-button
> >
</el-upload> </el-upload>
<el-button type="success" class="add-btn" @click="onExportFile" <el-button type="default" class="export-btn-balck-theme" @click="onExportFile"
>导出</el-button >导出</el-button
> >
<el-button type="success" class="add-btn" @click="onDownloadTemplate" <el-button type="default" class="export-btn-balck-theme" @click="onDownloadTemplate"
>模板下载</el-button >模板下载</el-button
> >
</el-form-item> </el-form-item>
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
</template> </template>
<template #operation="{ row }"> <template #operation="{ row }">
<el-button text @click="getParamsConfig(row)" v-if="[10001, 10002].includes(row.deviceTypeId)"> 参数设置 </el-button> <el-button class="green-color" text @click="getParamsConfig(row)" v-if="[10001, 10002].includes(row.deviceTypeId)"> 参数设置 </el-button>
</template> </template>
</common-table> </common-table>
</div> </div>
...@@ -488,8 +488,8 @@ onMounted(() => { ...@@ -488,8 +488,8 @@ onMounted(() => {
} }
.search-btn { .search-btn {
width: 85px; width: 85px;
background: #2182a0; background-color: var(--bg-primary);
border: 1px solid #2182a0; border: 1px solid var(--success);
} }
.add-btn { .add-btn {
width: 85px; width: 85px;
......
src/views/equipmentManagement/suspendManagement/suspendManagement.vue
View file @ b5fe419e
<template> <template>
<div class="page-container collectorList"> <div class="page-container collectorList all-select-btn">
<div class="content-box"> <div class="content-box">
<div class="search"> <div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
...@@ -35,10 +35,10 @@ ...@@ -35,10 +35,10 @@
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="default" class="default-btn" @click="onReset" <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
>重置</el-button >重置</el-button
> >
<el-button type="primary" class="search-btn" @click="onSubmit" <el-button type="default" class="search-btn-balck-theme" @click="onSubmit"
>查询</el-button >查询</el-button
> >
</el-form-item> </el-form-item>
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
{{ getIndex($index) }} {{ getIndex($index) }}
</template> </template>
<template #operate="{ row }"> <template #operate="{ row }">
<span class="health-score" @click="linkTo(row)">挂起期间告警</span> <span class="health-score green-color" @click="linkTo(row)">挂起期间告警</span>
</template> </template>
<!-- <template #operation="{ row }"> <!-- <template #operation="{ row }">
<span class="view-btn" @click="handleView(row)">详情</span> <span class="view-btn" @click="handleView(row)">详情</span>
...@@ -331,15 +331,15 @@ onBeforeUnmount(() => {}); ...@@ -331,15 +331,15 @@ onBeforeUnmount(() => {});
} }
.search-btn { .search-btn {
width: 85px; width: 85px;
background: #2182a0; background-color: var(--bg-primary);
border: 1px solid #2182a0; border: 1px solid var(--success);
} }
.add-btn { .add-btn {
width: 85px; width: 85px;
} }
.health-score { .health-score {
color: #027ffc; color: var(--success);
cursor: pointer; cursor: pointer;
display: block; display: block;
width: 100%; width: 100%;
...@@ -409,7 +409,7 @@ onBeforeUnmount(() => {}); ...@@ -409,7 +409,7 @@ onBeforeUnmount(() => {});
.table-title { .table-title {
font-size: 14px; font-size: 14px;
color: #2182a0; color: var(--success);
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 500; font-weight: 500;
} }
......
src/views/login/index.vue
View file @ b5fe419e
...@@ -1240,7 +1240,7 @@ $light_gray: #eee; ...@@ -1240,7 +1240,7 @@ $light_gray: #eee;
.login-btn { .login-btn {
width: 100%; width: 100%;
margin-top: 40px; margin-top: 40px;
background: #2182a0; background-color: var(--bg-primary);
height: 40px; height: 40px;
} }
......
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