src/assets/home/Totop.jpg

 src/assets/home/news_1.jpg

 src/components/AppFooter.vue

@@ -1,5 +1,5 @@
<template>
    <footer class="bg-[#003A8F] text-white py-8 text-small">
    <footer id="app-footer" class="bg-[#003A8F] text-white py-8 text-small">
        <div class="w-[80%] mx-auto">
            <div class="flex justify-between">
                <!-- Logo and Contact Info -->
@@ -36,7 +36,9 @@

                    <div class="flex flex-col gap-4 ">
                        <div class="pl-8 pr-8 border-l border-[#73AF28]">
                            <div class="font-medium mb-2 footer-link">帮助中心</div>
                            <div class="font-medium mb-2 footer-link">
                                <router-link to="" class="text-white hover:text-[#73AF2B] footer-link">帮助中心</router-link>
                            </div>
                            <div class="flex flex-col gap-2 text-sm">
                                <router-link to="/brand-center" class="text-white hover:text-[#73AF2B] footer-link">品牌中心</router-link>
                                <router-link to="/payment" class="text-white hover:text-[#73AF2B] footer-link">付款方式</router-link>
@@ -47,7 +49,9 @@

                    <div class="flex flex-col gap-4 ">
                        <div class="pl-8 pr-8 border-l border-[#73AF28]">
                            <div class="font-medium mb-2 footer-link">服务政策</div>
                            <div class="font-medium mb-2 footer-link">
                                <router-link to="" class="text-white hover:text-[#73AF2B] footer-link">服务政策</router-link>
                            </div>
                            <div class="flex flex-col gap-2 text-sm">
                                <router-link to="/delivery" class="text-white hover:text-[#73AF2B] footer-link">配送服务</router-link>
                                <router-link to="/after-sales" class="text-white hover:text-[#73AF2B] footer-link">售后服务</router-link>
@@ -58,7 +62,9 @@

                    <div class="flex flex-col gap-4 ">
                        <div class="pl-8 pr-8 border-l border-[#73AF28]">
                            <div class="font-medium mb-2 footer-link">公司介绍</div>
                            <div class="font-medium mb-2 footer-link">
                                <router-link to="" class="text-white hover:text-[#73AF2B] footer-link">公司介绍</router-link>
                            </div>
                            <div class="flex flex-col gap-2 text-sm">
                                <router-link to="/contact" class="text-white hover:text-[#73AF2B] footer-link">联系我们</router-link>
                                <router-link to="/about" class="text-white hover:text-[#73AF2B] footer-link">关于我们</router-link>

 src/components/AppHeader.vue

@@ -14,45 +14,58 @@
                <nav class="flex ml-8 flex-1 navbar-div-style">
                    <el-menu mode="horizontal" :ellipsis="false" class="border-none menu-div-sytle" router :default-active="activeRoute">
                        <el-menu-item index="/home" class="!px-4">首页</el-menu-item>
                        <span class="w-[20px] h-full gap-style">|</span>
                        <el-menu-item index="/certified-products" class="!px-4">能效产品</el-menu-item>
                        <span class="w-[20px] h-full gap-style">|</span>
                        <el-menu-item index="/eec-label-search" class="!px-4">证书查询</el-menu-item>
                        <span class="w-[20px] h-full gap-style">|</span>
                        <el-menu-item index="/news-detail/99" class="!px-4">政策文件</el-menu-item>
                        <span class="w-[20px] h-full gap-style">|</span>
                        <el-menu-item index="/select-selpara" class="!px-4" @click="linkClick">泵选型</el-menu-item>
                        <span class="w-[20px] h-full gap-style">|</span>
                        <el-menu-item index="/gb19762-2025" class="!px-4">计算工具</el-menu-item>
                        <span class="w-[20px] h-full gap-style">|</span>
                        <el-menu-item index="" class="!px-4">联系我们</el-menu-item>
                    </el-menu>
                    <!-- Search and User Actions -->
                    <div class="flex items-center space-x-8 ml-[65px] pb-[15px] ">
                        <!-- Add shopping cart icon here -->
                        <div class="flex items-center gap-4" @click="goToCart">
                            <el-badge :value="cartCount" :max="99" class="cart-badge">
                                <el-button class="flex items-center" link>
                                    <el-icon class="text-lg" color="#fff" style="font-size: 20px"><ShoppingCart /></el-icon>
                                </el-button>
                            </el-badge>
                        </div>

                        <div class="flex items-center text-gray-600 text-sm text-nowrap">
                            <template v-if="!userInfo.Token">
                                <!-- <a href="#" class="hover:text-blue-500">注册</a>
                                        <span class="mx-2">·</span> -->
                                <a @click="toLogin" class="hover:text-blue-500 text-white text-[20px]">登录</a>
                            </template>
                            <template v-else>
                                <span class="text-blue-500 mr-2 text-[20px] text-white">{{ userInfo.RealName }}</span>
                                <a href="#" class="hover:text-blue-500 text-[20px]" @click.prevent="handleLogout">退出</a>
                            </template>
                        </div>
                    </div>
                </nav>
            </div>
            <!-- é¡¶éƒ¨äº§å“æœç´¢æ¡† -->
            <div class="header-tool-div" v-show="false">
            <div class="header-tool-div">
                <div class="search-input-div">
                    <input />
                    <input placeholder="全部商品|请输入公司名称/型号/产品名称" />
                    <button>搜索</button>
                </div>
                <div></div>
                <div></div>
                <span class="text-[20px] text-[#000] gap-div"></span>
                <!-- çœä»½é€‰æ‹© -->
                <div>
                    <el-cascader v-model="AreaValue" :options="options" @change="handleChange">
                        <template #prefix>
                            123123
                        </template>
                    </el-cascader>
                </div>
                <span class="text-[20px] text-[#000] gap-div"></span>
                <div class="flex gap-[22px]">
                    <button class="flex items-center gap-[10px]">
                        <div class="flex items-center gap-4" @click="goToCart">
                            <el-badge :value="cartCount" :max="99" class="cart-badge">
                                    <el-icon class="text-lg" color="#000" style="font-size: 20px"><ShoppingCart /></el-icon>
                            </el-badge>
                        </div>
                        æˆ‘的购物车
                    </button>
                    <button>批量下载</button>
                    <button>我的订单</button>
                    <div class="flex items-center">
                        <template v-if="!userInfo.Token">
                            <button @click="toLogin">登录</button>
                        </template>
                        <template v-else>
                            <span class="text-blue-500 mr-2 text-[20px] text-[#000]">{{ userInfo.RealName }}</span>
                            <a href="#" class="hover:text-blue-500 text-[20px]" @click.prevent="handleLogout">退出</a>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </header>
