<template>
|
<div class="container mx-auto px-4 py-8">
|
<h1 class="text-2xl font-bold mb-6">应用推广</h1>
|
|
<!-- 应用分类 -->
|
<el-card class="mb-6">
|
<template #header>
|
<div class="font-medium">应用分类</div>
|
</template>
|
<div class="flex flex-wrap gap-4">
|
<el-tag
|
v-for="tag in categories"
|
:key="tag"
|
class="cursor-pointer px-4 py-2"
|
:effect="selectedCategory === tag ? 'dark' : 'plain'"
|
@click="selectedCategory = tag"
|
>
|
{{ tag }}
|
</el-tag>
|
</div>
|
</el-card>
|
|
<!-- 应用列表 -->
|
<div class="grid grid-cols-4 gap-6">
|
<el-card v-for="app in applications" :key="app.id" class="app-card">
|
<div class="flex flex-col h-full">
|
<img :src="app.image" :alt="app.name" class="w-full h-40 object-cover mb-4 rounded" />
|
<h3 class="text-lg font-medium mb-2">{{ app.name }}</h3>
|
<p class="text-gray-500 text-sm mb-4 flex-1">{{ app.description }}</p>
|
<div class="flex justify-between items-center">
|
<el-rate v-model="app.rating" disabled />
|
<el-button type="primary" plain size="small">查看详情</el-button>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
|
<!-- 分页 -->
|
<div class="flex justify-center mt-8">
|
<el-pagination v-model:current-page="currentPage" :page-size="12" :total="100" layout="prev, pager, next" />
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from 'vue';
|
|
const categories = ['全部', '工业控制', '数据分析', '智能制造', '物联网', '数字孪生', '人工智能', '云计算'];
|
|
const selectedCategory = ref('全部');
|
const currentPage = ref(1);
|
|
const applications = ref([
|
{
|
id: 1,
|
name: '智能工厂管理系统',
|
description: '提供完整的工厂数字化管理解决方案，包括生产管理、设备管理、质量管理等模块。',
|
image: 'https://via.placeholder.com/300x200',
|
rating: 4.5,
|
},
|
{
|
id: 2,
|
name: '工业数据分析平台',
|
description: '基于人工智能的工业数据分析平台，提供实时监控、预测性维护等功能。',
|
image: 'https://via.placeholder.com/300x200',
|
rating: 4.8,
|
},
|
{
|
id: 3,
|
name: '工业物联网平台',
|
description: '连接各类工业设备，实现数据采集、设备管理、远程控制等功能。',
|
image: 'https://via.placeholder.com/300x200',
|
rating: 4.2,
|
},
|
{
|
id: 4,
|
name: '数字孪生系统',
|
description: '构建物理设备的数字映射，实现设备状态监控、性能优化等功能。',
|
image: 'https://via.placeholder.com/300x200',
|
rating: 4.6,
|
},
|
]);
|
</script>
|
|
<style scoped>
|
.app-card {
|
transition: transform 0.2s;
|
}
|
|
.app-card:hover {
|
transform: translateY(-4px);
|
}
|
</style>
|
