.comp-container {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 32px 27px 27px 29px;

  .comp-preview {
    box-sizing: border-box;
    width: 345px;
    height: 100%;
    margin-right: 68px;

    .comp-housing {
      width: 95%;
      height: 250px;
      margin: 0 auto;
      border: 1px solid #CCCCCC;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      overflow: hidden;

      .comp-housing-header {
        background-color: #ffa100;
        color: #ffffff;
        padding: 5px 10px;
      }

      .comp-housing-content {
        .comp-housing-content-api,
        .comp-housing-content-data {
          display: flex;
          padding: 5px;

          .comp-housing-content-api-in,
          .comp-housing-content-api-out,
          .comp-housing-content-data-in,
          .comp-housing-content-data-out {
            flex: 1;
          }

          .comp-housing-content-api-out,
          .comp-housing-content-data-out {
            text-align: right;
          }
        }
      }

    }
  }

  .comp-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;

    .header {
      flex-shrink: 0;
      margin-bottom: 20px;

      .title {
        font-size: 22px;
        font-weight: 700;
      }

      .update-time {
        color: #888888;
      }
    }

    .extra {
      flex-shrink: 0;

      .extra-font {
        font-size: 18px;
        font-weight: 700;
      }
    }

    .description {
      flex-shrink: 0;
      max-height: 80px;
      overflow-y: auto;
      margin-bottom: 16px;
    }

    .markdown-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      background-color: #fafafa;
      border-radius: 4px;
      min-height: 200px;

      // Markdown 样式优化
      :global {
        // 标题样式
        h1, h2, h3, h4, h5, h6 {
          margin-top: 24px;
          margin-bottom: 16px;
          font-weight: 600;
          line-height: 1.25;
        }

        h1 {
          padding-bottom: 0.3em;
          border-bottom: 1px solid #eaecef;
        }

        // 段落样式
        p {
          margin-bottom: 16px;
          line-height: 1.6;
        }

        // 代码块样式
        code {
          font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        }

        pre {
          margin: 16px 0;
          overflow: auto;
        }

        pre code {
          background: transparent !important;
          padding: 0 !important;
        }

        // 列表样式
        ul, ol {
          padding-left: 2em;
          margin-bottom: 16px;
        }

        li {
          margin-bottom: 0.25em;
        }

        // 引用样式
        blockquote {
          padding: 0 1em;
          color: #6a737d;
          border-left: 0.25em solid #dfe2e5;
          margin: 16px 0;
        }

        // 链接样式
        a {
          color: #165DFF;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }

        // 表格样式
        table {
          border-spacing: 0;
          border-collapse: collapse;
          margin: 16px 0;
          width: 100%;
        }

        table tr {
          background-color: #fff;
          border-top: 1px solid #c6cbd1;
        }

        table tr:nth-child(2n) {
          background-color: #f6f8fa;
        }

        table th,
        table td {
          padding: 6px 13px;
          border: 1px solid #dfe2e5;
        }

        table th {
          font-weight: 600;
          background-color: #f6f6f6;
        }

        // 水平分割线
        hr {
          height: 0.25em;
          padding: 0;
          margin: 24px 0;
          background-color: #e1e4e8;
          border: 0;
        }

        // 图片样式
        img {
          max-width: 100%;
          height: auto;
          border-radius: 4px;
        }
      }
    }

    .handel-box {
      flex-shrink: 0;
      padding: 16px 0;
    }

    .params {
      box-sizing: border-box;
      padding: 10px 0 25px 20px;
      background-color: #fbfbfb;
    }
  }
}

.recommend {
  padding: 20px;


  :global(.arco-col) {
    padding: 10px;
  }

  :global(.arco-card-body) {
    display: flex;
  }

  .img-box {
    width: 80px;
    height: 110px;
    margin-right: 10px;
  }

  .info-box {
    width: calc(100% - 100px);

    .info-score {
      display: flex;
    }

    .info-author {
      margin-bottom: 40px;
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 溢出部分用省略号表示 */
    }

    .info-rate {
      display: flex;
      align-items: center;
    }
  }

  .comp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(90deg, #64b5f6, #2175f3);
    color: #ffffff;
  }
}