feat(): 开发客诉工单页面

src/pages/OperationCenter/CustomerServieMgm/ComplainManage/index.scss

@@ -392,70 +392,322 @@ $color-primary: var(--color-primary);
   }
 }
 
-.check-detail {
-  .carTitle {
-    .font {
+.complain-manage-detail {
+
+  .form-con {
+    width: 100%;
+  }
+
+  .form-date {
+    width: 100%;
+  }
+
+  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    background-color: #50586c !important;
+  }
+
+  .ant-select-arrow .anticon {
+    background-color: #50586c !important;
+  }
+
+  .ant-input:placeholder-shown {
+    background-color: #50586c !important;
+  }
+
+  .custom-collapse {
+    margin-top: 30px;
+    background-color: transparent;
+    border: unset;
+
+    .ant-collapse-item {
+      border-bottom: unset;
+    }
+
+    .ant-collapse-header {
+      background-color: hsla(0, 0%, 100%, .04);
+    }
+
+    .ant-collapse-header-text {
       font-weight: 700;
       font-size: 16px;
       border-left: 6px solid #409eff;
       padding-left: 8px;
-      height: 20px;
-      line-height: 20px;
-      margin-bottom: 20px;
+      display: flex;
+      justify-content: space-between;
+
+      .green {
+        color: #67c23a;
       }
     }
 
-  .order-msg {
-    margin-left: 15%;
+    .ant-collapse-content {
+      background-color: transparent;
+      border-top: unset;
+    }
 
-    .order {
-      margin-top: 20px;
+    .row-line {
+      margin-bottom: 15px;
 
-      .message {
-        color: white;
-        width: 30%;
-        display: inline-block;
-        text-align: left;
+      .ant-btn {
+        min-width: 90px;
+        height: 34px;
+
+        &:not(&:first-child) {
+          margin-left: 20px;
+        }
+      }
     }
 
-      span:nth-of-type(2) {
-        display: inline-block;
-        width: 65%;
   }
 
-      .status-color {
-        color: red;
+  .pl-group {
+    display: flex;
+    flex-wrap: wrap;
+    border-top: 1px solid #434343;
+    border-left: 1px solid #434343;
+
+    &.pl-form .pl-item{
+      margin-bottom: 10px;
     }
 
-      .status-bg {
-        color: rgb(56, 174, 56);
+    .pl-item {
+      width: 33.33%;
+      display: flex;
+      border-right: 1px solid #434343;
+      border-bottom: 1px solid #434343;
+
+      &.pl-item-lg {
+        width: 100%;
       }
+
+      >span {
+        text-align: center;
+        line-height: 2.4;
+
+        &.required::before {
+          margin-right: 4px;
+          color: #f56c6c;
+          font-family: SimSun, sans-serif;
+          content: "*";
+        }
+
+        &:first-child {
+          width: 125px;
+          background-color: #3e4557;
+        }
+
+        &:last-child {
+          flex: 1;
         }
       }
 
-  .sale-msg {
-    margin-left: 15%;
+      >div:last-child {
+        flex: 1;
+      }
+    }
+  }
 
-    .order {
+  .pic-wrapper {
     margin-top: 20px;
 
-      .message {
-        color: white;
-        width: 30%;
-        display: inline-block;
-        text-align: left;
+    .pic-txt {
+      font-size: 18px;
+      margin-bottom: 10px;
+      opacity: 0.85;
+    }
+
+    .pic-box {
+      width: 100%;
+      height: 450px;
+
+      .ant-image {
+        width: 100%;
+        height: 100%;
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+  }
+
+  .ant-table {
+
+    .ant-table-body {
+      // overflow-y: auto !important;
+
+      &::-webkit-scrollbar-track-piece,
+      &::-webkit-scrollbar-corner,
+      &::-webkit-scrollbar-track {
+        background: #9da2ab;
+      }
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
       }
 
-      span:nth-of-type(2) {
-        display: inline-block;
-        width: 65%;
+      &::-webkit-scrollbar-thumb {
+        background: #3B97FF;
+        border-radius: 2px;
+      }
+    }
+
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table,
+    .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table {
+      border-top: none !important;
+      border-left: none !important;
     }
+
+    .ant-table-tbody .ant-table-row .ant-table-cell {
+      background-color: #3e4557 !important;
+      color: #ffffff !important;
+      text-align: center;
+      font-size: 14px;
+      font-family:
+        Microsoft YaHei,
+        Microsoft YaHei-Regular;
+      font-weight: 400;
+      border-right: none !important;
+      border-left: none !important;
+      border-bottom-color: #626b7e !important;
     }
   }
 
   .submitBtn {
     text-align: center;
-    margin-top: 30px;
+    margin: 15px 0 5px;
     cursor: pointer;
+
+    .ant-btn {
+      min-width: 90px;
+      height: 34px;
+
+      &:not(&:first-child) {
+        margin-left: 20px;
+      }
+    }
+  }
+
+  .calculator {
+    .row-search {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+
+      .form-box {
+        display: flex;
+        align-items: center;
+        margin-right: 30px;
+        margin-bottom: 20px;
+
+        >label {
+          text-align: right;
+          padding-right: 6px;
+        }
+
+        .form-con {
+          flex: 1;
+          min-width: 190px;
+        }
+      }
+
+      .ant-btn {
+        min-width: 90px;
+        height: 34px;
+
+        &:not(&:first-child) {
+          margin-left: 20px;
+        }
+      }
+
+    }
+
+    .row-title {
+      font-weight: bold;
+      font-size: 18px;
+      border-left: 6px solid #409eff;
+      padding-left: 8px;
+      margin-bottom: 20px;
+    }
+
+    .total-amount {
+      width: 100%;
+      padding: 20px;
+      text-align: center;
+      font-size: 20px;
+
+      >span {
+        color: #3aa9ff;
+        font-weight: bold;
+        margin-right: 10px;
+      }
+    }
+
+    .rule-text {
+      padding-left: 20px;
+      margin-bottom: 15px;
+    }
+
+    .rule-list {
+      padding-left: 40px;
+
+      >div {
+        margin-bottom: 10px;
+        opacity: 0.85;
+
+        &:not(&:first-child) {
+          padding-left: 20px;
+        }
+
+        >div {
+          margin-bottom: 10px;
+        }
+
+      }
+    }
+  }
+
+  .view-sort {
+    .form-box {
+      width: 400px;
+      display: flex;
+      align-items: center;
+      margin-right: 30px;
+      margin-bottom: 30px;
+
+      >label {
+        text-align: right;
+        padding-right: 10px;
+        min-width: 120px;
+
+        &.required::before {
+          margin-right: 4px;
+          color: #f56c6c;
+          font-family: SimSun, sans-serif;
+          content: "*";
+        }
+      }
+
+      .form-con {
+        flex: 1;
+        min-width: 190px;
+      }
+    }
+  }
+
+  .ant-tabs-nav {
+    margin-bottom: 20px !important;
+
+    .ant-tabs-nav-list {
+      width: 200px !important;
+    }
+  }
+
+
+  .ant-pagination-mini {
+    text-align: right !important;
   }
 }