@@ -73,12 +86,49 @@
const route = useRoute();
const router = useRouter();
const searchQuery = ref('');
const handleSearch = () => {
    if (!searchQuery.value) {
        searchQuery.value = '查证书';
    }
    router.push(`/eec-label-search`);

const AreaValue = ref(null);
const props = {
    expandTrigger: 'hover' as const,
};

const handleChange = (value) => {
    console.log(value);
};

const options = [
    {
        value: 'shanghai',
        label: '上海市',
        children: [
            {
                value: 'minhang',
                label: '闵行区',
            },
            {
                value: 'pudongxinqu',
                label: '浦东新区',
            },
            {
                value: 'huanpuqu',
                label: '黄浦区',
            },
            {
                value: 'hongkouqu',
                label: '虹口区',
            },
            {
                value: 'fengxian',
                label: '奉贤区',
            },
            {
                value: 'jingan',
                label: '静安区',
            },
        ],
    },
];

const activeRoute = computed(() => route.path);

// èŽ·å–用户信息
@@ -136,28 +186,29 @@

<style lang="scss" scoped>
:deep(.el-menu--horizontal .el-menu-item) {
    height: 16px;
    line-height: 16px;
    height: 69px;
    line-height: 69px;
    font-size: 20px;
    width: 130px;
}
:deep(.el-menu--horizontal > .el-menu-item.is-active){
    color: #76B432 !important;
:deep(.el-menu--horizontal > .el-menu-item.is-active) {
    color: #76b432 !important;
    border-bottom: none !important;
}
:deep(.el-menu--horizontal > .el-menu-item){
:deep(.el-menu--horizontal > .el-menu-item) {
    color: #fff !important;
    border-bottom: none;
}
:deep(.el-menu--horizontal) {
    border-bottom: none;
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover){
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover) {
    background: transparent !important;
    color: #76B432 !important;
    color: #76b432 !important;
}
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus){
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
    background: transparent !important;
    color: #76B432 !important;
    color: #76b432 !important;
}
.header-layout-div {
    padding-left: 231px;
@@ -170,27 +221,78 @@
    height: 68px;
}
.header-tool-div {
    padding-left: 258px;
    display: flex;
    gap: 20px;
    align-items: center;
    padding-left: 240px;
    width: 100%;
    height: 64px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
    height: 69px;
    background: rgb(242, 242, 242);
    border: 1px solid rgba(158, 158, 158, 0.4);
    box-sizing: border-box;
    .search-input-div {
        input {
            width: 482px;
            height: 39px;
            background: #ffffff;
            box-shadow: 0px 2px 3px 0px #ffffff, 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
            border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    :deep(.el-input__wrapper) {
        width: 237px;
        height: 39px;
        background: transparent;
        box-shadow: inset -1px -1px 3px 0px #ffffff, inset 0px 2px 3px 0px rgba(0, 0, 0, 0.4) !important;
        border-radius: 6px;
        border: none;
        padding: 0 15px;
        font-size: 16px;
        outline: none;
        box-sizing: border-box;
    }
    :deep(.el-input__inner) {
        height: 39px;
        background: transparent;
        font-size: 16px;
        outline: none;
        box-sizing: border-box;
        // &:focus {
        //     box-shadow:inset -1px -1px 3px 0px #ffffff,inset 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
        // }
    }

    input {
        width: 482px;
        height: 39px;
        background: #d3d3d3;
        box-shadow: inset -1px -1px 3px 0px #ffffff, inset 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
        border-radius: 6px;
        border: none;
        padding: 0 15px;
        font-size: 16px;
        outline: none;
        box-sizing: border-box;
        &:focus {
            box-shadow: inset -1px -1px 3px 0px #ffffff, inset 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
        }
        button {
            width: 68px;
            height: 42px;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
            box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
            border: 1px solid;
            border-image: linear-gradient(180deg, #c2c2c2, #989898) 1 1;
    }
    button {
        min-width: 68px;
        height: 39px;
        background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 100%);
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
        border: 1px solid #c2c2c2;
        border-radius: 6px;
        color: #333333;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background: linear-gradient(180deg, #f5f5f5 0%, #d5d5d5 100%);
        }

        &:active {
            background: linear-gradient(180deg, #e0e0e0 0%, #cccccc 100%);
            box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
        }
    }
}
@@ -199,7 +301,7 @@
    background: url('@/assets/images/navbar_background.png') no-repeat;
    background-size: 100% 100%;

    .menu-div-sytle{
    .menu-div-sytle {
        background: transparent;
        height: 100%;
        justify-content: center;
@@ -210,10 +312,33 @@
    }
}

.cart-badge :deep(.el-badge__content) {
    animation: cartBadgeAnimation 0.3s cubic-bezier(0.4, 0, 0.2, 1);
.cart-badge{
    display: flex;
    :deep(.el-badge__content) {
        // animation: cartBadgeAnimation 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

.gap-style {
    font-size: 20px;
    color: #ffffff;
    font-family: å¾®è½¯é›…黑;
    font-weight: 500;
    line-height: 69px;
}
.gap-div{
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    &::before{
        content: "";
        display: block;
        width: 2px;
        height: 65%;
        background: #D3D3D3;
    }
}
@keyframes cartBadgeAnimation {
    0% {
        transform: scale(0);

 src/styles/index.scss

@@ -3,4 +3,5 @@
@use './element-dark.scss';
@use './reset.scss';
@use './utils.scss';
@use './spump-style.scss'
@use './spump-style.scss';
@use './skin.scss';

 src/styles/skin.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,4 @@
// ä¸»é¢˜é¢œè‰²
:root{
    --theme-color: #003A8F;
}

 src/views/GB19762-2025.vue

@@ -1,7 +1,7 @@
<template>
    <!-- <div class="detail-container">{{ Math.pow(Math.log(60), 2) }}
    </div> -->
    <div class="container mx-auto px-4 py-8 bg-white industrial-soft-style" style="margin-top: 20px; padding-top: 15px">
    <div class="container mx-auto px-4 py-8 bg-white" style="margin-top: 20px; padding-top: 15px">
        <div class="w-100 h-100" style="background-color: #fff">
            <div class="mb-6 text-gray-500">
                <el-breadcrumb separator="/">
@@ -110,7 +110,7 @@
                        </el-icon>国标于2026å¹´3月1日开始实施</label>
                    <div class="flex items-end">
                        <div>
                            <el-button type="primary" @click="Calc">计算</el-button>
                            <el-button type="primary" style="background-color: var(--theme-color); border-color: var(--theme-color)" @click="Calc">计算</el-button>
                            <el-button @click="clear" type="info">清空</el-button>
                        </div>
                        <div class="flex">
@@ -578,7 +578,7 @@
    height: auto;
    margin: 0 4px 0 0;
    padding: 2px 2px;
    line-height: 20px;
    line-height: 32px;
    white-space: nowrap;
    cursor: default;
    opacity: 1;
@@ -588,12 +588,12 @@
}

.ant-tag:hover {
    color: #1c97b7;
    color: var(--theme-color);
    cursor: pointer;
}

.ant-tag-checked {
    background-color: #1c97b7;
    background-color: var(--theme-color);
    color: #fff;
}


 src/views/Home.vue

@@ -142,7 +142,7 @@
                </div>
            </div>
            <!-- ä¸»å†…容区域 -->
            <div class="bg-white flex flex-col gap-8" style="width: calc(100% - 434px)">
            <div class="bg-white flex flex-col gap-8 relative" style="width: calc(100% - 434px)">
                <!-- äº§å“åŒºåŸŸ -->
                <div class="bg-[#F0F3EF] w-full">
                    <div class="catalog-list bg-[#fff] grid grid-cols-5 gap-4 justify-center items-center">
@@ -159,14 +159,14 @@
                    <!-- æˆ‘需要设置swiper的默认显示的slide -->
                    <swiper
                        :direction="'vertical'"
                        :init="true"
                        :initialSlide="0"
                        :slides-per-view="state.catalogSwiperIndex"
                        @swiper="onSwiper"
                        @slideChange="onSlideChange"
                        :slidesPerView="state.catalogSwiperIndex"
                        :centeredSlides="true"
                        :autoplay="{
                            delay: 10000,
                            disableOnInteraction: true,
                            disableOnInteraction: false,
                            pauseOnMouseEnter: true,
                        }"
                        :effect="'fade'"
                        :modules="SwiperModule"
@@ -174,11 +174,11 @@
                    >
                        <swiper-slide class="w-full h-full" v-for="(item, index) in state.catalogItemList" :key="index">
                            <div class="catalog-continer overflow-hidden">
                                <div class="catalog-continer-item p-4" v-for="child in item" :key="child.Id">
                                <div class="catalog-continer-item p-4" v-for="child in item" :key="child.Id" @click="handleCatalogClick(child)">
                                    <div class="w-full h-[250px]">
                                        <img class="w-full h-full object-contain" :src="child.PhysicalPicturePath" alt="" />
                                    </div>
                                    <div class="mt-4 text-center font-medium" style="font-size: 18px;">
                                    <div class="mt-4 text-center font-medium" style="font-size: 18px">
                                        {{ child.Model }}
                                    </div>
                                </div>
@@ -188,267 +188,151 @@
                </div>
                <!-- æ–°é—»å…¬å‘ŠåŒºåŸŸ -->
                <div class="w-full mb-4">
                    <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                    <!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                        <div class="flex items-center space-x-2 ml-2 font-bold">
                            <el-icon class="text-blue-500"><Document /></el-icon>
                            <span class="text-medium font-bold"> <span class="text-primary">新闻</span>政策</span>
                        </div>
                        <el-button text>更多</el-button>
                    </div> -->
                    <div class="flex gap-6">
                        <!-- å·¦ä¾§æ–°é—»æ¨¡æ¿ -->
                        <div class="w-[373px] flex flex-col gap-4">
                            <div class="w-full relative left-news-temp-div">
                                <img
                                    class="w-full flex-0 cursor-pointer"
                                    src="@/assets/home/notice1.png"
                                    @click="routeClick('/news-detail/8')"
                                    alt="新闻政策"
                                />
                            </div>
                            <span class="news-title">
                                ã€Šä¸Šæµ·å¸‚经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知》
                            </span>
                        </div>
                        <div class="flex-auto right-news-temp-div">
                            <div class="w-full h-[45px] flex justify-between items-center">
                                <div class="w-[20%] font-bold text-[20px]">新闻政策</div>
                                <div class="w-[80%] text-right pr-[10%] text-[18px] text-[#5c5c5c]">更多>></div>
                            </div>
                            <div class="w-full flex justify-between gap-8" style="height: calc(100% - 45px)">
                                <div class="w-[422px] flex-shrink-0">
                                    <img src="@/assets/home/news_1.jpg" alt="新闻政策" class="w-full h-[187px]" />
                                    <div
                                        class="line-clamp-3 font-bold text-large mb-2 hover:text-primary cursor-pointer text-[20px] text-[#000]"
                                        @click="routeClick('/news-detail/8')"
                                    >
                                        ä¸Šæµ·å¸‚经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知
                                    </div>
                                    <div
                                        class="text-regular text-[16px] text-[#656565] line-height-[29px] line-clamp-4 new-desc-text overflow-hidden"
                                        style="text-indent: 2rem"
                                    >
                                        æœ‰å…³å•ä½ï¼š
                                        ä¸ºè´¯å½»è½å®žã€Šä¸Šæµ·å¸‚节能减排（应对气候变化）专项资金管理办法（沪发改规范〔2021〕5号）》和《上海市工业通信业用能设备更新专项扶持实施细则》（沪经信规范〔2025〕1号），进一步推进本市工业通信业用能设备更新工作，现组织开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作。
                                    </div>
                                </div>
                                <div class="mt-4">
                                    <div v-for="(item, index) in newsList" :key="index" class="flex text-regular justify-between items-center news-item">
                                        <div class="flex items-center hover:text-primary w-full" @click="handleNewsClick(item)">
                                            <div class="w-[6px] h-[6px] mr-2 news-list-dot"></div>
                                            <div
                                                class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
                                            >
                                                {{ item.title }}
                                            </div>
                                        </div>
                                        <!-- <div class="text-gray-400 text-sm">{{ item.date }}</div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex">
                        <img
                            class="w-[30%] flex-0 cursor-pointer"
                            src="@/assets/home/notice1.png"
                            @click="routeClick('/news-detail/8')"
                            alt="新闻政策"
                        />
                        <div class="bg-page p-4 flex-auto">
                            <div
                                class="font-bold text-large over-ellipsis mb-2 hover:text-primary cursor-pointer"
                                @click="routeClick('/news-detail/8')"
                            >
                                ä¸Šæµ·å¸‚经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知
                </div>
                <!-- èƒ½æ•ˆäº§å“åˆ†ç±» -->
                <div class="eec-product-classify-div mb-[170px]">
                    <div class="w-full mt-4">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center space-x-2 ml-2 font-bold">
                                <span class="text-medium font-bold"> èƒ½æ•ˆäº§å“åˆ†ç±»</span>
                            </div>
                            <div class="text-small text-regular">
                                æœ‰å…³å•ä½ï¼š
                                ä¸ºè´¯å½»è½å®žã€Šä¸Šæµ·å¸‚节能减排（应对气候变化）专项资金管理办法（沪发改规范〔2021〕5号）》和《上海市工业通信业用能设备更新专项扶持实施细则》（沪经信规范〔2025〕1号），进一步推进本市工业通信业用能设备更新工作，现组织开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作。
                        </div>
                        <div class="flex h-[360px] bg-[#f9f9f9] eec-product-div" v-if="false">
                            <div class="flex-auto h-full">
                                <!-- <img src="@/assets/images/china-map.png" alt="能效产品" class="w-full h-full" /> -->
                                <div id="eec-product-map" ref="EecProductMapChartRef"></div>
                            </div>
                            <div class="mt-4">
                                <div
                                    v-for="(item, index) in newsList"
                                    :key="index"
                                    class="flex text-regular justify-between items-center py-2 news-item"
                                >
                                    <div class="flex items-center hover:text-primary w-full" @click="handleNewsClick(item)">
                                        <!-- <div class="w-1.5 h-1.5 rounded-full bg-gray-400 mr-2"></div> -->
                                        <div
                                            class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
                                        >
                                            {{ item.title }}
                            <div class="h-fit my-auto px-4 py-4 mx-10 eec-product-num-div">
                                <div class="h-full bg-[#393939] px-4 py-4 flex-1" style="box-sizing: border-box; background-color: rgb(0 0 0 / 67%)">
                                    <div class="flex flex-col justify-between items-center mb-4 gap-2">
                                        <div class="text-lg font-bold text-[#26c4f6]">全国能效产品总量</div>
                                        <div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
                                            {{ m_allEecProductNumber }}<span class="text-base text-info-light-3 ml-1">个</span>
                                        </div>
                                    </div>
                                    <!-- <div class="text-gray-400 text-sm">{{ item.date }}</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- æ´»åŠ¨åˆä½œåŒºåŸŸ -->
                <div class="w-full">
                    <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                        <div class="flex items-center space-x-2 ml-2 font-bold">
                            <el-icon class="text-blue-500"><Operation /></el-icon>
                            <span class="text-medium font-bold"> <span class="text-primary">能效</span>产品</span>
                        </div>
                        <el-button text @click="routeClick('/certified-products')">更多</el-button>
                    </div>
                    <div class="flex h-[360px] bg-[#f9f9f9] eec-product-div" v-if="false">
                        <div class="flex-auto h-full">
                            <!-- <img src="@/assets/images/china-map.png" alt="能效产品" class="w-full h-full" /> -->
                            <div id="eec-product-map" ref="EecProductMapChartRef"></div>
                        </div>
                        <div class="h-fit my-auto px-4 py-4 mx-10 eec-product-num-div">
                            <div class="h-full bg-[#393939] px-4 py-4 flex-1" style="box-sizing: border-box; background-color: rgb(0 0 0 / 67%)">
                                <div class="flex flex-col justify-between items-center mb-4 gap-2">
                                    <div class="text-lg font-bold text-[#26c4f6]">全国能效产品总量</div>
                                    <div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
                                        {{ m_allEecProductNumber }}<span class="text-base text-info-light-3 ml-1">个</span>
                                    <div class="grid grid-cols-1 gap-4 h-[140px]">
                                        <swiper
                                            :direction="'vertical'"
                                            :slidesPerView="5"
                                            :spaceBetween="10"
                                            :autoplay="{
                                                delay: 1500,
                                                disableOnInteraction: false,
                                            }"
                                            :modules="SwiperModule"
                                            class="mySwiper"
                                        >
                                            <swiper-slide v-for="(item, index) in cooperationData" :key="index" style="width: 100%; height: 20px">
                                                <div style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center">
                                                    <span class="text-[#26c4f6]">{{ item.region }}</span>
                                                    <div>
                                                        <span class="text-white font-bold">{{ item.count }}</span>
                                                        <span class="text-sm ml-1" style="color: #aaa">个</span>
                                                    </div>
                                                </div>
                                            </swiper-slide>
                                        </swiper>
                                    </div>
                                </div>
                                <div class="grid grid-cols-1 gap-4 h-[140px]">
                                    <swiper
                                        :direction="'vertical'"
                                        :slidesPerView="5"
                                        :spaceBetween="10"
                                        :autoplay="{
                                            delay: 1500,
                                            disableOnInteraction: false,
                                        }"
                                        :modules="SwiperModule"
                                        class="mySwiper"
                                    >
                                        <swiper-slide v-for="(item, index) in cooperationData" :key="index" style="width: 100%; height: 20px">
                                            <div style="height: 100%; width: 100%; display: flex; gap: 4px; justify-content: center">
                                                <span class="text-[#26c4f6]">{{ item.region }}</span>
                                                <div>
                                                    <span class="text-white font-bold">{{ item.count }}</span>
                                                    <span class="text-sm ml-1" style="color: #aaa">个</span>
                                                </div>
                                            </div>
                                        </swiper-slide>
                                    </swiper>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- å·¥ä¸šè½¯ä»¶åˆ†ç±»ç»Ÿè®¡ -->
                <div class="w-full bg-[#f6f7f9]">
                    <!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                        <div class="flex items-center space-x-2 ml-2 font-bold">
                            <el-icon class="text-blue-500"><DataLine /></el-icon>
                            <span class="text-medium font-medium">工业软件｜工业APP<span class="text-primary">产品分类</span></span>
                    <!-- å·¥ä¸šè½¯ä»¶åˆ†ç±»ç»Ÿè®¡ -->
                    <div class="w-full bg-[#f6f7f9]">
                        <!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
                            <div class="flex items-center space-x-2 ml-2 font-bold">
                                <el-icon class="text-blue-500"><DataLine /></el-icon>
                                <span class="text-medium font-medium">工业软件｜工业APP<span class="text-primary">产品分类</span></span>
                            </div>
                        </div> -->
                        <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">能效产品分类</div>
                        <div class="flex">
                            <div class="w-[45%] h-[400px]" ref="pieChartRef"></div>
                            <div class="w-[55%] h-[400px]" ref="barChartRef"></div>
                        </div>
                    </div> -->
                    <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">能效产品分类</div>
                    <div class="flex">
                        <div class="w-[45%] h-[400px]" ref="pieChartRef"></div>
                        <div class="w-[55%] h-[400px]" ref="barChartRef"></div>
                    </div>
                </div>
            </div>
            <!-- è¿”回顶部 -->
            <div
                id="scroll-to-top"
                class="group absolute bottom-[100px] z-[30] right-[100px] transition-all duration-300 cursor-pointer"
                :class="{
                    'opacity-0 translate-y-4 fade-leave-active': scrollPercent < 35,
                    'opacity-100 translate-y-0 fade-enter-active': scrollPercent >= 35,
                }"
                v-show="scrollPercent >= 35"
                @click="scrollToTop"
            >
                <div
                    class="w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
                >
                    <img src="@/assets/home/Totop.jpg" alt="返回顶部" class="" />
                </div>
            </div>
        </div>

        <!-- æµ®åŠ¨å³ä¾§æ  -->
        <div class="fixed right-[60px] bottom-[128px] z-50">
            <div class="flex flex-col">
                <!-- è´­ç‰©è½¦ -->
                <div class="group relative" v-if="false">
                    <div
                        class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6 text-gray-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
                            />
                        </svg>
                    </div>
                    <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                        <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">购物车</div>
                    </div>
                </div>

                <!-- æˆ‘çš„ -->
                <div class="group relative" v-if="false">
                    <div
                        class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6 text-gray-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                            />
                        </svg>
                    </div>
                    <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                        <div class="bg-gray-800 text-white text-sm py-1 px-3 rounded text-black" style="text-align: center">我的</div>
                    </div>
                </div>

                <!-- å®¢æœ -->
                <div class="group relative">
                    <div
                        class="py-1.5 text-primary bg-white opacity-95 rounded-lg shadow size-19 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
                        @click="showCustomerService = true"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6 text-gray-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
                            />
                        </svg>
                        <div class="bg-gray-800 text-sm py-1 px-3 rounded text-primary" style="text-align: center">AI客服</div>
                    </div>
                    <!-- <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                        <img :src="CallMe" width="150" height="150" />
                    </div> -->
                </div>

                <!-- åé¦ˆ -->
                <!-- <div class="group relative" @click="toFeedBack">
                    <div
                        class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6 text-gray-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                            />
                        </svg>
                        <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">反馈</div>
                    </div>
                </div>
                <div class="group relative">
                    <div
                        class="bg-white w-14 h-14 flex items-center justify-center cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200 flex-col"
                    >
                        <svg
                            t="1740060002788"
                            class="icon h-6 w-6 text-gray-600"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="13742"
                            width="128"
                            height="128"
                        >
                            <path
                                d="M767.818667 409.173333C867.338667 444.266667 938.666667 539.136 938.666667 650.666667c0 42.709333-10.496 83.978667-30.261334 120.842666-1.792 3.338667-4.992 8.928-9.696 16.96l14.613334 53.557334c6.506667 23.893333-15.402667 45.813333-39.296 39.296l-53.642667-14.634667-6.229333 3.669333A254.933333 254.933333 0 0 1 682.666667 906.666667c-77.994667 0-147.84-34.88-194.805334-89.888a352.608 352.608 0 0 1-56.64 4.554666c-63.338667 0-124.266667-16.853333-177.472-48.298666-1.834667-1.088-6.410667-3.733333-13.632-7.893334l-80.544 21.653334c-23.914667 6.432-45.76-15.573333-39.146666-39.434667l21.792-78.752a961.205333 961.205333 0 0 1-15.904-27.317333A336.384 336.384 0 0 1 85.333333 480c0-188.618667 154.965333-341.333333 345.888-341.333333 159.914667 0 297.984 108.010667 335.818667 259.296 0.949333 3.765333 1.173333 7.552 0.778667 11.2z m-68.106667-13.952C662.88 282.037333 555.178667 202.666667 431.221333 202.666667 275.434667 202.666667 149.333333 326.933333 149.333333 480c0 46.272 11.498667 90.837333 33.194667 130.698667 2.88 5.290667 10.176 17.706667 21.621333 36.746666a32 32 0 0 1 3.413334 25.013334l-10.517334 37.994666 39.232-10.549333a32 32 0 0 1 24.234667 3.146667c14.272 8.192 22.773333 13.098667 25.802667 14.890666A283.882667 283.882667 0 0 0 431.221333 757.333333c6.154667 0 12.288-0.192 18.389334-0.576A255.061333 255.061333 0 0 1 426.666667 650.666667c0-141.386667 114.613333-256 256-256 5.728 0 11.413333 0.192 17.045333 0.554666z m133.706667 397.056a32 32 0 0 1 3.338666-24.725333 996.672 996.672 0 0 0 15.242667-26.293333A190.997333 190.997333 0 0 0 874.666667 650.666667c0-106.037333-85.962667-192-192-192s-192 85.962667-192 192 85.962667 192 192 192a190.933333 190.933333 0 0 0 98.570666-27.2c2.208-1.322667 8.288-4.874667 18.517334-10.837334a32 32 0 0 1 24.522666-3.210666l12.565334 3.424-3.424-12.565334zM330.666667 426.666667a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m192 0a42.666667 42.666667 0 1 1 0-85.333334 42.666667 42.666667 0 0 1 0 85.333334z m85.333333 202.666666a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m149.333333 0a32 32 0 1 1 0-64 32 32 0 0 1 0 64z"
                                fill="#000000"
                                p-id="13743"
                            ></path>
                        </svg>
                        <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">微信</div>
                    </div>
                    <div class="hidden group-hover:block absolute right-full top-0 mr-2 whitespace-nowrap card-hover-style">
                        <img :src="CallMe" width="150" height="150" />
                    </div>
                </div> -->

                <!-- è¿”回顶部 -->
                <!-- <div class="group relative" @click="scrollToTop">
                    <div
                        class="bg-white w-14 h-14 flex items-center justify-center flex-col cursor-pointer border border-gray-200 hover:bg-blue-50 transition-colors duration-200"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6 text-gray-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                        </svg>
                        <div class="bg-gray-800 text-sm py-1 px-3 rounded text-black" style="text-align: center">顶部</div>
                    </div>
                </div> -->
            </div>
        </div>
        <!-- å®¢æœå¯¹è¯æ¡† -->
        <customer-service
            class="fixed right-[150px] bottom-[17px] z-50 w-[440px] h-[calc(80vh-30px)] shadow-lg rounded-lg"
@@ -468,12 +352,19 @@
import CustomerService from '@/components/CustomerService.vue';

import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay,EffectFade } from 'swiper/modules';
import { Autoplay, EffectFade, Virtual } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-fade'
import 'swiper/css/effect-fade';
import 'swiper/css/pagination';

const SwiperModule = [Autoplay,EffectFade];
const SwiperModule = [Autoplay, EffectFade, Virtual];
const router = useRouter();

const catalogSwiperRef = ref<HTMLElement | null>(null);

const scrollPercent = ref(0);

const showCustomerService = ref(false);

const newsList = ref([
    {
@@ -555,7 +446,7 @@
        { name: '电机', tag: 7 },
    ],
    curSelectCatalog: 1,
    catalogSwiperIndex:1,
    catalogSwiperIndex: 0,
    catalogItemList: [],
    m_PageLoading: false,
});
@@ -725,7 +616,7 @@
    { name: '其他类', value: 53, percentage: '1.30%' },
];

const pieChart2Ref = ref<HTMLElement | null>(null);
const pieChart2Ref = ref<null>(null);
const barChart2Ref = ref<HTMLElement | null>(null);

const EecProductMapChartRef = ref<HTMLElement | null>(null);
@@ -743,9 +634,37 @@
        initPipeTwoChart();

        initCatalogList();

        document.getElementById('app-page')?.addEventListener('scroll', handleScroll);
    });
});
const handleScroll = () => {
    const scrollTop = document.getElementById('app-page')?.scrollTop;
    const scrollHeight = document.getElementById('app-page')?.scrollHeight - document.getElementById('app-page')?.clientHeight;
    scrollPercent.value = (scrollTop / scrollHeight) * 100;

    let scrollToTop = document.getElementById('scroll-to-top');
    let footer = document.getElementById('app-footer');

    // if (footer) {
    //     const footerRect = footer.getBoundingClientRect();
    //     const viewportHeight = window.innerHeight;

    //     if (footerRect.top > viewportHeight) {
    //         // Footer is not in viewport
    //         if (scrollToTop) {
    //             scrollToTop.style.bottom = '100px';
    //         }
    //     } else {
    //         // Footer is in viewport
    //         if (scrollToTop) {
    //             const distanceFromFooter = 100; // 100px gap from footer
    //             const newBottom = viewportHeight - footerRect.top + distanceFromFooter;
    //             scrollToTop.style.bottom = `${newBottom}px`;
    //         }
    //     }
    // }
};
const linkClick = () => {
    router.push('/select-selpara');
};
@@ -762,7 +681,7 @@
    router.push(`/news-detail/${item.id}`);
};
// åˆå§‹åŒ–类型列表数据
const initCatalogList = () => {
const initCatalogList = (cb: any = null) => {
    state.m_PageLoading = true;
    const catalogTag = state.curSelectCatalog;
    axios({
@@ -806,6 +725,10 @@
                arr.push(result.slice(i, i + 15));
            }
            state.catalogItemList = arr;

            if (cb) {
                cb();
            }
        })
        .catch((err) => {
            state.m_PageLoading = false;
@@ -1214,14 +1137,28 @@
// ç›‘听产品类型选择
const changeCatalog = (type: number) => {
    state.curSelectCatalog = type;
    state.catalogSwiperIndex = 1
    initCatalogList();
    state.catalogSwiperIndex = 0;
    const cb = () => {
        catalogSwiperRef.value?.slideTo(state.catalogSwiperIndex, 0);
        // catalogSwiperRef.value?.autoplay = {
        //     delay: 3000,
        //     disableOnInteraction: false,
        //     pauseOnMouseEnter:true,
        // };
        catalogSwiperRef.value?.update();
    };
    initCatalogList(cb);
};
const onSwiper = (swiper:any)=>{
}
const onSlideChange = ()=>{
// äº§å“ç±»åž‹ç‚¹å‡»
const handleCatalogClick = (item: any) => {
    console.log(item, '我被点击了');
};

}
const onSwiper = (swiper: any) => {
    console.log(swiper);
    catalogSwiperRef.value = swiper;
};
const onSlideChange = () => {};
const toFeedBack = () => {
    router.push('/feedback');
};
@@ -1231,7 +1168,6 @@
};
const scrollToTop = () => {
    nextTick(() => {
        // console.log('我被打印了');
        document.getElementById('app-page').scrollTo({
            top: 0,
            behavior: 'smooth',
@@ -1239,7 +1175,9 @@
    });
};

const showCustomerService = ref(false);
onUnmounted(() => {
    document.getElementById('app-page')?.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
@@ -1314,13 +1252,11 @@

.news-item {
    cursor: pointer;
    border-bottom: 1px solid #e3e3e3;
    &:first-child {
        border-top: 1px solid #e3e3e3;
    }
    &:last-child {
        border-bottom: none;
    }
    padding: 8px 0px;
    font-size: 18px;
    color: #5c5c5c;
    font-family: å¾®è½¯é›…黑;
    font-weight: 500;
}

:deep(.customer-service-dialog .el-dialog__body) {
@@ -1340,8 +1276,8 @@
        align-items: center;
        cursor: pointer;
        color: #003a8f;
        font-size: 24px;
        line-height: 26px;
        font-size: 20px;
        font-weight: 700;
        &:hover {
            color: #71b02b;
        }
@@ -1364,12 +1300,149 @@
    height: 100%; /* æ”¹ä¸º100%以适应grid布局 */
    border-radius: 20px;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
        img {
            transform: scale(1.25);
            transition: all 1s ease;
        }
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
}

.catalog-tag-active {
    color: #71b02b !important;
}
:deep(.catalog-swiper .swiper-slide){
	

.news-title {
    font-size: 20px;
    color: #000000;
    font-weight: 700;
    font-family: å¾®è½¯é›…黑;
}

.left-news-temp-div {
    border: 1px solid #ccc;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #003a8f;
    }
}

.right-news-temp-div {
    /* border-top: 4px solid #003a8f; */
    position: relative;
    &::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0;
        width: 20%;
        height: 4px;
        z-index: 1;
        background-color: #71b02b;
    }
    &::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 20%;
        width: 80%;
        height: 4px;
        z-index: 1;
        background-color: #003a8f;
    }

    .new-desc-text {
        font-size: 16px;
        color: #656565;
        line-height: 29px;
        font-family: å¾®è½¯é›…黑;
        font-weight: 300;
    }
}
.news-list-dot {
    width: 6px;
    height: 6px;
    background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
}

.eec-product-classify-div {
    position: relative;
    &::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0;
        width: 20%;
        height: 4px;
        z-index: 1;
        background-color: #71b02b;
    }
    &::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 20%;
        width: 80%;
        height: 4px;
        z-index: 1;
        background-color: #003a8f;
    }
}

:deep(.catalog-swiper .swiper-slide) {
    height: 100% !important;
}

:deep(.catalog-swiper .swiper-pagination-bullet) {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}

:deep(.catalog-swiper .swiper-pagination-bullet-active) {
    color: #fff;
    background: #007aff;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(16px);
    }
}

.fade-enter-active {
    animation: fadeIn 0.3s ease-out;
}

.fade-leave-active {
    animation: fadeOut 0.3s ease-out;
}
</style>

 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>

 src/views/mock/newsDetailList.ts

@@ -222,57 +222,57 @@
        source: '上海市经济和信息化委员会',
        views: 779,
        content: `
            <p class="mb-4">第一条 ï¼ˆç›®çš„依据）</p>
            <p class="mb-4">为贯彻落实国家关于推动设备更新和消费品以旧换新的决策部署，推进本市工业通信业用能设备更新工作，根据《推动大规模设备更新和消费品以旧换新行动方案》（国发〔2024〕7号）、《推动工业领域设备更新实施方案》（工信部联规〔2024〕53号）和《上海市推动工业领域大规模设备更新和创新产品扩大应用的专项行动》（沪经信技〔2024〕355号）等文件，制定本实施细则。</p>
            <p class="mb-4 font-bold text-[24px] text-[#1d1d1f] line-height-[60px]">第一条 ï¼ˆç›®çš„依据）</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">为贯彻落实国家关于推动设备更新和消费品以旧换新的决策部署，推进本市工业通信业用能设备更新工作，根据《推动大规模设备更新和消费品以旧换新行动方案》（国发〔2024〕7号）、《推动工业领域设备更新实施方案》（工信部联规〔2024〕53号）和《上海市推动工业领域大规模设备更新和创新产品扩大应用的专项行动》（沪经信技〔2024〕355号）等文件，制定本实施细则。</p>

            <h2 class="text-xl font-bold my-4">第二条 ï¼ˆæ”¯æŒå¯¹è±¡å’ŒèŒƒå›´ï¼‰</h2>
            <p class="mb-4">申请资金支持的工业通信业企业，应当符合下列条件：</p>
            <p class="mb-4">（一）在本市登记注册，经营状态正常，信用记录良好，财务制度健全。</p>
            <p class="mb-4">（二）采购1级能效、2级能效及符合《重点用能产品设备能效先进水平、节能水平和准入水平》中节能水平及以上的用能设备，且购置设备于2025å¹´1月1日至2025å¹´12月31日（含当日）投入使用。</p>
            <p class="mb-4">（三）补贴产品属于电机（电动机、永磁同步电动机、高压三相笼型异步电动机）、泵（清水离心泵、石油化工离心泵、潜水电泵）、容积式空压机、通风机、冷水机组（热泵）、电力变压器、工业锅炉7大类产品，且已在中国能效标识网备案。</p>
            <p class="mb-4">（四）工业通信业企业可以通过市经济信息化委发布的专用工业品供应链平台(以下简称平台企业)采购高效设备，也可以通过其他线上平台及传统线下方式采购高效设备。</p>
            <p class="mb-4">发生重大环保、质量或者安全事故的；被列为严重失信主体的；或者有其他重大违法行为的不予支持。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第二条 ï¼ˆæ”¯æŒå¯¹è±¡å’ŒèŒƒå›´ï¼‰</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">申请资金支持的工业通信业企业，应当符合下列条件：</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">（一）在本市登记注册，经营状态正常，信用记录良好，财务制度健全。</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">（二）采购1级能效、2级能效及符合《重点用能产品设备能效先进水平、节能水平和准入水平》中节能水平及以上的用能设备，且购置设备于2025å¹´1月1日至2025å¹´12月31日（含当日）投入使用。</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">（三）补贴产品属于电机（电动机、永磁同步电动机、高压三相笼型异步电动机）、泵（清水离心泵、石油化工离心泵、潜水电泵）、容积式空压机、通风机、冷水机组（热泵）、电力变压器、工业锅炉7大类产品，且已在中国能效标识网备案。</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">（四）工业通信业企业可以通过市经济信息化委发布的专用工业品供应链平台(以下简称平台企业)采购高效设备，也可以通过其他线上平台及传统线下方式采购高效设备。</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">发生重大环保、质量或者安全事故的；被列为严重失信主体的；或者有其他重大违法行为的不予支持。</p>

            <h2 class="text-xl font-bold my-4">第三条 ï¼ˆæ”¯æŒæ ‡å‡†ï¼‰</h2>
            <p class="mb-4">工业通信业企业采购高效设备，按照不超过新购1级能效设备投资额20%，新购2级能效设备投资额15%的标准予以补贴，每家企业补贴总额不超过1000万元。7大类产品中电机、泵、空压机、风机以额定功率为单位补贴，冷水机组（热泵）以制冷量（制热量）为单位补贴，电力变压器以额定容量为单位补贴，工业锅炉以蒸吨为单位补贴。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第三条 ï¼ˆæ”¯æŒæ ‡å‡†ï¼‰</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">工业通信业企业采购高效设备，按照不超过新购1级能效设备投资额20%，新购2级能效设备投资额15%的标准予以补贴，每家企业补贴总额不超过1000万元。7大类产品中电机、泵、空压机、风机以额定功率为单位补贴，冷水机组（热泵）以制冷量（制热量）为单位补贴，电力变压器以额定容量为单位补贴，工业锅炉以蒸吨为单位补贴。</p>

            <h2 class="text-xl font-bold my-4">第四条 ï¼ˆéƒ¨é—¨èŒè´£åˆ†å·¥ï¼‰</h2>
            <p class="mb-4">市经济信息化委负责协调政策实施过程中的重要事项，会同相关部门做好项目审核、资金拨付和绩效评价，加强后续监管。</p>
            <p class="mb-4">市发展改革委负责补贴资金的统筹安排，并下达资金使用计划。</p>
            <p class="mb-4">市财政局负责补贴资金的预算和拨付审核，组织具体实施部门对补贴资金使用情况进行监督管理和绩效评价，加强评价结果运用。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第四条 ï¼ˆéƒ¨é—¨èŒè´£åˆ†å·¥ï¼‰</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">市经济信息化委负责协调政策实施过程中的重要事项，会同相关部门做好项目审核、资金拨付和绩效评价，加强后续监管。</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">市发展改革委负责补贴资金的统筹安排，并下达资金使用计划。</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">市财政局负责补贴资金的预算和拨付审核，组织具体实施部门对补贴资金使用情况进行监督管理和绩效评价，加强评价结果运用。</p>

            <h2 class="text-xl font-bold my-4">第五条 ï¼ˆå¹³å°ä¼ä¸šèŒè´£ï¼‰</h2>
            <p class="mb-4">平台企业根据要求协助开展线上采购设备的产品审核、政策宣传推广等事宜，并安排专门团队受理咨询和投诉处理等。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第五条 ï¼ˆå¹³å°ä¼ä¸šèŒè´£ï¼‰</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">平台企业根据要求协助开展线上采购设备的产品审核、政策宣传推广等事宜，并安排专门团队受理咨询和投诉处理等。</p>

            <h2 class="text-xl font-bold my-4">第六条 ï¼ˆèµ„金来源）</h2>
            <p class="mb-4">本次设备更新补贴资金从上海市节能减排（应对气候变化）专项资金中的"工业通信业节能减排和合同能源管理专项"统筹安排。</p>
            <p class="mb-4">如果后续国家出台关于工业通信业领域用能设备更新的新政策，按照国家相关政策实施。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第六条 ï¼ˆèµ„金来源）</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">本次设备更新补贴资金从上海市节能减排（应对气候变化）专项资金中的"工业通信业节能减排和合同能源管理专项"统筹安排。</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">如果后续国家出台关于工业通信业领域用能设备更新的新政策，按照国家相关政策实施。</p>

            <h2 class="text-xl font-bold my-4">第七条 ï¼ˆè¡¥è´´èµ„金申请）</h2>
            <p class="mb-4">申请补贴的工业通信业企业，提交以下申请材料（能实现免于提交的，可以免于提交）：</p>
            <p class="mb-4">1.《上海市设备更新补贴专项申报表》；</p>
            <p class="mb-4">2.企业工商营业执照和税务登记证(复印件）；</p>
            <p class="mb-4">3.技术参数证明材料(复印件);</p>
            <p class="mb-4">4.固定资产折旧相关证明;</p>
            <p class="mb-4">5.设备投入使用证明；</p>
            <p class="mb-4">6.在平台企业外的其他渠道采购的，还需提供购置合同、增值税发票。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第七条 ï¼ˆè¡¥è´´èµ„金申请）</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">申请补贴的工业通信业企业，提交以下申请材料（能实现免于提交的，可以免于提交）：</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">1.《上海市设备更新补贴专项申报表》；</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">2.企业工商营业执照和税务登记证(复印件）；</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">3.技术参数证明材料(复印件);</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">4.固定资产折旧相关证明;</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">5.设备投入使用证明；</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">6.在平台企业外的其他渠道采购的，还需提供购置合同、增值税发票。</p>

            <h2 class="text-xl font-bold my-4">第八条 ï¼ˆå®¡æ ¸æ‹¨ä»˜ï¼‰</h2>
            <p class="mb-4">市经济信息化委会同相关部门对企业提交的申请材料进行审核，经项目初审、专家评审、综合评定等流程后，对拟通过项目进行公示，公示期满无异议的，由市经济信息化委向市发展改革委申请资金使用额度，并按程序向市财政局申请拨付。</p>
            <p class="mb-4">补贴资金申报全年开放，采取"常年申报、常年审核、每季度集中拨付"方式,由申报主体通过市经济信息化委专项资金项目管理与服务平台提出申请。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第八条 ï¼ˆå®¡æ ¸æ‹¨ä»˜ï¼‰</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">市经济信息化委会同相关部门对企业提交的申请材料进行审核，经项目初审、专家评审、综合评定等流程后，对拟通过项目进行公示，公示期满无异议的，由市经济信息化委向市发展改革委申请资金使用额度，并按程序向市财政局申请拨付。</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">补贴资金申报全年开放，采取"常年申报、常年审核、每季度集中拨付"方式,由申报主体通过市经济信息化委专项资金项目管理与服务平台提出申请。</p>

            <h2 class="text-xl font-bold my-4">第九条 ï¼ˆç›‘督管理）</h2>
            <p class="mb-4">工业通信业企业不得提供虚假信息或者设置虚假交易骗取补贴资金，不得利用补贴政策倒买倒卖补贴产品。对弄虚作假、骗取财政补贴资金的，有关部门将追缴补贴资金，并视情节依法追究法律责任。</p>
            <p class="mb-4">已从其它渠道获得市级财政资金支持的项目，不得重复申报。工业通信业企业对财政补贴申请材料的真实性负责。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第九条 ï¼ˆç›‘督管理）</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">工业通信业企业不得提供虚假信息或者设置虚假交易骗取补贴资金，不得利用补贴政策倒买倒卖补贴产品。对弄虚作假、骗取财政补贴资金的，有关部门将追缴补贴资金，并视情节依法追究法律责任。</p>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">已从其它渠道获得市级财政资金支持的项目，不得重复申报。工业通信业企业对财政补贴申请材料的真实性负责。</p>

            <h2 class="text-xl font-bold my-4">第十条 ï¼ˆåº”用解释）</h2>
            <p class="mb-4">本办法由市经济信息化委、市发展改革委、市财政局负责解释。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第十条 ï¼ˆåº”用解释）</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">本办法由市经济信息化委、市发展改革委、市财政局负责解释。</p>

            <h2 class="text-xl font-bold my-4">第十一条 ï¼ˆå®žæ–½æ—¥æœŸï¼‰</h2>
            <p class="mb-4">本实施细则自2025å¹´1月6日起实施，有效期至2025å¹´12月31日。</p>
            <h2 class="text-xl font-bold my-4 text-[24px] text-[#1d1d1f] line-height-[60px]">第十一条 ï¼ˆå®žæ–½æ—¥æœŸï¼‰</h2>
            <p class="mb-4 text-[18px] text-[#1d1d1f] line-height-[60px]">本实施细则自2025å¹´1月6日起实施，有效期至2025å¹´12月31日。</p>

            <div class="mt-8 border-t pt-8">
                <a href="${SERVE_URL}/files/上海市工业通信业用能设备更新专项扶持实施细则.docx" class="flex items-center text-blue-500 hover:text-blue-600" download>
            <div class="mt-8 border-t pt-8 flex justify-center items-center line-height-[32px]">
                <a href="${SERVE_URL}/files/上海市工业通信业用能设备更新专项扶持实施细则.docx" class="text-[30px] text-[#003a8f] flex items-center text-blue-500 hover:text-blue-600" download>
                    <i class="el-icon-download mr-2"></i>
                    <span>上海市工业通信业用能设备更新专项扶持实施细则.docx</span>
                    <span class="text-gray-500 ml-2">18KB</span>