tanghaolin
2025-04-17 63465b857a7e7fa2ac18701f01d966bb2c5fa421
src/views/NewsDetail.vue
@@ -1,6 +1,6 @@
<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="/">
@@ -11,8 +11,9 @@
         <!-- 文章内容 -->
         <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>
@@ -25,7 +26,7 @@
         <!-- 上一篇/下一篇 -->
         <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">
@@ -97,7 +98,7 @@
});
</script>
<style scoped>
<style lang="scss" scoped>
.prose {
   font-size: 16px;
   line-height: 1.75;
@@ -112,4 +113,19 @@
.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>