@bit-sun/business-component 4.0.11 → 4.0.12-alpha.2

package/src/components/Functional/SearchSelect/index.less

@@ -1,115 +1,278 @@
+@border-color: #d9d9d9;
+@primary-color: #005cff;
+
 .search_select {
   &_show {
     display: flex;
+
+    // 下拉框清除图标位置调整
+    .ant-select-clear {
+      right: 33px;
+    }
   }
 
   &_expand_button {
     position: relative;
+    right: -11px;
     width: 30px;
-    color: #ffffff;
+    border-left: 1px solid @border-color;
+    height: 24px;
     cursor: pointer;
+    font-size: 14px;
+    font-weight: bolder;
+    background: #fafafa;
 
     span {
       position: absolute;
-      height: 20px;
-      line-height: 14px;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
     }
   }
+  &_expand_button:hover {
+    background-color: @primary-color;
+    color: #fff;
+  }
+  &_expand_button_disabled:hover {
+    background-color: transparent;
+    color: rgba(0, 0, 0, 0.25);
+    cursor: not-allowed;
+  }
 
-  &_wrapper {
-    position: relative;
-    display: flex;
-    min-height: 60vh;
-    max-height: 60vh;
-    overflow: hidden;
-    font-size: 14px;
+  &_dropdown_table {
+    // padding: 4px 10px 6px;
 
-    &_click_flag {
-      position: absolute;
-      z-index: 10;
-      &_arrow {
-        transform: rotate(0deg);
-        transition: transform 0.5s;
+    // 下拉table 复选框为单选时候隐藏
+    .ant-table-cell .ant-table-selection-column .ant-radio,table tr td.ant-table-selection-column .ant-radio-wrapper {
+      display: none;
+    }
+
+    // 下拉table 表头表体样式
+    .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
+      font-family: MiSans-Regular;
+      font-weight: 400;
+      font-size: 12px;
+
+      thead > tr > th {
+        color: #7F7F7F;
       }
-      &_arrow_1 {
-        transform: rotate(-180deg);
-        transition: transform 0.5s;
+
+      .ant-table-thead .ant-table-selection .ant-checkbox-wrapper {
+        justify-content: center;
       }
-    }
 
-    &_left {
-      width: 28%;
-      overflow-y: hidden;
-      //background-color: yellow;
-      transition: all 0.3s;
-      margin-left: 20px;
+      tbody > tr > td  {
+        color: #333333;
+      }
     }
+  }
 
-    &_left1 {
-      width: 0;
-      height: 0;
-      transition: all 0.3s;
-      display: none;
+  // 下拉table隐藏单选列
+  &_dropdown_table1 {
+    .ant-table.ant-table-bordered > .ant-table-container {
+      .ant-table-body > table > tbody > tr > td.ant-table-selection-column,
+      .ant-table-header > table > thead > tr > th.ant-table-selection-column {
+        display: none;
+      }
     }
+  }
 
-    &_right {
-      width: 70%;
-      margin-left: 1%;
-      //background-color: pink;
+  &_modal_wrapper {
+    .ant-modal {
+      top: 60px;
     }
+    .ant-modal-header {
+      padding: 6px 0px 6px 16px;
 
-    &_right1 {
-      width: 100%;
-      margin-left: 20px;
-      //background-color: green;
+      .ant-modal-title {
+        height: 20px;
+        color: #000000;
+        line-height: 20px;
+      }
     }
-
-    &_right, &_right1 {
-      overflow-x: auto;
+    .ant-modal-close-x {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
     }
-
-    .select_list_columns {
-      width: 100%;
-      height: calc(60vh - 60px);
-      overflow-y: auto;
-      border: 1px solid #d8d8d8;
-      &_tips {
-        background: #eee;
-        padding: 6px 20px;
-        margin-bottom: 10px;
+    .ant-modal-body {
+      padding: 0px;
+      background: #F3F3F3;
+      height: calc(100vh - 235px); // modal弹窗760 调整为700 适应小屏
+      overflow: hidden;
+    }
+    .ant-modal-footer {
+      .ant-btn.ant-btn-default {
+        color: @primary-color;
+        border-color: @primary-color;
       }
-      &_formItems {
-        padding: 0 20px;
+      .ant-btn-primary,.ant-btn-primary[disabled] {
+        background: @primary-color;
+        border-color: @primary-color;
+      }
+      .ant-btn-primary[disabled] {
+        opacity: .5;
+        color: #fff;
       }
     }
-    .select_list_searchButton {
-      display: flex;
-      margin: 10px 0px;
-      justify-content: flex-end;
-    }
+  }
 
-    .select_list_button_space {
-      margin-right: 10px;
+  &_wrapper {
+    position: relative;
+    font-size: 14px;
+
+    &_topForm {
+      .select_list_columns {
+        width: 100%;
+        padding: 10px 6px 2px 16px;
+        background-color: #fff;
+        .ant-form {
+          padding: 0;
+          overflow: hidden;
+          display: flex;
+          align-items: flex-start;
+
+          .ant-row .ant-form-item, .ant-row .ant-col .ant-space {
+            font-size: 12px !important;
+            margin-right: 0px !important;
+            margin-bottom: 8px !important;
+          }
+          .ant-row.ant-form-item-row {
+            background-color: #fafafa;
+            border: 0.8px solid #D9D9D9;
+            border-radius: 2px;
+            font-size: 12px;
+          }
+          .ant-row {
+            width: 100%;
+          }
+          .ant-row .ant-form-item-label {
+            width: 110px;
+            order: 1;
+    
+            label{
+              width: 100%;
+              text-align: left;
+              padding: 0 10px;
+              color: #333333;
+              font-size: 12px;
+              font-family: PingFangSC-Regular;
+              font-weight: 400; 
+            }
+          }
+          .ant-row .ant-form-item-control {
+            order: 2;
+            width: 100px;
+
+            // 输入框
+            .ant-input-affix-wrapper {
+              border: 0;
+              font-size: 12px;
+              background-color: #fafafa;
+              padding: 0 11px;
+              height: 24px;
+
+              .ant-input {
+                background-color: #fafafa !important;
+                border: 0;
+                font-size: 12px;
+              }
+            }
+            // 下拉框
+            .ant-select-selector {
+              border: 0 !important;
+              background-color: #fafafa !important;
+              font-size: 12px;
+            }
+            // 多值输入框
+            .query_input .ant-input {
+              background-color: #fafafa !important;
+              border: 0;
+              font-size: 12px;
+            }
+          }
+          .ant-btn-primary {
+            background: @primary-color;
+          }
+        }
+        .ant-form>.ant-row>.ant-col {
+          order: 2;
+          padding-right: 10px;
+        }
+      }
+      .select_list_button_space {
+        margin-right: 10px;
+      }
     }
 
-    .select_list_selectTips {
+    &_bottomTable {
+      margin: 10px;
       display: flex;
       justify-content: space-between;
-      height: 34px;
-      line-height: 32px;
-      background-color: #eee;
-      margin-bottom: 10px;
-      padding: 0 12px;
-    }
 
-    .select_list_selectAll {
-      position: relative;
-      top: -40px;
-      left: 20px;
-      width: 160px;
+      &_wrapLeft1, &_wrapLeft2, &_wrapRight{
+        background: #fff;
+        width: calc(50% - 5px);
+      }
+      &_wrapLeft1 {
+        width: 100%;
+      }
+      &_wrapRight {
+       margin-left: 10px;
+      }
+
+      .ant-tabs-nav {
+        margin: 0;
+        padding: 6px 18.5px;
+
+        .ant-tabs-nav-wrap {
+          height: 28px;
+          font-size: 14px;
+        }
+        .ant-tabs-tab {
+          padding: 4px 0;
+        }
+        .ant-tabs-ink-bar {
+          left: 3px !important;
+          width: 40px !important;
+          background: @primary-color;
+        }
+        .ant-tabs-extra-content > span {
+          color: @primary-color;
+          cursor: pointer;
+        }
+      }
+      .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+        color: @primary-color;
+      }
+      .ant-tabs-content-holder {
+        padding: 10px 10px 7px;
+        
+        .ant-tabs-content .ant-table-wrapper .ant-table .ant-table-container .ant-table-content {
+          // max-height: 472px;  // 空数据528px；非空数据因为有分页所以472px
+          // overflow: auto scroll !important; // 这样滑动会将表头滑走，使用table自带的scrolly 解决高度问题
+          
+          .ant-table-thead > tr > th {
+            color: #7F7F7F;
+          }
+          .ant-table-thead .ant-table-selection .ant-checkbox-wrapper {
+            justify-content: center;
+          }
+          .ant-table.ant-table-small .ant-table-tbody > tr > td {
+            color: #333333;
+          }
+        }
+      }
+      .ant-checkbox-checked .ant-checkbox-inner {
+        color: @primary-color;
+        background: @primary-color;
+      }
+      .ant-pagination-item-active a {
+        color: @primary-color;
+      }
+      .ant-pagination-item-active {
+        border-color: @primary-color;
+      }
     }
   }
 }