修改首页

tanghaolin

2025-04-17 6716b2a7ecc3ce3745c17f8361c781abd63d40d7

修改首页

 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

@@ -35,10 +35,12 @@
                    <input placeholder="全部商品|请输入公司名称/型号/产品名称" />
                    <button>搜索</button>
                </div>
                <span class="text-[20px] text-[#000] gap-div"></span>
                <!-- 省份选择 -->
                <div>
                    <el-cascader v-model="AreaValue" :options="options" @change="handleChange" />
                </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">
@@ -288,7 +290,7 @@
    align-items: center;
    padding-left: 240px;
    width: 100%;
    height: 64px;
    height: 69px;
    background: rgb(242, 242, 242);
    border: 1px solid rgba(158, 158, 158, 0.4);
    box-sizing: border-box;
@@ -387,6 +389,20 @@
    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/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">
@@ -196,8 +196,9 @@
                        <el-button text>更多</el-button>
                    </div> -->
                    <div class="flex gap-6">
                        <!-- 左侧新闻模板 -->
                        <div class="w-[373px] flex flex-col gap-4">
                            <div class="w-full" style="border: 1px solid #ccc;">
                            <div class="w-full relative left-news-temp-div">
                                <img
                                    class="w-full flex-0 cursor-pointer"
                                    src="@/assets/home/notice1.png"
@@ -205,255 +206,133 @@
                                    alt="新闻政策"
                                />
                            </div>
                            <span class="news-title"> 《上海市经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知》 </span>
                            <span class="news-title">
                                《上海市经济信息化委关于开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作的通知》
                            </span>
                        </div>
                        <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 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="text-small text-regular">
                                有关单位：
                                为贯彻落实《上海市节能减排（应对气候变化）专项资金管理办法（沪发改规范〔2021〕5号）》和《上海市工业通信业用能设备更新专项扶持实施细则》（沪经信规范〔2025〕1号），进一步推进本市工业通信业用能设备更新工作，现组织开展2025年度上海市工业通信业用能设备更新专项扶持资金项目申报工作。
                            <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 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>
                    </div>
                </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>
                        <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>
                                    </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"
@@ -482,6 +361,10 @@
const router = useRouter();

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

const scrollPercent = ref(0);

const showCustomerService = ref(false);

const newsList = ref([
    {
@@ -751,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');
};
@@ -1257,7 +1168,6 @@
};
const scrollToTop = () => {
    nextTick(() => {
        // console.log('我被打印了');
        document.getElementById('app-page').scrollTo({
            top: 0,
            behavior: 'smooth',
@@ -1265,7 +1175,9 @@
    });
};

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

<style scoped>
@@ -1340,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) {
@@ -1399,18 +1309,97 @@
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
}

.catalog-tag-active {
    color: #71b02b !important;
}
.news-title{

.news-title {
    font-size: 20px;
    color: #000000;
    font-weight: 700;
    font-family: 微软雅黑;
    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;
@@ -1426,4 +1415,34 @@
    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>