vsyswin-ui 0.3.1 → 0.3.2

package/packages/styles/common-old.scss

@@ -49,24 +49,96 @@ input:focus {
 }
 
 /* 一些共用的样式 */
-
 .main-container {
   height: 100%;
   overflow: hidden;
-  background: #f2f5f9;
-  padding: 0 24px;
+  background: #f5f6fa;
+  padding: 24px;
   box-sizing: border-box;
-  &.no-head {
+  display: flex;
+  .container-left {
+    background-color: #fff;
+    border-radius: 8px;
+    margin-right: 16px;
+    height: 100%;
+    flex-shrink: 0;
+    position: relative;
+
+    .pick-left {
+      position: absolute;
+      width: 28px;
+      height: 79px;
+      right: -16px;
+      top: 50%;
+      margin-top: -34px;
+      cursor: pointer;
+    }
+    .west-tree-box {
+      /* 左侧树盒子 */
+      width: 260px;
+      height: 100%;
+      // overflow-x: scroll;
+      position: relative;
+      transition: all 0.5s;
+      .west-tree-content {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        box-sizing: border-box;
+      }
+    }
+  }
+  .container-right {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .container-page-hd {
+      margin-bottom: 16px;
+      background-color: #fff;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+
+      .page-hd-others {
+        padding: 0 20px;
+      }
+    }
     .bd {
-      height: calc(100% - 20px);
+      height: 0;
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
     }
   }
+  .pick-right {
+    position: absolute;
+    width: 28px;
+    height: 79px;
+    right: -33px;
+    top: 50%;
+    margin-top: -34px;
+    cursor: pointer;
+  }
   .hd {
-    height: 44px;
+    // height: 44px;
+    background: #fff;
     display: flex;
-    padding: 0 20px;
+    padding: 20px;
     align-items: center;
     justify-content: space-between;
+    border-bottom: 1px solid #f1f1f1;
+    border-radius: 8px 8px 0 0;
+    -webkit-border-radius: 8px 8px 0 0;
+    -moz-border-radius: 8px 8px 0 0;
+    -ms-border-radius: 8px 8px 0 0;
+    -o-border-radius: 8px 8px 0 0;
     > h2 {
       font-size: 14px;
       margin: 0;
@@ -80,69 +152,29 @@ input:focus {
     }
   }
   .bd {
-    /* 本来想使用flex布局，但是vxe-table支持不友好，还是需要改成 calc计算的方式 */
-    height: calc(100% - 64px);
-    padding: 4px 20px 10px;
     box-sizing: border-box;
-    background-color: #fff;
-    &.west-east-wrap {
-      // 左右结构的布局，去掉padding，使用flex布局
-      padding: 0;
-      display: flex;
-    }
+    // 内容页的背景，内容页自己加
+    // background: linear-gradient(to bottom, #f5f6fa, #fff 52px);
+    // border-bottom-left-radius: 8px;
+    // border-bottom-right-radius: 8px;
     .con-main {
-      height: calc(100% - 46px);
+      height: 100%;
       .con-scroll-wrapper {
         height: 100%;
         overflow: hidden;
       }
     }
-    .west-tree-box {
-      /* 左侧树盒子 */
-      width: 260px;
-      height: 100%;
-      background: #fff;
-      border-right: 1px solid #e3e3e3;
-      // overflow-x: scroll;
-      position: relative;
-      transition: all 0.5s;
-      .west-tree-content {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        padding: 0;
-        overflow-x: hidden;
-        overflow-y: auto;
-        box-sizing: border-box;
-      }
-      .pick-left {
-        position: absolute;
-        width: 21px;
-        height: 54px;
-        right: 0;
-        top: 50%;
-        margin-top: -27px;
-        cursor: pointer;
-      }
-    }
     .east-content {
       /* 右侧表格内容区域盒子 */
-      &.no-padding {
-        padding: 0;
-      }
+      background-color: #fff;
+      border-radius: 0px 0px 8px 8px;
+      padding: 20px;
       height: 100%;
-      padding: 4px 20px 10px;
       box-sizing: border-box;
       transition: all 0.5s;
       position: relative;
-      .pick-right {
-        position: absolute;
-        width: 21px;
-        height: 54px;
-        left: 0;
-        top: 50%;
-        margin-top: -27px;
-        cursor: pointer;
+      &.no-padding {
+        padding: 0;
       }
     }
   }
@@ -160,33 +192,41 @@ input:focus {
       width: 260px;
       height: 100%;
       background: #fff;
-      border-right: 1px solid #e3e3e3;
+      // border-right: 1px solid #e3e3e3;
       // overflow-x: scroll;
       position: relative;
       transition: all 0.5s;
+      border-radius: 0px 0px 8px 8px;
+      margin-right: 16px;
       .pick-left {
         position: absolute;
-        width: 21px;
-        height: 54px;
-        right: 0;
+        width: 121px;
+        height: 63px;
+        right: -80px;
         top: 50%;
-        margin-top: -27px;
+        margin-top: -32px;
         cursor: pointer;
+        transform: rotate(90deg);
+        z-index: 10;
       }
     }
     .east-content {
       /* 右侧表格内容区域盒子 */
       height: 100%;
       transition: all 0.5s;
+      background-color: #fff;
       position: relative;
+      border-radius: 0px 0px 8px 8px;
       .pick-right {
         position: absolute;
-        width: 21px;
-        height: 54px;
-        left: 0;
+        width: 121px;
+        height: 63px;
+        left: -40px;
         top: 50%;
-        margin-top: -27px;
+        margin-top: -32px;
         cursor: pointer;
+        transform: rotate(90deg);
+        z-index: 100;
       }
     }
     .tab-bd {
@@ -225,12 +265,11 @@ input:focus {
       }
     }
     .sub-hd {
-      height: 44px;
       display: flex;
-      padding: 0 20px;
+      padding: 20px;
       align-items: center;
       justify-content: space-between;
-      background-color: var(--page-bg);
+      background-color: #fff;
       > h2 {
         font-size: 14px;
         margin: 0;
@@ -261,26 +300,62 @@ input:focus {
     }
   }
 }
+.syswin-page-tabs {
+  .el-tabs__header {
+    margin-bottom: 0;
+    .el-tabs__nav-wrap::after {
+      height: 0;
+    }
+  }
+}
+.bg-white {
+  background-color: #fff;
+}
+.page-content-bg {
+  background-color: #fff;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.page-content-bg-linear {
+  background: linear-gradient(180deg, #f5f6fa, #fff 52px);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
 
-.title-tabs {
+.title-tabs,
+.syswin-top-tabs {
   // 自定义的tabs
   &.el-tabs {
-    height: 44px !important;
+    height: 22px !important;
     .el-tabs__header {
-      padding-bottom: 0px !important;
-      // padding-left: 20px;
-      padding-right: 20px;
+      margin: 0;
       .el-tabs__active-bar {
-        background-color: $primary-color;
+        display: none;
       }
       .el-tabs__item {
-        height: 44px;
-        line-height: 44px;
-        font-weight: 600;
+        height: 22px;
+        line-height: 22px;
+        font-weight: 400;
+        font-size: 16px;
+        color: #888888;
+        position: relative;
+        &::after {
+          content: '';
+          width: 1px;
+          height: 12px;
+          background-color: #888;
+          position: absolute;
+          right: 0;
+          top: 5px;
+        }
         &.is-active,
         &:hover {
+          font-weight: 600;
           color: $primary-color;
         }
+        &:last-child::after {
+          display: none;
+        }
       }
       .el-tabs__nav-wrap::after {
         background-color: transparent;
@@ -306,13 +381,15 @@ input:focus {
       padding-left: 12px;
       padding-right: 10px;
       color: #fff;
+      border-color: transparent !important;
+      background-color: transparent !important;
     }
   }
   .el-input__icon {
     line-height: 32px;
   }
   .header-filter-btns {
-    min-height: 40px;
+    // min-height: 40px;
     .el-button--text {
       color: $primary-color;
     }
@@ -371,15 +448,23 @@ input:focus {
 .el-input-group__append.select-append {
   padding: 0 8px;
   .el-button {
-    margin-left: -8px;
-    margin-right: -8px;
-    padding-left: 5px;
-    padding-right: 5px;
+    margin: 0 -8px;
+    padding: 0 5px;
   }
 }
 
 /* 自定义分页样式 */
-
+.el-pagination {
+  padding: 12px 20px !important;
+  background: #fff !important;
+}
+.el-pagination__total {
+  color: #888888 !important;
+}
+.el-pagination__sizes,
+.el-pagination__jump {
+  color: #282828 !important;
+}
 .el-pagination.cus-pagination .el-input__inner {
   padding-left: 0px !important;
 }
@@ -406,20 +491,31 @@ input:focus {
   background-color: transparent !important;
   border: 1px solid #eaedf1;
 }
-
+.el-pagination.is-background .el-pager li:not(.disabled):hover {
+  background: #eeeff3;
+  color: #888888;
+}
 .el-pagination.is-background.cus-pagination .btn-prev,
 .el-pagination.is-background.cus-pagination .btn-next,
 .el-pagination.is-background.cus-pagination .el-pager li {
   background-color: transparent;
-  border: 1px solid #eaedf1;
+  // border: 1px solid #eaedf1;
+  color: #888888;
   border-radius: 2px;
 }
-
+.el-pagination__total {
+  color: #282828;
+}
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background: --primary-color;
+}
 .el-pagination.is-background.cus-pagination .el-pager li:not(.disabled).active {
   border-radius: 2px;
   border-color: transparent;
 }
-
+.el-table__fixed-footer-wrapper tbody td.el-table__cell {
+  border-top: none;
+}
 .cus-pagination .el-pagination__jump {
   margin-left: 0;
 }
@@ -427,6 +523,7 @@ input:focus {
 .cus-pagination .el-input__inner {
   height: 28px !important;
   line-height: 28px !important;
+  color: #282828;
 }
 
 // 使表格树的单元格radio不显示
@@ -471,7 +568,7 @@ input:focus {
   .el-tag {
     margin-bottom: 10px;
   }
-  
+
   .tags:not(:first-child) {
     margin-left: 6px;
   }
@@ -493,6 +590,10 @@ input:focus {
     color: #000;
     font-weight: 600;
   }
+  .el-input__inner {
+    line-height: 32px;
+    height: 32px;
+  }
   .el-input__icon {
     width: 0;
     display: none;
@@ -507,14 +608,42 @@ input:focus {
 
 .sy-btn-ellipsis {
   .el-button {
-      outline: none !important;
-      &.el-button--text {
-        color: $primary-color;
-      }
-  }
-  .el-button:hover, .el-button:active, .el-button:focus {
-      background: none !important;
-      color: $primary-color !important;
-      border: 1px solid transparent !important;
+    outline: none !important;
+    &.el-button--text {
+      color: $primary-color;
+    }
   }
-}
+}
+
+.el-button.el-button--primary {
+  color: #ffffff;
+  background: #027aff !important;
+  border-color: #027aff !important;
+}
+.el-button.el-button--primary:hover {
+  color: #ffffff;
+  background: #3595ff !important;
+  border-color: #3595ff !important;
+}
+.el-button.el-button--primary:active,
+.el-button.el-button--primary:focus {
+  color: #ffffff;
+  background-color: #026ee6 !important;
+  border-color: #026ee6 !important;
+}
+.el-button.el-button--default {
+  color: #535353;
+  background-color: #ffffff !important;
+  border-color: #dcdfe6 !important;
+}
+.el-button.el-button--default:hover {
+  color: #3595ff;
+  background: #f5faff !important;
+  border-color: #3595ff !important;
+}
+.el-button.el-button--default:active,
+.el-button.el-button--default:focus {
+  color: #026ee6;
+  background: #ecf6ff !important;
+  border-color: #026ee6 !important;
+}