cnhis-design-vue 3.1.0 → 3.1.3

package/{packages/big-table/src/assets/style/table-base.less → es/packages/big-table/style/index.less}

@@ -1,8 +1,179 @@
+.big-table-filter-wrap {
+  position: fixed;
+  z-index: 99998;
+  transform: translateX(-2%);
+  margin-top: -6px;
+
+  min-width: 280px;
+  border-radius: 4px;
+  background-color: #fff;
+  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  overflow: hidden;
+  transition: width 2s;
+
+  .sort-list {
+    margin-top: 6px;
+  }
+
+  .sort-item {
+    line-height: 32px;
+    padding: 0 13px;
+    display: flex;
+    align-items: center;
+
+    &:hover,
+    &.active {
+      background: #f2f2f2;
+    }
+  }
+
+  .sort-icon {
+    width: 16px;
+    height: 16px;
+    background-size: contain;
+    display: inline-block;
+  }
+
+  /*
+  .sort-icon-asc {
+    background-image: url('../img/icon-asc.png');
+  }
+  */
+
+  .sort-text {
+    margin-left: 11px;
+    font-size: 14px;
+    line-height: 32px;
+    color: rgba(0, 0, 0, 0.8);
+  }
+
+  /*
+  .sort-icon-desc {
+    background-image: url('../img/icon-desc.png');
+  }
+  */
+
+  .filter-header {
+    padding: 0 13px;
+    cursor: initial;
+  }
+
+  .filter-header-icon {
+    border-top-color: #333;
+    border-right-color: #333;
+  }
+
+  .filter-header-text {
+    margin-left: 11px;
+  }
+
+  .check-search-wrap {
+    padding: 8px 0;
+    width: 100%;
+    background: #f7f7f7;
+    display: flex;
+    justify-content: center;
+  }
+
+  .check-seach-input {
+    line-height: 32px;
+  }
+
+  .checkbox-box {
+    padding-right: 3px;
+    width: 100%;
+  }
+
+  .checkbox-wrap {
+    padding-left: 13px;
+    padding-right: 3px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #d5d5d5;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: #fff;
+      border-radius: 4px;
+    }
+
+    &::-webkit-scrollbar-corner {
+      background-color: #000;
+      border-radius: 4px;
+      width: 4px;
+    }
+  }
+
+  .checkbox-wrap--search {
+    padding-right: 10px;
+  }
+
+  .checkbox-btn-wrap {
+    display: flex;
+    padding: 9px 10px 19px 14px;
+
+    .checkbox-btn {
+      width: 56px;
+      padding: 0;
+    }
+
+    .checkbox-btn+.checkbox-btn {
+      margin-left: 8px;
+    }
+
+    .checkbox-btn-status {
+      .checkbox-btn {
+        border: 0;
+        border-radius: 0;
+        width: initial;
+        margin: 0 13px;
+        position: relative;
+
+        &:hover::after {
+          display: block;
+          content: '';
+          position: absolute;
+          bottom: 5px;
+          width: 100%;
+          height: 1px;
+          background-color: #5585f5;
+        }
+      }
+    }
+  }
+
+  .arrows-icon {
+    position: absolute;
+    bottom: -1px;
+    right: -1px;
+    font-size: 15px;
+    cursor: nw-resize;
+    width: 25px;
+    height: 20px;
+  }
+}
+
 body {
   > .vxe-table--tooltip-wrapper {
     display: none !important;
   }
 }
