<template>
|
<div class="container mx-auto px-4 py-8">
|
<!-- 顶部分类菜单 -->
|
<div class="bg-white rounded-lg shadow mb-6">
|
<!-- 行业通用 -->
|
<div class="border-b p-4">
|
<div class="flex items-center mb-2">
|
<span class="text-gray-500 w-24">行业通用：</span>
|
<div class="flex flex-1 gap-4">
|
<el-button
|
v-for="item in industryTypes"
|
:key="item"
|
:type="selectedIndustry === item ? 'primary' : 'default'"
|
class="!px-4"
|
@click="selectedIndustry = item"
|
>
|
{{ item }}
|
</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 工业软件|工业APP产品分类 -->
|
<div class="border-b p-4">
|
<div class="flex items-center mb-2">
|
<span class="text-gray-500 w-24">工业软件|工业APP产品分类：</span>
|
<div class="flex flex-1 gap-4">
|
<el-button
|
v-for="item in productTypes"
|
:key="item"
|
:type="selectedProduct === item ? 'primary' : 'default'"
|
class="!px-4"
|
@click="selectedProduct = item"
|
>
|
{{ item }}
|
</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 筛选条件 -->
|
<div class="p-4">
|
<div class="grid grid-cols-3 gap-6">
|
<el-select v-model="region" placeholder="区域" class="w-full">
|
<el-option label="全部" value="全部" />
|
<el-option label="北京" value="北京" />
|
<el-option label="上海" value="上海" />
|
<el-option label="广州" value="广州" />
|
</el-select>
|
|
<el-select v-model="industry" placeholder="制造业细分" class="w-full">
|
<el-option label="全部" value="全部" />
|
<el-option label="装备制造" value="装备制造" />
|
<el-option label="汽车制造" value="汽车制造" />
|
<el-option label="电子制造" value="电子制造" />
|
</el-select>
|
|
<el-select v-model="business" placeholder="业务环节" class="w-full">
|
<el-option label="全部" value="全部" />
|
<el-option label="研发设计" value="研发设计" />
|
<el-option label="生产制造" value="生产制造" />
|
<el-option label="运营管理" value="运营管理" />
|
</el-select>
|
</div>
|
</div>
|
</div>
|
|
<!-- 排序选项 -->
|
<div class="flex gap-4 mb-6">
|
<el-button
|
v-for="sort in sortOptions"
|
:key="sort"
|
:type="selectedSort === sort ? 'primary' : 'default'"
|
class="!px-6"
|
@click="selectedSort = sort"
|
>
|
{{ sort }}
|
</el-button>
|
</div>
|
|
<!-- 软件列表 -->
|
<div class="grid grid-cols-4 gap-6">
|
<el-card v-for="(app, index) in softwareList" :key="index" class="software-card">
|
<div class="flex flex-col h-full">
|
<img :src="app.logo" :alt="app.name" class="w-24 h-24 object-contain mb-4 mx-auto" />
|
<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 flex-wrap gap-2 mb-4">
|
<el-tag size="small" type="info">{{ app.type }}</el-tag>
|
<el-tag size="small" type="success">{{ app.industry }}</el-tag>
|
</div>
|
<div class="flex justify-between items-center">
|
<el-rate v-model="app.rating" disabled />
|
<span class="text-gray-400 text-sm">{{ app.date }}</span>
|
</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 industryTypes = ['全部', '基础共性类', '行业通用类', '企业专用类', '其他类'];
|
const productTypes = ['全部', '研发设计类', '生产制造类', '运维服务类', '经营管理类', '支撑保障类'];
|
const sortOptions = ['最新', '推荐指数', '下载量', '星级', '评分'];
|
|
// 选中状态
|
const selectedIndustry = ref('全部');
|
const selectedProduct = ref('全部');
|
const selectedSort = ref('最新');
|
const region = ref('全部');
|
const industry = ref('全部');
|
const business = ref('全部');
|
const currentPage = ref(1);
|
|
// 示例数据
|
const softwareList = ref([
|
{
|
name: '风火数字-报废车管理-过磅管理系统',
|
description: '微信小程序客户端自主开发的下单系统，用户仅需通过微信内的报废车预约下单，用户可通过微信内的报废车预约下单。',
|
logo: 'https://via.placeholder.com/150',
|
type: '行业通用类',
|
industry: '生产制造类',
|
rating: 5,
|
date: '2024-01-06',
|
},
|
{
|
name: '权客专利年费管理系统',
|
description: '权客专利年费管理软件是由运营权客信息科技有限公司自主开发的一款专利年费管理软件。',
|
logo: 'https://via.placeholder.com/150',
|
type: '企业专用类',
|
industry: '经营管理类',
|
rating: 4.5,
|
date: '2024-12-25',
|
},
|
{
|
name: '通信信号处理系统',
|
description: '通信信号处理与分析系统软件是一套用于对通信信号进行分析和处理的系统。',
|
logo: 'https://via.placeholder.com/150',
|
type: '基础共性类',
|
industry: '研发设计类',
|
rating: 4.8,
|
date: '2024-12-20',
|
},
|
{
|
name: '智能技术服务管理系统',
|
description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
|
logo: 'https://via.placeholder.com/150',
|
type: '行业通用类',
|
industry: '运维服务类',
|
rating: 4.2,
|
date: '2024-12-20',
|
},
|
]);
|
</script>
|
|
<style scoped>
|
.software-card {
|
transition: transform 0.2s;
|
}
|
|
.software-card:hover {
|
transform: translateY(-4px);
|
}
|
|
:deep(.el-button--default) {
|
--el-button-bg-color: transparent;
|
--el-button-border-color: transparent;
|
--el-button-hover-bg-color: var(--el-color-primary-light-9);
|
--el-button-hover-border-color: transparent;
|
}
|
</style>
|
