<template>
|
<div class="container mx-auto px-4 py-8 bg-grey">
|
<div class="industrial-soft-style w-100 h-100" style="background-color: #fff;">
|
<!-- 顶部分类菜单 -->
|
<div class=" rounded-lg shadow " style="background-color: #f6f7f9;margin-bottom: 10px;">
|
<!-- 行业通用 -->
|
<div class="border-b p-4 border-bottom-dashed-1 box-border">
|
<div class="flex items-center">
|
<span class="text-gray-500 ">行业通用：</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 border-bottom-dashed-1 box-border">
|
<div class="flex items-center ">
|
<span class="text-gray-500">工业软件|工业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="flex gap-2">
|
<div class="flex items-center">
|
<label>区域：</label>
|
<el-select v-model="region" placeholder="区域" class="w-full" style="width: 220px;">
|
<el-option label="全部" value="全部" />
|
<el-option label="北京" value="北京" />
|
<el-option label="上海" value="上海" />
|
<el-option label="广州" value="广州" />
|
</el-select>
|
</div>
|
<div class="flex items-center">
|
<label>制造业集群：</label>
|
<el-select v-model="industry" placeholder="制造业细分" class="w-full" style="width: 220px;">
|
<el-option label="全部" value="全部" />
|
<el-option label="装备制造" value="装备制造" />
|
<el-option label="汽车制造" value="汽车制造" />
|
<el-option label="电子制造" value="电子制造" />
|
</el-select>
|
</div>
|
<div class="flex items-center">
|
<label>业务环节：</label>
|
<el-select v-model="business" placeholder="业务环节" class="w-full" style="width: 220px;">
|
<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 p-4" style="background-color: #ecedee;">
|
<el-button v-for="sort in sortOptions" :key="sort.tag"
|
:type="selectedSort === sort.tag ? 'primary' : 'default'" class="!px-6"
|
@click="changeSelectType(sort.tag)">
|
{{ sort.name }}
|
</el-button>
|
</div>
|
</div>
|
<!-- 软件列表 -->
|
<div class="grid grid-cols-5 gap-4" style="padding: 0 10px;">
|
<div v-for="(app, index) in dispProductType" :key="index" class="goods-warp-item software-card">
|
<div class="flex flex-col h-full" style="cursor: pointer;">
|
<img :src="app.logo" :alt="app.name" class=" object-contain mx-auto goods-img" />
|
<!-- <h3 class="text-lg font-medium mb-2">{{ app.name }}</h3> -->
|
<div class="goods-name" :title="app.name">{{ app.name }}</div>
|
<div class="metertitle mb-2"><span>订货编码：{{ app.applicationCode }}</span></div>
|
<!-- <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="goods-price"><span class="goods-price-selling">{{ app.price }}</span> </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 class="link-btn">立即购入</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 分页 -->
|
<div class="flex justify-center mt-8">
|
<!-- <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
|
:page-sizes="[10, 50, 300, 400]" :size="size" :disabled="disabled" :background="background"
|
layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
|
@current-change="handleCurrentChange" /> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue';
|
|
// 分类选项
|
const industryTypes = ['全部', '基础共性类', '行业通用类', '企业专用类', '其他类'];
|
const productTypes = ['全部', '研发设计类', '生产制造类', '运维服务类', '经营管理类', '支撑保障类'];
|
const sortOptions = [
|
{ name: "电机", tag: "motorPower" },
|
{ name: "泵", tag: 'pump' },
|
{ name: '容积式空压机', tag: 'volumetricPressureMachine' },
|
{ name: "通风机", tag: 'exhaustMachine' },
|
{ name: "冷水机组", tag: 'coldPowerGenerationUnit' },
|
{ name: "电力变压器", tag: 'electricTransformer' },
|
{ name: "工业锅炉", tag: 'industrialBoiler' },
|
];
|
|
// 选中状态
|
const selectedIndustry = ref('全部');
|
const selectedProduct = ref('全部');
|
const selectedSort = ref('motorPower');
|
const region = ref('全部');
|
const industry = ref('全部');
|
const business = ref('全部');
|
const currentPage = ref(1);
|
|
// 示例数据
|
const softwareList = ref([
|
{
|
id:1,
|
name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台',
|
description: '微信小程序客户端自主开发的下单系统，用户仅需通过微信内的报废车预约下单，用户可通过微信内的报废车预约下单。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735778771000',
|
type: '行业通用类',
|
applicationCode: "AE2977837",
|
industry: '生产制造类',
|
price: '¥1770.65',
|
rating: 5,
|
date: '2024-01-06',
|
tag: 'motorPower'
|
},
|
{
|
id:2,
|
name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台',
|
description: '权客专利年费管理软件是由运营权客信息科技有限公司自主开发的一款专利年费管理软件。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735778771000',
|
type: '企业专用类',
|
applicationCode: "AE2977841",
|
industry: '经营管理类',
|
price: '¥1770.65',
|
rating: 4.5,
|
date: '2024-12-25',
|
tag: 'motorPower'
|
},
|
{
|
id:3,
|
name: 'CNE/南阳防爆 三相异步电动机 YE5-80M1-2 0.75KW B5 380V 一级能效 1台',
|
description: '通信信号处理与分析系统软件是一套用于对通信信号进行分析和处理的系统。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735778771000',
|
type: '基础共性类',
|
applicationCode: "AE2977843",
|
industry: '研发设计类',
|
price: '¥1770.65',
|
rating: 4.8,
|
date: '2024-12-20',
|
tag: 'motorPower'
|
},
|
{
|
id:4,
|
name: 'HUALI/山东华力电机 电机 YE5-132S-4-5.5KW 卧式 一级能效 1台',
|
description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735295148000',
|
type: '行业通用类',
|
applicationCode: "AC0394797",
|
industry: '运维服务类',
|
price: '¥1770.65',
|
rating: 4.2,
|
date: '2024-12-20',
|
tag: 'motorPower'
|
},
|
{
|
id:5,
|
name: 'HUALI/山东华力电机 电机 YE5-132S-4-5.5KW 卧式 一级能效 1台',
|
description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735295148000',
|
type: '行业通用类',
|
applicationCode: "AC0394822",
|
industry: '运维服务类',
|
price: '¥1770.65',
|
rating: 4.2,
|
date: '2024-12-20',
|
tag: 'motorPower'
|
},
|
|
{
|
id:6,
|
name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL70-20-5.5/2 进出口DN100 额定流量70m³/h 额定扬程20m 5.5kW HT200叶轮 1台',
|
description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
|
type: '行业通用类',
|
applicationCode: "AC0394822",
|
industry: '运维服务类',
|
price: '¥7399.00',
|
rating: 4.2,
|
date: '2024-12-20',
|
tag: 'pump'
|
},
|
{
|
id:7,
|
name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL100-32-15/2 进出口DN100 额定流量100m³/h 额定扬程32m 15kW HT200叶轮 1台',
|
description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
|
type: '行业通用类',
|
applicationCode: "AC0394822",
|
industry: '运维服务类',
|
price: '¥10390.00',
|
rating: 4.2,
|
date: '2024-12-20',
|
tag: 'pump'
|
},
|
{
|
id:8,
|
name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL100-50-22/2 进出口DN100 额定流量100m³/h 额定扬程50m 22kW HT200叶轮 1台',
|
description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
|
type: '行业通用类',
|
applicationCode: "AC0394822",
|
industry: '运维服务类',
|
price: '¥13490.00',
|
rating: 4.2,
|
date: '2024-12-20',
|
tag: 'pump'
|
},
|
{
|
id:9,
|
name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL115-34-15/2 进出口DN100 额定流量115m³/h 额定扬程34m 15kW HT200叶轮 1台',
|
description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
|
type: '行业通用类',
|
applicationCode: "AC0394822",
|
industry: '运维服务类',
|
price: '¥10390.00',
|
rating: 4.2,
|
date: '2024-12-20',
|
tag: 'pump'
|
},
|
{
|
id:10,
|
name: 'KQ/凯泉 第六代KQL系列灰铁泵壳立式单级离心泵(YE4电机) 100KQL50-12.5-3/4 进出口DN100 额定流量50m³/h 额定扬程12.5m 3kW HT200叶轮 1台',
|
description: '智能技术服务管理系统V1.0是由远东智权信息科技有限公司自主研发的一款服务。',
|
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AE8223824_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1731595920000',
|
type: '行业通用类',
|
applicationCode: "AC0394822",
|
industry: '运维服务类',
|
price: '¥5319.0',
|
rating: 4.2,
|
date: '2024-12-20',
|
tag: 'pump'
|
},
|
]);
|
const dispProductType = ref([])
|
|
onMounted(() => {
|
filterProduct();
|
})
|
const filterProduct = () => {
|
dispProductType.value = softwareList.value.filter((item) => {
|
return item.tag===selectedSort.value
|
})
|
}
|
//监听类型选择筛选
|
const changeSelectType = (tag: string) => {
|
selectedSort.value = tag;
|
filterProduct()
|
};
|
</script>
|
|
<style scoped>
|
.w-100 {
|
width: 100%;
|
}
|
|
.h-100 {
|
height: 100%;
|
}
|
|
.software-card {
|
transition: transform 0.2s;
|
}
|
|
.goods-warp-item {
|
position: relative;
|
padding: 34px 12px 17px;
|
margin: 20px 3px 0;
|
background-color: #fff;
|
overflow: hidden;
|
box-sizing: border-box;
|
/* transition: border-color .1s ease; */
|
border-radius: 5px;
|
transition: all .3s;
|
}
|
|
.goods-warp-item:hover {
|
border-color: rgba(0, 0, 0, .09);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, .09)
|
}
|
|
.bg-grey {
|
background-color: #f4f4f4;
|
}
|
|
.software-card:hover {
|
transform: translateY(-4px);
|
}
|
|
.industrial-soft-style {
|
position: relative;
|
}
|
|
.border-bottom-dashed-1 {
|
border-bottom: 1px dashed #e2e8f0;
|
}
|
|
.box-border {
|
box-sizing: border-box;
|
}
|
|
.industrial-soft-style::after {
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 3px;
|
background-color: #38ca94;
|
background-image: linear-gradient(90deg, #9bc864, #40cb8f 21%, #00c7c4 47%, #00bcef 74%, #0af);
|
}
|
|
.goods-img {
|
max-width: 180px;
|
max-height: 180px;
|
vertical-align: top;
|
border: 0;
|
}
|
|
.goods-name {
|
position: relative;
|
width: 100%;
|
height: 42px;
|
line-height: 150%;
|
margin-top: 5px;
|
color: #333;
|
overflow: hidden;
|
text-align: left;
|
padding-left: 2px;
|
}
|
|
.metertitle {
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
position: relative;
|
width: 100%;
|
padding-left: 2px;
|
margin-top: 7px;
|
color: #999;
|
line-height: 16px;
|
overflow: hidden;
|
text-align: left
|
}
|
|
.link-btn {
|
display: inline-block;
|
width: 100%;
|
height: 32px;
|
font-size: 14px;
|
line-height: 30px;
|
background: #fff;
|
color: #e65650;
|
border: 1px solid #e2e2e2;
|
border-radius: 20px;
|
text-align: center;
|
margin-top: 3px;
|
box-sizing: border-box;
|
}
|
|
.link-btn:hover {
|
background: #e65650;
|
color: #fff;
|
cursor: pointer;
|
}
|
|
.goods-price {
|
width: 100%;
|
padding: 0 3px;
|
text-align: left;
|
box-sizing: border-box;
|
margin-bottom: 11px;
|
}
|
|
.goods-price .goods-price-selling {
|
font-size: 14px;
|
font-weight: 700;
|
color: #f74747;
|
}
|
|
: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>
|
