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