From dda478bc5d2d7696ca337e9bd0dd5090a094e36f Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期三, 05 三月 2025 13:14:55 +0800
Subject: [PATCH] 修改首页申请补贴跳转链接
---
src/views/Home.vue | 1274 ++++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 1,162 insertions(+), 112 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a57f75b..fa0184a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,167 +1,1217 @@
<template>
- <div class="h-full ">
+ <div class="h-full relative">
<!-- 杞挱鍥鹃儴鍒� -->
- <div class="banner-carousel">
- <el-carousel height="400px" :interval="5000" arrow="always">
+ <div class="banner-carousel relative right-[29.5%] w-screen">
+ <el-carousel height="500px" :interval="5000" arrow="always">
<el-carousel-item>
- <div class="banner-slide bg-blue-900 text-white">
- <div class="container mx-auto px-4 h-full flex items-center">
- <div class="flex justify-between items-center w-full">
- <div class="flex-1">
- <div class="text-4xl font-bold mb-4">鍏ㄥ浗淇℃爣濮旇蒋浠朵笌绯荤粺宸ョ▼</div>
- <div class="text-5xl font-bold mb-8">鍒嗗浼�(TC28/SC7)鎴愮珛40鍛ㄥ勾</div>
- <div class="flex space-x-8 text-xl">
- <div class="text-center">
- <div class="text-4xl font-bold text-blue-400">136<sup>+</sup></div>
- <div>鍙戝竷鍥藉鏍囧噯</div>
- </div>
- <div class="text-center">
- <div class="text-4xl font-bold text-blue-400">19<sup>+</sup></div>
- <div>鍙戝竷琛屼笟鏍囧噯</div>
- </div>
- <div class="text-center">
- <div class="text-4xl font-bold text-blue-400">211<sup>+</sup></div>
- <div>瀵瑰彛鍥介檯鏍囧噯鍖栫粍缁�</div>
- </div>
- <div class="text-center">
- <div class="text-4xl font-bold text-blue-400">60<sup>+</sup></div>
- <div>鍙備笌鐨勫浗闄呮爣鍑�</div>
- </div>
+ <div class="carousel-item">
+ <img src="@/assets/carousel/test/15.jpg" class="carousel-image" />
+ <!-- <img src="https://www.app-i.cn/api/file?file_name=2d82602e-8797-46d7-9b5c-59d9f88bc6d9.png;杞欢涓�浣撳寲娴嬭瘯骞冲彴_鍓湰.png" class="carousel-image" /> -->
+ </div>
+ </el-carousel-item>
+ <el-carousel-item>
+ <div class="carousel-item">
+ <img src="@/assets/carousel/final/2.jpg" class="carousel-image" />
+ <!-- <img src="https://www.app-i.cn/static/epidemicBanner.e4d9a821.jpg" alt=""> -->
+ </div>
+ </el-carousel-item>
+ <el-carousel-item>
+ <div class="carousel-item">
+ <img src="@/assets/carousel/final/5.png" class="carousel-image" />
+ <!-- <img src="https://www.app-i.cn/api/file?file_name=072c9dda-3ffb-410d-be93-a88ec6c7e765.jpg;40鍛ㄥ勾1.jpg" alt=""> -->
+ </div>
+ </el-carousel-item>
+ <!-- <el-carousel-item>
+ <img src="@/assets/carousel/1.png" class="w-full h-full object-cover" />
+ </el-carousel-item> -->
+ </el-carousel>
+ </div>
+ <div class="relative z-20 2 -mt-24">
+ <!-- 鍔熻兘鎸夐挳鍖哄煙 -->
+ <div class="bg-white py-8">
+ <div class="mx-auto px-32">
+ <div class="grid grid-cols-4 divide-x-w-default">
+ <a
+ @click="toSubsidy"
+ class="block"
+ style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3"
+ >
+ <div class="flex items-center gap-1 justify-center">
+ <div class="w-16 h-16">
+ <svg viewBox="0 0 24 24" class="w-full h-full">
+ <path
+ fill="currentColor"
+ d="M14,17H7V15H14V17M17,13H7V11H17V13M17,9H7V7H17V9M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V5H19V19Z"
+ />
+ </svg>
+ </div>
+ <div>
+ <div class="text-lg font-medium">琛ヨ创鐢宠</div>
+ <div class="text-sm text-info-light-3">Subsidy Application</div>
+ </div>
+ </div>
+ </a>
+ <router-link to="/certified-products" class="block" style="border-right: 1px solid #e3e3e3">
+ <div class="flex items-center gap-1 justify-center">
+ <div class="w-16 h-16">
+ <svg viewBox="0 0 24 24" class="w-full h-full">
+ <path
+ fill="currentColor"
+ d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"
+ />
+ </svg>
+ </div>
+ <div>
+ <div class="text-lg font-medium">鑳芥晥浜у搧</div>
+ <div class="text-sm text-info-light-3">Certified Products</div>
+ </div>
+ </div>
+ </router-link>
+ <router-link to="/eec-label-search" class="block" style="border-right: 1px solid #e3e3e3">
+ <div class="flex items-center gap-1 justify-center">
+ <div class="w-16 h-16">
+ <svg viewBox="0 0 24 24" class="w-full h-full">
+ <path
+ fill="currentColor"
+ d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+ />
+ </svg>
+ </div>
+ <div>
+ <div class="text-lg font-medium">璇佷功鏌ヨ</div>
+ <div class="text-sm text-info-light-3">Certificate Search</div>
+ </div>
+ </div>
+ </router-link>
+ <router-link to="/" class="block" style="border-right: 1px solid #e3e3e3">
+ <div class="flex items-center gap-1 justify-center" @click="linkClick(' https://www.xpump.net/')">
+ <div class="w-16 h-16">
+ <!-- <svg viewBox="0 0 24 24" class="w-full h-full">
+ <path
+ fill="currentColor"
+ d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75M12,15C13.5,15 16.5,15.75 16.5,17.25V18H7.5V17.25C7.5,15.75 10.5,15 12,15Z"
+ />
+ </svg> -->
+ <img :src="YWLogo" class="h-full" />
+ </div>
+ <div>
+ <div class="text-lg font-medium">鏌ユ车缃�</div>
+ <div class="text-sm text-info-light-3">Pump Search</div>
+ </div>
+ </div>
+ </router-link>
+
+ <!-- <router-link to="/publish-demand" class="block">
+ <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
+ <div class="flex flex-col items-center">
+ <div class="w-16 h-16 mb-4">
+ <img src="@/assets/icons/publish-demand.svg" alt="鍙戦渶姹�" class="w-full h-full" />
+ </div>
+ <div>
+ <div class="text-lg font-medium">鍙戦渶姹�</div>
+ <div class="text-gray-400 text-sm">Publish Demand</div>
</div>
</div>
- <div class="w-1/3">
- <div class="text-6xl font-bold text-blue-400">40</div>
+ </div>
+ </router-link>
+
+ <router-link to="/find-app" class="block">
+ <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
+ <div class="flex flex-col items-center">
+ <div class="w-16 h-16 mb-4">
+ <img src="@/assets/icons/find-app.svg" alt="鎵続PP" class="w-full h-full" />
+ </div>
+ <div>
+ <div class="text-lg font-medium">鎵続PP</div>
+ <div class="text-gray-400 text-sm">Find APP</div>
+ </div>
+ </div>
+ </div>
+ </router-link>
+
+ <router-link to="/find-demand" class="block">
+ <div class="function-card bg-white rounded-lg shadow-md p-6 text-center">
+ <div class="flex flex-col items-center">
+ <div class="w-16 h-16 mb-4">
+ <img src="@/assets/icons/find-demand.svg" alt="鎵鹃渶姹�" class="w-full h-full" />
+ </div>
+ <div>
+ <div class="text-lg font-medium">鎵鹃渶姹�</div>
+ <div class="text-gray-400 text-sm">Find Demand</div>
+ </div>
+ </div>
+ </div>
+ </router-link> -->
+ </div>
+ </div>
+ </div>
+ <div class="bg-white px-4 py-4 flex flex-col gap-8">
+ <!-- 鏂伴椈鍏憡鍖哄煙 -->
+ <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 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">
+ <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="text-small text-regular">
+ 鏈夊叧鍗曚綅锛�
+ 涓鸿疮褰昏惤瀹炪�婁笂娴峰競鑺傝兘鍑忔帓锛堝簲瀵规皵鍊欏彉鍖栵級涓撻」璧勯噾绠＄悊鍔炴硶锛堟勃鍙戞敼瑙勮寖銆�2021銆�5鍙凤級銆嬪拰銆婁笂娴峰競宸ヤ笟閫氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佸疄鏂界粏鍒欍�嬶紙娌粡淇¤鑼冦��2025銆�1鍙凤級锛岃繘涓�姝ユ帹杩涙湰甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂板伐浣滐紝鐜扮粍缁囧紑灞�2025骞村害涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佽祫閲戦」鐩敵鎶ュ伐浣溿��
+ </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 class="text-gray-400 text-sm">{{ item.date }}</div> -->
</div>
</div>
</div>
</div>
- </el-carousel-item>
- </el-carousel>
- </div>
-
- <!-- 鍔熻兘鎸夐挳鍖哄煙 -->
- <div class="bg-white py-8">
- <div class="container mx-auto px-4">
- <div class="grid grid-cols-4 gap-8">
- <!-- 鍙慉PP -->
- <div class="function-card">
- <el-card shadow="hover" class="h-full cursor-pointer">
- <div class="flex flex-col items-center space-y-2">
- <div class="w-16 h-16 flex items-center justify-center bg-blue-100 rounded-full">
- <el-icon class="text-3xl text-blue-500"><Promotion /></el-icon>
- </div>
- <div class="text-lg font-medium">鍙慉PP</div>
- <div class="text-gray-500 text-sm">Publish APP</div>
- </div>
- </el-card>
- </div>
+ </div>
- <!-- 鍙戦渶姹� -->
- <div class="function-card">
- <el-card shadow="hover" class="h-full cursor-pointer">
- <div class="flex flex-col items-center space-y-2">
- <div class="w-16 h-16 flex items-center justify-center bg-green-100 rounded-full">
- <el-icon class="text-3xl text-green-500"><Document /></el-icon>
- </div>
- <div class="text-lg font-medium">鍙戦渶姹�</div>
- <div class="text-gray-500 text-sm">Publish Demand</div>
- </div>
- </el-card>
+ <!-- 娲诲姩鍚堜綔鍖哄煙 -->
+ <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>
-
- <!-- 鎵続PP -->
- <div class="function-card">
- <el-card shadow="hover" class="h-full cursor-pointer">
- <div class="flex flex-col items-center space-y-2">
- <div class="w-16 h-16 flex items-center justify-center bg-purple-100 rounded-full">
- <el-icon class="text-3xl text-purple-500"><Search /></el-icon>
+ <div class="flex h-[360px] bg-[#f9f9f9] eec-product-div">
+ <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-lg font-medium">鎵続PP</div>
- <div class="text-gray-500 text-sm">Find APP</div>
+ <div class="grid grid-cols-1 gap-4 h-[140px]">
+ <!-- <div class="flex gap-4 items-center" v-for="(item, index) in cooperationData" :key="index">
+ <span class="text-[#26c4f6]">{{ item.region }}</span>
+ <div>
+ <span class="text-white font-bold">{{ item.count }}</span>
+ <span class="text-sm text-white-500 ml-1 text-white">涓�</span>
+ </div>
+ </div> -->
+ <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>
- </el-card>
+ </div>
</div>
+ </div>
- <!-- 鎵鹃渶姹� -->
- <div class="function-card">
- <el-card shadow="hover" class="h-full cursor-pointer">
- <div class="flex flex-col items-center space-y-2">
- <div class="w-16 h-16 flex items-center justify-center bg-orange-100 rounded-full">
- <el-icon class="text-3xl text-orange-500"><List /></el-icon>
- </div>
- <div class="text-lg font-medium">鎵鹃渶姹�</div>
- <div class="text-gray-500 text-sm">Find Demand</div>
- </div>
- </el-card>
+ <!-- 宸ヤ笟杞欢鍒嗙被缁熻 -->
+ <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">宸ヤ笟杞欢锝滃伐涓欰PP<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>
</div>
- <!-- 鏂伴椈鍏憡鍖哄煙 -->
- <div class="container mx-auto px-4 py-8">
- <div class="flex justify-between items-center mb-4">
- <div class="flex items-center space-x-2">
- <el-icon class="text-blue-500"><Document /></el-icon>
- <span class="text-lg font-medium">鏂伴椈鏀跨瓥</span>
+ <!-- 娴姩鍙充晶鏍� -->
+ <div class="fixed right-[17px] top-2/3 transform -translate-y-1/2 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>
- <el-button text>鏇村</el-button>
+
+ <!-- 鎴戠殑 -->
+ <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="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"
+ @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-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="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>
- <el-card>
- <el-table :data="newsList" style="width: 100%" :show-header="false">
- <el-table-column>
- <template #default="scope">
- <div class="flex justify-between items-center py-2">
- <div class="text-gray-700 hover:text-blue-500 cursor-pointer">{{ scope.row.title }}</div>
- <div class="text-gray-400 text-sm">{{ scope.row.date }}</div>
- </div>
- </template>
- </el-table-column>
- </el-table>
- </el-card>
</div>
+ <!-- 瀹㈡湇瀵硅瘽妗� -->
+ <el-dialog
+ v-model="showCustomerService"
+ :show-close="true"
+ :modal="true"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ class="customer-service-dialog"
+ >
+ <customer-service />
+ </el-dialog>
</div>
</template>
<script setup lang="ts">
-import { ref } from 'vue';
-import { Promotion, Document, Search, List } from '@element-plus/icons-vue';
+import { Document, Operation } from '@element-plus/icons-vue';
+import * as echarts from 'echarts';
+import { onMounted, ref, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+import YWLogo from '@/assets/logo/yw_logo.png';
+import CallMe from '@/assets/qrcode/callme.jpg';
+import axios from 'axios';
+import CustomerService from '@/components/CustomerService.vue';
+
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay } from 'swiper/modules';
+import 'swiper/css';
+
+const SwiperModule = [Autoplay];
+const router = useRouter();
const newsList = ref([
{
- title: '姝︽眽甯備汉姘戞斂搴滃叧浜庡嵃鍙戞姹夊競鍏充簬杩涗竴姝ヤ績杩涜蒋浠跺拰淇℃伅鎶�鏈湇鍔′笟楂樿川閲忓彂灞曡嫢骞叉斂绛栨帾鏂界殑閫氱煡',
- date: '2024-02-12',
+ id: '7',
+ title: '涓婃捣甯備汉姘戞斂搴滃叧浜庡嵃鍙戙�婁笂娴峰競鎺ㄥ姩澶ц妯¤澶囨洿鏂板拰娑堣垂鍝佷互鏃ф崲鏂拌鍔ㄨ鍒掞紙2024-2027骞达級銆嬬殑閫氱煡',
+ date: '2024-04-23',
+ link: 'test',
},
{
- title: '鍏充簬鍗板彂銆婂畞娉㈠競淇冭繘杞欢浜т笟楂樿川閲忓彂灞曚笓椤规斂绛栨剰瑙併�嬬殑閫氱煡',
- date: '2024-02-11',
+ id: '1',
+ title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡',
+ date: '2025-02-07',
+ link: 'https://sheitc.sh.gov.cn/jjyx/20250207/7e424cc336b84066890ba2366c4543a1.html',
},
{
- title: '骞夸笢鐪佸伐涓氬拰淇℃伅鍖栧巺鍏充簬寮�灞�2024骞寸壒澶т汉鎵嶄笓椤归」鐩獙鏀舵帹鑽愬伐浣滅殑閫氱煡',
- date: '2024-02-10',
+ id: '2',
+ title: '娴欐睙澶ц妯′互鏃ф崲鏂版柟妗堝叕甯�',
+ date: '2025-02-08',
+ link: 'https://news.qq.com/rain/a/20250208A05YH100',
+ },
+ {
+ id: '3',
+ title: '2024骞磋澶囨洿鏂颁笌娑堣垂鍝佷互鏃ф崲鏂版垚鏁堟樉钁�',
+ date: '2025-02-10',
+ link: 'https://www.sohu.com/a/857615850_122006510',
+ },
+ {
+ id: '4',
+ title: '鍗板彂鎺ㄥ姩宸ヤ笟棰嗗煙璁惧鏇存柊宸ヤ綔瀹炴柦鏂规鐨勯�氱煡',
+ date: '2024-10-22',
+ link: 'https://gxj.quanzhou.gov.cn/zwgk/zfxxgk/fdzdgknr/gzdt/202410/t20241022_3093021.htm',
+ },
+ {
+ id: '5',
+ title: '鍏充簬銆婁笂娴峰競宸ヤ笟閫氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规斂绛栧疄鏂界粏鍒欙紙寰佹眰鎰忚绋匡級銆嬪叕寮�寰佹眰鎰忚鐨勫叕鍛�',
+ date: '2024-12-18',
+ link: 'https://sheitc.sh.gov.cn/gg/20241218/517c960cef5d40f0bb04b1099c64d9eb.html',
+ },
+ // {
+ // id: '6',
+ // title: '瑙ｈ浜т笟鑳芥晥鎸囧崡锛屾帹鍔ㄨ澶囧鏍囧強鏇存柊',
+ // date: '2024-08-05',
+ // link: 'https://sheitc.sh.gov.cn/djjcdt/20240805/e8b8b4db2fb445f88b22b72f45132d68.html',
+ // },
+ // {
+ // title: '鍗板彂鎺ㄥ姩宸ヤ笟棰嗗煙璁惧鏇存柊宸ヤ綔瀹炴柦鏂规鐨勯�氱煡',
+ // date: '2024-10-22',
+ // },
+ // {
+ // title: '鍏充簬銆婁笂娴峰競宸ヤ笟閫氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规斂绛栧疄鏂界粏鍒欙紙寰佹眰鎰忚绋匡級銆嬪叕寮�寰佹眰鎰忚鐨勫叕鍛�',
+ // date: '2024-12-18',
+ // },
+ // {
+ // title: '瑙ｈ浜т笟鑳芥晥鎸囧崡锛屾帹鍔ㄨ澶囧鏍囧強鏇存柊',
+ // date: '2024-08-05',
+ // },
+ // {
+ // title: '涓冮儴闂ㄨ仈鍚堝嵃鍙戞柟妗堥儴缃插伐涓氶鍩熻澶囨洿鏂板拰鎶�鏈敼閫� 鎺ㄥ姩鍏堣繘浜ц兘姣旈噸鎸佺画鎻愬崌',
+ // date: '2024-04-29',
+ // },
+ // {
+ // title: '鍥藉姟闄㈠叧浜庡嵃鍙戙�婃帹鍔ㄥぇ瑙勬ā璁惧鏇存柊鍜屾秷璐瑰搧浠ユ棫鎹㈡柊琛屽姩鏂规銆嬬殑閫氱煡',
+ // date: '2024-03-07',
+ // },
+]);
+
+const linkClick = (url) => {
+ window.open(url, '_blank');
+};
+
+const routeClick = (url) => {
+ router.push(url);
+};
+const cooperationData = ref([
+ {
+ region: '鍖椾含',
+ count: 408,
+ },
+ {
+ region: '澶╂触',
+ count: 339,
+ },
+ {
+ region: '涓婃捣',
+ count: 489,
+ },
+ {
+ region: '閲嶅簡',
+ count: 23,
+ },
+ {
+ region: '娌冲寳',
+ count: 440,
+ },
+ {
+ region: '娌冲崡',
+ count: 432,
+ },
+ {
+ region: '浜戝崡',
+ count: 442,
+ },
+ {
+ region: '杈藉畞',
+ count: 8,
+ },
+ {
+ region: '榛戦緳姹�',
+ count: 363,
+ },
+ {
+ region: '婀栧崡',
+ count: 134,
+ },
+ {
+ region: '瀹夊窘',
+ count: 474,
+ },
+ {
+ region: '灞变笢',
+ count: 438,
+ },
+ {
+ region: '鏂扮枂',
+ count: 334,
+ },
+ {
+ region: '姹熻嫃',
+ count: 129,
+ },
+ {
+ region: '娴欐睙',
+ count: 433,
+ },
+ {
+ region: '姹熻タ',
+ count: 197,
+ },
+ {
+ region: '婀栧寳',
+ count: 315,
+ },
+ {
+ region: '骞胯タ',
+ count: 69,
+ },
+ {
+ region: '鐢樿們',
+ count: 630,
+ },
+ {
+ region: '灞辫タ',
+ count: 495,
+ },
+ {
+ region: '鍐呰挋鍙�',
+ count: 283,
+ },
+ {
+ region: '闄曡タ',
+ count: 156,
+ },
+ {
+ region: '鍚夋灄',
+ count: 485,
+ },
+ {
+ region: '绂忓缓',
+ count: 411,
+ },
+ {
+ region: '璐靛窞',
+ count: 496,
+ },
+ {
+ region: '骞夸笢',
+ count: 451,
+ },
+ {
+ region: '闈掓捣',
+ count: 387,
+ },
+ {
+ region: '瑗胯棌',
+ count: 356,
+ },
+ {
+ region: '鍥涘窛',
+ count: 414,
+ },
+ {
+ region: '瀹佸',
+ count: 470,
+ },
+ {
+ region: '娴峰崡',
+ count: 437,
+ },
+ {
+ region: '鍙版咕',
+ count: 165,
+ },
+ {
+ region: '棣欐腐',
+ count: 94,
+ },
+ {
+ region: '婢抽棬',
+ count: 437,
+ },
+ {
+ region: '鍗楁捣璇稿矝',
+ count: 0,
},
]);
+
+const handleNewsClick = (item: any) => {
+ // if (item.link) {
+ // window.open(item.link, '_blank');
+ // } else {
+ // router.push(`/news-detail/${item.id}`);
+ // }
+ router.push(`/news-detail/${item.id}`);
+};
+
+// 鍥捐〃鏁版嵁
+const chartData = [
+ { name: '娉�', value: 7185, percentage: '18.89%' },
+ { name: '绌哄帇鏈�', value: 4875, percentage: '12.82%' },
+ { name: '閫氶鏈�', value: 895, percentage: '2.35%' },
+ { name: '鍐锋按鏈虹粍', value: 2184, percentage: '5.74%' },
+ { name: '鐢靛姏鍙樺帇鍣�', value: 1896, percentage: '4.99%' },
+ { name: '宸ヤ笟閿呯倝', value: 2897, percentage: '7.62%' },
+ { name: '鐢垫満', value: 18865, percentage: '47.59%' },
+];
+
+// 璁＄畻鎬婚噺
+const totalCount = computed(() => {
+ return chartData.reduce((sum, item) => sum + item.value, 0);
+});
+
+const pieChartRef = ref<HTMLElement | null>(null);
+const barChartRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+ nextTick(() => {
+ initMapChart();
+ });
+ if (pieChartRef.value && barChartRef.value) {
+ // 鍒濆鍖栭ゼ鍥�
+ const pieChart = echarts.init(pieChartRef.value);
+ pieChart.setOption({
+ title: {
+ text: `鎬婚噺\n${totalCount.value}`,
+ left: '30%',
+ top: '50%',
+ textStyle: {
+ fontSize: 14,
+ lineHeight: 24,
+ align: 'center',
+ fontWeight: 'normal',
+ rich: {
+ value: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ padding: [10, 0],
+ },
+ },
+ },
+ textAlign: 'center',
+ textVerticalAlign: 'middle',
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}: {c} ({d}%)',
+ },
+ legend: {
+ orient: 'vertical',
+ right: '-1%',
+ top: 'middle',
+ formatter: (name: string) => {
+ const item = chartData.find((d) => d.name === name);
+ return `${name}: ${item?.value} (${item?.percentage})`;
+ },
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['30%', '50%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2,
+ },
+ label: {
+ show: false,
+ },
+ emphasis: {
+ label: {
+ show: false,
+ },
+ },
+ data: chartData.map((item) => ({
+ value: item.value,
+ name: item.name,
+ })),
+ color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A'],
+ },
+ ],
+ });
+
+ // 鍒濆鍖栨煴鐘跺浘
+ const barChart = echarts.init(barChartRef.value);
+ barChart.setOption({
+ title: {
+ text: '鑳芥晥浜у搧鍒嗙被鏁伴噺缁熻',
+ left: 'center',
+ top: 10,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ data: chartData.map((item) => item.name),
+ axisLabel: {
+ interval: 0,
+ rotate: 30,
+ },
+ },
+ yAxis: {
+ type: 'value',
+ name: '鏁伴噺',
+ },
+ series: [
+ {
+ data: chartData.map((item) => item.value),
+ type: 'bar',
+ barWidth: '40%',
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#83bff6' },
+ { offset: 0.5, color: '#188df0' },
+ { offset: 1, color: '#188df0' },
+ ]),
+ },
+ emphasis: {
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#2378f7' },
+ { offset: 0.7, color: '#2378f7' },
+ { offset: 1, color: '#83bff6' },
+ ]),
+ },
+ },
+ },
+ ],
+ });
+
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ window.addEventListener('resize', () => {
+ pieChart.resize();
+ barChart.resize();
+ });
+ }
+});
+
+// 琛屽熀閫氫笓鏁版嵁
+const chartData2 = [
+ { name: '鍩虹鍏辨�х被', value: 1764, percentage: '43.20%' },
+ { name: '琛屼笟閫氱敤绫�', value: 1670, percentage: '40.90%' },
+ { name: '浼佷笟涓撶敤绫�', value: 596, percentage: '14.60%' },
+ { name: '鍏朵粬绫�', value: 53, percentage: '1.30%' },
+];
+
+const pieChart2Ref = ref<HTMLElement | null>(null);
+const barChart2Ref = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+ // 鍒濆鍖栫浜屼釜楗煎浘
+ if (pieChart2Ref.value && barChart2Ref.value) {
+ const pieChart2 = echarts.init(pieChart2Ref.value);
+ pieChart2.setOption({
+ title: {
+ text: '鎬婚噺\n4083',
+ left: '30%',
+ top: '50%',
+ textStyle: {
+ fontSize: 14,
+ lineHeight: 24,
+ align: 'center',
+ fontWeight: 'normal',
+ rich: {
+ value: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ padding: [10, 0],
+ },
+ },
+ },
+ textAlign: 'center',
+ textVerticalAlign: 'middle',
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}: {c} ({d}%)',
+ },
+ legend: {
+ orient: 'vertical',
+ right: '-1%',
+ top: 'middle',
+ formatter: (name: string) => {
+ const item = chartData2.find((d) => d.name === name);
+ return `${name}: ${item?.value} (${item?.percentage})`;
+ },
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['30%', '50%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2,
+ },
+ label: {
+ show: false,
+ },
+ emphasis: {
+ label: {
+ show: false,
+ },
+ },
+ data: chartData2.map((item) => ({
+ value: item.value,
+ name: item.name,
+ })),
+ color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16'],
+ },
+ ],
+ });
+
+ // 鍒濆鍖栫浜屼釜鏌辩姸鍥�
+ const barChart2 = echarts.init(barChart2Ref.value);
+ barChart2.setOption({
+ title: {
+ text: '鍩虹鍏辨�х被浜у搧鏁伴噺缁熻',
+ left: 'center',
+ top: 10,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ data: ['姹熻嫃鐪�', '鍖椾含甯�', '娴欐睙鐪�', '涓婃捣甯�', '灞变笢鐪�', '骞夸笢鐪�'],
+ axisLabel: {
+ interval: 0,
+ rotate: 30,
+ },
+ },
+ yAxis: {
+ type: 'value',
+ name: '鏁伴噺',
+ max: 600,
+ },
+ series: [
+ {
+ data: [500, 450, 220, 150, 150, 120],
+ type: 'bar',
+ barWidth: '40%',
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#26c4f6' },
+ { offset: 0.5, color: '#26c4f6' },
+ { offset: 1, color: '#26c4f6' },
+ ]),
+ },
+ },
+ ],
+ });
+
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ window.addEventListener('resize', () => {
+ pieChart2.resize();
+ barChart2.resize();
+ });
+ }
+});
+const EecProductMapChartRef = ref<HTMLElement | null>(null);
+const m_allEecProductNumber = ref(0);
+const initMapChart = () => {
+ let allEecProductNumber = 0;
+ let mapData = cooperationData.value.map((item) => {
+ allEecProductNumber += item.count;
+ return {
+ name: item.region,
+ value: item.count,
+ };
+ });
+ m_allEecProductNumber.value = allEecProductNumber;
+ axios({
+ url: 'static/Data/ChinaGeoJsonData.json',
+ method: 'get',
+ })
+ .then((res) => {
+ const GeoData = res.data;
+ if (EecProductMapChartRef.value) {
+ echarts.registerMap('china', GeoData);
+ const EecProductMapChart = echarts.init(EecProductMapChartRef.value);
+ EecProductMapChart.setOption({
+ tooltip: {
+ show: true,
+ formatter: function (params) {
+ if (params.data) return params.name + '锛�' + params.data['value'];
+ },
+ },
+ visualMap: {
+ min: 0,
+ max: 100000,
+ right: 26,
+ bottom: 40,
+ showLabel: true,
+ text: ['', ''],
+ pieces: [
+ {
+ gt: 5001,
+ label: '> 5000',
+ color: '#FF4500',
+ },
+ {
+ gte: 1001,
+ lte: 5000,
+ label: '1001 - 5000',
+ color: '#FF8300',
+ },
+ {
+ gte: 601,
+ lte: 1000,
+ label: '601 - 1000',
+ color: '#FFC100',
+ },
+ {
+ gte: 401,
+ lt: 600,
+ label: '401 - 600',
+ color: '#FFFF00',
+ },
+ {
+ gte: 201,
+ lt: 400,
+ label: '201 - 400',
+ color: '#D7EF53',
+ },
+ {
+ gte: 1,
+ lt: 200,
+ label: '1 - 200',
+ color: '#AFDEA7',
+ },
+ {
+ lt: 0,
+ label: '0',
+ color: '#87CEFA',
+ },
+ ],
+ show: true,
+ },
+ geo: {
+ map: 'china',
+ roam: true,
+ scaleLimit: {
+ min: 1,
+ max: 2,
+ },
+ zoom: 1.13,
+ top: 50,
+ label: {
+ show: true,
+ fontSize: '14',
+ color: 'rgba(0,0,0,0.7)',
+ formatter: (params) => {
+ return params.name + '鐪�';
+ },
+ },
+ itemStyle: {
+ borderColor: 'rgba(0, 0, 0, 0.2)',
+ },
+ emphasis: {
+ areaColor: '#f2d5ad',
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ borderWidth: 0,
+ itemStyle: {
+ color: '#f4f4f4', // 榧犳爣鎮仠鏃剁殑棰滆壊
+ },
+ },
+ },
+ series: [
+ {
+ name: '鑳芥晥浜у搧',
+ type: 'map',
+ map: 'china',
+ geoIndex: 0,
+ data: mapData,
+ emphasis: {
+ itemStyle: {
+ color: 'rgba(0,0,0,0.7)', // 榧犳爣鎮仠鏃剁殑棰滆壊
+ },
+ },
+ },
+ // {
+ // name: '鑳芥晥浜у搧',
+ // type: 'map',
+ // mapType: 'china',
+ // selectedMode: 'false',
+ // label: {
+ // normal: {
+ // show: true,
+ // },
+ // emphasis: {
+ // show: false,
+ // },
+ // },
+ // data: mapData,
+ // },
+ ],
+ });
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ window.addEventListener('resize', () => {
+ EecProductMapChart.resize();
+ });
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+};
+const toFeedBack = () => {
+ router.push('/feedback');
+};
+const toSubsidy = ()=>{
+ // 璺宠浆鍒拌缃戦〉
+ window.open('https://www.sheitc.sh.gov.cn/','_blank')
+}
+const scrollToTop = () => {
+ nextTick(() => {
+ // console.log('鎴戣鎵撳嵃浜�');
+ document.getElementById('app-page').scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
+ });
+};
+
+const showCustomerService = ref(false);
</script>
<style scoped>
-.banner-slide {
+.carousel-item {
+ width: 100%;
height: 100%;
+ overflow: hidden;
+ position: relative;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.carousel-image {
+ width: 100%;
+ /* height: 100%; */
+ object-fit: fill; /* 淇敼涓篺ill浠ュ畬鍏ㄥ～鍏呭鍣� */
}
.function-card {
- transition: transform 0.2s;
+ transition: all 0.3s ease;
}
.function-card:hover {
transform: translateY(-4px);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
-
+.eec-product-div {
+ background-image: url('@/assets/home/eec_product_bg.jpg');
+}
+.eec-product-num-div {
+ min-width: 230px;
+ border: 1px solid rgb(28, 151, 183);
+ height: 100%;
+ display: flex;
+ overflow: hidden;
+ height: 255px;
+}
+#eec-product-map {
+ width: 100%;
+ height: 100%;
+}
+.mySwiper {
+ width: 100%;
+ height: 100%;
+}
+.card-hover-style {
+ /* display: flex;
+ justify-content: center;
+ align-items: center; */
+ /* transform: translateY(50%); */
+ background-color: #fff;
+ color: #000;
+ margin-right: unset;
+}
:deep(.el-carousel__arrow) {
- background-color: rgba(255, 255, 255, 0.3);
+ background-color: rgba(0, 0, 0, 0.5);
border: none;
+ width: 44px;
+ height: 44px;
+ font-size: 20px;
&:hover {
- background-color: rgba(255, 255, 255, 0.5);
+ background-color: rgba(0, 0, 0, 0.7);
}
+
+ i {
+ color: #fff;
+ }
+}
+
+.news-item {
+ cursor: pointer;
+ border-bottom: 1px solid #e3e3e3;
+ &:first-child {
+ border-top: 1px solid #e3e3e3;
+ }
+ &:last-child {
+ border-bottom: none;
+ }
+}
+
+:deep(.customer-service-dialog .el-dialog__body) {
+ padding: 0;
+}
+
+:deep(.customer-service-dialog .el-dialog__header) {
+ display: block;
}
</style>
--
Gitblit v1.9.3