Skip to content

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

feat(*):菜单样式修改

parents ff2b80cc 14bd703d
Hide 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(
}
}
</style>
<<<<<<< HEAD
<style lang="scss">
.el-table__header,
......@@ -242,3 +243,5 @@ watch(
}
}
</style>
=======
>>>>>>> 14bd703db4380d50659b719495c761ed24c2c0d5
src/css/elementUiSelf.css
View file @ b5fe419e
:root {
--table-border-color: #c6dae0;
--table-border-color: #434343;
--table-head-bg-color: #fafafa;
--table-item-border-color: #ebeef5;
}
......
src/layout/index.vue
View file @ b5fe419e
......@@ -213,8 +213,8 @@ export default {
position: absolute;
right: 200px;
color: #ffffff;
background: #2182a0;
border: 1px solid #2182a0;
background-color: var(--bg-primary);
border: 1px solid var(--success);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
......
src/style.css
View file @ b5fe419e
......@@ -54,16 +54,16 @@
}
.view-btn {
color: #2182a0 !important;
color: var(--success) !important;
}
.edit-btn {
color: #2182a0 !important;
color: var(--success) !important;
}
.el-button--primary {
background-color: #2182a0 !important;
border-color: #2182a0 !important;
background-color: var(--chart-blue) !important;
border-color: var(--chart-blue) !important;
}
.login-container .el-form-item {
......
src/theme.scss
View file @ b5fe419e
.el-form-item__label {
font-size: 14px;
color: #909399 !important;
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;
box-shadow: 0 0 0 1px #434343 inset !important;
}
.el-input {
background-color: var(--bg-secondary);
......@@ -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__arrow:before {
background: var(--bg-secondary) !important;
......@@ -54,15 +62,27 @@
.el-select-dropdown__item.is-hovering {
background-color: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
}
.el-select-dropdown__item {
color: #d9dbdc;
color: #d9dbdc;
&.selected {
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 {
background-color: rgba(255, 255, 255, 0.05);
}
......@@ -88,7 +108,22 @@
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 {
color: #d9dbdc !important;
background-color: transparent !important;
font-size: 15px !important;
&::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
}
&::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
......@@ -98,16 +133,25 @@
color: rgba(255, 255, 255, 0.7) !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;
}
.el-popper.is-light {
border: 1px solid #181d21 !important;
}
......@@ -121,6 +165,7 @@
box-shadow: 0 0 0 2px #181d21 inset !important;
}
.el-input__wrapper {
box-shadow: 0 0 0 1px #535252 inset !important;
}
......@@ -129,14 +174,17 @@
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;
}
......@@ -145,14 +193,17 @@
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 {
......@@ -160,50 +211,62 @@
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;
}
......@@ -219,7 +282,7 @@
.date-picker-popper .el-picker-panel__body {
background-color: #181d21 !important;
}
}
.common-table {
......@@ -260,4 +323,133 @@
.el-pager li ,.btn-next,.btn-prev,.el-pagination__editor .el-input__wrapper{
background-color: #181d21 !important;
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 = []) => ({
tooltip: {
trigger: "axis",
......@@ -129,13 +199,7 @@ export const getDustLineOption = (xData = [], seriesData = []) => ({
export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
color: "#909399",
width: 1,
},
},
...commonConfig.tooltip,
},
grid: {
left: "20",
......@@ -148,13 +212,8 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
xAxis: {
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#3a3f45",
},
},
axisLabel: {
color: "#909399",
color: chartColors.textColor,
fontSize: 12,
interval: "auto",
rotate: 0,
......@@ -162,9 +221,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
return value.split(' ')[1];
}
},
axisLine: {
lineStyle: {
color: "#3a3f45",
},
},
axisTick: {
show: false,
},
data: xData,
},
yAxis: {
......@@ -173,28 +239,24 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
// max: 600,
// interval: 200,
axisLabel: {
color: "#909399",
formatter: "{value}",
...commonConfig.yAxis.axisLabel
},
splitLine: {
lineStyle: {
color: "#3a3f45",
type: "dashed",
},
},
...commonConfig.yAxis
},
series: [
{
name: "监测值",
type: "line",
smooth: false,
symbol: "none",
sampling: "average",
itemStyle: {
color: "#7B68EE",
},
smooth: true,
symbol: 'circle',
symbolSize: 0,
lineStyle: {
width: 1,
width: 2,
color: chartColors.teal
},
itemStyle: {
color: chartColors.teal
},
areaStyle: {
color: {
......@@ -206,15 +268,16 @@ export const getBagMonitoringChartOption = (xData = [], seriesData = []) => ({
colorStops: [
{
offset: 0,
color: "rgba(123, 104, 238, 0.4)",
color: "rgba(54, 241, 205, 0.8)",
},
{
offset: 1,
color: "rgba(123, 104, 238, 0.1)",
color: "rgba(54, 241, 205, 0)",
},
],
},
},
data: seriesData,
},
],
......
src/views/AboutView/AboutView.vue
View file @ b5fe419e
<template>
<div class="page-container collectorList">
<div class="page-container collectorList all-select-btn">
<div class="content-box">
<div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
......@@ -48,16 +48,16 @@
/>
</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 type="primary" class="search-btn" @click="onSubmit"
<el-button type="default" class="search-btn-balck-theme" @click="onSubmit"
>查询</el-button
>
<el-button
type="success"
type="default"
style="width: 140px"
class="add-btn"
class="export-btn-balck-theme"
@click="openRound()"
>挂起设备</el-button
>
......@@ -92,7 +92,7 @@
{{ getIndex($index) }}
</template>
<template #operate="{ row }">
<span class="health-score" @click="openDialog(row)">暂挂起</span>
<span class="health-score green-color" @click="openDialog(row)">暂挂起</span>
</template>
</common-table>
</div>
......@@ -141,9 +141,9 @@
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="equDialog = false">取消</el-button>
<el-button type="primary" @click="equPending(ruleFormRef)">
<span class="dialog-footer ">
<el-button type="default" class="cancel-btn-balck-theme" @click="equDialog = false">取消</el-button>
<el-button type="default" class="reset-btn-balck-theme" @click="equPending(ruleFormRef)">
确认
</el-button>
</span>
......@@ -425,15 +425,15 @@ onBeforeUnmount(() => {});
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
background-color: var(--bg-primary);
border: 1px solid var(--success);
}
.add-btn {
width: 85px;
}
.health-score {
color: #027ffc;
color: var(--success);
cursor: pointer;
display: block;
width: 100%;
......@@ -503,7 +503,7 @@ onBeforeUnmount(() => {});
.table-title {
font-size: 14px;
color: #2182a0;
color: var(--success);
margin-bottom: 16px;
font-weight: 500;
}
......@@ -602,6 +602,7 @@ onBeforeUnmount(() => {});
flex-direction: column;
justify-content: center;
align-items: center;
color: #dce0e4;
}
.bold {
font-weight: bold;
......
src/views/closeManage/components/dialog.vue
View file @ b5fe419e
......@@ -11,8 +11,8 @@
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">关闭</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" @click="closeDialog" class="reset-btn-balck-them">关闭</el-button>
<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}}
</el-button>
</div>
......@@ -103,5 +103,10 @@ const handleSave = ()=> {
margin-right: 16px;
cursor: pointer;
}
.reset-btn-balck-them {
background-color: #4e7bfa33;
color: #4e7bfa;
border-color: #4e7bfa;
}
}
</style>
\ No newline at end of file
src/views/closeManage/myAgency.vue
View file @ b5fe419e
<template>
<div class="my-agency">
<div class="my-agency all-select-btn">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="事件名称：">
<el-input v-model="formInline.eventName">
......@@ -46,8 +46,8 @@
/>
</el-form-item>
<el-form-item>
<el-button class="default-btn" @click="onReset">重置</el-button>
<el-button type="primary" class="default-btn" @click="onSearch">查询</el-button>
<el-button class="default-btn reset-btn-balck-theme" @click="onReset">重置</el-button>
<el-button type="default" class="default-btn search-btn-balck-theme" @click="onSearch">查询</el-button>
</el-form-item>
</el-form>
<div class="table-box">
......@@ -74,15 +74,15 @@
</span>
</template>
<template #operation="{ row }">
<span class="view-btn" @click="handleDone(row)">
<span class="view-btn green-color" @click="handleDone(row)">
处理
</span>
<span class="table-btn">|</span>
<span class="view-btn" @click="handleDispatch(row)">
<span class="view-btn green-color" @click="handleDispatch(row)">
分派
</span>
<span class="table-btn">|</span>
<span class="view-btn" @click="changeBag(row)">
<span class="view-btn green-color" @click="changeBag(row)">
更换布袋
</span>
</template>
......@@ -574,7 +574,7 @@
:value="item.id"
></el-option>
</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>
</el-form-item>
<el-form-item label="已分派人:">
......@@ -1246,7 +1246,7 @@ const handlePaginationChange = (pagination) => {
width: 100%;
height: calc(100% - 14px);
box-sizing: border-box;
background: #fff;
background: #181D21;
padding: 20px;
display: flex;
flex-direction: column;
......@@ -1319,12 +1319,13 @@ const handlePaginationChange = (pagination) => {
font-weight: 700;
font-size: 19px;
overflow: hidden;
color: #dce0e4;
&::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: #1890ff;
background: #36f1cd;
position: absolute;
left: 0px;
top: 50%;
......@@ -1335,7 +1336,7 @@ const handlePaginationChange = (pagination) => {
width: 100%;
height: 0px;
position: absolute;
border-bottom: dashed 1px rgb(209, 209, 209);
border-bottom: dashed 1px #8a9199;
left: 130px;
top: 50%;
transform: translateY(-50%);
......@@ -1358,12 +1359,13 @@ const handlePaginationChange = (pagination) => {
text-align: right;
width: 140px;
margin-right: 10px;
color: #8a9199;
}
.change-style {
width: auto;
}
.value {
color: #000000;
color: #fff;
flex: 1;
}
.alarm-value {
......@@ -1632,6 +1634,11 @@ const handlePaginationChange = (pagination) => {
margin-bottom: 28px;
}
}
.form-box::-webkit-scrollbar {
width: 0px;
height: 8px;
background-color: #434343; /* or add it to the track */
}
.input-style {
padding-left: 50px;
......@@ -1649,8 +1656,8 @@ const handlePaginationChange = (pagination) => {
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
background-color: var(--bg-primary);
border: 1px solid var(--success);
}
:deep(.el-tag) {
margin-right: 10px;
......
src/views/closeManage/myDone.vue
View file @ b5fe419e
<template>
<div class="my-agency">
<div class="my-agency all-select-btn">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="事件名称：">
<el-input v-model="formInline.eventName">
......@@ -46,8 +46,8 @@
/>
</el-form-item>
<el-form-item>
<el-button class="default-btn" @click="onReset">重置</el-button>
<el-button type="primary" class="default-btn" @click="onSearch">查询</el-button>
<el-button type="default" class="reset-btn-balck-theme" @click="onReset">重置</el-button>
<el-button type="default" class="search-btn-balck-theme" @click="onSearch">查询</el-button>
</el-form-item>
</el-form>
<div class="table-box">
......@@ -74,7 +74,7 @@
</span>
</template>
<template #operation="{ row }">
<span class="view-btn" @click="handleView(row)">
<span class="view-btn green-color" @click="handleView(row)">
查看
</span>
<!-- <span class="table-btn">|</span>
......@@ -1235,7 +1235,7 @@ const handlePaginationChange = (pagination) => {
width: 100%;
height: calc(100% - 14px);
box-sizing: border-box;
background: #fff;
background: #181D21;
padding: 20px;
display: flex;
flex-direction: column;
......@@ -1399,12 +1399,13 @@ const handlePaginationChange = (pagination) => {
font-weight: 700;
font-size: 19px;
overflow: hidden;
color: #dce0e4;
&::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: #1890ff;
background: #36f1cd;
position: absolute;
left: 0px;
top: 50%;
......@@ -1415,7 +1416,7 @@ const handlePaginationChange = (pagination) => {
width: 100%;
height: 0px;
position: absolute;
border-bottom: dashed 1px rgb(209, 209, 209);
border-bottom: dashed 1px #8a9199;
left: 130px;
top: 50%;
transform: translateY(-50%);
......@@ -1438,12 +1439,13 @@ const handlePaginationChange = (pagination) => {
text-align: right;
width: 140px;
margin-right: 10px;
color: #8a9199;
}
.change-style {
width: auto;
}
.value {
color: #000000;
color: #fff;
flex: 1;
}
.alarm-value {
......@@ -1683,6 +1685,7 @@ const handlePaginationChange = (pagination) => {
margin-bottom: 20px;
}
}
.label-title-content {
width: 90%;
padding-left: 30px;
......@@ -1692,6 +1695,18 @@ const handlePaginationChange = (pagination) => {
overflow: auto;
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 {
padding: 5px 20px;
.qusetion-records-item {
......@@ -1712,6 +1727,11 @@ const handlePaginationChange = (pagination) => {
margin-bottom: 28px;
}
}
.form-box::-webkit-scrollbar {
width: 0px;
height: 8px;
background-color: #434343; /* or add it to the track */
}
:deep(.el-tag) {
margin-right: 10px;
......@@ -1733,8 +1753,8 @@ const handlePaginationChange = (pagination) => {
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
background-color: var(--bg-primary);
border: 1px solid var(--success);
}
}
</style>
\ No newline at end of file
src/views/collectorList/collectorList.vue
View file @ b5fe419e
<template>
<div class="page-container collectorList">
<div class="page-container collectorList all-select-btn">
<div class="content-box">
<div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
......@@ -30,16 +30,16 @@
/>
</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 type="primary" class="search-btn" @click="onSubmit"
<el-button type="default" class="search-btn-balck-theme" @click="onSubmit"
>查询</el-button
>
<el-button
type="success"
type="default"
style="width: 140px"
class="add-btn"
class="export-btn-balck-theme"
@click="openDialog()"
>更换周期分析</el-button
>
......@@ -66,7 +66,7 @@
{{ getIndex($index) }}
</template>
<template #dusterName="{ row }">
<span class="health-score" @dblclick="openDialog(row.dusterName)">{{
<span class="health-score green-color" @dblclick="openDialog(row.dusterName)">{{
row.dusterName
}}</span>
</template>
......@@ -361,15 +361,15 @@ onBeforeUnmount(() => {});
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
background-color: var(--bg-primary);
border: 1px solid var(--success);
}
.add-btn {
width: 85px;
}
.health-score {
color: #027ffc;
color: var(--success);
cursor: pointer;
display: block;
width: 100%;
......@@ -439,7 +439,7 @@ onBeforeUnmount(() => {});
.table-title {
font-size: 14px;
color: #2182a0;
color: var(--success);
margin-bottom: 16px;
font-weight: 500;
}
......
src/views/dustMonitoring/bag-monitoring.vue
View file @ b5fe419e
......@@ -2,7 +2,7 @@
<div class="page-container bag-monitoring-container">
<div class="header">
<div class="select-container">
<span>检测仪器</span>
<span class="select-label">检测仪器</span>
<el-select v-model="selectedDevice" placeholder="1#布袋检测仪" @change="handleDeviceChange">
<el-option
v-for="item in deviceList"
......@@ -70,7 +70,8 @@
<div class="time-controls">
<div class="time-desc">
<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>
<el-button @click="navigateBackward">
......@@ -556,6 +557,7 @@ onBeforeUnmount(() => {
box-sizing: border-box;
// overflow-x: hidden;
position: relative;
background-color: #181d21;
.header {
position: relative;
......@@ -572,10 +574,13 @@ onBeforeUnmount(() => {
display: flex;
align-items: center;
z-index: 99;
.select-label {
color: #909399 !important;
font-size: 14px;
}
span {
display: block;
width: 110px;
width: 80px;
margin-right: 10px;
}
......@@ -590,14 +595,14 @@ onBeforeUnmount(() => {
.title {
font-size: 18px;
font-weight: bold;
color: #2182a0;
color: var(--success);
}
}
.chart-container {
width: 100%;
height: calc(100% - 350px);
background-color: #fff;
background-color: #000;
border-radius: 4px;
display: flex;
flex-direction: column;
......@@ -614,7 +619,7 @@ onBeforeUnmount(() => {
justify-content: center;
font-size: 14px;
color: #999;
background-color: #f5f7fa;
background-color: #000;
border-radius: 4px;
}
}
......@@ -644,13 +649,16 @@ onBeforeUnmount(() => {
position: absolute;
width: 25px;
height: 30px;
background: #fff;
top: 1px;
background: #232a31;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 4px;
.el-icon {
color: var(--success) !important;
}
}
.collapsed-icon {
......@@ -662,9 +670,9 @@ onBeforeUnmount(() => {
.data-box {
padding: 10px;
background-color: rgba(255, 255, 255, 0.9);
background-color: #232a31;
border-radius: 4px;
border: 1px solid #ebeef5;
border: 1px solid #3a3f45;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
......@@ -686,7 +694,7 @@ onBeforeUnmount(() => {
}
.data-table {
background-color: #fff;
background-color: #181d21;
border-radius: 4px;
padding: 10px 0;
box-sizing: border-box;
......@@ -697,15 +705,20 @@ onBeforeUnmount(() => {
th,
td {
border: 1px solid #ebeef5;
border: 1px solid #434343;
text-align: center;
padding: 8px;
font-size: 14px;
font-weight: 400;
}
td {
color: #afafaf;
}
th {
background-color: #f5f7fa;
color: #606266;
background-color: #181d21;
color: #bababd;
font-weight: 600;
}
.error {
......@@ -713,7 +726,7 @@ onBeforeUnmount(() => {
}
.highlight {
background-color: #fcf8e3;
background-color: #181d21;
position: relative;
&::after {
......@@ -730,8 +743,9 @@ onBeforeUnmount(() => {
}
}
.online-style {
background-color: rgba(33, 130, 160, 1);
color: #fff;
color: var(--accent);
font-weight: 600;
background-color: #58595a;
}
}
......@@ -742,13 +756,28 @@ onBeforeUnmount(() => {
justify-content: space-between;
.el-button {
background-color: #2182a0;
border-color: #2182a0;
color: #fff;
border-color: var(--accent);
color: var(--accent);
background-color: #181d21;
&:hover {
background-color: #1a6980;
border-color: #1a6980;
border-color: var(--accent);
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(() => {
border-radius: 50%;
margin-right: 5px;
}
.time-desc-value {
color: #fff;
font-weight: 600;
}
}
.time-label,
.time-unit {
......
src/views/dustMonitoring/components/warn.vue
View file @ b5fe419e
......@@ -5,7 +5,8 @@
</div>
<div class="content">
<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>
</template>
......@@ -30,12 +31,15 @@ const toDetail = () => {
height: 20px;
.warn-title {
font-weight: bold;
color: rgb(217, 10, 10);
color: var(--warning);
}
.jump-icon {
font-weight: bold;
color: #018796;
color: #909399;
cursor: pointer;
&:hover {
color: #fff;
}
}
}
.content {
......@@ -54,13 +58,16 @@ const toDetail = () => {
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;
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
background-color: #232a31;
border-radius: 4px;
img {
width: 20px;
height: auto;
margin-right: 10px;
.msg-icon {
display: inline-block;
width: 15px;
height: 15px;
background-color: var(--danger);
border-radius: 50%;
margin-right: 6px;
}
}
}
......
src/views/dustMonitoring/index.vue
View file @ b5fe419e
......@@ -761,10 +761,12 @@ $borderColor: #3a3f45;
.value {
color: #fff;
font-size: 14px;
}
.unit {
color: #909399;
font-size: 12px;
}
.right-box {
......@@ -793,7 +795,7 @@ $borderColor: #3a3f45;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
overflow-y: auto;
padding: 20px;
padding: 20px 20px 0 20px;
box-sizing: border-box;
background: #181d21;
position: relative;
......@@ -827,6 +829,7 @@ $borderColor: #3a3f45;
font-size: 14px;
display: flex;
align-items: center;
font-weight: 600;
justify-content: space-between;
.label {
color: #909399;
......@@ -838,14 +841,14 @@ $borderColor: #3a3f45;
justify-content: space-between;
.indicator-item {
width: 50%;
height: 200px;
height: 180px;
}
}
.position-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px 20px 20px 20px;
padding: 10px 20px 20px 20px;
.left,
.right {
padding: 5px;
......@@ -853,6 +856,12 @@ $borderColor: #3a3f45;
flex-wrap: wrap;
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 {
display: flex;
align-items: center;
......@@ -864,6 +873,11 @@ $borderColor: #3a3f45;
border-radius: 50%;
display: inline-block;
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 {
content: "";
......@@ -886,16 +900,22 @@ $borderColor: #3a3f45;
padding: 20px;
border-top: 1px solid $borderColor;
display: flex;
align-items: center;
align-items: normal;
justify-content: space-between;
font-size: 14px;
gap: 10px;
&-item {
padding: 10px;
height: 70px;
min-height: 70px;
background: #232a31;
border-radius: 6px;
flex: 1;
overflow-y: auto;
p:nth-child(2) {
font-size: 14px;
font-weight: 600;
color: #fff;
}
}
&-item::-webkit-scrollbar {
width: 0;
......
src/views/dustOverview/components/roomSettingDialog.vue
View file @ b5fe419e
......@@ -191,7 +191,7 @@ const handleConfirm = () => {
.table-title {
font-size: 14px;
color: #2182a0;
color: var(--success);
margin-bottom: 16px;
font-weight: 500;
}
......
src/views/dustOverview/components/valveSettingDialog.vue
View file @ b5fe419e
......@@ -375,7 +375,7 @@ const cancel = () => {
.table-title {
font-size: 14px;
color: #2182a0;
color: var(--success);
margin-bottom: 16px;
font-weight: 500;
......
src/views/dustOverview/index.vue
View file @ b5fe419e
......@@ -586,25 +586,25 @@ onBeforeUnmount(() => {});
align-items: center;
margin-bottom: 16px;
:deep(.el-form-item__label) {
color: #fff;
}
// :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-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__item) {
// color: #fff;
// }
:deep(.el-select-dropdown) {
background-color: #242a30;
border-color: #2c3136;
}
// :deep(.el-select-dropdown) {
// background-color: #242a30;
// border-color: #2c3136;
// }
}
.table-box {
width: 100%;
......@@ -643,24 +643,24 @@ onBeforeUnmount(() => {});
}
.el-input__inner {
background-color: #242a30;
// background-color: #242a30;
border-color: #2c3136;
color: #fff;
}
}
}
}
}
.default-btn {
width: 85px;
background-color: #242a30;
background-color: var(--text-secondary);
border-color: #2c3136;
color: #fff;
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
background-color: var(--bg-primary);
border: 1px solid var(--success);
}
.add-btn {
width: 85px;
......@@ -669,7 +669,7 @@ onBeforeUnmount(() => {});
}
.health-score {
color: #027ffc;
color: var(--success);
cursor: pointer;
display: block;
width: 100%;
......@@ -766,7 +766,7 @@ onBeforeUnmount(() => {});
.table-title {
font-size: 14px;
color: #2182a0;
color: var(--success);
margin-bottom: 16px;
font-weight: 500;
}
......
src/views/equipmentManagement/components/paramsSetings.vue
View file @ b5fe419e
<template>
<div class="container" v-if="dialogVisible">
<div class="container el-self-container" v-if="dialogVisible">
<div class="close-box" @click="cancelFun">
<el-icon size="25"><Close /></el-icon>
</div>
......@@ -374,6 +374,7 @@ body {
padding: 0.8rem 1.2rem 1.2rem;
z-index: 100;
// overflow-y: auto;
background: #181d21;
.content-box {
overflow: auto;
height: 55vh;
......@@ -385,11 +386,11 @@ body {
.title {
color: #3b82f6;
color: #fff;
font-size: 1.8rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e2e8f0;
border-bottom: 2px solid rgb(51 50 50);
}
.grid-container {
......@@ -402,6 +403,7 @@ body {
padding: 0.5rem 1rem;
background: #f8fafc;
border-radius: 8px;
background: #00000080;
}
.setting-row {
......@@ -410,7 +412,7 @@ body {
align-items: center;
margin: 0.5rem 0;
padding: 0.4rem 0.4rem 0.4rem 0.4rem;
background: white;
background: rgb(51 50 50);
border-radius: 6px;
height: 35px;
}
......@@ -425,7 +427,7 @@ body {
}
.label {
color: #64748b;
color: #c5c8cc;
font-weight: 500;
font-size: 15px;
min-width: 130px;
......@@ -516,12 +518,13 @@ body {
display: flex;
align-items: center;
gap: 0.5rem;
color: #c5c8cc;
}
input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #3b82f6;
accent-color: #36f1cd;
}
.chamber-list {
......@@ -564,20 +567,20 @@ input[type="checkbox"] {
}
.btn-confirm {
background: #3b82f6;
color: white;
background: #4e7bfa4d;
color: #437bfa;
}
.btn-confirm:hover {
background: #0e53c2;
background: #4e7cfa88;
}
.btn-cancel {
background: #e2e8f0;
color: #64748b;
background: #8a89894d;
color: #fff;
}
.btn-cancel:hover {
background: #b2c3da;
background: #8a89899d;
}
.highlight {
......@@ -589,4 +592,30 @@ input[type="checkbox"] {
right: 20px;
cursor: pointer;
}
</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>
<div class="equipment-management">
<div class="equipment-management black-theme all-select-btn">
<div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="工序">
......@@ -48,12 +48,12 @@
</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
type="primary"
class="search-btn margin-right-10"
type="default"
class="search-btn-balck-theme margin-right-10"
@click="onQuery"
>查询</el-button
>
......@@ -70,14 +70,14 @@
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-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 type="success" class="add-btn" @click="onDownloadTemplate"
<el-button type="default" class="export-btn-balck-theme" @click="onDownloadTemplate"
>模板下载</el-button
>
</el-form-item>
......@@ -104,7 +104,7 @@
</template>
<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>
</common-table>
</div>
......@@ -488,8 +488,8 @@ onMounted(() => {
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
background-color: var(--bg-primary);
border: 1px solid var(--success);
}
.add-btn {
width: 85px;
......
src/views/equipmentManagement/suspendManagement/suspendManagement.vue
View file @ b5fe419e
<template>
<div class="page-container collectorList">
<div class="page-container collectorList all-select-btn">
<div class="content-box">
<div class="search">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
......@@ -35,10 +35,10 @@
</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 type="primary" class="search-btn" @click="onSubmit"
<el-button type="default" class="search-btn-balck-theme" @click="onSubmit"
>查询</el-button
>
</el-form-item>
......@@ -64,7 +64,7 @@
{{ getIndex($index) }}
</template>
<template #operate="{ row }">
<span class="health-score" @click="linkTo(row)">挂起期间告警</span>
<span class="health-score green-color" @click="linkTo(row)">挂起期间告警</span>
</template>
<!-- <template #operation="{ row }">
<span class="view-btn" @click="handleView(row)">详情</span>
......@@ -331,15 +331,15 @@ onBeforeUnmount(() => {});
}
.search-btn {
width: 85px;
background: #2182a0;
border: 1px solid #2182a0;
background-color: var(--bg-primary);
border: 1px solid var(--success);
}
.add-btn {
width: 85px;
}
.health-score {
color: #027ffc;
color: var(--success);
cursor: pointer;
display: block;
width: 100%;
......@@ -409,7 +409,7 @@ onBeforeUnmount(() => {});
.table-title {
font-size: 14px;
color: #2182a0;
color: var(--success);
margin-bottom: 16px;
font-weight: 500;
}
......
src/views/login/index.vue
View file @ b5fe419e
......@@ -1240,7 +1240,7 @@ $light_gray: #eee;
.login-btn {
width: 100%;
margin-top: 40px;
background: #2182a0;
background-color: var(--bg-primary);
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