FE_sandTable/src/styles/index.scss

@import './transition.scss';

@font-face {
  font-family: din;
  src: url('../assets/fonts/din.otf');
}

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin mul-ellipsis($num) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis {
  @include ellipsis();
}

.mul-ellipsis2 {
  @include mul-ellipsis(2);
}

.mul-ellipsis3 {
  @include mul-ellipsis(3);
}

html {
  height: 100%;
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  height: 100%;
}

// global css
.block {
  @apply p-5;
  @apply rounded-lg;
  @apply bg-white;
}

.inline-form .el-form-item {
  margin-bottom: 0;
}

.msgbox-error {
  width: 100%;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  width: 5px;
  border-radius: 6px;
  background: #d7d7d7;
}

.card-list {
  .left {
    @apply w-[241px] min-w-[241px] pr-5 py-4 border-r border-solid border-[#e9eff2];
  }
  .products {
    @apply max-h-[calc(100vh-150px)] pr-1 overflow-auto;
    li {
      @apply relative p-5 pt-7 mb-5 rounded-[10px] cursor-pointer border border-solid border-[transparent] bg-[url('@/assets/images/10.png')] bg-[length:100%_100%] bg-no-repeat;
      &.active {
        @apply border-[#CAE0FF];
      }
    }
    .del {
      @apply absolute top-0 right-0;
    }
    h6 {
      @apply text-[#14436b] font-semibold;
    }
    .type,
    .status {
      @apply my-[15px] text-sm text-[#333];
    }
    .meta {
      @apply mt-[15px] text-sm text-[#8798a9];
    }
  }
  .right {
    @apply flex-1 w-[calc(100vw-533px)] max-h-[calc(100vh-100px)] overflow-auto px-5 pt-2;
  }
}
// .c-auto {
//   @apply w-[calc(100vw-533px)] max-h-[calc(100vh-160px)] overflow-auto;
// }
.c-table {
  @apply rounded-[10px];
  th.el-table__cell {
    @apply bg-[#F8FBFC];
  }
  th.el-table__cell > .cell {
    @apply text-[#006BFF];
  }
  .el-input__inner {
    @apply px-2;
  }
}
.filter {
  @apply inline-flex items-center;
  .select {
    @apply relative mr-[12px];
    .icon {
      @apply absolute top-[12px] left-5;
    }
    .el-select {
      @apply w-[170px];
      .el-input__inner {
        @apply pl-[41px] rounded-[18px] border-[#dfe9f8];
      }
    }
  }
  .add-btn {
    @apply inline-flex items-center h-[36px] px-[24px] text-sm text-white rounded-[18px] cursor-pointer;
    background: linear-gradient(-36deg, #006bff, #2ab1ff);
    border: 1px solid #ffffff;
    .icon {
      @apply mr-[8px];
    }
    &.not-allow {
      background: none;
      @apply cursor-not-allowed bg-[#b1b1b1];
    }
  }
}
.dia-btn {
  padding: 11px 26px;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(-36deg, #006bff, #2ab1ff);
  border-radius: 18px;
  cursor: pointer;
  &.cancel {
    font-size: 600;
    color: #333;
    background: #f4f8fc;
  }
}