| | |
| | | <template> |
| | | <div class="container mx-auto px-4 py-8 bg-white"> |
| | | <div class="max-w-4xl mx-auto"> |
| | | <div class=" mx-auto"> |
| | | <!-- 面包屑导航 --> |
| | | <div class="mb-6 text-gray-500"> |
| | | <el-breadcrumb separator="/"> |
| | |
| | | |
| | | <!-- 文章内容 --> |
| | | <div class="article-content"> |
| | | <h1 class="text-2xl font-bold text-center mb-4">{{ newsDetail.title }}</h1> |
| | | <div class="flex justify-center items-center text-gray-500 text-sm mb-8"> |
| | | <h1 class="text-2xl font-bold text-center mb-4 news-title">{{ newsDetail.title }}</h1> |
| | | <!-- 副内容 --> |
| | | <div class="flex justify-center items-center text-gray-500 text-sm mb-8 news-info"> |
| | | <span>发布时间:{{ newsDetail.date }}</span> |
| | | <span class="mx-4">|</span> |
| | | <span>来源:{{ newsDetail.source }}</span> |
| | |
| | | <!-- 上一篇/下一篇 --> |
| | | <div class="mt-8 pt-4 border-t"> |
| | | <div class="flex flex-col gap-2"> |
| | | <div v-if="newsDetail.prev" class="text-gray-600 hover:text-blue-500 cursor-pointer"> |
| | | <div v-if="newsDetail.prev" class="text-[22px] line-height-[32px] text-gray-600 hover:text-blue-500 cursor-pointer"> |
| | | 上一篇:<router-link :to="'/news-detail/' + newsDetail.prev.id">{{ newsDetail.prev.title }}</router-link> |
| | | </div> |
| | | <div v-if="newsDetail.next" class="text-gray-600 hover:text-blue-500 cursor-pointer"> |
| | |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | <style lang="scss" scoped> |
| | | .prose { |
| | | font-size: 16px; |
| | | line-height: 1.75; |
| | |
| | | .prose p { |
| | | margin-bottom: 1.25em; |
| | | } |
| | | .news-title{ |
| | | font-family: Microsoft YaHei; |
| | | font-size: 36px; |
| | | color: #1d1d1f; |
| | | font-weight: bold; |
| | | line-height: 36px; |
| | | } |
| | | .news-info{ |
| | | height: 16px; |
| | | font-family: Microsoft YaHei; |
| | | font-weight: 400; |
| | | font-size: 16px; |
| | | color: #777777; |
| | | line-height: 32px; |
| | | } |
| | | </style> |