From 9831a1c47f949eb46f40fa468a3b476bb2bc8c72 Mon Sep 17 00:00:00 2001 From: gerson <1405270578@qq.com> Date: 星期二, 18 二月 2025 21:30:39 +0800 Subject: [PATCH] 修改第一个文章 --- src/views/Home.vue | 179 ++++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 115 insertions(+), 64 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index 8dcd008..fcee4bc 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,23 +1,23 @@ <template> <div class="h-full"> <!-- 杞挱鍥鹃儴鍒� --> - <div class="banner-carousel relative right-[29.5%] w-screen"> + <div class="banner-carousel relative right-[29.5%] w-screen"> <el-carousel height="500px" :interval="5000" arrow="always"> <el-carousel-item> <div class="carousel-item"> - <img src="@/assets/carousel/test/10.png" class="carousel-image" /> + <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/test/11.png" class="carousel-image" /> + <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/test/14.png" class="carousel-image" /> + <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> @@ -31,11 +31,18 @@ <div class="bg-white py-8"> <div class="mx-auto px-32"> <div class="grid grid-cols-4 divide-x-w-default"> - <router-link to="/subsidy-application" class="block" style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3"> + <router-link + to="/subsidy-application" + 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"/> + <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> @@ -48,7 +55,10 @@ <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"/> + <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> @@ -61,7 +71,10 @@ <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"/> + <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> @@ -71,11 +84,15 @@ </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('http://xpump.net/#/Index')"> + <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> + <!-- <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> @@ -134,37 +151,36 @@ <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> + <span class="text-medium font-bold"> <span class="text-primary">鏂伴椈</span>鏀跨瓥</span> </div> - <el-button text>鏇村</el-button> + <el-button text >鏇村</el-button> </div> <div class="flex"> - <img - class="w-[30%] flex-0" - src="https://www.app-i.cn/api/file?file_name=f9afde4d-6993-43e6-9ea5-fa2359161b4d.png;2(1).png" - alt="閫氱煡鍏憡" - /> - <div class="bg-page p-4 flex-auto"> - <div class="font-bold text-medium over-ellipsis mb-2"> - 姝︽眽甯備汉姘戞斂搴滃叧浜庡嵃鍙戞姹夊競鍏充簬杩涗竴姝ヤ績杩涜蒋浠跺拰淇℃伅鎶�鏈湇鍔′笟楂樿川閲� + <img class="w-[30%] flex-0 cursor-pointer" src="@/assets/home/notice.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 - v-for="(item, index) in newsList" - :key="index" - class="flex text-regular justify-between items-center py-2" - style="border-bottom: 1px solid #e3e3e3" - > - <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="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 class="text-gray-400 text-sm">{{ item.date }}</div> --> </div> </div> </div> @@ -175,17 +191,17 @@ <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> + <span class="text-medium font-bold"> <span class="text-primary">璁よ瘉</span>浜у搧</span> </div> - <el-button text>鏇村</el-button> + <el-button text @click="routeClick('/certified-products')">鏇村</el-button> </div> <div class="flex bg-[#f9f9f9]"> <div class="flex-auto"> - <img src="@/assets/images/china-map.png" alt="娲诲姩鍚堜綔" class="w-full h-full" /> + <img src="@/assets/images/china-map.png" alt="璁よ瘉浜у搧" class="w-full h-full" /> </div> <div class="bg-[#393939] h-fit my-auto w-[200px] px-4 py-2 mx-10"> <div class="flex flex-col justify-between items-center mb-4 gap-2"> - <div class="text-lg font-bold text-[#26c4f6]">鍏ㄥ浗宸ヤ笟杞欢锝滃伐涓欰PP鎬婚噺</div> + <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"> 4083<span class="text-base text-info-light-3 ml-1">涓�</span> </div> @@ -211,19 +227,10 @@ <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">宸ヤ笟杞欢 | 宸ヤ笟APP浜у搧鍒嗙被</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="w-full bg-[#f6f7f9]"> - <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="pieChart2Ref"></div> - <div class="w-[55%] h-[400px]" ref="barChart2Ref"></div> </div> </div> </div> @@ -236,10 +243,16 @@ import * as echarts from 'echarts'; import { onMounted, ref } from 'vue'; import { useRouter } from 'vue-router'; - +import YWLogo from "@/assets/logo/yw_logo.png" const router = useRouter(); const newsList = ref([ + { + id:'7', + title:'涓婃捣甯備汉姘戞斂搴滃叧浜庡嵃鍙戙�婁笂娴峰競鎺ㄥ姩澶ц妯¤澶囨洿鏂板拰娑堣垂鍝佷互鏃ф崲鏂拌鍔ㄨ鍒掞紙2024-2027骞达級銆嬬殑閫氱煡', + date:'2024-04-23', + link:'test' + }, { id: '1', title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡', @@ -264,6 +277,18 @@ 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: '瑙h浜т笟鑳芥晥鎸囧崡锛屾帹鍔ㄨ澶囧鏍囧強鏇存柊', + // date: '2024-08-05', + // link: 'https://sheitc.sh.gov.cn/djjcdt/20240805/e8b8b4db2fb445f88b22b72f45132d68.html', + // }, // { // title: '鍗板彂鎺ㄥ姩宸ヤ笟棰嗗煙璁惧鏇存柊宸ヤ綔瀹炴柦鏂规鐨勯�氱煡', // date: '2024-10-22', @@ -289,13 +314,19 @@ const linkClick = (url) => { window.open(url, '_blank'); }; + +const routeClick = (url) => { + router.push(url); +}; const cooperationData = ref([ - { region: '绂忓缓鐪�', count: 7 }, - { region: '閲嶅簡甯�', count: 6 }, - { region: '涓婃捣甯�', count: 184 }, - { region: '婀栧寳鐪�', count: 4 }, - { region: '骞夸笢鐪�', count: 249 }, + { region: '涓婃捣鐪�', count: 389 }, + { region: '姹熻嫃鐪�', count: 281 }, + { region: '娴欐睙鐪�', count: 198 }, + { region: '婀栧崡鐪�', count: 125 }, + { region: '婀栧寳鐪�', count: 89 }, ]); + + const handleNewsClick = (item: any) => { // if (item.link) { @@ -308,12 +339,19 @@ // 鍥捐〃鏁版嵁 const chartData = [ - { name: '鐮斿彂璁捐绫�', value: 644, percentage: '15.77%' }, - { name: '鐢熶骇鍒堕�犵被', value: 1058, percentage: '25.91%' }, - { name: '杩愮淮鏈嶅姟绫�', value: 934, percentage: '22.88%' }, - { name: '缁忚惀绠$悊绫�', value: 1035, percentage: '25.35%' }, - { name: '鏀拺淇濋殰绫�', value: 412, percentage: '10.09%' }, + { 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); @@ -324,7 +362,7 @@ const pieChart = echarts.init(pieChartRef.value); pieChart.setOption({ title: { - text: '鎬婚噺\n4083', + text: `鎬婚噺\n${totalCount.value}`, left: '30%', top: '50%', textStyle: { @@ -388,7 +426,7 @@ const barChart = echarts.init(barChartRef.value); barChart.setOption({ title: { - text: '鐮斿彂璁捐绫讳骇鍝佹暟閲忕粺璁�', + text: '鑳芥晥浜у搧鍒嗙被鏁伴噺缁熻', left: 'center', top: 10, }, @@ -406,7 +444,7 @@ }, xAxis: { type: 'category', - data: ['姹熻嫃鐪�', '鍖椾含甯�', '涓婃捣甯�', '娴欐睙鐪�', '骞夸笢鐪�', '灞变笢鐪�'], + data: chartData.map((item) => item.name), axisLabel: { interval: 0, rotate: 30, @@ -418,7 +456,7 @@ }, series: [ { - data: [260, 240, 35, 25, 20, 8], + data: chartData.map((item) => item.value), type: 'bar', barWidth: '40%', itemStyle: { @@ -626,4 +664,17 @@ color: #fff; } } + +.news-item { + cursor: pointer; + border-bottom: 1px solid #e3e3e3; + &:first-child { + border-top: 1px solid #e3e3e3; + } + &:last-child { + border-bottom: none; + } +} + + </style> -- Gitblit v1.9.3