+
 .custom-big-table {
   position: relative;
 
@@ -18,6 +189,7 @@ body {
       object-fit: contain;
       cursor: pointer;
     }
+
     &.img-circle {
       img {
         width: 28px;
@@ -26,13 +198,16 @@ body {
       }
     }
   }
+
   .bigTable-qr-span {
     position: relative;
     display: inline-block;
     height: 100%;
+
     .bigTable-qr-img {
       max-height: 96%;
     }
+
     > span {
       position: absolute;
       top: 0;
@@ -46,6 +221,7 @@ body {
       display: none;
       cursor: pointer;
     }
+
     &:hover {
       > span {
         display: inline-flex;
@@ -54,26 +230,31 @@ body {
   }
 
   /* 行内表单样式 */
+
   .base-form {
     overflow: hidden !important;
     display: flex;
     align-items: center;
     width: 100%;
   }
+
   .base-form-content {
     width: 100%;
   }
+
   textarea {
     height: 32px;
     margin-bottom: 0;
     resize: none;
   }
+
   .formItem-select-multiple {
     display: flex;
     align-items: center;
     width: 100%;
     line-height: 40px;
   }
+
   /* 行内表单样式 */
 
   &.mt {
@@ -91,31 +272,39 @@ body {
   th.vxe-header--column {
     cursor: pointer;
   }
+
   .row-btn {
     margin-right: 10px;
   }
+
   .vxe-table {
     transform: translateZ(0);
+
     .vxe-table--empty-content {
       width: 100%;
       height: 100%;
+
       > div {
         width: 100%;
         height: 100%;
+
         .no-data-tip {
           display: inline-flex;
         }
       }
     }
+
     .col--checkbox,
     .col--seq {
       .vxe-cell {
         padding: 0;
+
         .vxe-checkbox--label {
           padding-left: 0;
         }
       }
     }
+
     .vxe-cell .vxe-tree-cell {
       height: 100%;
     }
@@ -126,12 +315,14 @@ body {
 
     .vxe-table--header {
       background-color: #f2f2f2;
+
       .vxe-header--column .vxe-cell--title {
         height: 100%;
         line-height: unset;
         width: 100%;
       }
     }
+
     .vxe-table--footer-wrapper.body--wrapper,
     .vxe-table--body-wrapper {
       &::-webkit-scrollbar {
@@ -139,42 +330,51 @@ body {
         height: 10px;
         background-color: #f2f2f2;
       }
+
       &::-webkit-scrollbar-thumb:hover {
         background-color: #b2b2b2;
       }
     }
+
     .vxe-footer--row .vxe-footer--column {
       > .vxe-cell .vxe-cell--item {
         height: 30px;
         line-height: 30px;
       }
     }
+
     .vxe-cell--checkbox.is--disabled {
       .vxe-checkbox--icon {
         display: none;
       }
     }
   }
+
   .filter-box {
     display: flex;
     align-items: center;
     width: 100%;
+
     .text-over-tooltip-components {
       max-width: calc(100% - 20px);
     }
+
     .vxe-filter--btn {
       border-top-color: #c0c4cc;
       border-right-color: #c0c4cc;
     }
+
     .vxe-filter--btn.active {
       border-top-color: #35393c;
       border-right-color: #35393c;
     }
+
     .vxe-filter--btn.checked {
       border-top-color: #5585f5;
       border-right-color: #5585f5;
     }
   }
+
   .disabled-checked-tips {
     position: absolute;
     left: 6px;
@@ -189,6 +389,7 @@ body {
     border-radius: 50%;
     border: 2px solid #ff1818;
     background: #fff;
+
     &::after {
       position: absolute;
       content: '';
@@ -201,77 +402,158 @@ body {
       top: 0;
     }
   }
+
   .form-select-table {
     .n-base-select-menu__empty {
       display: none;
     }
   }
+
   .percent-wrap {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
+
     .percent-value {
       line-height: 1;
       margin-bottom: -4px;
       margin-top: 4px;
     }
   }
+
   .refresh {
     display: flex;
     align-items: center;
     background-color: #fff;
-    box-shadow: 0px 2px 4px 0px rgba(108, 108, 108, 0.13);
+    box-shadow: 0 2px 4px 0 rgba(108, 108, 108, 0.13);
     color: #5585f5;
     font-size: 12px;
     height: 27px;
-  
+
     position: absolute;
     right: 0;
     top: 6px;
     z-index: 1;
-  
+
     padding-left: 14px;
     padding-right: 14px;
     border-top-left-radius: 14px;
     border-bottom-left-radius: 14px;
-  
+
     cursor: pointer;
   }
+
   .refresh-row {
     margin-left: 3px;
     margin-bottom: 0;
   }
+
   .check-wrap {
     background: #ffffe9;
-    display: block;
     width: 100%;
     line-height: 26px;
     display: flex;
     justify-content: center;
-  
+
     position: absolute;
     margin-top: -26px;
-  
+
     .check-wrap-title,
     .check-wrap-btn {
       color: #000000;
       font-size: 12px;
-      margin-bottom: 0px;
+      margin-bottom: 0;
       cursor: pointer;
     }
-  
+
     .check-wrap-btn {
       color: #5585f5;
     }
   }
+
   .domPropsInnerHTML-span {
     height: 100%;
+
     img {
       display: inline-block;
       height: var(--tableImageHeight);
       width: var(--tableImageWidth);
     }
   }
-}
+}
+
+
+.no-data-tip {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #333333;
+  font-size: 22px;
+
+  > img {
+    max-width: 70%;
+    width: 260px;
+  }
+
+  > p {
+    margin-top: 12px;
+    margin-bottom: 0;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.8);
+  }
+
+  > span {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.4);
+    margin-top: 6px;
+  }
+}
+
+.text-over-tooltip-components {
+  display: inline-block;
+  max-width: 98%;
+  /* 文字超出宽度显示省略号 单行 */
+
+  .ellipsis {
+    font-size: 14px;
+    color: #35393c;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    i {
+      font-style: normal;
+      word-break: keep-all;
+      white-space: nowrap;
+    }
+  }
+
+  /* 自定义样式 */
+
+  .fs20 {
+    font-size: 20px;
+    font-weight: 600;
+    color: green;
+    line-height: 22px;
+  }
+
+  .fs12 {
+    font-size: 12px;
+    font-weight: 400;
+    color: orange;
+    line-height: 14px;
+  }
+}
+
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}