<template>
|
<div class="container mx-auto px-4 py-8">
|
<h1 class="text-2xl font-bold mb-6">公共服务</h1>
|
|
<!-- 服务分类 -->
|
<div class="grid grid-cols-3 gap-6 mb-8">
|
<el-card v-for="service in services" :key="service.title" class="service-card">
|
<div class="flex items-start space-x-4">
|
<div class="w-12 h-12 flex items-center justify-center rounded-lg" :class="service.bgColor">
|
<el-icon class="text-2xl" :class="service.iconColor">
|
<component :is="service.icon" />
|
</el-icon>
|
</div>
|
<div class="flex-1">
|
<h3 class="text-lg font-medium mb-2">{{ service.title }}</h3>
|
<p class="text-gray-500 text-sm">{{ service.description }}</p>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
|
<!-- 通知公告 -->
|
<el-card class="mb-8">
|
<template #header>
|
<div class="flex justify-between items-center">
|
<span class="font-medium">通知公告</span>
|
<el-button text>更多</el-button>
|
</div>
|
</template>
|
<el-timeline>
|
<el-timeline-item v-for="notice in notices" :key="notice.id" :timestamp="notice.date" placement="top">
|
<div class="text-gray-700 hover:text-blue-500 cursor-pointer">
|
{{ notice.title }}
|
</div>
|
</el-timeline-item>
|
</el-timeline>
|
</el-card>
|
|
<!-- 常见问题 -->
|
<el-card>
|
<template #header>
|
<div class="flex justify-between items-center">
|
<span class="font-medium">常见问题</span>
|
<el-button text>查看全部</el-button>
|
</div>
|
</template>
|
<el-collapse v-model="activeNames">
|
<el-collapse-item v-for="faq in faqs" :key="faq.id" :title="faq.question" :name="faq.id">
|
<div class="text-gray-600">{{ faq.answer }}</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue';
|
import { Service, Document, QuestionFilled, Setting } from '@element-plus/icons-vue';
|
|
const services = [
|
{
|
title: '技术支持',
|
description: '提供专业的技术咨询和问题解决服务',
|
icon: 'Service',
|
bgColor: 'bg-blue-100',
|
iconColor: 'text-blue-500',
|
},
|
{
|
title: '文档中心',
|
description: '提供完整的产品文档和技术资料',
|
icon: 'Document',
|
bgColor: 'bg-green-100',
|
iconColor: 'text-green-500',
|
},
|
{
|
title: '培训服务',
|
description: '提供专业的技术培训和能力提升服务',
|
icon: 'Setting',
|
bgColor: 'bg-purple-100',
|
iconColor: 'text-purple-500',
|
},
|
];
|
|
const notices = [
|
{
|
id: 1,
|
title: '关于开展2024年工业软件技术创新项目申报的通知',
|
date: '2024-02-12',
|
},
|
{
|
id: 2,
|
title: '2024年度工业软件服务能力评估工作启动',
|
date: '2024-02-10',
|
},
|
{
|
id: 3,
|
title: '关于组织开展工业APP优秀案例征集的通知',
|
date: '2024-02-08',
|
},
|
];
|
|
const faqs = [
|
{
|
id: 1,
|
question: '如何申请成为平台开发者？',
|
answer: '您需要在平台注册账号，完善个人或企业信息，提交相关资质证明文件，经平台审核通过后即可成为开发者。',
|
},
|
{
|
id: 2,
|
question: '如何发布工业APP？',
|
answer: '登录开发者账号，进入"发布管理"页面，填写APP相关信息，上传安装包，提交审核，审核通过后即可上线。',
|
},
|
{
|
id: 3,
|
question: '平台支持哪些类型的应用？',
|
answer: '平台支持工业控制、数据分析、智能制造、物联网、数字孪生等多个领域的应用。',
|
},
|
];
|
|
const activeNames = ref(['1']);
|
</script>
|
|
<style scoped>
|
.service-card {
|
transition: transform 0.2s;
|
}
|
|
.service-card:hover {
|
transform: translateY(-4px);
|
}
|
</style>
|
