web-home

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

@@ -0,0 +1,160 @@
+<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>
+