@toolspack/ttd-pdfjs 0.0.0

package/src/styles/common.less

@@ -0,0 +1,729 @@
+/*  公用css 文件 */
+@import url('./components//atomic.less');
+
+body {
+  color: #222222;
+  font-family: PingFangSC, PingFangSC-Regular, "Microsoft YaHei", "微软雅黑", Helvetica, Arial, sans-serif;
+  // font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  background: #F1F2F6
+}
+
+p {
+  margin: 0;
+}
+
+dl,
+dt,
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #CCCCCC;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #CCCCCC;
+}
+
+input::-moz-placeholder,
+textarea::-moz-placeholder {
+  color: #CCCCCC;
+}
+
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: #CCCCCC;
+}
+
+a {
+  color: #777786;
+  font-size: 12px;
+  text-decoration: none
+}
+
+.c-b::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.status-dot {
+  position: relative;
+  padding-left: 12px;
+}
+
+.status-dot::before {
+  content: '';
+  position: absolute;
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  margin-right: 6px;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.dot-red::before {
+  background: #FF553C;
+}
+
+.dot-blue::before {
+  background: #2E6BE6;
+}
+
+.dot-green::before {
+  background: #4DC766;
+}
+
+.svg-icon {
+  width: 1em;
+  height: 1em;
+}
+
+.ttd-container {
+  .el-aside {
+    float: left;
+    background-color: #ffffff;
+    margin-right: 4px;
+  }
+}
+
+.el-header {
+  background: #ffffff;
+  overflow: hidden;
+  padding: 0;
+  border-bottom: 1px solid #F1F1F1;
+}
+
+.el-main {
+  padding: 0;
+  overflow: auto;
+  /*overflow: hidden;  使用hidden，会使页面没有上下滚动条*/
+}
+
+.main-wrapper {
+  overflow: auto;
+  /* 缺少 height ,页面无法滚动，重要属性，不可移除 */
+  height: 100%;
+  background: #ffffff;
+  width: 100%;
+
+  .page-title {
+    height: 60px;
+    line-height: 60px;
+    font-size: 20px;
+    font-weight: 700;
+    color: #666666;
+    /*//overflow: hidden;  flex 布局下导致title 不显示*/
+    padding: 0 24px;
+    vertical-align: middle;
+    box-sizing: border-box;
+    border-bottom: 4px solid #F1F2F6;
+
+    span {
+      display: inline-block;
+    }
+
+    .back-btn::after {
+      content: "";
+      position: relative;
+      top: 3px;
+      margin: 0 12px;
+      height: 14px;
+      border-right: 1px solid #d8d8d8;
+      cursor: pointer;
+    }
+
+    .return {
+      display: inline-block;
+      cursor: pointer;
+      width: 14px;
+      height: 14px;
+      background-size: contain;
+    }
+
+    .title-tag {
+      position: relative;
+      top: -2px;
+      display: inline-block;
+      line-height: 30px;
+      border-radius: 15px;
+      font-size: 14px;
+      color: #AB6F16;
+      background: #FFEBC9;
+      padding: 0 14px;
+      cursor: pointer;
+      margin-left: 5px;
+
+      .tag-icon {
+        background: #ffffff;
+        font-size: 12px;
+        color: #AB6F16;
+        border-radius: 50%;
+        display: inline-block;
+        width: 14px;
+        line-height: 14px;
+        text-align: center;
+      }
+    }
+  }
+
+  .page-title-school {
+    font-size: 16px;
+    color: #4B5973;
+    font-weight: 500;
+    background: #fff;
+
+    i {
+      cursor: pointer;
+    }
+  }
+
+  /*  列表页的 搜索区域  */
+  .page-search {
+    padding: 24px 24px 8px 24px;
+    overflow: hidden;
+
+
+    .el-form-item:last-child {
+      margin-right: 0;
+    }
+
+    .el-form-item__content {
+      min-width: 208px;
+    }
+
+    .width-auto {
+      .el-form-item__content {
+        min-width: auto;
+      }
+    }
+
+    .page-search-text {
+      font-size: 14px;
+      line-height: 32px;
+      display: inline-block;
+      margin: 0px 6px 0 -10px;
+    }
+
+    .el-input input {
+      border: 1px solid #D9DBE2;
+      border-radius: 2px;
+    }
+
+    .el-select {
+      input::-webkit-input-placeholder {
+        color: #000;
+      }
+
+      input:-moz-placeholder {
+        color: #000;
+      }
+
+      input::-moz-placeholder {
+        color: #000;
+      }
+
+      input:-ms-input-placeholder {
+        color: #000;
+      }
+
+      .el-select__caret {
+        color: #222;
+      }
+
+      .el-dropdown-link {
+        cursor: pointer;
+        color: #222;
+        font-size: 13px;
+
+        i {
+          color: #666;
+        }
+      }
+    }
+  }
+
+  .page-table {
+    padding: 0 24px;
+  }
+
+  /* 详情页面，无列表   */
+  .page-content {
+    padding: 10px 24px 30px 24px;
+  }
+}
+
+/*  详情页面的底部 （按钮区域）  */
+.page-bottom {
+  padding: 15px 40px;
+  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.09);
+  text-align: center;
+  z-index: 0;
+}
+
+.flex {
+  display: -ms-flex;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden !important
+}
+
+.flex-row {
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.flex-item {
+  -ms-flex: 1;
+  flex: 1;
+  overflow: auto;
+}
+
+.title-line {
+  font-size: 16px;
+  color: #2E6BE6;
+  line-height: 36px;
+  border-bottom: 1px solid #E0E0E0;
+  ;
+}
+
+// 分页插件的样式
+.el-pagination {
+  font-size: 14px;
+  color: #666666;
+  padding: 20px 20px;
+  font-weight: normal;
+
+  .page-text {
+    font-size: 13px;
+    color: #999999;
+    padding-right: 7px;
+    font-weight: normal;
+  }
+
+  .btn-next,
+  .btn-prev {
+    border-radius: 4px;
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    margin-left: 8px;
+    border: 1px solid #D9DBE2;
+  }
+
+  .btn-next:disabled,
+  .btn-prev:disabled {
+    color: #d8d8d8;
+    background-color: transparent;
+  }
+
+}
+
+.el-pagination__sizes .el-input .el-input__inner {
+  border-radius: 16px;
+  border: 1px solid #CCCCCC;
+  height: 32px;
+  line-height: 32px;
+  color: #222222;
+}
+
+.el-pager li {
+  border-radius: 4px;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  line-height: 32px;
+  margin-left: 8px;
+  border: 1px solid #D9DBE2;
+}
+
+.el-pager li.active {
+  color: #336FFF;
+  border: 1px solid #3972FA;
+}
+
+.el-pagination__total {
+  padding-left: 8px;
+  color: #999999;
+}
+
+.el-dialog {
+  border-radius: 2px;
+}
+
+.el-dialog__footer {
+  background: #F5F5F5;
+  padding-top: 18px;
+
+  .el-button {
+    margin-right: 10px;
+  }
+}
+
+//靠右dialog 必须加上 ttd-dialog 类
+.ttd-dialog {
+  .dialog-title {
+    font-size: 18px;
+    padding: 20px 0 10px 0;
+    line-height: 22px;
+    color: #4B5973;
+
+    .sub-title {
+      font-size: 12px;
+      color: #999999;
+      line-height: 17px;
+      margin-top: 4px;
+      margin-bottom: -4px;
+
+      span {
+        color: #f5a92b;
+      }
+    }
+
+  }
+
+  .el-dialog {
+    margin: 0 0 0 auto;
+    border-radius: 0;
+    height: 100%;
+    overflow: hidden;
+    // box-shadow: 0 0 14px 0 #ddd;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    .warm-prompt {
+      font-size: 12px;
+      color: #666666;
+      padding-bottom: 26px;
+      line-height: 17px;
+    }
+
+    .el-dialog__header {
+      padding: 24px 24px 16px;
+
+      .ttd-dialog-title {
+        font-size: 18px;
+        color: #4B5973;
+        letter-spacing: 0;
+        font-weight: bold;
+        line-height: 25px;
+
+        span {
+          vertical-align: middle;
+        }
+      }
+
+      .title-close {
+        font-size: 18px;
+        vertical-align: middle;
+        color: #C9CDDC;
+        margin-right: 8px;
+        cursor: pointer;
+      }
+    }
+
+    .el-dialog__body {
+      padding: 8px 24px 24px;
+      overflow: auto;
+      flex: 1;
+    }
+
+    .el-dialog__footer {
+      text-align: center;
+    }
+  }
+}
+
+.dialog-title {
+  font-size: 16px;
+  line-height: 50px;
+  color: #2E6BE6;
+  border-bottom: 1px solid #E0E0E0;
+}
+
+.el-dialog__headerbtn {
+  font-size: 24px;
+}
+
+
+// 为了使 dialog 冲右边弹出
+
+@keyframes dialog-fade-right-in {
+  0% {
+    transform: translate3d(100%, 0, 0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-right-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(100%, 0, 0);
+    opacity: 0;
+  }
+}
+
+.ttd-dialog.dialog-fade-enter-active {
+  -webkit-animation: dialog-fade-right-in .3s;
+  animation: dialog-fade-right-in .3s
+}
+
+.ttd-dialog.dialog-fade-leave-active {
+  -webkit-animation: dialog-fade-right-out .8s;
+  animation: dialog-fade-right-out .8s
+}
+
+.ttd-dialog.close-animate.dialog-fade-enter-active {
+  animation: none;
+}
+
+.ttd-dialog.close-animate.dialog-fade-leave-active {
+  animation: none;
+}
+
+.avatar-small {
+  width: 32px;
+  height: 32px;
+  background-size: cover;
+  border-radius: 50%;
+  background-color: #CCCCCC;
+}
+
+/* 产品的小标识 */
+.widget-new {
+  transform: scale(0.6);
+  transform-origin: center;
+  font-size: 12px;
+  display: inline-block;
+  background: #ff553c;
+  border-radius: 16px;
+  padding: 3px 7px 3px 3px;
+  margin: -3px -6px;
+  line-height: 1.2em;
+  white-space: nowrap;
+  color: #fff;
+}
+
+.widget-warring {
+  color: #ff553c;
+  padding-left: 2px;
+  font-size: 14px;
+}
+
+.ttd-tree {
+  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
+    background-color: #3D82F7;
+    border-color: #3D82F7;
+  }
+}
+
+.warm-prompt {
+  color: #222;
+  font-size: 14px;
+
+  .num {
+    font-weight: normal;
+    color: #1cb685;
+  }
+}
+
+.ttd-tooltip {
+  max-width: 400px;
+  background: #FFF3DE !important;
+  border: 1px solid #F3D7A9 !important;
+  border-radius: 2px;
+  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.04) !important;
+  font-size: 14px !important;
+  color: #6C6760 !important;
+  word-break: break-all;
+
+  &.el-tooltip__popper[x-placement^="top"] .popper__arrow {
+    border-top-color: #F3D7A9 !important;
+
+    &::after {
+      border-top-color: #FFF3DE !important;
+    }
+  }
+
+  &.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
+    border-bottom-color: #F3D7A9 !important;
+
+    &::after {
+      border-bottom-color: #FFF3DE !important;
+    }
+  }
+
+  &.el-tooltip__popper[x-placement^="left"] .popper__arrow {
+    border-left-color: #F3D7A9 !important;
+
+    &::after {
+      border-left-color: #FFF3DE !important;
+    }
+  }
+
+  &.el-tooltip__popper[x-placement^="right"] .popper__arrow {
+    border-right-color: #F3D7A9 !important;
+
+    &::after {
+      border-right-color: #FFF3DE !important;
+    }
+  }
+}
+
+.tooltip-questioin-mark {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 1px solid #666;
+  line-height: 14px;
+  font-size: 14px;
+  border-radius: 50%;
+  text-align: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin-left: 10px;
+  vertical-align: middle;
+}
+
+/* 分页样式 每页条数样式 */
+.el-pagination {
+  .el-pagination__sizes {
+    .el-select {
+      .el-input__inner {
+        border-radius: 32px;
+      }
+    }
+  }
+}
+
+.i-b {
+  display: inline-block;
+}
+
+@import "./input.less";
+
+.el-scrollbar__view.el-autocomplete-suggestion__list {
+  padding-bottom: 10px
+}
+
+.upload-btn.el-button--small {
+  padding: 9px 37px !important;
+  border-color: #2E6BE6;
+  color: #2E6BE6;
+
+  .icon {
+    margin-right: 3px;
+    color: #2E6BE6;
+    font-size: 12px;
+  }
+}
+
+.el-switch .el-switch__core {
+  border-color: rgba(0, 0, 0, 0.25);
+}
+
+.empty-text {
+  font-size: 14px;
+  color: #C9CDDC
+}
+
+.ttd-auth-form.margin0 {
+  margin: 0;
+}
+
+// 有些时候需要不撑满父元素的无数据组件
+.un-full-no-data {
+  position: relative !important;
+
+  .content {
+    top: unset !important;
+    transform: unset !important;
+  }
+}
+
+
+// 超出一行省略
+.ellipsls {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 20px;
+}
+
+// key-value 格子样式展示
+.row-key-value-info {
+  display: -ms-flex;
+  display: flex;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden !important;
+  border: 1px solid #D9DBE2;
+
+  .info-label {
+    border-right: 1px solid #D9DBE2;
+    background: #F8F8FA;
+    color: #7C879B;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .info-label,
+  .info-value {
+    padding: 8px 12px
+  }
+
+  .info-value {
+    flex: 1 1 0%;
+    text-align: left;
+  }
+}
+
+.row-key-value-info+.row-key-value-info {
+  border-top: 0;
+}
+
+// 数据分块样式
+.data-area {
+  margin-bottom: 16px;
+}
+
+.data-area + .data-area {
+  border-top: 1px solid #d9dbe2;
+  padding-top: 24px;
+}
+
+.export-loading {
+  .el-icon-loading, .el-loading-text {
+    .white();
+  }
+}

package/src/styles/common.scss

@@ -0,0 +1,22 @@
+@import '@/styles/components/reset.scss';
+
+@import '@/styles/base.scss';
+
+@import '@/styles/components/table.scss';
+
+@import '@/styles/components/input.scss';
+
+@import '@/styles/components/button.scss';
+
+@import '@/styles/components/el-pagination.scss';
+
+@import '@/styles/components/file-group.scss';
+
+@import '@/styles/components/message.scss';
+
+
+
+.wh-100 {
+  width: 100%;
+  height: 100%
+}