<script lang="ts" setup>
// 设置页面布局
definePageMeta({
  layout: 'default'
})

// 使用 Nuxt 的 useHead 来管理页面资源
useHead({
  title: '文章中心 - 探索最新的技术文章和行业动态',
  meta: [
    {name: 'description', content: '探索最新的技术文章和行业动态，包括解决方案、开发知识和行业趋势'},
    {name: 'keywords', content: '技术文章,行业动态,解决方案,开发知识,共享单车,软件开发'}
  ],

})
</script>

<template>
  <div class="articles-page">
    <div class="container" style="padding: 40px 0;">
      <div class="row">
        <div class="col-xs-12">
          <h1 class="page-title">文章中心</h1>
          <p class="page-subtitle">探索最新的技术文章和行业动态</p>
        </div>
      </div>

      <!-- 推荐文章 -->
      <div class="row" style="margin-top: 40px;">
        <div class="col-xs-12">
          <RecommendedArticles
              :articles-per-type="6"
              :show-types="['solution', 'developKnowledge', 'industryTrend']"
              title="推荐文章"
          />
        </div>
      </div>

      <!-- 按类型分类的文章 -->
      <div class="row" style="margin-top: 60px;">
        <div class="col-xs-12 col-md-4">
          <RecommendedArticles
              :articles-per-type="8"
              :show-types="['solution']"
              title="解决方案"
          />
        </div>
        <div class="col-xs-12 col-md-4">
          <RecommendedArticles
              :articles-per-type="8"
              :show-types="['developKnowledge']"
              title="开发知识"
          />
        </div>
        <div class="col-xs-12 col-md-4">
          <RecommendedArticles
              :articles-per-type="8"
              :show-types="['industryTrend']"
              title="行业动态"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.articles-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-title {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 18px;
  color: #666;
  text-align: center;
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 28px;
  }

  .page-subtitle {
    font-size: 16px;
  }
}
</style>
