<template>
|
<div class="h-full">
|
<!-- 轮播图部分 -->
|
<div class="banner-carousel bg-primary relative right-[29.5%] w-screen">
|
<el-carousel height="400px" :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>
|
</div>
|
<div class="w-1/3">
|
<div class="text-6xl font-bold text-blue-400">40</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
<div class="-mt-20 relative z-20">
|
<!-- 功能按钮区域 -->
|
<div class="bg-[#f3f3f3] py-8 -mt-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">
|
<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" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">发APP</div>
|
<div class="text-sm text-info-light-3">Publish APP</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">
|
<div class="w-16 h-16">
|
<img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">发APP</div>
|
<div class="text-sm text-info-light-3">Publish APP</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">
|
<div class="w-16 h-16">
|
<img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">发APP</div>
|
<div class="text-sm text-info-light-3">Publish APP</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">
|
<div class="w-16 h-16">
|
<img src="@/assets/icons/publish-app.svg" alt="发APP" class="w-full h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">发APP</div>
|
<div class="text-sm text-info-light-3">Publish APP</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>
|
</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="找APP" class="w-full h-full" />
|
</div>
|
<div>
|
<div class="text-lg font-medium">找APP</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">
|
<!-- 新闻公告区域 -->
|
<div class="mx-auto">
|
<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-medium"> <span class="text-primary">通知</span>公告</span>
|
</div>
|
<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">武汉市人民政府关于印发武汉市关于进一步促进软件和信息技术服务业高质量</div>
|
<div class="text-small text-regular">
|
各区人民政府，市人民政府各部门：
|
经研究，现将《武汉市关于进一步促进软件和信息技术服务业高质量发展的若干政策措施》印发给你们，请认真组织实施。
|
</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">
|
<!-- <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>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Document } from '@element-plus/icons-vue';
|
import { ref } from 'vue';
|
|
const newsList = ref([
|
{
|
title: '关于印发《宁波市促进软件产业高质量发展专项政策意见》的通知',
|
date: '2024-02-11',
|
},
|
{
|
title: '广东省工业和信息化厅关于开展2024年有关人才专项项目榜单推荐工作的通知',
|
date: '2024-02-11',
|
},
|
{
|
title: '关于印发《宁波市软件产业突破提升发展行动方案》的通知',
|
date: '2024-02-11',
|
},
|
{
|
title: '武汉市经信局关于对《武汉市关于进一步促进软件和信息技术服务业高质量发展的若干政策（征求意见稿）》公开征求意见的通知',
|
date: '2024-02-11',
|
},
|
]);
|
</script>
|
|
<style scoped>
|
.banner-slide {
|
height: 100%;
|
}
|
|
.function-card {
|
transition: all 0.3s ease;
|
}
|
|
.function-card:hover {
|
transform: translateY(-4px);
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
}
|
|
:deep(.el-carousel__arrow) {
|
background-color: rgba(255, 255, 255, 0.3);
|
border: none;
|
|
&:hover {
|
background-color: rgba(255, 255, 255, 0.5);
|
}
|
}
|
</style>
|
