<template>
|
<div class="h-full ">
|
<!-- 轮播图部分 -->
|
<div class="banner-carousel">
|
<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="bg-white py-8">
|
<div class="container mx-auto px-4">
|
<div class="grid grid-cols-4 gap-8">
|
<!-- 发APP -->
|
<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">发APP</div>
|
<div class="text-gray-500 text-sm">Publish APP</div>
|
</div>
|
</el-card>
|
</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>
|
|
<!-- 找APP -->
|
<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>
|
<div class="text-lg font-medium">找APP</div>
|
<div class="text-gray-500 text-sm">Find APP</div>
|
</div>
|
</el-card>
|
</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>
|
</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>
|
<el-button text>更多</el-button>
|
</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>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue';
|
import { Promotion, Document, Search, List } from '@element-plus/icons-vue';
|
|
const newsList = ref([
|
{
|
title: '武汉市人民政府关于印发武汉市关于进一步促进软件和信息技术服务业高质量发展若干政策措施的通知',
|
date: '2024-02-12',
|
},
|
{
|
title: '关于印发《宁波市促进软件产业高质量发展专项政策意见》的通知',
|
date: '2024-02-11',
|
},
|
{
|
title: '广东省工业和信息化厅关于开展2024年特大人才专项项目验收推荐工作的通知',
|
date: '2024-02-10',
|
},
|
]);
|
</script>
|
|
<style scoped>
|
.banner-slide {
|
height: 100%;
|
}
|
|
.function-card {
|
transition: transform 0.2s;
|
}
|
|
.function-card:hover {
|
transform: translateY(-4px);
|
}
|
|
:deep(.el-carousel__arrow) {
|
background-color: rgba(255, 255, 255, 0.3);
|
border: none;
|
|
&:hover {
|
background-color: rgba(255, 255, 255, 0.5);
|
}
|
}
|
</style>
|
