mfyx_web/src/Indepth/css/ArticleCard.module.scss

.article-card-wrapper {
  display: flex;
  padding: 20px;
  // margin-bottom: 20px;
  background: #ffffff;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  &:hover {
    box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.2);
  }
  :global {
    .card-img {
      width: 109px;
      height: 141px;
      margin-right: 20px;
    }
    .card-content {
      flex: 1;
      .display-inline {
        display: inline-block;
      }
      .card-title {
        font-size: 16px;
        line-height: 22px;
        font-weight: bold;
        color: #000000;
        &:hover {
          color: #faa12f;
        }
        .article-recommend-icon {
          width: 22px;
          height: 22px;
          margin-right: 5px;
          display: inline-block;
          vertical-align: middle;
        }
        .card-tag {
          display: inline-block;
          vertical-align: middle;
          background: #f2e8cc;
          color: #928563;
          height: 22px;
          text-align: center;
          width: 65px;
          line-height: 22px;
          border-radius: 12px;
          margin-right: 10px;
        }
        .card-tag-jy {
          background: linear-gradient(90deg, #8120fd 0%, #c191ff 100%);
        }
        .card-tag-gd {
          background: linear-gradient(90deg, #fecd18 0%, #ffdc5b 100%);
        }
        .card-tag-sl {
          background: linear-gradient(90deg, #b39149 0%, #cfc09f 100%);
        }
        .card-tag-zj {
          background: linear-gradient(90deg, #2a65f5 0%, #628ffd 100%);
        }
        .card-tag-mf {
          background: linear-gradient(90deg, #f57126 0%, #ff9c65 100%);
        }
        .card-title-span {
          vertical-align: middle;
        }
        .card-name-space {
          word-spacing: 5px;
        }
      }
      .card-title-wrapper {
        display: inline;
        vertical-align: middle;
      }
      .card-label {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        font-weight: bold;
        margin-left: 20px;
        vertical-align: middle;
      }
      .card-label-click {
        color: #faa12f;
        cursor: pointer;
      }
      .card-gray-text {
        color: #999999;
      }
      .card-unclick-text {
        color: #FFE097;
      }
      .card-annotation {
        line-height: 21px !important;
        color: #666666;
        height: 63px;
        margin: 15px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; // 超出多少行
        -webkit-box-orient: vertical;
        word-break: break-word;
        p,
        div,
        span {
          font-size: 14px !important;
          margin: 0 !important;
          line-height: 21px !important;
        }
      }
      .card-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666666;
        .people-icon {
          margin-right: 5px;
          vertical-align: middle;
          width: 19px;
          height: 19px;
        }
        .people-wrapper {
          cursor: pointer;
        }
        .people-name {
          color: #faa12f;

          vertical-align: middle;
        }
        .footer-sm-icon {
          margin-left: 30px;
          margin-right: 3px;
        }
        .pv-icon {
          color: #999999;
        }
        .collect-cout {
          cursor: pointer;
        }
        .collect-icon {
          color: #fecd18;
        }
      }
      .card-time-span {
        align-self: flex-end;
        margin-right: 10px;
        vertical-align: middle;
        color: #666666;
      }
    }
  }
}