99 lines
2.3 KiB
Vue
99 lines
2.3 KiB
Vue
<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>
|