<template>
  <div class="news-overview">
    <h2 class="section-title">新闻概览</h2>
    <div class="news-list">
      <div class="news-item" v-for="news in newsList" :key="news.id" @click="goToDetail(news)">
        <div class="news-image">
          <img :src="news.image" :alt="news.title" />
        </div>
        <div class="news-content">
          <h3>{{ news.title }}</h3>
          <p class="news-summary">{{ news.summary }}</p>
          <div class="news-meta">
            <span class="news-date">{{ news.publishDate }}</span>
            <span class="news-views">{{ news.views }} 阅读</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const newsList = ref<any[]>([]);

onMounted(() => {
  // TODO: 加载新闻数据
});

function goToDetail(news: any) {
  router.push(`/news/${news.id}`);
}
</script>

<style lang="scss" scoped>
.news-overview {
  padding: 40px;
  background: white;
  border-radius: 8px;
  margin: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #141F38;
  margin-bottom: 24px;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.news-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
  
  &:hover {
    background: #f5f5f5;
  }
}

.news-image {
  width: 200px;
  height: 140px;
  flex-shrink: 0;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  h3 {
    font-size: 18px;
    font-weight: 600;
    color: #141F38;
    margin-bottom: 8px;
  }
}

.news-summary {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: auto;
}

.news-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #999;
  margin-top: 12px;
}
</style>

