Skip to content

S
so-manage-ui
Commit 3fbbf1d9 authored by 张耀's avatar 张耀
Browse files
Options

feat: 

工单列表
parent 6c696f85
Show whitespace changes
Inline Side-by-side
Showing with 652 additions and 421 deletions
src/bg-ui/index.scss
View file @ 3fbbf1d9
...@@ -19,7 +19,6 @@ a { ...@@ -19,7 +19,6 @@ a {
.clearfix { .clearfix {
zoom: 1; zoom: 1;
&::after { &::after {
content: ""; content: "";
display: block; display: block;
...@@ -65,7 +64,6 @@ a { ...@@ -65,7 +64,6 @@ a {
max-width: 750px; max-width: 750px;
margin: 0 auto; margin: 0 auto;
} }
.el-form-item { .el-form-item {
.el-form-item__label { .el-form-item__label {
float: unset; float: unset;
...@@ -75,11 +73,9 @@ a { ...@@ -75,11 +73,9 @@ a {
color: #202531; color: #202531;
line-height: 36px; line-height: 36px;
} }
.el-form-item__content { .el-form-item__content {
line-height: 36px; line-height: 36px;
// margin-top: 40px; // margin-top: 40px;
.el-select, .el-select,
.img_crop, .img_crop,
.el-cascader, .el-cascader,
...@@ -87,13 +83,11 @@ a { ...@@ -87,13 +83,11 @@ a {
.el-date-editor { .el-date-editor {
width: 100%; width: 100%;
} }
.wangeditor_class { .wangeditor_class {
min-height: 553px; min-height: 553px;
border: 1px solid #dadee7; border: 1px solid #dadee7;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
.toolbar { .toolbar {
.w-e-toolbar { .w-e-toolbar {
.w-e-menu { .w-e-menu {
...@@ -103,12 +97,10 @@ a { ...@@ -103,12 +97,10 @@ a {
} }
} }
} }
&.inline { &.inline {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
.el-form-item__label { .el-form-item__label {
width: 6em; width: 6em;
padding: 0; padding: 0;
...@@ -116,30 +108,25 @@ a { ...@@ -116,30 +108,25 @@ a {
color: #616f94; color: #616f94;
text-align: right; text-align: right;
margin-right: 1em; margin-right: 1em;
&:before { &:before {
display: inline; display: inline;
margin-left: -1em; margin-left: -1em;
} }
} }
.el-form-item__content { .el-form-item__content {
width: calc(100% - 7em); width: calc(100% - 7em);
flex-grow: 1; flex-grow: 1;
} }
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.el-button { .el-button {
min-width: 64px; min-width: 64px;
height: 36px; height: 36px;
padding: 0 10px; padding: 0 10px;
line-height: 36px; line-height: 36px;
&.el-button--default { &.el-button--default {
background-color: #fff; background-color: #fff;
color: #404a62; color: #404a62;
...@@ -174,7 +161,6 @@ a { ...@@ -174,7 +161,6 @@ a {
border-color: #404a62; border-color: #404a62;
color: #fff; color: #fff;
} }
&.is-disabled, &.is-disabled,
&.is-disabled:focus, &.is-disabled:focus,
&.is-disabled:hover { &.is-disabled:hover {
...@@ -185,35 +171,29 @@ a { ...@@ -185,35 +171,29 @@ a {
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; opacity: 0.5;
} }
+ .el-button { + .el-button {
margin-left: 16px; margin-left: 16px;
} }
} }
.el-input .el-input__inner, .el-input .el-input__inner,
.el-textarea .el-textarea__inner { .el-textarea .el-textarea__inner {
background-color: #f7f7f9; background-color: #f7f7f9;
border: solid 1px #dadee7; border: solid 1px #dadee7;
border-radius: 4px; border-radius: 4px;
} }
.el-input { .el-input {
.el-input__inner { .el-input__inner {
height: 36px; height: 36px;
} }
&.el-input-group { &.el-input-group {
> .el-input__inner { > .el-input__inner {
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
> .el-input-group__append { > .el-input-group__append {
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
border: none; border: none;
.input-append { .input-append {
display: block; display: block;
min-width: 120px; min-width: 120px;
...@@ -228,7 +208,6 @@ a { ...@@ -228,7 +208,6 @@ a {
color: #f4f7fc; color: #f4f7fc;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
&.disabled { &.disabled {
background-color: #a9b1c7; background-color: #a9b1c7;
cursor: not-allowed; cursor: not-allowed;
...@@ -236,7 +215,6 @@ a { ...@@ -236,7 +215,6 @@ a {
} }
} }
} }
&.is-disabled { &.is-disabled {
.el-input__inner { .el-input__inner {
background-color: #e6e9ef; background-color: #e6e9ef;
...@@ -244,7 +222,6 @@ a { ...@@ -244,7 +222,6 @@ a {
} }
} }
} }
.el-textarea { .el-textarea {
.el-input__count { .el-input__count {
background: #fff; background: #fff;
...@@ -256,14 +233,11 @@ a { ...@@ -256,14 +233,11 @@ a {
right: 10px; right: 10px;
} }
} }
.el-range-editor.el-input__inner { .el-range-editor.el-input__inner {
height: 36px; height: 36px;
} }
.el-pagination { .el-pagination {
padding: 0 10px; padding: 0 10px;
> * { > * {
height: 36px !important; height: 36px !important;
background-color: transparent !important; background-color: transparent !important;
...@@ -271,23 +245,19 @@ a { ...@@ -271,23 +245,19 @@ a {
line-height: 36px !important; line-height: 36px !important;
color: #404a62; color: #404a62;
} }
> .el-pager > li { > .el-pager > li {
height: 36px !important; height: 36px !important;
background-color: transparent !important; background-color: transparent !important;
line-height: 36px !important; line-height: 36px !important;
color: #404a62 !important; color: #404a62 !important;
&.active { &.active {
color: #3759be !important; color: #3759be !important;
} }
} }
.el-input__inner { .el-input__inner {
background-color: #f7f7f9; background-color: #f7f7f9;
} }
} }
.el-checkbox { .el-checkbox {
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner { .el-checkbox__input.is-indeterminate .el-checkbox__inner {
...@@ -295,7 +265,6 @@ a { ...@@ -295,7 +265,6 @@ a {
border-color: #0c74a7; border-color: #0c74a7;
} }
} }
.el-select { .el-select {
.el-input { .el-input {
.el-input__icon { .el-input__icon {
...@@ -306,17 +275,14 @@ a { ...@@ -306,17 +275,14 @@ a {
} }
} }
} }
.el-tree { .el-tree {
.el-tree-node__content { .el-tree-node__content {
height: 32px; height: 32px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.el-tree-node__expand-icon { .el-tree-node__expand-icon {
color: #2b4695; color: #2b4695;
&.el-icon-caret-right { &.el-icon-caret-right {
width: 16px; width: 16px;
height: 16px; height: 16px;
...@@ -326,7 +292,6 @@ a { ...@@ -326,7 +292,6 @@ a {
box-sizing: border-box; box-sizing: border-box;
margin-right: 8px; margin-right: 8px;
text-align: center; text-align: center;
&:before { &:before {
content: "\e6d9"; content: "\e6d9";
font-size: 12px; font-size: 12px;
...@@ -334,34 +299,28 @@ a { ...@@ -334,34 +299,28 @@ a {
line-height: 14px; line-height: 14px;
color: #3759be; color: #3759be;
} }
&.expanded { &.expanded {
transform: rotate(0deg); transform: rotate(0deg);
&:before { &:before {
content: "\e6d8"; content: "\e6d8";
} }
} }
&.is-leaf { &.is-leaf {
opacity: 0; opacity: 0;
} }
} }
} }
.el-tree-node__label { .el-tree-node__label {
font-size: 14px; font-size: 14px;
color: #404a62; color: #404a62;
line-height: 32px; line-height: 32px;
} }
} }
&.el-tree--highlight-current { &.el-tree--highlight-current {
.el-tree-node { .el-tree-node {
&.is-current { &.is-current {
> .el-tree-node__content { > .el-tree-node__content {
background-color: #dfe5f6; background-color: #dfe5f6;
.el-tree-node__label { .el-tree-node__label {
color: #3759be; color: #3759be;
} }
...@@ -370,7 +329,6 @@ a { ...@@ -370,7 +329,6 @@ a {
} }
} }
} }
&.float-label { &.float-label {
.el-form-item { .el-form-item {
.el-form-item__label { .el-form-item__label {
...@@ -378,7 +336,6 @@ a { ...@@ -378,7 +336,6 @@ a {
} }
} }
} }
&.width-1340 { &.width-1340 {
.el-input, .el-input,
.el-textarea, .el-textarea,
...@@ -392,35 +349,29 @@ a { ...@@ -392,35 +349,29 @@ a {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
> .el-breadcrumb { > .el-breadcrumb {
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
height: 46px; height: 46px;
padding: 16px 0; padding: 16px 0;
box-sizing: border-box; box-sizing: border-box;
.el-breadcrumb__item { .el-breadcrumb__item {
> span { > span {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
// line-height: 24px; // line-height: 24px;
color: #909bb6; color: #909bb6;
&:hover {
&:hover{
color: #5170cd; color: #5170cd;
cursor: pointer; cursor: pointer;
} }
} }
&:last-child { &:last-child {
> span { > span {
color: #202531; color: #202531;
} }
} }
} }
& + * { & + * {
width: 429px; width: 429px;
flex-grow: 0; flex-grow: 0;
...@@ -429,7 +380,6 @@ a { ...@@ -429,7 +380,6 @@ a {
margin: 7px 0 7px 14px; margin: 7px 0 7px 14px;
} }
} }
&.deep-bg { &.deep-bg {
> .el-breadcrumb { > .el-breadcrumb {
.el-breadcrumb__item { .el-breadcrumb__item {
...@@ -446,10 +396,8 @@ a { ...@@ -446,10 +396,8 @@ a {
.bg-dialog { .bg-dialog {
.el-dialog { .el-dialog {
border-radius: 4px; border-radius: 4px;
.el-dialog__header { .el-dialog__header {
padding: 10px 16px; padding: 10px 16px;
.el-dialog__title { .el-dialog__title {
padding-left: 1em; padding-left: 1em;
position: relative; position: relative;
...@@ -457,7 +405,6 @@ a { ...@@ -457,7 +405,6 @@ a {
font-weight: bolder; font-weight: bolder;
color: #1d1e20; color: #1d1e20;
line-height: 30px; line-height: 30px;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -470,32 +417,25 @@ a { ...@@ -470,32 +417,25 @@ a {
} }
} }
} }
.el-dialog__body { .el-dialog__body {
padding: 24px 16px; padding: 24px 16px;
} }
.el-dialog__footer { .el-dialog__footer {
padding: 8px 16px 16px; padding: 8px 16px 16px;
} }
.dialog-msg { .dialog-msg {
text-align: left; text-align: left;
> p { > p {
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: 1.5;
&:nth-child(1) { &:nth-child(1) {
font-size: 18px; font-size: 18px;
} }
& + p { & + p {
margin-top: 14px; margin-top: 14px;
} }
} }
} }
.dialog-rich-text-content { .dialog-rich-text-content {
min-height: 650px; min-height: 650px;
font-size: 14px; font-size: 14px;
...@@ -509,10 +449,8 @@ a { ...@@ -509,10 +449,8 @@ a {
user-select: none; user-select: none;
height: 100%; height: 100%;
padding-top: 9px; padding-top: 9px;
.bg-nav-title { .bg-nav-title {
padding: 0 0 12px 24px; padding: 0 0 12px 24px;
> h3 { > h3 {
font-size: 18px; font-size: 18px;
font-weight: bolder; font-weight: bolder;
...@@ -520,18 +458,14 @@ a { ...@@ -520,18 +458,14 @@ a {
line-height: 30px; line-height: 30px;
} }
} }
> .bg-nav-list { > .bg-nav-list {
height: calc(100% - 10px); height: calc(100% - 10px);
box-sizing: border-box; box-sizing: border-box;
ul.nav-list { ul.nav-list {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
> li { > li {
position: relative; position: relative;
> .nav-item { > .nav-item {
position: relative; position: relative;
display: block; display: block;
...@@ -542,11 +476,9 @@ a { ...@@ -542,11 +476,9 @@ a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
&:hover:not(.nav-more), &:hover:not(.nav-more),
&.current { &.current {
color: #fff; color: #fff;
&::before { &::before {
content: ""; content: "";
width: 100%; width: 100%;
...@@ -557,7 +489,6 @@ a { ...@@ -557,7 +489,6 @@ a {
background-color: #2a4aa7; background-color: #2a4aa7;
z-index: -1; z-index: -1;
} }
&::after { &::after {
content: ""; content: "";
width: 3px; width: 3px;
...@@ -570,7 +501,6 @@ a { ...@@ -570,7 +501,6 @@ a {
} }
} }
} }
> ul.nav-list { > ul.nav-list {
background-color: #202531; background-color: #202531;
} }
...@@ -583,7 +513,6 @@ a { ...@@ -583,7 +513,6 @@ a {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
> .bg-filtrate-text { > .bg-filtrate-text {
width: 7em; width: 7em;
flex-shrink: 0; flex-shrink: 0;
...@@ -594,7 +523,6 @@ a { ...@@ -594,7 +523,6 @@ a {
margin: 8px 0; margin: 8px 0;
text-align: right; text-align: right;
} }
> .bg-filtrate-list { > .bg-filtrate-list {
padding: 0; padding: 0;
margin: 0 0 0 10px; margin: 0 0 0 10px;
...@@ -602,7 +530,6 @@ a { ...@@ -602,7 +530,6 @@ a {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
> li { > li {
height: 24px; height: 24px;
padding: 0 5px; padding: 0 5px;
...@@ -611,11 +538,9 @@ a { ...@@ -611,11 +538,9 @@ a {
color: #202531; color: #202531;
cursor: pointer; cursor: pointer;
margin: 8px 0; margin: 8px 0;
&:not(:last-child) { &:not(:last-child) {
margin-right: 20px; margin-right: 20px;
} }
&.current { &.current {
border-radius: 3px; border-radius: 3px;
background-color: #2b4695; background-color: #2b4695;
...@@ -623,7 +548,6 @@ a { ...@@ -623,7 +548,6 @@ a {
} }
} }
} }
> .bg-filtrate-title { > .bg-filtrate-title {
width: 7em; width: 7em;
height: 36px; height: 36px;
...@@ -633,7 +557,6 @@ a { ...@@ -633,7 +557,6 @@ a {
margin: 8px 0; margin: 8px 0;
text-align: right; text-align: right;
} }
> .bg-filtrate-content { > .bg-filtrate-content {
flex-shrink: 0; flex-shrink: 0;
margin: 8px 0 8px 10px; margin: 8px 0 8px 10px;
...@@ -645,7 +568,7 @@ a { ...@@ -645,7 +568,7 @@ a {
display: none; display: none;
} }
.el-table__empty-block { .el-table__empty-block {
height: 500px!important; height: 500px !important;
.empty_container { .empty_container {
height: 500px; height: 500px;
padding-top: 247px; padding-top: 247px;
...@@ -662,20 +585,17 @@ a { ...@@ -662,20 +585,17 @@ a {
} }
th, th,
td { td {
padding: 11px 0!important; padding: 11px 0 !important;
> .cell { > .cell {
padding: 0 10px !important; padding: 0 10px !important;
color: #404a62; color: #404a62;
line-height: 16px; line-height: 16px;
} }
} }
&.el-table--border { &.el-table--border {
border-top-color: #b0bee8; border-top-color: #b0bee8;
.el-table__header-wrapper { .el-table__header-wrapper {
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
width: 1px; width: 1px;
...@@ -686,7 +606,6 @@ a { ...@@ -686,7 +606,6 @@ a {
left: 0; left: 0;
z-index: 1; z-index: 1;
} }
&::after { &::after {
content: ""; content: "";
width: 0px; width: 0px;
...@@ -697,21 +616,19 @@ a { ...@@ -697,21 +616,19 @@ a {
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
} }
table { table {
th { th {
border-color: #b0bee8; border-color: #dadee7;
background-color: #dfe5f6; background-color: #f5f6f9;
} }
} }
} }
} }
.stripe-row td { .stripe-row td {
background-color: #fff!important; background-color: #fff !important;
} }
.white-row td { .white-row td {
background-color: #f7f7f9!important; background-color: #f7f7f9 !important;
} }
.el-table--striped .el-table__body tr.el-table__row--striped td { .el-table--striped .el-table__body tr.el-table__row--striped td {
background-color: #f7f7f9; background-color: #f7f7f9;
...@@ -723,24 +640,20 @@ a { ...@@ -723,24 +640,20 @@ a {
th { th {
background-color: #e6e9ef; background-color: #e6e9ef;
} }
tr { tr {
&.has-children { &.has-children {
background-color: #f7f7f9; background-color: #f7f7f9;
} }
} }
} }
.el-form-item { .el-form-item {
margin: 0 !important; margin: 0 !important;
.el-form-item__error { .el-form-item__error {
top: unset; top: unset;
bottom: -12px; bottom: -12px;
transform: scale(0.8); transform: scale(0.8);
transform-origin: 0 0; transform-origin: 0 0;
} }
.el-form-item__content { .el-form-item__content {
margin: 0 !important; margin: 0 !important;
} }
...@@ -749,17 +662,15 @@ a { ...@@ -749,17 +662,15 @@ a {
max-width: 388px; max-width: 388px;
padding: 15px 12px; padding: 15px 12px;
color: #202531; color: #202531;
box-shadow: 0px 4px 12px 0px box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
rgba(18, 30, 63, 0.1);
border: solid 1px #e6e9ef; border: solid 1px #e6e9ef;
font-size: 14px; font-size: 14px;
} }
} }
.bg-table-pro{ .bg-table-pro {
th, th,
td { td {
> .cell { > .cell {
padding: 0 10px !important; padding: 0 10px !important;
overflow: unset; overflow: unset;
...@@ -768,14 +679,9 @@ a { ...@@ -768,14 +679,9 @@ a {
align-items: center; align-items: center;
} }
} }
&.el-table--border { &.el-table--border {
.el-table__header-wrapper { .el-table__header-wrapper {
table { table {
th { th {
border-color: #dadee7; border-color: #dadee7;
background-color: #f5f6f9; background-color: #f5f6f9;
...@@ -786,19 +692,15 @@ a { ...@@ -786,19 +692,15 @@ a {
} }
.bg-table-tree { .bg-table-tree {
.th, .th,
.td { .td {
> .cell {
>.cell {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
> .el-input {
>.el-input {
flex: 1 1 auto; flex: 1 1 auto;
} }
} }
} }
} }
...@@ -808,7 +710,7 @@ a { ...@@ -808,7 +710,7 @@ a {
color: #3759be; color: #3759be;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #738bd2 color: #738bd2;
} }
&:active { &:active {
color: #2c4798; color: #2c4798;
...@@ -821,11 +723,9 @@ a { ...@@ -821,11 +723,9 @@ a {
color: #a9b1c7; color: #a9b1c7;
} }
} }
& + .bg-table-btn { & + .bg-table-btn {
position: relative; position: relative;
margin-left: 33px; margin-left: 33px;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -843,10 +743,8 @@ a { ...@@ -843,10 +743,8 @@ a {
box-shadow: 0px 4px 16px 0px rgba(18, 30, 0.03, 0.08); box-shadow: 0px 4px 16px 0px rgba(18, 30, 0.03, 0.08);
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
> .bg-tabs-nav { > .bg-tabs-nav {
background-color: #fff; background-color: #fff;
> ul { > ul {
height: 64px; height: 64px;
padding: 0; padding: 0;
...@@ -855,7 +753,6 @@ a { ...@@ -855,7 +753,6 @@ a {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
> li { > li {
flex-grow: 0; flex-grow: 0;
width: 320px; width: 320px;
...@@ -870,7 +767,6 @@ a { ...@@ -870,7 +767,6 @@ a {
color: #616f94; color: #616f94;
background: #f7f7f9; background: #f7f7f9;
cursor: pointer; cursor: pointer;
&.current { &.current {
position: relative; position: relative;
border-top-right-radius: 6px; border-top-right-radius: 6px;
...@@ -881,7 +777,6 @@ a { ...@@ -881,7 +777,6 @@ a {
color: #3759be; color: #3759be;
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
// &::before { // &::before {
// content: ""; // content: "";
// position: absolute; // position: absolute;
...@@ -892,11 +787,9 @@ a { ...@@ -892,11 +787,9 @@ a {
// background-color: #e56600; // background-color: #e56600;
// } // }
} }
&:first-child { &:first-child {
border-left: none; border-left: none;
} }
&:last-child { &:last-child {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
...@@ -905,31 +798,25 @@ a { ...@@ -905,31 +798,25 @@ a {
} }
} }
} }
> .bg-tabs-content { > .bg-tabs-content {
padding: 30px 16px; padding: 30px 16px;
} }
&.nice-tabs { &.nice-tabs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
> .bg-tabs-nav { > .bg-tabs-nav {
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
} }
> .bg-tabs-content { > .bg-tabs-content {
padding: 30px 0; padding: 30px 0;
flex-shrink: 1; flex-shrink: 1;
flex-grow: 1; flex-grow: 1;
> .bg-tab { > .bg-tab {
padding: 0; padding: 0;
margin: 0; margin: 0;
.el-input, .el-input,
.el-textarea, .el-textarea,
.bg-tags { .bg-tags {
...@@ -937,7 +824,6 @@ a { ...@@ -937,7 +824,6 @@ a {
} }
} }
} }
> .bg-tabs-action { > .bg-tabs-action {
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
...@@ -951,7 +837,6 @@ a { ...@@ -951,7 +837,6 @@ a {
.bg-tab { .bg-tab {
> .tab-title { > .tab-title {
margin-bottom: 16px; margin-bottom: 16px;
> h3 { > h3 {
position: relative; position: relative;
padding-left: 16px; padding-left: 16px;
...@@ -960,7 +845,6 @@ a { ...@@ -960,7 +845,6 @@ a {
font-weight: bolder; font-weight: bolder;
line-height: 32px; line-height: 32px;
color: #202531; color: #202531;
&::before { &::before {
content: ""; content: "";
width: 4px; width: 4px;
...@@ -972,11 +856,9 @@ a { ...@@ -972,11 +856,9 @@ a {
} }
} }
} }
> .tab-content { > .tab-content {
padding: 0px 40px; padding: 0px 40px;
} }
& + .bg-tab { & + .bg-tab {
margin-top: 30px; margin-top: 30px;
} }
...@@ -990,7 +872,6 @@ a { ...@@ -990,7 +872,6 @@ a {
z-index: 1998; z-index: 1998;
background-color: #eef0f5; background-color: #eef0f5;
padding: 16px 16px 0; padding: 16px 16px 0;
> ul { > ul {
background-color: #fff; background-color: #fff;
height: 64px; height: 64px;
...@@ -1001,7 +882,6 @@ a { ...@@ -1001,7 +882,6 @@ a {
justify-content: space-between; justify-content: space-between;
align-items: stretch; align-items: stretch;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
> li { > li {
flex-grow: 0; flex-grow: 0;
width: 320px; width: 320px;
...@@ -1015,10 +895,8 @@ a { ...@@ -1015,10 +895,8 @@ a {
line-height: 25px; line-height: 25px;
color: #404a62; color: #404a62;
cursor: pointer; cursor: pointer;
&.current { &.current {
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -1029,7 +907,6 @@ a { ...@@ -1029,7 +907,6 @@ a {
background-color: #275a9d; background-color: #275a9d;
} }
} }
&:last-child { &:last-child {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
...@@ -1044,43 +921,35 @@ a { ...@@ -1044,43 +921,35 @@ a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-content: stretch; align-content: stretch;
> .bg-list-header { > .bg-list-header {
margin-bottom: 16px; margin-bottom: 16px;
> .bg { > .bg {
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
border-radius: 6px; border-radius: 6px;
padding: 10px 16px; padding: 10px 16px;
} }
> .header-content { > .header-content {
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
border-radius: 6px; border-radius: 6px;
> .header-action { > .header-action {
padding: 16px; padding: 16px;
border-bottom: solid 1px #e6e9ef; border-bottom: solid 1px #e6e9ef;
} }
> .header-main { > .header-main {
padding: 16px; padding: 16px;
} }
} }
} }
> .bg-list-filter { > .bg-list-filter {
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
border-radius: 6px; border-radius: 6px;
margin-bottom: 16px; margin-bottom: 16px;
} }
> .bg-list-top { > .bg-list-top {
margin-bottom: 16px; margin-bottom: 16px;
> .bg { > .bg {
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
...@@ -1088,7 +957,6 @@ a { ...@@ -1088,7 +957,6 @@ a {
padding: 10px 16px; padding: 10px 16px;
} }
} }
> .bg-list-main { > .bg-list-main {
flex-grow: 1; flex-grow: 1;
height: 205px; height: 205px;
...@@ -1098,13 +966,11 @@ a { ...@@ -1098,13 +966,11 @@ a {
padding: 10px 16px 0; padding: 10px 16px 0;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 16px; margin-bottom: 16px;
> .main-action { > .main-action {
padding-bottom: 16px; padding-bottom: 16px;
margin: 4px 0 10px; margin: 4px 0 10px;
zoom: 1; zoom: 1;
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -1113,7 +979,6 @@ a { ...@@ -1113,7 +979,6 @@ a {
left: -16px; left: -16px;
border-bottom: 1px solid #e6e9ef; border-bottom: 1px solid #e6e9ef;
} }
&::after { &::after {
content: ""; content: "";
display: block; display: block;
...@@ -1121,17 +986,14 @@ a { ...@@ -1121,17 +986,14 @@ a {
clear: both; clear: both;
} }
} }
> .main-table { > .main-table {
height: calc(100% - 36px - 16px * 2); height: calc(100% - 36px - 16px * 2);
} }
> .main-pagination { > .main-pagination {
height: 36px; height: 36px;
margin-top: 16px; margin-top: 16px;
text-align: center; text-align: center;
} }
&.has-action { &.has-action {
> .main-table { > .main-table {
height: calc(100% - 36px - 16px * 2 - 67px); height: calc(100% - 36px - 16px * 2 - 67px);
...@@ -1142,28 +1004,23 @@ a { ...@@ -1142,28 +1004,23 @@ a {
.bg-list-filter { .bg-list-filter {
overflow: hidden; overflow: hidden;
> .fiter-header { > .fiter-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 14px; padding: 14px;
border-bottom: 1px solid #e6e9ef; border-bottom: 1px solid #e6e9ef;
> .el-button { > .el-button {
width: 103px; width: 103px;
+ .el-button { + .el-button {
margin-left: 18px; margin-left: 18px;
} }
} }
> .filter-header-right { > .filter-header-right {
width: 320px; width: 320px;
text-align: right; text-align: right;
} }
} }
> .filter-content { > .filter-content {
// height: 136px; // height: 136px;
padding: 8px 14px; padding: 8px 14px;
...@@ -1171,68 +1028,53 @@ a { ...@@ -1171,68 +1028,53 @@ a {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
> .filter-action { > .filter-action {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.filters-right { .filters-right {
width: 240px; width: 240px;
margin-right: 10px; margin-right: 10px;
} }
> .el-button { > .el-button {
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
} }
&.inline-filters { &.inline-filters {
min-height: unset !important; min-height: unset !important;
height: unset !important; height: unset !important;
> .filter-list { > .filter-list {
margin-left: 1em; margin-left: 1em;
> .bg-btns { > .bg-btns {
margin-right: 30px; margin-right: 30px;
} }
> .bg-filtrate { > .bg-filtrate {
display: inline-flex; display: inline-flex;
margin-right: 30px; margin-right: 30px;
> .bg-filtrate-text, > .bg-filtrate-text,
> .bg-filtrate-title { > .bg-filtrate-title {
width: unset; width: unset;
flex-shrink: 0; flex-shrink: 0;
} }
> .bg-filtrate-content { > .bg-filtrate-content {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
> .el-input { > .el-input {
width: 160px; width: 160px;
} }
> .el-select { > .el-select {
width: 160px; width: 160px;
} }
> .el-date-editor { > .el-date-editor {
width: 260px; width: 260px;
&.el-date-editor--datetimerange { &.el-date-editor--datetimerange {
width: 400px; width: 400px;
} }
} }
> .el-radio-group { > .el-radio-group {
height: 36px; height: 36px;
> label { > label {
line-height: 36px; line-height: 36px;
} }
...@@ -1241,7 +1083,6 @@ a { ...@@ -1241,7 +1083,6 @@ a {
} }
} }
} }
&.show-more { &.show-more {
// min-height: 136px; // min-height: 136px;
height: unset; height: unset;
...@@ -1251,11 +1092,9 @@ a { ...@@ -1251,11 +1092,9 @@ a {
.bg-detail { .bg-detail {
padding: 0 16px; padding: 0 16px;
> .bg-detail-info { > .bg-detail-info {
margin-bottom: 16px; margin-bottom: 16px;
} }
> .bg-detail-tabs { > .bg-detail-tabs {
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.1);
...@@ -1266,7 +1105,6 @@ a { ...@@ -1266,7 +1105,6 @@ a {
.bg-edit { .bg-edit {
padding: 0 16px; padding: 0 16px;
.bg-edit-main { .bg-edit-main {
min-height: calc(100vh - 58px - 44px - 16px); min-height: calc(100vh - 58px - 44px - 16px);
background-color: #ffffff; background-color: #ffffff;
...@@ -1274,13 +1112,11 @@ a { ...@@ -1274,13 +1112,11 @@ a {
border-radius: 6px; border-radius: 6px;
padding: 16px; padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;
> .main-action { > .main-action {
padding-bottom: 17px; padding-bottom: 17px;
margin-bottom: 16px; margin-bottom: 16px;
position: relative; position: relative;
zoom: 1; zoom: 1;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -1289,7 +1125,6 @@ a { ...@@ -1289,7 +1125,6 @@ a {
left: -16px; left: -16px;
border-bottom: 1px solid #e6e9ef; border-bottom: 1px solid #e6e9ef;
} }
&::after { &::after {
content: ""; content: "";
display: block; display: block;
...@@ -1307,26 +1142,22 @@ a { ...@@ -1307,26 +1142,22 @@ a {
border: 1px solid #e3e5ef; border: 1px solid #e3e5ef;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
> .el-input-number { > .el-input-number {
height: 36px; height: 36px;
flex-grow: 1; flex-grow: 1;
line-height: 36px; line-height: 36px;
.el-input__inner { .el-input__inner {
border: none; border: none;
border-radius: 0; border-radius: 0;
background-color: #f7f8f9; background-color: #f7f8f9;
text-align: left; text-align: left;
} }
.el-input-number__decrease, .el-input-number__decrease,
.el-input-number__increase { .el-input-number__increase {
border: none; border: none;
color: #515fe7; color: #515fe7;
} }
} }
> .bg-input-number__text { > .bg-input-number__text {
min-width: 50px; min-width: 50px;
padding: 0 15px; padding: 0 15px;
...@@ -1344,22 +1175,14 @@ a { ...@@ -1344,22 +1175,14 @@ a {
border-radius: 4px; border-radius: 4px;
margin: 10px; margin: 10px;
overflow: hidden; overflow: hidden;
> .card-title { > .card-title {
height: 48px; height: 48px;
padding: 0 15px; padding: 0 15px;
background-image: linear-gradient( background-image: linear-gradient(270deg, #ffffff 0%, #fef6f2 58%, #fcede4 100%), linear-gradient(#fcede4, #fcede4);
270deg,
#ffffff 0%,
#fef6f2 58%,
#fcede4 100%
),
linear-gradient(#fcede4, #fcede4);
background-blend-mode: normal, normal; background-blend-mode: normal, normal;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.title-text { .title-text {
flex-grow: 1; flex-grow: 1;
font-size: 18px; font-size: 18px;
...@@ -1368,7 +1191,6 @@ a { ...@@ -1368,7 +1191,6 @@ a {
color: #202531; color: #202531;
position: relative; position: relative;
padding-left: 15px; padding-left: 15px;
&::before { &::before {
content: ""; content: "";
width: 4px; width: 4px;
...@@ -1379,7 +1201,6 @@ a { ...@@ -1379,7 +1201,6 @@ a {
left: 0; left: 0;
} }
} }
.filter-list { .filter-list {
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
...@@ -1389,7 +1210,6 @@ a { ...@@ -1389,7 +1210,6 @@ a {
padding: 2px; padding: 2px;
border-radius: 5px; border-radius: 5px;
margin-left: 10px; margin-left: 10px;
> li { > li {
min-width: 50px; min-width: 50px;
height: 20px; height: 20px;
...@@ -1401,38 +1221,31 @@ a { ...@@ -1401,38 +1221,31 @@ a {
color: #909bb6; color: #909bb6;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
&.current { &.current {
background-color: #ff6a00; background-color: #ff6a00;
color: #f8f9fd; color: #f8f9fd;
} }
} }
} }
.download-btn { .download-btn {
flex-shrink: 0; flex-shrink: 0;
margin-left: 10px; margin-left: 10px;
cursor: pointer; cursor: pointer;
> img { > img {
display: block; display: block;
} }
> .el-loading-mask { > .el-loading-mask {
cursor: not-allowed; cursor: not-allowed;
.el-loading-spinner { .el-loading-spinner {
margin-top: -10px; margin-top: -10px;
} }
} }
} }
} }
> .card-content { > .card-content {
height: calc(100% - 48px); height: calc(100% - 48px);
padding: 10px 15px; padding: 10px 15px;
box-sizing: border-box; box-sizing: border-box;
> * { > * {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
...@@ -1442,19 +1255,15 @@ a { ...@@ -1442,19 +1255,15 @@ a {
.bg-pinboard-container { .bg-pinboard-container {
padding: 0 14px 10px; padding: 0 14px 10px;
> .bg-pinboard-content { > .bg-pinboard-content {
zoom: 1; zoom: 1;
margin: -10px -10px 0; margin: -10px -10px 0;
> .bg-layout-card { > .bg-layout-card {
float: left; float: left;
&.fr { &.fr {
float: right; float: right;
} }
} }
&:after { &:after {
content: ""; content: "";
display: block; display: block;
...@@ -1474,7 +1283,6 @@ a { ...@@ -1474,7 +1283,6 @@ a {
border-top: 1px solid #e3e5ef; border-top: 1px solid #e3e5ef;
border-left: 1px solid #e3e5ef; border-left: 1px solid #e3e5ef;
box-sizing: border-box; box-sizing: border-box;
> li { > li {
border-right: 1px solid #e3e5ef; border-right: 1px solid #e3e5ef;
border-bottom: 1px solid #e3e5ef; border-bottom: 1px solid #e3e5ef;
...@@ -1483,7 +1291,6 @@ a { ...@@ -1483,7 +1291,6 @@ a {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
> span { > span {
flex: 0 0 auto; flex: 0 0 auto;
padding: 10px 16px; padding: 10px 16px;
...@@ -1491,21 +1298,18 @@ a { ...@@ -1491,21 +1298,18 @@ a {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
color: #404a62; color: #404a62;
&:nth-child(1) { &:nth-child(1) {
flex-shrink: 0; flex-shrink: 0;
width: 240px; width: 240px;
background-color: #f7f8f9; background-color: #f7f8f9;
color: #616f94; color: #616f94;
} }
&:nth-child(2) { &:nth-child(2) {
flex-grow: 1; flex-grow: 1;
width: calc(100% - 240px); width: calc(100% - 240px);
border-left: 1px solid #e3e5ef; border-left: 1px solid #e3e5ef;
color: #404a62; color: #404a62;
position: relative; position: relative;
> .copy-btn { > .copy-btn {
position: absolute; position: absolute;
top: 50%; top: 50%;
...@@ -1526,7 +1330,6 @@ a { ...@@ -1526,7 +1330,6 @@ a {
} }
} }
} }
&:last-child { &:last-child {
flex-grow: 1; flex-grow: 1;
} }
...@@ -1536,7 +1339,6 @@ a { ...@@ -1536,7 +1339,6 @@ a {
.bg-btns { .bg-btns {
display: inline-block; display: inline-block;
> ul { > ul {
padding: 2px; padding: 2px;
background-color: #edeef0; background-color: #edeef0;
...@@ -1544,7 +1346,6 @@ a { ...@@ -1544,7 +1346,6 @@ a {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
> li { > li {
height: 24px; height: 24px;
padding: 0 16px; padding: 0 16px;
...@@ -1552,7 +1353,6 @@ a { ...@@ -1552,7 +1353,6 @@ a {
line-height: 24px; line-height: 24px;
color: #8890a7; color: #8890a7;
cursor: pointer; cursor: pointer;
&.is-active { &.is-active {
background-color: #2b4695; background-color: #2b4695;
border-radius: 4px; border-radius: 4px;
...@@ -1572,7 +1372,6 @@ a { ...@@ -1572,7 +1372,6 @@ a {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
&::before { &::before {
content: ""; content: "";
width: 4px; width: 4px;
...@@ -1582,7 +1381,6 @@ a { ...@@ -1582,7 +1381,6 @@ a {
left: 0; left: 0;
background-color: #275a9d; background-color: #275a9d;
} }
> span { > span {
+ img { + img {
margin-left: 10px; margin-left: 10px;
...@@ -1597,7 +1395,6 @@ a { ...@@ -1597,7 +1395,6 @@ a {
color: #404a62; color: #404a62;
padding-left: 16px; padding-left: 16px;
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
width: 4px; width: 4px;
...@@ -1607,7 +1404,6 @@ a { ...@@ -1607,7 +1404,6 @@ a {
left: 0; left: 0;
background-color: #275a9d; background-color: #275a9d;
} }
> span { > span {
color: #e56600; color: #e56600;
} }
...@@ -1615,7 +1411,6 @@ a { ...@@ -1615,7 +1411,6 @@ a {
.bg-upload { .bg-upload {
text-align: left; text-align: left;
.trigger-content { .trigger-content {
width: 360px; width: 360px;
height: 180px; height: 180px;
...@@ -1627,14 +1422,12 @@ a { ...@@ -1627,14 +1422,12 @@ a {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: stretch; align-items: stretch;
> .trigger-icon { > .trigger-icon {
font-size: 0; font-size: 0;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
margin-bottom: 16px; margin-bottom: 16px;
} }
> .trigger-tip { > .trigger-tip {
font-size: 14px; font-size: 14px;
line-height: 21px; line-height: 21px;
...@@ -1643,7 +1436,6 @@ a { ...@@ -1643,7 +1436,6 @@ a {
margin: 0; margin: 0;
} }
} }
&.is-disabled { &.is-disabled {
.el-upload, .el-upload,
.el-upload__tip { .el-upload__tip {
...@@ -1652,21 +1444,16 @@ a { ...@@ -1652,21 +1444,16 @@ a {
line-height: 18px; line-height: 18px;
} }
} }
&.is-easy { &.is-easy {
> div { > div {
max-width: unset !important; max-width: unset !important;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
> .el-upload-list { > .el-upload-list {
margin: 0 0 0 16px; margin: 0 0 0 16px;
> .el-upload-list__item { > .el-upload-list__item {
margin: 0; margin: 0;
& + .el-upload-list__item { & + .el-upload-list__item {
margin-top: 5px; margin-top: 5px;
} }
...@@ -1680,7 +1467,6 @@ a { ...@@ -1680,7 +1467,6 @@ a {
} }
.bg-upload-image { .bg-upload-image {
.trigger-content { .trigger-content {
> .image-trigger { > .image-trigger {
width: 144px; width: 144px;
...@@ -1688,12 +1474,10 @@ a { ...@@ -1688,12 +1474,10 @@ a {
border: 1px solid #dadee7; border: 1px solid #dadee7;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
> img { > img {
display: block; display: block;
width: 100%; width: 100%;
} }
> .refresh-image { > .refresh-image {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -1707,14 +1491,12 @@ a { ...@@ -1707,14 +1491,12 @@ a {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
} }
&:hover { &:hover {
> .refresh-image { > .refresh-image {
display: flex; display: flex;
} }
} }
} }
> .upload-trigger { > .upload-trigger {
width: 144px; width: 144px;
height: 144px; height: 144px;
...@@ -1726,12 +1508,10 @@ a { ...@@ -1726,12 +1508,10 @@ a {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
> .upload-icon { > .upload-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
width: 100%; width: 100%;
...@@ -1741,7 +1521,6 @@ a { ...@@ -1741,7 +1521,6 @@ a {
top: 19.5px; top: 19.5px;
left: 0; left: 0;
} }
&::after { &::after {
content: ""; content: "";
width: 1px; width: 1px;
...@@ -1760,30 +1539,25 @@ a { ...@@ -1760,30 +1539,25 @@ a {
> .el-form-item { > .el-form-item {
width: 100%; width: 100%;
margin-right: 0; margin-right: 0;
> label { > label {
color: #202531; color: #202531;
} }
> .el-form-item__content { > .el-form-item__content {
.el-input__inner, .el-input__inner,
.el-textarea__inner { .el-textarea__inner {
background-color: #f7f7f9; background-color: #f7f7f9;
} }
} }
&.inline { &.inline {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
> label { > label {
width: 10em; width: 10em;
flex-shrink: 0; flex-shrink: 0;
color: #616f94; color: #616f94;
text-align: right; text-align: right;
} }
> .el-form-item__content { > .el-form-item__content {
width: calc(100% - 7em); width: calc(100% - 7em);
flex-grow: 1; flex-grow: 1;
...@@ -1795,12 +1569,10 @@ a { ...@@ -1795,12 +1569,10 @@ a {
.auto-height { .auto-height {
.el-select-dropdown__item { .el-select-dropdown__item {
height: unset; height: unset;
.bg-option-title { .bg-option-title {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
} }
.bg-option-sub-title { .bg-option-sub-title {
font-size: 12px; font-size: 12px;
color: #9ea2aa; color: #9ea2aa;
...@@ -1827,15 +1599,12 @@ a { ...@@ -1827,15 +1599,12 @@ a {
padding: 5px; padding: 5px;
border: 1px solid #dadee7; border: 1px solid #dadee7;
border-radius: 4px; border-radius: 4px;
> li { > li {
margin: 5px; margin: 5px;
> a { > a {
cursor: pointer; cursor: pointer;
margin-left: 5px; margin-left: 5px;
} }
&.tag-item { &.tag-item {
height: 36px; height: 36px;
padding: 5px 10px; padding: 5px 10px;
...@@ -1853,17 +1622,14 @@ a { ...@@ -1853,17 +1622,14 @@ a {
.bg-scroll { .bg-scroll {
overflow: hidden auto; overflow: hidden auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 16px; width: 16px;
} }
/* &::-webkit-scrollbar-track { /* &::-webkit-scrollbar-track {
border-radius: 8px; border-radius: 8px;
box-shadow: 8px 0 0 #f4f4f4 inset; box-shadow: 8px 0 0 #f4f4f4 inset;
border: 4px solid rgba(0, 0, 0, 0); border: 4px solid rgba(0, 0, 0, 0);
} */ } */
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-radius: 8px; border-radius: 8px;
box-shadow: 8px 0 0 #c1c7d7 inset; box-shadow: 8px 0 0 #c1c7d7 inset;
...@@ -1873,17 +1639,14 @@ a { ...@@ -1873,17 +1639,14 @@ a {
.bg-no-scroll { .bg-no-scroll {
overflow: hidden auto; overflow: hidden auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0px; width: 0px;
} }
/* &::-webkit-scrollbar-track { /* &::-webkit-scrollbar-track {
border-radius: 8px; border-radius: 8px;
box-shadow: 8px 0 0 #f4f4f4 inset; box-shadow: 8px 0 0 #f4f4f4 inset;
border: 4px solid rgba(0, 0, 0, 0); border: 4px solid rgba(0, 0, 0, 0);
} */ } */
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-radius: 0px; border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0); border: 0px solid rgba(0, 0, 0, 0);
...@@ -1902,8 +1665,7 @@ a { ...@@ -1902,8 +1665,7 @@ a {
background-color: #2b4695; background-color: #2b4695;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
transition: all .3s; transition: all 0.3s;
> .label { > .label {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
...@@ -1911,7 +1673,6 @@ a { ...@@ -1911,7 +1673,6 @@ a {
position: absolute; position: absolute;
color: #fff; color: #fff;
} }
> .circle { > .circle {
width: 16px; width: 16px;
height: 16px; height: 16px;
...@@ -1919,9 +1680,8 @@ a { ...@@ -1919,9 +1680,8 @@ a {
position: absolute; position: absolute;
// top: 2px; // top: 2px;
background-color: #fff; background-color: #fff;
transition: all .3s, transition: all 0.3s;
} }
&.disabled { &.disabled {
cursor: not-allowed; cursor: not-allowed;
} }
...@@ -1931,13 +1691,11 @@ a { ...@@ -1931,13 +1691,11 @@ a {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
> .bg-filtrate { > .bg-filtrate {
> * { > * {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
+ .bg-filtrate { + .bg-filtrate {
margin-left: 30px; margin-left: 30px;
} }
...@@ -1946,28 +1704,23 @@ a { ...@@ -1946,28 +1704,23 @@ a {
.bg-rich-text { .bg-rich-text {
text-align: left; text-align: left;
.w-e-toolbar, .w-e-toolbar,
.w-e-text-container { .w-e-text-container {
border: 1px solid #dadee7 !important; border: 1px solid #dadee7 !important;
width: 100%; width: 100%;
z-index: 1!important; z-index: 1 !important;
} }
.w-e-toolbar { .w-e-toolbar {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
z-index: 2!important; z-index: 2 !important;
} }
.w-e-text-container { .w-e-text-container {
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
border-top: none !important; border-top: none !important;
} }
.w-e-text { .w-e-text {
overflow-y: auto; overflow-y: auto;
} }
.onlyread { .onlyread {
height: 300px; height: 300px;
padding: 10px; padding: 10px;
...@@ -1983,7 +1736,6 @@ a { ...@@ -1983,7 +1736,6 @@ a {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
> span { > span {
// width: 4em; // width: 4em;
height: 24px; height: 24px;
...@@ -1995,13 +1747,11 @@ a { ...@@ -1995,13 +1747,11 @@ a {
margin: 8px 0; margin: 8px 0;
// min-width: 115px; // min-width: 115px;
} }
> ul { > ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
> li { > li {
background-color: #fff; background-color: #fff;
// border: solid 1px #fff; // border: solid 1px #fff;
...@@ -2011,7 +1761,6 @@ a { ...@@ -2011,7 +1761,6 @@ a {
color: #202531; color: #202531;
cursor: pointer; cursor: pointer;
margin: 6px 4px; margin: 6px 4px;
&.current { &.current {
background-color: #2b4695; background-color: #2b4695;
// border: solid 1px #718ad6; // border: solid 1px #718ad6;
...@@ -2026,22 +1775,18 @@ a { ...@@ -2026,22 +1775,18 @@ a {
display: inline-flex; display: inline-flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
> a { > a {
height: 20px; height: 20px;
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
color: #8890a7; color: #8890a7;
cursor: pointer; cursor: pointer;
&.current { &.current {
color: #515fe7; color: #515fe7;
} }
& + a { & + a {
position: relative; position: relative;
margin-left: 30px; margin-left: 30px;
&::before { &::before {
content: ""; content: "";
width: 1px; width: 1px;
...@@ -2069,7 +1814,6 @@ a { ...@@ -2069,7 +1814,6 @@ a {
.el-carousel__indicators--horizontal { .el-carousel__indicators--horizontal {
bottom: 40px; bottom: 40px;
} }
.el-carousel__indicator--horizontal { .el-carousel__indicator--horizontal {
padding: 0; padding: 0;
width: 48px; width: 48px;
...@@ -2077,60 +1821,50 @@ a { ...@@ -2077,60 +1821,50 @@ a {
background-color: #ffffff; background-color: #ffffff;
opacity: 0.3; opacity: 0.3;
margin: 0 16px; margin: 0 16px;
> button { > button {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
} }
&.is-active { &.is-active {
opacity: 0.8; opacity: 0.8;
} }
} }
&.hide-indicators { &.hide-indicators {
.el-carousel__indicators { .el-carousel__indicators {
display: none; display: none;
} }
} }
&.hide-bar { &.hide-bar {
.el-carousel__indicators--horizontal { .el-carousel__indicators--horizontal {
bottom: 20px; bottom: 20px;
} }
.el-carousel__indicator--horizontal { .el-carousel__indicator--horizontal {
padding: 0; padding: 0;
width: 24px; width: 24px;
height: 4px; height: 4px;
background-color: #d0d8f1; background-color: #d0d8f1;
margin: 0 8px; margin: 0 8px;
&.is-active { &.is-active {
background-color: #2b4695; background-color: #2b4695;
} }
} }
} }
.el-carousel__indicators--vertical { .el-carousel__indicators--vertical {
right: 20px; right: 20px;
.el-carousel__indicator--vertical { .el-carousel__indicator--vertical {
padding: 0; padding: 0;
height: 24px; height: 24px;
width: 4px; width: 4px;
background-color: #d0d8f1; background-color: #d0d8f1;
margin: 8px 0; margin: 8px 0;
> button { > button {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
} }
&.is-active { &.is-active {
background-color: #2b4695; background-color: #2b4695;
} }
...@@ -2153,13 +1887,11 @@ a { ...@@ -2153,13 +1887,11 @@ a {
line-height: 48px; line-height: 48px;
color: #202531; color: #202531;
text-align: center; text-align: center;
> span { > span {
display: inline-block; display: inline-block;
height: 48px; height: 48px;
padding: 0 64px; padding: 0 64px;
position: relative; position: relative;
&::before, &::before,
&::after { &::after {
content: ""; content: "";
...@@ -2169,16 +1901,13 @@ a { ...@@ -2169,16 +1901,13 @@ a {
height: 1px; height: 1px;
background-color: #b0bee8; background-color: #b0bee8;
} }
&::before { &::before {
left: 0; left: 0;
} }
&::after { &::after {
right: 0; right: 0;
} }
} }
&.light-text { &.light-text {
color: #fff; color: #fff;
} }
...@@ -2224,11 +1953,9 @@ a { ...@@ -2224,11 +1953,9 @@ a {
.bg-card { .bg-card {
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
rgba(0, 7, 101, 0.15);
border-radius: 6px; border-radius: 6px;
margin-bottom: 16px; margin-bottom: 16px;
.card-title { .card-title {
padding: 8px 16px; padding: 8px 16px;
border-bottom: 1px solid #ebedf2; border-bottom: 1px solid #ebedf2;
...@@ -2236,7 +1963,6 @@ a { ...@@ -2236,7 +1963,6 @@ a {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.title-icon { .title-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
...@@ -2246,20 +1972,17 @@ a { ...@@ -2246,20 +1972,17 @@ a {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-right: 12px; margin-right: 12px;
.bg-icon { .bg-icon {
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
} }
} }
.title-text {
.title-text{
font-size: 18px; font-size: 18px;
line-height: 36px; line-height: 36px;
color: #202531; color: #202531;
} }
} }
.card-content { .card-content {
padding: 24px; padding: 24px;
} }
...@@ -2279,7 +2002,6 @@ a { ...@@ -2279,7 +2002,6 @@ a {
width: 398px; width: 398px;
justify-content: end; justify-content: end;
display: flex; display: flex;
.el-input { .el-input {
width: 280px; width: 280px;
height: 36px; height: 36px;
...@@ -2307,7 +2029,7 @@ a { ...@@ -2307,7 +2029,7 @@ a {
padding: 10px 15px; padding: 10px 15px;
line-height: 1; line-height: 1;
&:active, &:active,
&:hover{ &:hover {
background-color: #fff; background-color: #fff;
color: #3759be; color: #3759be;
} }
...@@ -2333,6 +2055,7 @@ a { ...@@ -2333,6 +2055,7 @@ a {
padding: 24px 16px 8px; padding: 24px 16px 8px;
} }
} }
// 表格操作按钮组 // 表格操作按钮组
.bg-table-btns { .bg-table-btns {
position: relative; position: relative;
...@@ -2351,7 +2074,6 @@ a { ...@@ -2351,7 +2074,6 @@ a {
border-radius: 4px; border-radius: 4px;
border: solid 1px #e6e9ef; border: solid 1px #e6e9ef;
width: 88px; width: 88px;
.bg-table-btn { .bg-table-btn {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -2367,7 +2089,6 @@ a { ...@@ -2367,7 +2089,6 @@ a {
background-color: #f2f3f7; background-color: #f2f3f7;
color: #202531; color: #202531;
} }
&.disabled { &.disabled {
color: #a9b1c7; color: #a9b1c7;
} }
...@@ -2375,7 +2096,6 @@ a { ...@@ -2375,7 +2096,6 @@ a {
display: none; display: none;
} }
} }
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -2393,11 +2113,11 @@ a { ...@@ -2393,11 +2113,11 @@ a {
width: 100%; width: 100%;
} }
} }
.bg-permission { .bg-permission {
border-top: solid 1px #dadee7; border-top: solid 1px #dadee7;
border-left: solid 1px #dadee7; border-left: solid 1px #dadee7;
width: 100%; width: 100%;
.el-checkbox { .el-checkbox {
width: 100%; width: 100%;
.el-checkbox__label { .el-checkbox__label {
...@@ -2412,8 +2132,7 @@ a { ...@@ -2412,8 +2132,7 @@ a {
color: #202531; color: #202531;
} }
} }
> .permission-header {
>.permission-header {
padding: 0 16px; padding: 0 16px;
height: 48px; height: 48px;
line-height: 48px; line-height: 48px;
...@@ -2421,21 +2140,18 @@ a { ...@@ -2421,21 +2140,18 @@ a {
border-bottom: solid 1px #dadee7; border-bottom: solid 1px #dadee7;
border-right: solid 1px #dadee7; border-right: solid 1px #dadee7;
} }
> .permission-null {
>.permission-null {
padding: 8px 16px; padding: 8px 16px;
border-bottom: solid 1px #dadee7; border-bottom: solid 1px #dadee7;
border-right: solid 1px #dadee7; border-right: solid 1px #dadee7;
> p {
>p {
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: #333; color: #333;
text-align: center; text-align: center;
} }
} }
> .bg-permission-option--list {
>.bg-permission-option--list {
width: 100%; width: 100%;
} }
} }
...@@ -2444,8 +2160,7 @@ a { ...@@ -2444,8 +2160,7 @@ a {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
> .bg-permission-option--self {
>.bg-permission-option--self {
flex-shrink: 0; flex-shrink: 0;
padding: 8px 16px; padding: 8px 16px;
border-right: solid 1px #dadee7; border-right: solid 1px #dadee7;
...@@ -2454,15 +2169,13 @@ a { ...@@ -2454,15 +2169,13 @@ a {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
> .bg-permission-option--list {
>.bg-permission-option--list {
flex-shrink: 0; flex-shrink: 0;
} }
} }
.bg-permission-option--self { .bg-permission-option--self {
width: 128px; width: 128px;
&.full-option { &.full-option {
width: 100%; width: 100%;
} }
...@@ -2470,7 +2183,6 @@ a { ...@@ -2470,7 +2183,6 @@ a {
.bg-permission-option--list { .bg-permission-option--list {
width: calc(100% - 128px); width: calc(100% - 128px);
&.flex-wrap { &.flex-wrap {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -2478,9 +2190,8 @@ a { ...@@ -2478,9 +2190,8 @@ a {
align-items: stretch; align-items: stretch;
border-right: solid 1px #dadee7; border-right: solid 1px #dadee7;
border-bottom: solid 1px #dadee7; border-bottom: solid 1px #dadee7;
> .bg-permission-option {
>.bg-permission-option { > .bg-permission-option--self {
>.bg-permission-option--self {
width: 128px; width: 128px;
border-right: none; border-right: none;
border-bottom: none; border-bottom: none;
...@@ -2488,6 +2199,7 @@ a { ...@@ -2488,6 +2199,7 @@ a {
} }
} }
} }
.bg-upload-image-dialog { .bg-upload-image-dialog {
width: 650px; width: 650px;
} }
src/components/gap-title.vue
View file @ 3fbbf1d9
<template> <template>
<div class="gap-title"> <div
<span>{{title}}</span> class="gap-title"
:class="{
'has-line': hasLine,
}">
<span>{{ title }}</span>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
title:{ title: {
type:String, type: String,
default:"" default: "",
}
}, },
components: { hasLine: {
type: Boolean,
}, default: false,
data() {
return {
};
}, },
watch: {
},
computed: {
}, },
created() { components: {},
data() {
}, return {};
mounted() {
},
methods: {
}, },
watch: {},
computed: {},
created() {},
mounted() {},
methods: {},
}; };
</script> </script>
<style scoped> <style scoped>
.gap-title{ .gap-title {
height: 18px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #202531; color: #202531;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.gap-title::before{ .gap-title::before {
content:''; content: "";
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
width: 4px; width: 4px;
...@@ -55,4 +50,11 @@ export default { ...@@ -55,4 +50,11 @@ export default {
background-color: #2b4695; background-color: #2b4695;
border-radius: 2px; border-radius: 2px;
} }
.gap-title.has-line::after {
content: "";
display: inline-block;
flex: 1;
border-top: 1px dashed #dadee7;
margin-left: 8px;
}
</style> </style>
src/components/go-back/index.vue 0 → 100644
View file @ 3fbbf1d9
<template>
<el-button size="default" @click="goBack">返回</el-button>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
href: {
type: Object,
default: null,
},
});
const goBack = () => {
if (props.href) {
router.push(props.href);
} else {
router.go(-1);
}
};
</script>
<style lang="scss" scoped></style>
src/components/warn-detail/info.vue
View file @ 3fbbf1d9
...@@ -6,22 +6,29 @@ ...@@ -6,22 +6,29 @@
{{ item.label }} {{ item.label }}
</div> </div>
<div class="value"> <div class="value">
<div class="value-body">
<span v-if="item.prop == 'status'"> <span v-if="item.prop == 'status'">
<slot name="status" :item="item" :valueData="valueData" v-if="slots.status" />
<span class="status-body" v-else>
<span class="status" :class="`status-${valueData.status}`"></span> <span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span> <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span> </span>
</span>
<span v-else> <span v-else>
{{ valueData[item.prop] }} <slot name="value" :item="item" :valueData="valueData" v-if="slots.value" />
<span v-else>{{ valueData[item.prop] }}</span>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { computed } from "vue"; import { useSlots, computed } from "vue";
import { STATUS_OBJ } from "./env.js" import { STATUS_OBJ } from "./env.js";
const slots = useSlots();
const props = defineProps({ const props = defineProps({
labelData: { labelData: {
...@@ -32,6 +39,13 @@ const props = defineProps({ ...@@ -32,6 +39,13 @@ const props = defineProps({
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
status_obj: {
type: Object,
default: null,
},
});
const status_obj = computed(() => {
return props.status_obj || STATUS_OBJ;
}); });
</script> </script>
...@@ -58,14 +72,27 @@ const props = defineProps({ ...@@ -58,14 +72,27 @@ const props = defineProps({
background-color: #f7f7f9; background-color: #f7f7f9;
border-right: 1px solid #dadee7; border-right: 1px solid #dadee7;
padding: 0 16px; padding: 0 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
} }
.value { .value {
height: 100%; height: 100%;
flex: 1; flex: 1;
border-right: 1px solid #dadee7; border-right: 1px solid #dadee7;
position: relative;
.value-body {
padding: 0 16px; padding: 0 16px;
display: flex; position: absolute;
align-items: center; top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
.status { .status {
display: inline-block; display: inline-block;
width: 6px; width: 6px;
...@@ -82,6 +109,11 @@ const props = defineProps({ ...@@ -82,6 +109,11 @@ const props = defineProps({
} }
} }
} }
.status-body {
display: flex;
align-items: center;
}
}
} }
} }
} }
......
src/page/main/ticket/business-ticket-list/detail/index.vue
View file @ 3fbbf1d9
...@@ -3,12 +3,154 @@ ...@@ -3,12 +3,154 @@
<div class="breadcrumb"> <div class="breadcrumb">
<bg-breadcrumb /> <bg-breadcrumb />
</div> </div>
<div class="content"></div> <div class="content bg-scroll">
<div class="go-back">
<goBack />
</div>
<gap-title :hasLine="true" title="基本信息"></gap-title>
<div class="info">
<Info :labelData="labelData" :valueData="info">
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span>
</template>
</Info>
</div>
<gap-title :hasLine="true" title="推送方式"></gap-title>
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template>
</Info>
<div class="notification-lists">
<bg-table border ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true"> </bg-table>
</div>
</div>
<gap-title :hasLine="true" title="工单反馈"></gap-title>
<div class="info">
<feedback-detail :detail-info="detailInfo"></feedback-detail>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import gapTitle from "@/components/gap-title.vue";
import feedbackDetail from "@/page/main/ticket/modules/feedback-detail/index.vue";
import goBack from "@/components/go-back/index.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
};
const labelData = [
[
{
label: "工单名称",
prop: "ticket_name",
},
{
label: "状态",
prop: "status",
},
],
[
{
label: "工单等级",
prop: "ticket_level",
},
{
label: "创建人",
prop: "create_by",
},
],
[
{
label: "工单描述",
prop: "description",
},
],
[
{
label: "创建时间",
prop: "create_time",
},
{
label: "完成时间",
prop: "finish_time",
},
],
];
const info = {
ticket_name: "7月常态化运维巡检任务",
status: "finish",
ticket_level: "紧急任务",
create_by: "管理员",
description: "请进行所有系统常态化月度巡检任务（每月定期常态运维巡检），将巡检结果上报！",
create_time: "2020-01-01 00:00:00",
finish_time: "2020-01-01 00:00:00",
notification_method: ["1", "2"],
};
const notificationMethod = [
[
{
label: "通知方式",
prop: "notification_method",
},
],
];
const headers = [
{
prop: "user_id",
label: "账号",
},
{
prop: "user_name",
label: "姓名",
},
{
prop: "phone",
label: "联系方式",
},
];
const rows = ref([
{
user_id: "11",
user_name: "1111",
phone: "13211111111",
},
{
user_id: "22",
user_name: "2222",
phone: "13222222222",
},
{
user_id: "33",
user_name: "3333",
phone: "13233333333",
},
]);
const detailInfo = ref([
{
status: "close",
target: "张三",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
{
status: "finish",
target: "李四",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; ...@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px; border-radius: 6px;
padding: 24px;
.go-back {
margin-bottom: 24px;
}
:deep(.gap-title) {
margin-bottom: 16px;
}
.info,
.feedback-info {
max-width: 1072px;
width: 100%;
padding: 0 8px 0;
&:not(:last-child) {
padding-bottom: 24px;
}
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
finish: #48ad97,
close: #9e9e9e,
info: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
.status-body {
display: flex;
align-items: center;
}
.notification-lists {
margin-top: 16px;
}
}
} }
} }
</style> </style>
src/page/main/ticket/modules/detail.vue deleted 100644 → 0
View file @ 6c696f85
<template>
<div>detail</div>
</template>
<script setup></script>
<style lang="scss" scoped></style>
src/page/main/ticket/modules/feedback-detail/detail.vue 0 → 100644
View file @ 3fbbf1d9
<template>
<div class="detail-info">
<div class="status" :class="`feedback-detail-status-${info.status}`">
{{ STATUS_OBJ[info.status] }}
</div>
<div class="info-body">
<div v-for="label in infoLabel" :key="label.prop">
<span class="info-label">{{ label.label }}：</span>
<span class="info-value">{{ info[label.prop] }}</span>
</div>
</div>
</div>
</template>
<script setup>
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
};
const props = defineProps({
info: {
type: Object,
default: () => ({}),
},
});
const infoLabel = [
{
label: "下发对象",
prop: "target",
},
{
label: "工单反馈",
prop: "feedback",
},
{
label: "操作时间",
prop: "time",
},
];
</script>
<style lang="scss" scoped>
.detail-info {
background-color: #ffffff;
border-radius: 4px;
border: solid 1px #e3e4ef;
width: 100%;
height: auto;
font-size: 14px;
.status {
width: 100%;
height: 38px;
line-height: 37px;
background-color: #f9fafc;
padding: 0 16px;
font-weight: bold;
border-bottom: 1px solid #e3e4ef;
&.feedback-detail-status {
$statusObj: (
finish: #48ad97,
close: #242c43,
info: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
color: $color;
}
}
}
}
.info-body {
padding: 16px 24px;
& > div {
line-height: 30px;
display: flex;
align-items: flex-start;
.info-label {
width: auto;
color: #7784a6;
}
.info-value {
flex: 1;
color: #242c43;
}
}
}
}
</style>
src/page/main/ticket/modules/feedback-detail/index.vue 0 → 100644
View file @ 3fbbf1d9
<template>
<div class="feedback-detail">
<div class="detail-box" v-for="(detail, index) in detailInfo" :key="`feedback-detail-${index}`">
<Detail :info="detail" />
</div>
</div>
</template>
<script setup>
import Detail from "./detail.vue";
const props = defineProps({
detailInfo: {
type: Array,
default: () => [],
},
});
</script>
<style lang="scss" scoped>
.detail-box {
&:not(:first-child) {
margin-top: 16px;
}
}
</style>
src/page/main/ticket/my-business-ticket/detail/index.vue
View file @ 3fbbf1d9
...@@ -3,12 +3,154 @@ ...@@ -3,12 +3,154 @@
<div class="breadcrumb"> <div class="breadcrumb">
<bg-breadcrumb /> <bg-breadcrumb />
</div> </div>
<div class="content"></div> <div class="content bg-scroll">
<div class="go-back">
<goBack />
</div>
<gap-title :hasLine="true" title="基本信息"></gap-title>
<div class="info">
<Info :labelData="labelData" :valueData="info">
<template #status="{ item, valueData }">
<span class="status-body">
<span class="status" :class="`status-${valueData.status}`"></span>
<span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
</span>
</template>
</Info>
</div>
<gap-title :hasLine="true" title="推送方式"></gap-title>
<div class="info">
<Info :labelData="notificationMethod" :valueData="info">
<template #value="{ item, valueData }">
<span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
</template>
</Info>
<div class="notification-lists">
<bg-table border ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true"> </bg-table>
</div>
</div>
<gap-title :hasLine="true" title="工单反馈"></gap-title>
<div class="info">
<feedback-detail :detail-info="detailInfo"></feedback-detail>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import gapTitle from "@/components/gap-title.vue";
import feedbackDetail from "@/page/main/ticket/modules/feedback-detail/index.vue";
import goBack from "@/components/go-back/index.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
const STATUS_OBJ = {
finish: "已完成",
close: "已关闭",
info: "待处置",
};
const labelData = [
[
{
label: "工单名称",
prop: "ticket_name",
},
{
label: "状态",
prop: "status",
},
],
[
{
label: "工单等级",
prop: "ticket_level",
},
{
label: "创建人",
prop: "create_by",
},
],
[
{
label: "工单描述",
prop: "description",
},
],
[
{
label: "创建时间",
prop: "create_time",
},
{
label: "完成时间",
prop: "finish_time",
},
],
];
const info = {
ticket_name: "7月常态化运维巡检任务",
status: "finish",
ticket_level: "紧急任务",
create_by: "管理员",
description: "请进行所有系统常态化月度巡检任务（每月定期常态运维巡检），将巡检结果上报！",
create_time: "2020-01-01 00:00:00",
finish_time: "2020-01-01 00:00:00",
notification_method: ["1", "2"],
};
const notificationMethod = [
[
{
label: "通知方式",
prop: "notification_method",
},
],
];
const headers = [
{
prop: "user_id",
label: "账号",
},
{
prop: "user_name",
label: "姓名",
},
{
prop: "phone",
label: "联系方式",
},
];
const rows = ref([
{
user_id: "11",
user_name: "1111",
phone: "13211111111",
},
{
user_id: "22",
user_name: "2222",
phone: "13222222222",
},
{
user_id: "33",
user_name: "3333",
phone: "13233333333",
},
]);
const detailInfo = ref([
{
status: "close",
target: "张三",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
{
status: "finish",
target: "李四",
feedback: "任务临时取消",
time: "2022-10-22 09:58:30",
},
]);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue"; ...@@ -26,6 +168,46 @@ import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15); box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
border-radius: 6px; border-radius: 6px;
padding: 24px;
.go-back {
margin-bottom: 24px;
}
:deep(.gap-title) {
margin-bottom: 16px;
}
.info,
.feedback-info {
max-width: 1072px;
width: 100%;
padding: 0 8px 0;
&:not(:last-child) {
padding-bottom: 24px;
}
.status {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
$statusObj: (
finish: #48ad97,
close: #9e9e9e,
info: #3759be,
);
@each $status, $color in $statusObj {
&-#{$status} {
background-color: $color;
}
}
}
.status-body {
display: flex;
align-items: center;
}
.notification-lists {
margin-top: 16px;
}
}
} }
} }
</style> </style>
src/page/main/ticket/my-business-ticket/index.vue
View file @ 3fbbf1d9
...@@ -4,10 +4,7 @@ ...@@ -4,10 +4,7 @@
<bg-breadcrumb /> <bg-breadcrumb />
</div> </div>
<div class="content"> <div class="content">
<bg-filter-group <bg-filter-group @search="changeSearch" v-model="filter.key_word" placeholder="请输入角色名称">
@search="changeSearch"
v-model="filter.key_word"
placeholder="请输入角色名称">
<template v-slot:filter_group> <template v-slot:filter_group>
<div class="left-filter filter_list"> <div class="left-filter filter_list">
<div class="filter_item"> <div class="filter_item">
...@@ -63,15 +60,9 @@ ...@@ -63,15 +60,9 @@
</bg-filter-group> </bg-filter-group>
<div class="table_container"> <div class="table_container">
<div class="table"> <div class="table">
<bg-table <bg-table ref="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true" :stripe="true">
ref="listtable" <template #ticket_name="{ row }">
:headers="headers" <div class="href" @click="goTo(row)">{{ row.ticket_name || "-" }}</div>
:rows="rows"
height="100%"
:isIndex="true"
:stripe="true">
<template #work_order_name="{ row }">
<div class="href" @click="goTo(row)">{{ row.work_order_name || "-" }}</div>
</template> </template>
<template #operation="{ row }"> <template #operation="{ row }">
<span class="primary-edit" @click="operation(row)"> 处置反馈 </span> <span class="primary-edit" @click="operation(row)"> 处置反馈 </span>
...@@ -156,7 +147,7 @@ const statusOptions = ref([ ...@@ -156,7 +147,7 @@ const statusOptions = ref([
let headers = reactive([ let headers = reactive([
{ {
label: "工单名称", label: "工单名称",
prop: "work_order_name", prop: "ticket_name",
align: "left", align: "left",
}, },
{ {
...@@ -166,7 +157,7 @@ let headers = reactive([ ...@@ -166,7 +157,7 @@ let headers = reactive([
}, },
{ {
label: "工单状态", label: "工单状态",
prop: "work_order_status", prop: "ticket_status",
align: "left", align: "left",
}, },
{ {
...@@ -197,9 +188,9 @@ let headers = reactive([ ...@@ -197,9 +188,9 @@ let headers = reactive([
}, },
]); ]);
let rows = ref([ let rows = ref([
{ work_order_name: 11, id: 111 }, { ticket_name: 11, id: 111 },
{ work_order_name: 22, id: 222 }, { ticket_name: 22, id: 222 },
{ work_order_name: 33, id: 333 }, { ticket_name: 33, id: 333 },
]); ]);
const changeSize = (size) => { const changeSize = (size) => {
filter.limit = size; filter.limit = size;
......
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