schoolNews/schoolNewsWeb/src/views/public/article/card/HotArticleCard.vue

<template>
  <div class="article-card">
    <div class="article-image">
      <div class="image-placeholder"></div>
      <div class="article-tag">精选文章</div>
    </div>
    <div class="article-content">
      <h3 class="article-title">新时代中国特色社会主义发展历程</h3>
      <p class="article-desc">
        习近平新时代中国特色社会主义思想是当代中国马克思主义、二十一世纪马克思主义，是中华文化和中国精神的时代精华，其核心要义与实践要求内涵丰富、意义深远。
      </p>
      <div class="article-footer">
        <div class="meta-tag">
          <el-icon><Document /></el-icon>
          <span>热门文章</span>
        </div>
        <span class="view-count">2.1w次浏览</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Document } from '@element-plus/icons-vue';
</script>

<style lang="scss" scoped>
.article-card {
  background: #FFFFFF;
  border-radius: 0.625em;
  overflow: hidden;
  box-shadow: 0px 0.5em 1.25em 0px rgba(164, 182, 199, 0.2);
  transition: all 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;

  &:hover {
    transform: translateY(-0.25em);
    box-shadow: 0px 0.75em 1.75em 0px rgba(164, 182, 199, 0.3);
  }

  .article-image {
    width: 100%;
    aspect-ratio: 384 / 221;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;

    .image-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)" /></svg>');
      }
    }

    .article-tag {
      position: absolute;
      top: 0;
      left: 0;
      background: #D1AD79;
      border-radius: 0px 0px 0.625em 0px;
      padding: 0.2em 1.6em;
      min-width: 5.4em;
      min-height: 2.1em;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 0.875em;
      line-height: 1.57;
      color: #FFFFFF;
    }
  }

  .article-content {
    padding: 5.2% 5.7% 5.7% 5.7%;
    flex: 1;
    display: flex;
    flex-direction: column;

    .article-title {
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 1.25em;
      line-height: 1.4;
      color: #141F38;
      margin: 0 0 0.2em 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .article-desc {
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.57;
      color: rgba(0, 0, 0, 0.3);
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
    }

    .article-footer {
      margin-top: 1.25em;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .meta-tag {
        display: flex;
        align-items: center;
        gap: 0.25em;

        .el-icon {
          width: 1em;
          height: 1em;
          color: #FFFFFF;
        }

        span {
          font-family: 'PingFang SC';
          font-weight: 500;
          font-size: 0.875em;
          line-height: 1.57;
          color: #C62828;
        }
      }

      .view-count {
        font-family: 'PingFang SC';
        font-weight: 400;
        font-size: 0.875em;
        line-height: 1.57;
        color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}
</style>