文章布局，文章页面采用文章布局
This commit is contained in:
WindowBird
parent
6a4800acbb
commit
fe130e0971
|
|
@ -1,4 +1,5 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
||||||
// 文章头部信息
|
// 文章头部信息
|
||||||
const articleHeader = {
|
const articleHeader = {
|
||||||
title: '共享烘干机APP方案开发与制作',
|
title: '共享烘干机APP方案开发与制作',
|
||||||
|
|
@ -248,7 +249,7 @@ const pagination = {
|
||||||
<!-- 页面布局 -->
|
<!-- 页面布局 -->
|
||||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||||
|
|
||||||
<!-- 主内容区域 -->
|
<!-- 主内容区域 -->
|
||||||
<div class="lg:col-span-3">
|
<div class="lg:col-span-3">
|
||||||
<!-- 文章头部 -->
|
<!-- 文章头部 -->
|
||||||
|
|
@ -277,10 +278,10 @@ const pagination = {
|
||||||
<!-- 主图展示 -->
|
<!-- 主图展示 -->
|
||||||
<div class="relative mb-8">
|
<div class="relative mb-8">
|
||||||
<div class="relative overflow-hidden rounded-xl">
|
<div class="relative overflow-hidden rounded-xl">
|
||||||
<img
|
<img
|
||||||
:src="articleContent.heroImage.src"
|
:alt="articleContent.heroImage.alt"
|
||||||
:alt="articleContent.heroImage.alt"
|
:src="articleContent.heroImage.src"
|
||||||
class="w-full h-64 md:h-80 object-cover"
|
class="w-full h-64 md:h-80 object-cover"
|
||||||
>
|
>
|
||||||
<!-- 红色覆盖按钮 -->
|
<!-- 红色覆盖按钮 -->
|
||||||
<div class="absolute bottom-4 right-4">
|
<div class="absolute bottom-4 right-4">
|
||||||
|
|
@ -293,10 +294,10 @@ const pagination = {
|
||||||
|
|
||||||
<!-- 文章段落 -->
|
<!-- 文章段落 -->
|
||||||
<div class="space-y-6 mb-8">
|
<div class="space-y-6 mb-8">
|
||||||
<p
|
<p
|
||||||
v-for="(paragraph, index) in articleContent.paragraphs"
|
v-for="(paragraph, index) in articleContent.paragraphs"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="text-gray-700 dark:text-gray-300 leading-relaxed"
|
class="text-gray-700 dark:text-gray-300 leading-relaxed"
|
||||||
>
|
>
|
||||||
{{ paragraph }}
|
{{ paragraph }}
|
||||||
</p>
|
</p>
|
||||||
|
|
@ -306,10 +307,10 @@ const pagination = {
|
||||||
<div class="mb-8">
|
<div class="mb-8">
|
||||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">标签:</h3>
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">标签:</h3>
|
||||||
<div class="flex flex-wrap gap-2">
|
<div class="flex flex-wrap gap-2">
|
||||||
<span
|
<span
|
||||||
v-for="tag in articleContent.tags"
|
v-for="tag in articleContent.tags"
|
||||||
:key="tag"
|
:key="tag"
|
||||||
class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors duration-200"
|
class="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors duration-200"
|
||||||
>
|
>
|
||||||
{{ tag }}
|
{{ tag }}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -320,18 +321,18 @@ const pagination = {
|
||||||
<div class="border-t border-gray-200 dark:border-gray-700 pt-6">
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-6">
|
||||||
<div class="flex flex-col sm:flex-row sm:justify-between gap-4">
|
<div class="flex flex-col sm:flex-row sm:justify-between gap-4">
|
||||||
<div v-if="pagination.previous" class="flex-1">
|
<div v-if="pagination.previous" class="flex-1">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
:to="pagination.previous.link"
|
:to="pagination.previous.link"
|
||||||
class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200"
|
class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200"
|
||||||
>
|
>
|
||||||
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1">上一篇:</div>
|
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1">上一篇:</div>
|
||||||
<div class="text-gray-900 dark:text-white font-medium">{{ pagination.previous.title }}</div>
|
<div class="text-gray-900 dark:text-white font-medium">{{ pagination.previous.title }}</div>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="pagination.next" class="flex-1">
|
<div v-if="pagination.next" class="flex-1">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
:to="pagination.next.link"
|
:to="pagination.next.link"
|
||||||
class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 text-right"
|
class="block p-4 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 text-right"
|
||||||
>
|
>
|
||||||
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1">下一篇:</div>
|
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1">下一篇:</div>
|
||||||
<div class="text-gray-900 dark:text-white font-medium">{{ pagination.next.title }}</div>
|
<div class="text-gray-900 dark:text-white font-medium">{{ pagination.next.title }}</div>
|
||||||
|
|
@ -345,18 +346,18 @@ const pagination = {
|
||||||
<!-- 侧边栏 -->
|
<!-- 侧边栏 -->
|
||||||
<div class="lg:col-span-1">
|
<div class="lg:col-span-1">
|
||||||
<div class="space-y-8">
|
<div class="space-y-8">
|
||||||
|
|
||||||
<!-- 热门标签 -->
|
<!-- 热门标签 -->
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
热门标签
|
热门标签
|
||||||
</h3>
|
</h3>
|
||||||
<div class="flex flex-wrap gap-2">
|
<div class="flex flex-wrap gap-2">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
v-for="tag in popularTags"
|
v-for="tag in popularTags"
|
||||||
:key="tag"
|
:key="tag"
|
||||||
to="/tags"
|
class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200"
|
||||||
class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm hover:bg-blue-100 dark:hover:bg-blue-900 hover:text-blue-800 dark:hover:text-blue-200 transition-colors duration-200"
|
to="/tags"
|
||||||
>
|
>
|
||||||
{{ tag }}
|
{{ tag }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
@ -369,11 +370,11 @@ const pagination = {
|
||||||
解决方案
|
解决方案
|
||||||
</h3>
|
</h3>
|
||||||
<div class="space-y-3">
|
<div class="space-y-3">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
v-for="article in solutionsArticles"
|
v-for="article in solutionsArticles"
|
||||||
:key="article.id"
|
:key="article.id"
|
||||||
:to="article.link"
|
:to="article.link"
|
||||||
class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
|
class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
|
||||||
>
|
>
|
||||||
<div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
|
<div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
|
||||||
{{ article.title }}
|
{{ article.title }}
|
||||||
|
|
@ -391,11 +392,11 @@ const pagination = {
|
||||||
开发知识
|
开发知识
|
||||||
</h3>
|
</h3>
|
||||||
<div class="space-y-3">
|
<div class="space-y-3">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
v-for="article in devKnowledgeArticles"
|
v-for="article in devKnowledgeArticles"
|
||||||
:key="article.id"
|
:key="article.id"
|
||||||
:to="article.link"
|
:to="article.link"
|
||||||
class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
|
class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
|
||||||
>
|
>
|
||||||
<div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
|
<div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
|
||||||
{{ article.title }}
|
{{ article.title }}
|
||||||
|
|
@ -413,11 +414,11 @@ const pagination = {
|
||||||
行业动态
|
行业动态
|
||||||
</h3>
|
</h3>
|
||||||
<div class="space-y-3">
|
<div class="space-y-3">
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
v-for="article in industryTrendsArticles"
|
v-for="article in industryTrendsArticles"
|
||||||
:key="article.id"
|
:key="article.id"
|
||||||
:to="article.link"
|
:to="article.link"
|
||||||
class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
|
class="block p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200"
|
||||||
>
|
>
|
||||||
<div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
|
<div class="text-gray-900 dark:text-white font-medium mb-1 line-clamp-2">
|
||||||
{{ article.title }}
|
{{ article.title }}
|
||||||
|
|
|
||||||
13
app/layouts/article.vue
Normal file
13
app/layouts/article.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<UContainer>
|
||||||
|
<AppHeader/>
|
||||||
|
<slot/>
|
||||||
|
<BottomNavigation/>
|
||||||
|
<AppFooter/>
|
||||||
|
</UContainer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
// 设置页面布局
|
||||||
|
definePageMeta({
|
||||||
|
layout: 'article'
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -10,4 +13,5 @@
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user