.columnindex-page {
  padding-top: 20px;
  :global {
    .columnindex-left-wrapper {
      min-width: 414px;
      margin-right: 30px;
      margin-left: -10px;
      padding: 0 10px;
      position: sticky;
      top: 96px;
      height: calc(100vh - 146px);
      overflow: auto;

      //滚动条样式
      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 0px;
      }

      .columnindex-title {
        font-size: 18px;
        font-weight: bold;
        margin-left: 5px;
      }
      .columnindex-list-wrapper {
        margin: 0 -10px;
        &::-webkit-scrollbar {
          display: none;
        }
        .spec-list-item {
          width: 394px;
          padding: 20px;
          border-radius: 8px;
          background: #fff;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
          margin: 10px;
          box-sizing: border-box;
          .spec-item-img {
            width: 52px;
            height: 52px;
          }
          .spec-item-lh20 {
            line-height: 20px;
          }
          .spec-item-author-time {
            color: #999;
            width: 100%;
          }
          .spec-item-content {
            height: 40px;
            line-height: 1.45;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: normal;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
        .spec-list-active-item {
          border: 2px solid #faa12f;
        }
        .my-column-box {
          border-top: 8px solid #faa12f;
          padding-top: 16px;
        }
      }
    }
    .columnindex-middle-wrapper {
      flex: auto;
      .columnindex-author-wrapper {
        padding: 20px 20px 30px 60px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.51);
        backdrop-filter: blur(4px);
        color: #ffffff;
        .columnindex-author-img-wrapper {
          position: relative;
          width: 160px;
          height: 160px;
          border: 3px solid #fff;
          margin-right: 30px;
          box-sizing: border-box;

          .ant-upload.ant-upload-select {
            border-radius: 0;
            &:hover {
              .hover-img {
                display: flex;
              }
            }
          }
          .columnindex-author-img {
            width: 100%;
            height: 100%;
          }
          .hover-img {
            background: rgba(0, 0, 0, 0.4);
            display: none;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }
          .columnindex-author-btn {
            padding: 5px 16px;
            line-height: 22px;
            border-radius: 100px;
            background: #faa12f;
            white-space: nowrap;
            position: absolute;
            bottom: -17px;
            left: 50%;
            z-index: 3;
            transform: translateX(-50%);
          }
        }
        .column-name {
          font-size: 26px;
          font-weight: bold;
          line-height: 36px;
          margin-bottom: 5px;
        }
        .columnindex-count-wrapper {
          border-radius: 2px;
          background: rgba(255, 255, 255, 0.14);
          padding: 10px 20px;
          .columnindex-count-item {
            margin-right: 40px;
            text-align: center;
            cursor: pointer;
            &:last-child {
              margin-right: 0;
            }
            &:first-child {
              cursor: default;
            }
            .columnindex-count {
              font-size: 36px;
              font-weight: bold;
              color: #ffe8a8;
              line-height: 44px;
            }
            .columnindex-count-title {
              line-height: 22px;
            }
          }
        }
        .columnindex-label-line {
          .columnindex-label {
            line-height: 24px;
            padding: 0 10px;
            border-radius: 100px;
            background: rgba(255, 255, 255, 0.23);
            margin: 0 10px 10px 0;
          }
        }
        .columnindex-introduce {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          white-space: normal;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
      .columnindex-middle-content {
        border-radius: 4px;
        background: #fff;
        padding: 20px;
        position: relative;
        min-height: 500px;
        .columnindex-right-title {
          font-size: 18px;
          font-weight: bold;
          line-height: 25px;
          padding-bottom: 20px;
          margin-bottom: 20px;
          border-bottom: 1px solid #f0f1f3;
        }
        .columnindex-note-list-wrapper {
          .note-item {
            border-bottom: 1px solid #f0f1f3;
            &:last-child {
              border-bottom: none;
            }
          }
        }
      }
    }
    .columnindex-right-wrapper {
      min-width: 112px;
      margin-left: 30px;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.06);
      text-align: center;
      font-size: 16px;
      padding: 10px 0;
      .columnindex-right-title {
        position: relative;
        margin-bottom: 25px;
        font-weight: bold;
        &::after {
          content: '';
          width: 30px;
          height: 3px;
          border-radius: 10px;
          position: absolute;
          bottom: -6px;
          left: 50%;
          transform: translateX(-50%);
          background-color: #faa12f;
        }
      }
      .columnindex-right-svg {
        width: 68px;
        height: 68px;
        display: block;
        margin: 0 auto;
        cursor: pointer;
        border-radius: 8px;
      }
      .columnindex-svg-new {
        box-shadow: 3px 4px 11px rgba(55, 108, 187, 0.18);
      }
      .columnindex-svg-center {
        box-shadow: 3px 4px 11px rgba(239, 206, 123, 0.42);
      }
      .columnindex-right-text {
        margin-bottom: 30px;
        margin-top: 5px;
      }
    }
  }
}
.columnindex-drawer {
  :global {
    .ant-drawer-body {
      padding: 0 !important;
    }
    .columnindex-tab-wrapper {
      .ant-tabs-nav {
        margin: 0;
      }
    }
    .column-tabs {
      display: inline-block;
      width: 74px;
      text-align: center;
    }
    .css-dev-only-do-not-override-zl9ks2.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
      color: #faa12f;
    }
    .css-dev-only-do-not-override-zl9ks2.ant-tabs .ant-tabs-tab:hover {
      color: #faa12f;
    }
    .css-dev-only-do-not-override-zl9ks2.ant-tabs .ant-tabs-ink-bar {
      background: #faa12f;
    }
    .columncenter-content {
      padding: 0 20px;
      .columncenter-content-item {
        border-bottom: 1px solid #f8f8fa;
        padding: 20px 0;
        &:last-child {
          border-bottom: none;
        }
        .columncenter-title {
          font-size: 16px;
          line-height: 22px;
          font-weight: bold;
          color: #000000;
          cursor: pointer;
          &:hover {
            color: #faa12f;
          }
        }

      }
      .columncenter-content-btn {
        display: inline-block;
        text-align: center;
        line-height: 29px;
        width: 87px;
        height: 29px;
        border-radius: 42px;
        background-color: #F1A84A;
        color: #fff;
        cursor: pointer;
      }
      .columncenter-tag {
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        color: #2ba471;
        background: #e3f9e9;
        display: inline-block;
        margin-bottom: 10px;
      }
      .columncenter-content-disclosure {
        font-weight: 600;
        margin: 10px 0;
      }
      .columncenter-operate-btn {
        width: 87px;
        height: 29px;
        line-height: 29px;
        border-radius: 42px;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
      }
      .content-disclosure {
        margin: 20px 0;
        color: #999;
        .btn-disabled {
          background: #e5efff;
          // color: #faa12f;
        }
        :last-child {
          display: inline-block;
          margin-left: 8px;
        }
      }
      .columncenter-content-img-time {
        display: flex;
        align-items: center;
        margin: 10px 0 0;
        font-size: 14px;
        img {
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-right: 10px;
          border-radius: 50%;
        }
      }
      .columncenter-content-item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item-title {
          font-size: 14px;
          color: #F1A84A;
          cursor: pointer;
        }
      }
      .columncenter-content-child {
        margin-left: 20px;
        font-size: 14px;
        margin-bottom: 40px;
        .child-img-time {
          display: flex;
          align-items: center;
          justify-content: space-between;
          img {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            border-radius: 50%;
          }
        }
      }

      .detele-btn {
        background: #fff0ed;
        color: #d54941;
      }
      .update-btn {
        background: #faa12f;
        color: #ffffff;
      }
      .cancel-btn {
        background: #e5efff;
        color: #faa12f;
      }
    }
    .reject-content {
      padding: 24px 32px;
    }
  }
}
.column-upload {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  :global {
    .ant-upload.ant-upload-select {
      border: none !important;
      background: none !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      margin-inline-end: 0 !important;
      overflow: hidden;
    }
  }
}
.gray-tips {
  color: #999999;
}
.column-empty-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 1280px) and (min-width: 1110px) {
  .columnindex-page {
    :global {
      .columnindex-left-wrapper {
        min-width: 305px;
        margin-right: 20px;
        .columnindex-list-wrapper {
          .spec-list-item {
            width: 295px;
          }
        }
      }
      .columnindex-middle-wrapper {
        .columnindex-author-wrapper {
          padding: 20px;
        }
      }
      .columnindex-right-wrapper {
        margin-left: 20px;
      }
    }
  }
}
@media screen and (max-width: 1110px) {
  .columnindex-page {
    :global {
      .columnindex-left-wrapper {
        min-width: 305px;
        margin-right: 10px;
        .columnindex-list-wrapper {
          .spec-list-item {
            width: 295px;
          }
        }
      }
      .columnindex-middle-wrapper {
        .columnindex-author-wrapper {
          padding: 20px;
        }
      }
      .columnindex-right-wrapper {
        margin-left: 10px;
      }
    }
  }
}
