.cropper-content {
  .cropper {
    width: auto;
    height: 300px;
  }
}
.img-cropper-wrap {
  .yee-modal {
    top: 20px;
  }
}

#vditor {
  min-height: 200px;
  .vditor-preview__action {
    display: none !important;
  }
  .vditor-toolbar {
    padding-left: 5px !important;
  }
  .vditor-ir pre.vditor-reset {
    padding: 10px !important;
  }
}

.vditor-render {
  .vditor-reset p > img {
    margin: 0;
    box-shadow: none;
  }
}

.market-detail-title {
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 24px;
}
.market-main-container {
  background-color: #fff;
  ol,
  ul,
  dl {
    margin-top: 0;
    margin-bottom: 0;
  }
  .content {
    overflow-y: auto;
    .title {
      height: 42px;
      font-size: 30px;
      font-family:
        PingFangSC-Semibold,
        PingFang SC;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 42px;
      margin-bottom: 24px;
    }
    .product-wrap {
      display: flex;
      .product-detail {
        flex: 1;
        height: 420px;
        overflow-y: auto;
        margin-right: 24px;
      }
      .product-msg {
        width: 256px;
        .logo {
          width: 256px;
          height: 172px;
          margin-bottom: 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .btn {
          width: 256px;
          height: 40px;
          border-radius: 3px;
          margin-bottom: 24px;
          font-size: 16px;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          line-height: 40px;
          text-align: center;
          margin-bottom: 40px;
        }
        .operter-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 32px;
          margin-bottom: 40px;
          .operter-left,
          .operter-right {
            width: 90px;
            height: 32px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #d8d8d8;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            cursor: pointer;
            .icon {
              width: 13px;
              height: 13px;
              margin-right: 10px;
            }
          }
        }
        .msg-list {
          .msg-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            .label {
              height: 20px;
              font-size: 14px;
              font-family:
                PingFangSC-Regular,
                PingFang SC;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.65);
              line-height: 20px;
              margin-right: 16px;
              flex-shrink: 0;
            }
            .value {
              font-size: 14px;
              font-family:
                PingFangSC-Regular,
                PingFang SC;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.65);
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}

.market-list-container {
  background-color: #fff;
  min-height: 100vh;
  ol,
  ul,
  dl {
    margin-top: 0;
    margin-bottom: 0;
  }
  & > .header {
    height: 56px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-family:
      PingFangSC-Medium,
      PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid #efefef;
  }
  .content-wrap {
    padding: 24px 16px 0;
    height: calc(100vh - 56px);
    overflow-y: auto;
    & > .content {
      min-width: 1260px !important;
      margin: 0 auto;
      .class-list {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        .class-item {
          padding: 0 24px;
          height: 32px;
          background: #eeeff2;
          border-radius: 16px;
          margin-right: 12px;
          font-size: 14px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
          line-height: 32px;
          text-align: center;
          cursor: pointer;
          &:last-child {
            margin-right: 0;
          }
        }
        .active {
          background: #52bf63;
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }
      .other-class-content {
        width: 100%;
        background: #f6f6f6;
        border-radius: 6px;
        padding: 28px 24px;
        margin-bottom: 24px;
        .other-class-wrap {
          display: flex;
          align-items: center;
          .other-class-label {
            width: 44px;
            height: 20px;
            font-size: 14px;
            font-family:
              PingFangSC-Medium,
              PingFang SC;
            font-weight: 500;
            color: #000000;
            line-height: 20px;
          }
          .other-class-list {
            display: flex;
            align-items: center;
            .other-class-item {
              padding: 0 16px;
              height: 28px;
              border-radius: 15px;
              font-size: 14px;
              font-family:
                PingFangSC-Regular,
                PingFang SC;
              font-weight: 400;
              color: #000000;
              line-height: 28px;
              text-align: center;
              cursor: pointer;
            }
            .active {
              background: rgba(82, 191, 99, 0.1);
              font-family:
                PingFangSC-Medium,
                PingFang SC;
              font-weight: 500;
              color: #52bf63;
            }
          }
        }
      }
      .tabs-list {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        .tabs-item {
          width: 56px;
          height: 20px;
          font-size: 14px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 20px;
          margin-right: 24px;
          cursor: pointer;
          &:last-child {
            margin-right: 24px;
          }
        }
        .active {
          font-family:
            PingFangSC-Medium,
            PingFang SC;
          font-weight: 500;
          color: #52bf63;
        }
      }
      .template-wrap {
        .template-list {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-right: -20px;
          .template-item {
            width: 300px;
            margin-bottom: 16px;
            margin-right: 20px;
            flex-shrink: 0;
          }
        }
        .load-text {
          font-size: 12px;
          line-height: 14px;
          height: 14px;
          color: #999;
          padding-top: 4px;
          text-align: center;
        }
      }
    }
  }
}

.template-item-wrap {
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 6px;
  &:hover {
    box-shadow:
      0px 8px 21px 0px rgba(0, 0, 0, 0.08),
      0px 3px 8px -5px rgba(0, 0, 0, 0.12);
  }
  .header {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 6px 6px 0px 0px;
    }
  }
  .content {
    padding: 12px 16px 16px;
    .title {
      height: 20px;
      font-size: 14px;
      font-family:
        PingFangSC-Medium,
        PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 20px;
      overflow: hidden;
      white-space: nowrap;
      word-break: break-all;
      text-overflow: ellipsis;
      margin-bottom: 8px;
    }
    .msg-wrap {
      display: flex;
      align-items: center;
      .avatar {
        width: 32px;
        height: 32px;
        margin-right: 8px;
      }
      .name {
        height: 20px;
        font-size: 14px;
        font-family:
          PingFangSC-Regular,
          PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 20px;
        flex: 1;
      }
      .collect {
        margin-right: 17px;
      }
      .collect,
      .praise {
        display: flex;
        align-items: center;
        .icon {
          width: 13px;
          height: 13px;
          margin-right: 3px;
          cursor: pointer;
          color: rgba(0, 0, 0, 0.45);
        }
        .num {
          width: 26px;
          height: 20px;
          font-size: 14px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
          line-height: 20px;
        }
      }
    }
  }
}