| | |
| | | <template> |
| | | <div class="h-full"> |
| | | <!-- 轮播图部分 --> |
| | | <div class="banner-carousel bg-primary 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/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/test/11.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="@/assets/carousel/test/14.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> |
| | |
| | | </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"> |
| | | <div class="grid grid-cols-4 divide-x-w-default"> |
| | | <router-link to="/publish-app" 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"> |
| | | <img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" /> |
| | | <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">发APP</div> |
| | | <div class="text-sm text-info-light-3">Publish APP</div> |
| | | <div class="text-lg font-medium">补贴申请</div> |
| | | <div class="text-sm text-info-light-3">Subsidy Application</div> |
| | | </div> |
| | | </div> |
| | | </router-link> |
| | | <router-link to="/publish-app" class="block" style="border-right: 1px solid #e3e3e3"> |
| | | <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"> |
| | | <img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" /> |
| | | <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">发APP</div> |
| | | <div class="text-sm text-info-light-3">Publish APP</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="/industrial-software" class="block" style="border-right: 1px solid #e3e3e3"> |
| | | <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"> |
| | | <img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" /> |
| | | <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">找APP</div> |
| | | <div class="text-sm text-info-light-3">Find APP</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="/publish-app" class="block" style="border-right: 1px solid #e3e3e3"> |
| | | <div class="flex items-center gap-1 justify-center"> |
| | | <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="w-16 h-16"> |
| | | <img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" /> |
| | | <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> |
| | | </div> |
| | | <div> |
| | | <div class="text-lg font-medium">发APP</div> |
| | | <div class="text-sm text-info-light-3">Publish APP</div> |
| | | <div class="text-lg font-medium">查泵网</div> |
| | | <div class="text-sm text-info-light-3">Pump Search</div> |
| | | </div> |
| | | </div> |
| | | </router-link> |
| | |
| | | <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> |
| | | </div> |
| | |
| | | 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 }} |
| | |
| | | <div class="flex-auto"> |
| | | <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="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]">全国工业软件|工业APP总量</div> |
| | | <div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning"> |
| | |
| | | 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: '印发推动工业领域设备更新工作实施方案的通知', |
| | |
| | | // }, |
| | | ]); |
| | | |
| | | const linkClick = (url) => { |
| | | window.open(url, '_blank'); |
| | | }; |
| | | const cooperationData = ref([ |
| | | { region: '福建省', count: 7 }, |
| | | { region: '重庆市', count: 6 }, |
| | |
| | | { 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}`); |
| | | }; |
| | | |
| | | // 图表数据 |
| | |
| | | pieChart.setOption({ |
| | | title: { |
| | | text: '总量\n4083', |
| | | left: 'center', |
| | | top: 'center', |
| | | left: '30%', |
| | | top: '50%', |
| | | textStyle: { |
| | | fontSize: 20, // 增大字体大小 |
| | | fontSize: 14, |
| | | lineHeight: 24, |
| | | align: 'center', |
| | | fontWeight: 'bold', // 加粗显示 |
| | | fontWeight: 'normal', |
| | | rich: { |
| | | value: { |
| | | fontSize: 24, |
| | | fontWeight: 'bold', |
| | | padding: [10, 0], |
| | | }, |
| | | }, |
| | | }, |
| | | textAlign: 'center', |
| | | textVerticalAlign: 'middle', |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | right: '10%', |
| | | right: '-1%', |
| | | top: 'middle', |
| | | formatter: (name: string) => { |
| | | const item = chartData.find((d) => d.name === name); |
| | |
| | | pieChart2.setOption({ |
| | | title: { |
| | | text: '总量\n4083', |
| | | left: 'center', |
| | | top: 'center', |
| | | left: '30%', |
| | | top: '50%', |
| | | textStyle: { |
| | | fontSize: 20, |
| | | fontSize: 14, |
| | | lineHeight: 24, |
| | | align: 'center', |
| | | fontWeight: 'bold', |
| | | fontWeight: 'normal', |
| | | rich: { |
| | | value: { |
| | | fontSize: 24, |
| | | fontWeight: 'bold', |
| | | padding: [10, 0], |
| | | }, |
| | | }, |
| | | }, |
| | | textAlign: 'center', |
| | | textVerticalAlign: 'middle', |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | |
| | | }, |
| | | legend: { |
| | | orient: 'vertical', |
| | | right: '10%', |
| | | right: '-1%', |
| | | top: 'middle', |
| | | formatter: (name: string) => { |
| | | const item = chartData2.find((d) => d.name === name); |
| | |
| | | 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; /* 修改为fill以完全填充容器 */ |
| | | } |
| | | |
| | | .function-card { |