tanghaolin
2025-04-16 9fba81a40d45541ca629c68dfbc877ffe5744605
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<template>
    <div class="container mx-auto px-4 py-8 bg-white">
        <div class="max-w-4xl mx-auto">
            <!-- 面包屑导航 -->
            <div class="mb-6 text-gray-500">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>政策文件</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
 
            <!-- 文章内容 -->
            <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">
                    <span>发布时间:{{ newsDetail.date }}</span>
                    <span class="mx-4">|</span>
                    <span>来源:{{ newsDetail.source }}</span>
                    <span class="mx-4">|</span>
                    <span>浏览次数:{{ newsDetail.views }}</span>
                </div>
                <div class="prose max-w-none" v-html="newsDetail.content"></div>
            </div>
 
            <!-- 上一篇/下一篇 -->
            <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">
                        上一篇:<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">
                        下一篇:<router-link :to="'/news-detail/' + newsDetail.next.id">{{ newsDetail.next.title }}</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import {newsList} from './mock/newsDetailList'
const route = useRoute();
const newsDetail = ref({
    id: "1",
    title: '上海官宣细则:"国补"家电1月20日起扩围到12种,3类数码产品这样补贴',
    date: '2024-01-19',
    source: '上海市商务委员会',
    views: 1234,
    content: `
        <p class="mb-4">1月19日晚间,《上海市2025年落实国家家电以旧换新补贴政策实施细则》和《上海市2025年落实国家手机、平板、智能手表(手环)购新补贴政策实施细则》正式发布。</p>
 
        <h2 class="text-xl font-bold my-4">家电补贴政策要点</h2>
        <p class="mb-4">《上海市2025年落实国家家电以旧换新补贴政策实施细则》指出,2025年1月1日起延续实施对8类家电产品的消费补贴政策,包括冰箱(含冰柜)、洗衣机、电视、空调(含中央空调)、电脑(含台式和便携式计算机)、热水器(含壁挂炉)、家用灶具(含集成灶)、吸油烟机。2024年已享受某类家电产品以旧换新补贴的个人消费者,2025年购买同类家电产品可继续享受补贴。</p>
 
        <p class="mb-4">从2025年1月20日起,补贴范围扩大至4类新增家电产品:微波炉、净水器、洗碗机、电饭煲。</p>
 
        <h2 class="text-xl font-bold my-4">补贴标准</h2>
        <p class="mb-4">- 12类产品最终销售价格的15%基础补贴</p>
        <p class="mb-4">- 购买1级及以上能效或水效标准产品额外获得5%补贴</p>
        <p class="mb-4">- 每位消费者每类产品可补贴1件(空调最高3件)</p>
        <p class="mb-4">- 单件补贴不超过2000元</p>
 
        <h2 class="text-xl font-bold my-4">数码产品补贴政策</h2>
        <p class="mb-4">根据《上海市2025年落实国家手机、平板、智能手表(手环)购新补贴政策实施细则》,个人消费者购买手机、平板、智能手表(手环)3类数码产品可享受购新补贴:</p>
        <p class="mb-4">- 单件销售价格不超过6000元</p>
        <p class="mb-4">- 每人每类可补贴1件</p>
        <p class="mb-4">- 补贴比例为最终销售价格的15%</p>
        <p class="mb-4">- 每件最高补贴不超过500元</p>
 
        <h2 class="text-xl font-bold my-4">参与方式</h2>
        <p class="mb-4">从1月20日起,消费者可在银联云闪付、支付宝、微信APP政策实施专区领取补贴券。品类券有效期为申领之日起7日内。消费者可通过已领取"品类券"的支付机构APP,1券1单逐笔核销,于订单支付时享受立减补贴。</p>
 
        <h2 class="text-xl font-bold my-4">参与平台</h2>
        <p class="mb-4">天猫、京东、拼多多、苏宁易购、i百联、抖音等平台将于1月20日开始参与活动。小红书、得物等其他电商平台及品牌小程序正在同步推进中。</p>
 
        <h2 class="text-xl font-bold my-4">咨询方式</h2>
        <p class="mb-4">消费者可致电参与企业客服电话、中国银联95516、支付宝95188、微信支付95017咨询相关事宜。</p>
    `,
    prev: {
        id: 0,
        title: '关于组织开展2024年工业软件技术创新项目申报的通知',
    },
    next: {
        id: 2,
        title: '2024年度工业软件服务能力评估工作启动',
    },
});
 
onMounted(() => {
    // 这里可以根据路由参数获取新闻详情
    const newsId = route.params.id;
    const foundNews = newsList.find(item=>item.id===newsId);
    newsDetail.value = foundNews as any
    // fetchNewsDetail(newsId);
});
</script>
 
<style scoped>
.prose {
    font-size: 16px;
    line-height: 1.75;
    color: #374151;
}
 
.prose h2 {
    margin-top: 2em;
    margin-bottom: 1em;
}
 
.prose p {
    margin-bottom: 1.25em;
}
</style>