Skip to content

D
DC-TOM
Commit 6e903857 authored by liuzhaoh's avatar liuzhaoh
Browse files
Options

样式修改

parent af761158
Show whitespace changes
Inline Side-by-side
Showing with 188 additions and 80 deletions
src/components/commonTable/index.vue
View file @ 6e903857
......@@ -224,21 +224,3 @@ watch(
}
}
</style>
<style lang="scss">
.el-table__header,
.el-table__body {
width: 100% !important;
}
.el-table__header th { user-select: none; }
.el-table {
// 设置表头样式
th.el-table__cell {
background-color: #f5f7fa !important;
color: #606266;
font-weight: 600;
}
}
</style>
src/css/elementUiSelf.css
View file @ 6e903857
:root {
--table-border-color: #c6dae0;
--table-border-color: #434343;
--table-head-bg-color: #fafafa;
--table-item-border-color: #ebeef5;
}
......
src/theme.scss
View file @ 6e903857
......@@ -5,14 +5,16 @@
.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);
......@@ -44,7 +46,8 @@
}
}
.el-popper.is-light, .el-popper.is-light>.el-popper__arrow:before {
.el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before {
background: var(--bg-secondary) !important;
border: 1px solid var(--bg-secondary) !important;
}
......@@ -63,8 +66,9 @@
&:hover {
background-color: rgba(255, 255, 255, 0.05);
}
}
.el-select-dropdown__item.is-hovering {
}
.el-select-dropdown__item.is-hovering {
background-color: rgba(255, 255, 255, 0.1);
}
......@@ -75,9 +79,11 @@
.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;
......@@ -91,19 +97,21 @@
.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-date-editor.el-input__wrapper {
box-shadow: 0 0 0 1px #434343 inset !important;
}
.el-popper.is-light {
.el-popper.is-light {
border: 1px solid #181d21 !important;
}
}
.date-picker-popper {
border: 1px solid #181d21 !important;
box-shadow: #181d21 !important;
......@@ -112,6 +120,7 @@
background: #00000040;
box-shadow: 0 0 0 2px #181d21 inset !important;
}
.el-input__wrapper {
box-shadow: 0 0 0 1px #535252 inset !important;
}
......@@ -119,12 +128,15 @@
.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;
}
......@@ -132,62 +144,151 @@
.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;
}
}
.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;
}
}
.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;
}
}
\ No newline at end of file
src/views/equipmentManagement/components/paramsSetings.vue
View file @ 6e903857
<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: #fff;
font-weight: 500;
font-size: 15px;
min-width: 130px;
......@@ -564,20 +566,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 {
......@@ -590,3 +592,26 @@ input[type="checkbox"] {
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 #697b78b6 !important;
border: 1px solid #697b78b6 !important;
}
.el-self-container .device-label {
color: #fff;
}
</style>
\ No newline at end of file
src/views/equipmentManagement/index.vue
View file @ 6e903857
<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>
......
src/views/equipmentManagement/suspendManagement/suspendManagement.vue
View file @ 6e903857
<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>
......
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