完成适配移动端

This commit is contained in:
2025-03-01 10:52:11 +08:00
parent 1f79c93859
commit 8d19a58e9d
68 changed files with 2117 additions and 847 deletions

View File

@@ -5,10 +5,10 @@ import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import {getNext, getPrevious} from "~/api/cms/cmsArticle";
const props = withDefaults(
defineProps<{
articleId?: number;
}>(),
{}
defineProps<{
articleId?: number;
}>(),
{}
);
const i18n = useI18n();
@@ -16,28 +16,36 @@ const previousArticle = ref<CmsArticle>();
const nextArticle = ref<CmsArticle>();
// 上一篇
previousArticle.value = await getPrevious({
getPrevious({
articleId: props.articleId,
lang: i18n.locale.value
}).then(res => {
previousArticle.value = res;
}).catch(() => {
})
// 下一篇
nextArticle.value = await getNext({
getNext({
articleId: props.articleId,
lang: i18n.locale.value
}).then(data => {
nextArticle.value = data;
}).catch(() => {
})
</script>
<template>
<div class="flex justify-between flex-col sm:flex-row my-3 gap-4">
<nuxt-link :to="previousArticle ? detail(previousArticle) : ''" class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
<span class="text-lg text-gray-800">{{ previousArticle?.title || '没有了' }}</span>
<span class="text-gray-400">{{ $t('previous') }}</span>
</nuxt-link>
<nuxt-link :to="nextArticle ? detail(nextArticle) : ''" class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
<span class="text-lg text-gray-800">{{ nextArticle?.title || '没有了' }}</span>
<span class="text-gray-400">{{ $t('next') }}</span>
</nuxt-link>
<nuxt-link :to="previousArticle ? detail(previousArticle) : ''"
class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
<span class="text-lg text-gray-800">{{ previousArticle?.title || '没有了' }}</span>
<span class="text-gray-400">{{ $t('previous') }}</span>
</nuxt-link>
<nuxt-link :to="nextArticle ? detail(nextArticle) : ''"
class="w-auto sm:w-[50%] flex flex-col justify-center p-4 border-1 border-solid border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50">
<span class="text-lg text-gray-800">{{ nextArticle?.title || '没有了' }}</span>
<span class="text-gray-400">{{ $t('next') }}</span>
</nuxt-link>
</div>
</template>