From 27bcd575be4509114dc4a87b8008cf94aef9aede Mon Sep 17 00:00:00 2001 From: wujingjing <gersonwu@qq.com> Date: 星期四, 13 二月 2025 16:18:05 +0800 Subject: [PATCH] 新闻详情页面 --- src/views/Home.vue | 52 +++++++++++++++++++++++++++++++++++----------------- 1 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index 87eb281..872b446 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -5,17 +5,20 @@ <el-carousel height="500px" :interval="5000" arrow="always"> <el-carousel-item> <div class="carousel-item"> - <img src="@/assets/carousel/1.png" class="carousel-image" /> + <img src="@/assets/carousel/test/10.png" 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/4.png" class="carousel-image" /> + <img src="@/assets/carousel/2.png" 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/3.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> @@ -23,7 +26,7 @@ </el-carousel-item> --> </el-carousel> </div> - <div class="relative z-20 2"> + <div class="relative z-20 2 -mt-24"> <!-- 鍔熻兘鎸夐挳鍖哄煙 --> <div class="bg-white py-8"> <div class="mx-auto px-32"> @@ -34,7 +37,7 @@ <img src="@/assets/icons/publish-app.svg" alt="鍙慉PP" class="w-full h-full" /> </div> <div> - <div class="text-lg font-medium">鍙慉PP</div> + <div class="text-lg font-medium">琛ヨ创鐢宠</div> <div class="text-sm text-info-light-3">Publish APP</div> </div> </div> @@ -45,7 +48,7 @@ <img src="@/assets/icons/publish-app.svg" alt="鍙慉PP" class="w-full h-full" /> </div> <div> - <div class="text-lg font-medium">鍙慉PP</div> + <div class="text-lg font-medium">璁よ瘉浜у搧</div> <div class="text-sm text-info-light-3">Publish APP</div> </div> </div> @@ -56,18 +59,18 @@ <img src="@/assets/icons/publish-app.svg" alt="鍙慉PP" class="w-full h-full" /> </div> <div> - <div class="text-lg font-medium">鎵続PP</div> + <div class="text-lg font-medium">璇佷功鏌ヨ</div> <div class="text-sm text-info-light-3">Find APP</div> </div> </div> </router-link> - <router-link to="/publish-app" class="block" style="border-right: 1px solid #e3e3e3"> + <router-link to="https://www.xpump.net" class="block" style="border-right: 1px solid #e3e3e3"> <div class="flex items-center gap-1 justify-center"> <div class="w-16 h-16"> <img src="@/assets/icons/publish-app.svg" alt="鍙慉PP" class="w-full h-full" /> </div> <div> - <div class="text-lg font-medium">鍙慉PP</div> + <div class="text-lg font-medium">鏌ユ车缃�</div> <div class="text-sm text-info-light-3">Publish APP</div> </div> </div> @@ -147,7 +150,7 @@ 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.link)"> + <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 }} @@ -224,27 +227,34 @@ import { Document, Operation } from '@element-plus/icons-vue'; import * as echarts from 'echarts'; import { onMounted, ref } from 'vue'; +import { useRouter } from 'vue-router'; + +const router = useRouter(); const newsList = ref([ { + id: '1', title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡', date: '2025-02-07', link: 'https://sheitc.sh.gov.cn/jjyx/20250207/7e424cc336b84066890ba2366c4543a1.html', }, { + 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', }, { - title: '涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佸疄鏂界粏鍒�', - date: '2025-01-06', - link: 'https://service.shanghai.gov.cn/XingZhengWenDangKuJyh/XZGFDetails.aspx?docid=250120100555h7fouO6RCg6qGzauglW', + id: '4', + title: '鍗板彂鎺ㄥ姩宸ヤ笟棰嗗煙璁惧鏇存柊宸ヤ綔瀹炴柦鏂规鐨勯�氱煡', + date: '2024-10-22', + link: 'https://gxj.quanzhou.gov.cn/zwgk/zfxxgk/fdzdgknr/gzdt/202410/t20241022_3093021.htm', }, // { // title: '鍗板彂鎺ㄥ姩宸ヤ笟棰嗗煙璁惧鏇存柊宸ヤ綔瀹炴柦鏂规鐨勯�氱煡', @@ -276,8 +286,13 @@ { region: '骞夸笢鐪�', count: 249 }, ]); -const handleNewsClick = (link: string) => { - window.open(link, '_blank'); +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}`); }; // 鍥捐〃鏁版嵁 @@ -565,13 +580,16 @@ overflow: hidden; position: relative; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; } .carousel-image { width: 100%; - height: 100%; - object-fit: cover; /* 淇濇寔鍥剧墖姣斾緥骞跺~鍏呭鍣� */ - object-position: center center; /* 灞呬腑鏄剧ず鍥剧墖 */ + /* height: 100%; */ + object-fit: fill; /* 淇敼涓篺ill浠ュ畬鍏ㄥ~鍏呭鍣� */ + } .function-card { -- Gitblit v1.9.3