.cropper-content {
  .cropper {
    width: auto;
    height: 300px;
  }
}
.img-cropper-wrap {
  .ant-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;
        }
      }
    }
  }
}

.yee-add-page-drawer-wrap {
  .ant-form-item {
    margin-bottom: 8px;
  }
}

.yee-add-page  {
  .ant-select-selection {
    border-right: none;
  }
}

.yee-page-container {
  .close-icon-content {
    position: absolute;
    top: 0;
    padding: 10px 16px;
    left: 100px;
    right: 0;
    background: #fff;
    z-index: 99;
    height: 53px;
  }
  .bar_page-container{
    position: relative;
    .tab{
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      background-color: rgba(242, 242, 242, 1);

      .tab-item{
        flex: 1;
        width: 33%;
        text-align: center;
        padding: 10px;
        cursor: pointer;
        color: #333;
      }
      .active{
        background: #fff;
        color: @primary-color;
      }
    }
    .tab-pane{
      color: #333;
      background: #fff;
    }
    .tab-pane{
      .maps-wrapper {
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
        justify-content: space-between;
      }
       .ant-tree {
        width: 100%;
        li {
          .ant-tree-node-content-wrapper:hover {
            background: transparent;
          }
          &:hover{
            background: #eee;
          }
          .ant-tree-node-content-wrapper {
            width: calc(100% - 26px);
          }
        }
        .ant-tree-treenode-selected{
          background-color: #eee;
          position: relative;
          &::after{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            border-right: 3px solid;
            border-color: @primary-color;
            content: "";
          }
          .ant-tree-node-content-wrapper.ant-tree-node-selected{
            background-color: transparent;
          }
        }
      }

      .map-box {
        position: relative;
        height: 130px;
        width: 130px;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 12px;

        .pre-img {
          background: #F7F8FA;
          border-radius: 6px;
          padding: 8px;
        }
        img {
          object-fit: cover;
          width: 130px;
          height: 84px;
          border-radius: 6px;
          background-color: #fff;
          padding: 8px;
        }
        .custom-img {
          background: #FFFFFF;
          border-radius: 5px;
          border: 1px dashed #D8D8D8;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 7px 8px;
        }
        p {
          text-align: center;
          margin-top: 8px;
          color: #000;
        }

        .mask-wrapper {
          height: 100px;
          position: absolute;
          width: 130px;
          top: 0;
          background-color: rgba(0,0,0,0.1);
          border-radius: 6px;

          & > div {
            @apply w-full absolute bottom-4 flex gap-2  items-center justify-center;
            bottom: 8px;
            .ant-btn {
              width: 53px;
            }
          }
        }
        .custom-mask {
          height: 100px;
          position: absolute;
          width: 130px;
          top: 0;
          border-radius: 6px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 0;
          background: #FFFFFF;
          box-shadow: 0px 5px 13px 0px rgba(0,0,0,0.0800), 0px 2px 5px -3px rgba(0,0,0,0.1200);
          border-radius: 5px;
          padding: 8px;
          img {
            object-fit: cover;
            width: 130px;
            height: 84px;
            border-radius: 6px;
            padding: 8px;
          }
          svg {
            fill: @primary-color;
          }
        }
      }
    }
  }
  .search-panel{
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);
  }
  .page_list{
    color: #333;
     .ant-tree {
      width: 100%;
      li {
        .ant-tree-node-content-wrapper:hover {
          background: transparent;
        }
        &:hover{
          background: #eee;
        }
      }
      .ant-tree-treenode-selected{
        background-color: #eee;
        position: relative;
        &::after{
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          border-right: 3px solid;
          border-color: @primary-color;
          content: "";
        }
        .ant-tree-node-content-wrapper.ant-tree-node-selected{
          background-color: transparent;
        }
      }
    }
  }
}
