cloud-web-corejs 1.1.0-dev.26 → 1.1.0-dev.27

package/src/components/fileLibrary/style.scss

@@ -0,0 +1,579 @@
+// File library component styles extracted from the historical app stylesheet.
+@import "~@base/styles/variables.scss";
+@import "~@base/styles/mixin.scss";
+
+.file-library {
+  overflow: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  &.main-right {
+    padding-top: 0 !important;
+    position: relative;
+  }
+  .annex-screen {
+    overflow: hidden;
+    padding: 6px 0;
+    border-radius: 4px;
+    .el-dropdown {
+      vertical-align: middle;
+    }
+    .search-box {
+      display: inline-block;
+      margin-right: 12px;
+      > .el-input {
+        width: 194px !important;
+        background: #fff;
+        border: solid 1px #dcdfe6;
+        margin-right: -1px;
+        vertical-align: middle;
+        height: 28px !important;
+        line-height: 28px;
+        margin: 0;
+        padding: 0;
+        .el-input__inner {
+          border: none;
+          height: 26px !important;
+        }
+        .el-input__suffix {
+          top: -0.5px;
+        }
+        .el-input-group__append {
+          background: none;
+          border: none;
+          padding: 0;
+          line-height: 27px;
+          width: 36px;
+          text-align: center;
+          .el-button {
+            padding: 0;
+            margin: 0;
+            font-size: 13px;
+          }
+        }
+      }
+      > .button-sty {
+        min-width: 74px;
+        line-height: 27px;
+        position: relative;
+        z-index: 2;
+        vertical-align: middle;
+      }
+    }
+    .fr .button-sty.el-button i {
+      margin-bottom: 1px;
+    }
+  }
+  .annex-filter {
+    border-bottom: solid 1px #eee;
+    font-size: $fontSizeBase;
+    margin: 0 -10px;
+    padding: 6px 152px 4px 115px;
+    position: relative;
+    background: #f4f6fa;
+    height: 40px;
+    .an-btn-search {
+      position: absolute;
+      left: 10px;
+      padding: 7px 0;
+      width: 97px;
+    }
+    .an-btn-del {
+      position: absolute;
+      right: 10px;
+      top: 6px;
+    }
+    .an-btn-more {
+      position: absolute;
+      right: 117px;
+      top: 6px;
+      padding: 5.5px 5px 5px;
+    }
+    .abox {
+      width: 100%;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      height: 29px;
+    }
+    .item {
+      border: solid 1px #eee;
+      display: inline-block;
+      padding: 0 6px;
+      line-height: 28px;
+      height: 28px;
+      margin: 0 8px 2px 0;
+      border-radius: 4px;
+      background: #fff;
+      span,
+      i {
+        color: $dred;
+      }
+      i {
+        cursor: pointer;
+        margin-left: 5px;
+        &:hover {
+          background-color: #eee;
+        }
+      }
+    }
+    &.on + .annex-crumbs + .grid-height {
+      height: calc(100vh - 158px) !important;
+      .mask + div {
+        height: calc(100vh - 158px) !important;
+        overflow: hidden !important;
+        .annex-piclist > .clearfix {
+          height: calc(100vh - 191px);
+        }
+      }
+    }
+  }
+  .pop-annex-filter {
+    position: absolute;
+    left: 8px;
+    right: 0;
+    top: 39px;
+    padding: 12px;
+    background: #fff;
+    z-index: 9999;
+    font-size: $fontSizeBase;
+    box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
+    border-radius: 10px;
+    .item {
+      border: solid 1px #eee;
+      display: inline-block;
+      padding: 0 6px;
+      line-height: 28px;
+      height: 28px;
+      margin: 2px 13px 5px 0;
+      border-radius: 4px;
+      background: #fff;
+      span,
+      i {
+        color: #666;
+      }
+      i {
+        cursor: pointer;
+        margin-left: 5px;
+        &:hover {
+          background-color: #eee;
+        }
+      }
+      &:hover {
+        span,
+        i {
+          color: $dred;
+        }
+      }
+    }
+  }
+  .line {
+    background-color: #f4f6fa;
+    height: 9px;
+    display: block;
+    margin: 0 -16px;
+  }
+
+  .annex-crumbs {
+    padding: 2px 0;
+    .tit {
+      position: relative;
+      padding-right: 40px;
+      font-size: $fontSizeBase;
+      i {
+        color: #f5a623;
+        font-size: $fontSizeBase;
+        margin-right: 6px;
+      }
+      &:after {
+        content: "";
+        height: 10px;
+        width: 1px;
+        background-color: #eee;
+        position: absolute;
+        right: 20px;
+        top: 50%;
+        margin-top: -5px;
+      }
+    }
+
+    .el-breadcrumb {
+      line-height: 28px;
+      height: 28px;
+      display: inline-block;
+      vertical-align: middle;
+      &::before {
+        content: "\e704";
+        font-family: "element-icons" !important;
+        color: #000;
+        display: inline-block;
+        margin-right: 4px;
+        font-size: 13px;
+      }
+    }
+  }
+  .viewBox {
+    border: solid 1px $borderColor;
+    border-radius: 3px;
+    padding: 6px 6px 1px;
+    .annex-searchBox {
+      overflow: hidden;
+      line-height: 28px;
+      margin-bottom: 6px;
+      height: 28px;
+      .oper {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: 28px;
+        height: 28px;
+        position: relative;
+        padding-right: 14px;
+        margin-right: 14px;
+        font-size: $fontSizeBase;
+        i {
+          cursor: pointer;
+          margin: 0 10px 0 7px;
+          &.disabled {
+            opacity: 0.5;
+            cursor: inherit;
+          }
+        }
+        .el-checkbox {
+          margin-right: 2px;
+          vertical-align: middle;
+          margin-bottom: 1px;
+        }
+      }
+      .search-box {
+        display: inline-block;
+        .el-input {
+          width: 448px !important;
+        }
+        .button-sty {
+          margin-left: 12px;
+        }
+      }
+      .icon-btn {
+        min-width: 68px;
+      }
+    }
+  }
+
+  .annex-piclist {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-bottom: 1px;
+    .item {
+      position: relative;
+      border: solid 1px $borderColor;
+      border-radius: 8px;
+      display: inline-block;
+      float: left;
+      margin: 0 10px 6px 0;
+      width: 148px;
+      .type-status {
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: #929292;
+        &:before {
+          content: "\e618";
+          font-size: 47px;
+          position: absolute;
+          z-index: 1;
+          font-family: "iconfont";
+          top: -10px;
+          right: 0;
+        }
+        b {
+          position: absolute;
+          z-index: 2;
+          color: #fff;
+          font-weight: 400;
+          transform: rotate(44deg);
+          left: -32px;
+          top: 14px;
+          width: 40px;
+        }
+        &.ok {
+          color: #7dc6ff;
+        }
+      }
+      .status {
+        position: absolute;
+        right: -6px;
+        top: 2px;
+        border: solid 1px #eee;
+        border-radius: 5px 0 0 5px;
+        z-index: 2;
+        color: #212121;
+        background: #e6e6e6;
+        width: 13px;
+        height: 8px;
+        line-height: 24px;
+        font-size: $fontSizeBase;
+        text-align: center;
+        &:before {
+          content: "";
+          border-right: solid 5px transparent;
+          border-top: solid 5px #cdc9c9;
+          width: 0;
+          height: 0;
+          position: absolute;
+          bottom: -5px;
+          right: -1px;
+        }
+        &.s-1 {
+          background-color: $green;
+          color: #fff;
+          border-color: $green;
+          &::before {
+            border-top-color: #008000;
+          }
+        }
+      }
+      .el-checkbox {
+        margin: 6px 6px 0;
+        .el-checkbox__inner {
+          width: 18px;
+          height: 18px;
+          border-radius: 50%;
+          line-height: 18px;
+          padding-left: 2px;
+        }
+      }
+      .oper {
+        position: absolute;
+        right: 0;
+        top: 5px;
+        .ico {
+          margin-right: 8px;
+          font-size: 17px;
+          color: transparentize($baseColor, 0.1);
+          cursor: pointer;
+        }
+      }
+      .img {
+        width: 146px;
+        height: 134px;
+        overflow: hidden;
+        cursor: pointer;
+        text-align: center;
+        position: relative;
+        .el-image {
+          border: none;
+        }
+        .show-video {
+          background-color: rgba(0, 0, 0, 0.29);
+          position: absolute;
+          left: 2px;
+          right: 2px;
+          top: 2px;
+          bottom: 2px;
+          color: #fff;
+          font-size: 28px;
+          line-height: 130px;
+          display: none;
+          i {
+            margin: 0 10px;
+            &.icon-chakan {
+              font-family: "iconfont";
+              font-style: inherit;
+              font-size: 30px;
+            }
+          }
+        }
+        p {
+          width: 148px;
+          height: 134px;
+          vertical-align: middle;
+          text-align: center;
+          padding: 2px;
+        }
+        img {
+          max-width: 100%;
+          max-height: 100%;
+        }
+        .svg-icon {
+          width: 109px;
+          height: 105px;
+          margin: 12px 8px;
+        }
+        &:hover .show-video {
+          display: block;
+        }
+      }
+      .txt-box {
+        width: 146px;
+        height: 30px;
+        overflow: hidden;
+        margin-bottom: 5px;
+        .tb-left {
+          float: left;
+          height: 34px;
+          width: 4px;
+        }
+        .tb-mid {
+          float: right;
+          word-break: break-all;
+          width: 141px;
+          .txt {
+            font-size: $fontSizeBase;
+            text-align: center;
+            line-height: 1.2;
+            margin-top: 3px;
+            display: table-cell;
+            vertical-align: middle;
+            width: 141px;
+            padding-right: 4px;
+            height: 30px;
+            .name {
+              word-break: break-all;
+            }
+            span {
+              vertical-align: middle;
+              display: inline;
+            }
+          }
+        }
+        .format {
+          float: right;
+          position: relative;
+          background-color: #fff;
+          font-size: $fontSizeBase;
+          padding: 0 2px;
+          line-height: 1;
+          width: 53px;
+          height: 18px;
+          top: -18px;
+          left: 146px;
+          margin-left: -51px;
+        }
+      }
+
+      &.on {
+        border-color: $baseColor;
+      }
+      &:hover {
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+      }
+      &.more {
+        border: none;
+        background-color: #e1ecf5;
+        cursor: pointer;
+        .img {
+          font-size: 80px;
+          padding: 33px 0;
+          text-align: center;
+          height: 165px;
+        }
+        .name {
+          font-size: $fontSizeBase;
+          text-align: center;
+          padding: 0 4px;
+          margin: 5px 0 8px;
+        }
+      }
+    }
+    > .clearfix {
+      overflow: auto;
+      flex: 1;
+      + .vxe-grid {
+        margin-top: 0.5px;
+        height: 32px;
+      }
+    }
+    .pages-box .vxe-pager--wrapper {
+      height: 32px;
+      .vxe-pager--next-btn,
+      .vxe-pager--num-btn:focus {
+        box-shadow: none;
+        background: none;
+      }
+    }
+  }
+  > .grid-height {
+    flex: 1;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+    > .containter1,
+    .annex-grid-height {
+      flex: 1;
+    }
+    .annex-grid-height {
+      min-height: 0;
+    }
+  }
+  .annex-folderList {
+    height: 116px;
+    overflow: hidden;
+    border-top: solid 1px #eee;
+    position: relative;
+    white-space: nowrap;
+    .item {
+      position: relative;
+      display: inline-block;
+      margin: 0 10px 6px 0;
+      width: 127px;
+      text-align: center;
+      cursor: pointer;
+      .name {
+        @include ellipsis;
+        font-size: $fontSizeBase;
+        padding: 0 4px;
+      }
+      .img {
+        font-size: 80px;
+      }
+      &.more {
+        vertical-align: top;
+        margin-top: 8px;
+        width: 90px;
+        padding: 10px 0 7px;
+        border-radius: 11px;
+        background: #e1ecf5;
+        .img {
+          font-size: 57px;
+          margin-bottom: 7px;
+        }
+      }
+    }
+    .show-more {
+      width: 31px;
+      height: 99px;
+      background: #ccdeec;
+      color: $baseColor;
+      padding: 16px 9px;
+      font-size: 13px;
+      white-space: normal;
+      display: block;
+      position: absolute;
+      right: 0;
+      top: 8px;
+      line-height: 1.8;
+      text-align: center;
+      i {
+        transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+        -moz-transform: rotate(90deg);
+        -webkit-transform: rotate(90deg);
+        -o-transform: rotate(90deg);
+      }
+    }
+    &.on {
+      height: auto;
+      white-space: normal;
+      .show-more i {
+        transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+        -moz-transform: rotate(270deg);
+        -webkit-transform: rotate(270deg);
+        -o-transform: rotate(270deg);
+      }
+    }
+  }
+}