.container {
  .container-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 4px 0;

    .mk-card-item {
      position: relative;

      display: flex;
      flex-direction: column;
      align-items: start;
      width: 188px;
      //   height: 244px;
      background-color: #ffffff;
      border-radius: 10px;
      margin-right: 8px;
      padding-bottom: 12px;

      .card-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #ffe7b2;
        color: #b97a00;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 4px;
        z-index: 2;
      }

      .card-img {
        width: 188px;
        height: 114px;
        border-radius: 10px;
        object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
        flex-shrink: 0; /* 防止图片被压缩 */
      }

      .card-content {
        box-sizing: border-box;
        padding: 10px 12px 0 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        width: 100%;
        flex: 1; /* 让内容区域占据剩余空间 */
        overflow: hidden; /* 防止内容溢出 */
      }

      .card-title-column {
        display: flex;
        align-items: start;
        flex-direction: column;
        width: 100%;
      }

      .card-title {
        font-size: 16px;
        font-weight: bold;
        color: #222;
        width: 100%;
        /* 限制标题最多显示两行 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        max-height: 2.8em; /* 2行的高度 */
      }

      .card-tags {
        display: flex;
        flex-direction: row;
        align-items: start;
        padding: 6px 0;
      }

      .card-tag {
        color: #ff6600;
        font-size: 10px;
        border-radius: 4px;
        padding: 0 6px;
        margin-left: 2px;
        border: 1px solid #ff6600;
      }

      .card-desc {
        font-size: 13px;
        color: #888;
        margin-top: 2px;
      }

      .card-bottom-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        width: 100%;
      }

      .card-price-row {
        .card-price-fu {
          color: #ff6600;
          font-size: 11px;
          font-weight: normal;
        }

        .card-price {
          color: #ff6600;
          font-size: 16px;
          font-weight: bold;
        }
        .card-unit {
          font-size: 11px;
          color: #888;
          font-weight: normal;
          margin-left: 2px;
        }
      }

      .card-btn {
        background: #ff6600;
        color: #fff;
        font-size: 15px;
        border-radius: 20px;
        padding: 0 18px;
        height: 32px;
        line-height: 32px;
      }
    }
  }
}