From cc27985706d644ddca074820255e99b96106269b Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期三, 12 二月 2025 18:15:38 +0800
Subject: [PATCH] 添加产品过滤
---
src/views/IndustrialSoftware.vue | 125 ++++++++++++++++++++++++++++++++++++-----
1 files changed, 108 insertions(+), 17 deletions(-)
diff --git a/src/views/IndustrialSoftware.vue b/src/views/IndustrialSoftware.vue
index 593cb70..c42fbae 100644
--- a/src/views/IndustrialSoftware.vue
+++ b/src/views/IndustrialSoftware.vue
@@ -67,18 +67,18 @@
<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="selectedSort = sort.tag">
+ @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 softwareList" :key="index" class="goods-warp-item software-card">
+ <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">{{ app.name }}</div>
+ <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">
@@ -86,10 +86,10 @@
<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">
+ <!-- <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> -->
<div class="link-btn">绔嬪嵆璐叆</div>
</div>
@@ -98,15 +98,17 @@
<!-- 鍒嗛〉 -->
<div class="flex justify-center mt-8">
- <el-pagination v-model:current-page="currentPage" :page-size="12" :total="100"
- layout="prev, pager, next" />
+ <!-- <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 } from 'vue';
+import { ref, onMounted } from 'vue';
// 鍒嗙被閫夐」
const industryTypes = ['鍏ㄩ儴', '鍩虹鍏辨�х被', '琛屼笟閫氱敤绫�', '浼佷笟涓撶敤绫�', '鍏朵粬绫�'];
@@ -133,6 +135,7 @@
// 绀轰緥鏁版嵁
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',
@@ -142,8 +145,10 @@
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',
@@ -153,8 +158,10 @@
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',
@@ -164,9 +171,11 @@
price: '楼1770.65',
rating: 4.8,
date: '2024-12-20',
+ tag: 'motorPower'
},
{
- name: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁�',
+ id:4,
+ name: 'HUALI/灞变笢鍗庡姏鐢垫満 鐢垫満 YE5-132S-4-5.5KW 鍗у紡 涓�绾ц兘鏁� 1鍙�',
description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735295148000',
type: '琛屼笟閫氱敤绫�',
@@ -175,9 +184,11 @@
price: '楼1770.65',
rating: 4.2,
date: '2024-12-20',
+ tag: 'motorPower'
},
{
- name: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁�',
+ id:5,
+ name: 'HUALI/灞变笢鍗庡姏鐢垫満 鐢垫満 YE5-132S-4-5.5KW 鍗у紡 涓�绾ц兘鏁� 1鍙�',
description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.0鏄敱杩滀笢鏅烘潈淇℃伅绉戞妧鏈夐檺鍏徃鑷富鐮斿彂鐨勪竴娆炬湇鍔°��',
logo: 'https://private.zkh.com/PRODUCT/BIG/BIG_AC0394822_01.jpg?x-oss-process=style/WEBPCOM_style×tamp=1735295148000',
type: '琛屼笟閫氱敤绫�',
@@ -186,8 +197,90 @@
price: '楼1770.65',
rating: 4.2,
date: '2024-12-20',
+ tag: 'motorPower'
+ },
+
+ {
+ id:6,
+ name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL70-20-5.5/2 杩涘嚭鍙N100 棰濆畾娴侀噺70m鲁/h 棰濆畾鎵▼20m 5.5kW HT200鍙惰疆 1鍙�',
+ description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.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/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL100-32-15/2 杩涘嚭鍙N100 棰濆畾娴侀噺100m鲁/h 棰濆畾鎵▼32m 15kW HT200鍙惰疆 1鍙�',
+ description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.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/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL100-50-22/2 杩涘嚭鍙N100 棰濆畾娴侀噺100m鲁/h 棰濆畾鎵▼50m 22kW HT200鍙惰疆 1鍙�',
+ description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.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/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL115-34-15/2 杩涘嚭鍙N100 棰濆畾娴侀噺115m鲁/h 棰濆畾鎵▼34m 15kW HT200鍙惰疆 1鍙�',
+ description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.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/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛３绔嬪紡鍗曠骇绂诲績娉�(YE4鐢垫満) 100KQL50-12.5-3/4 杩涘嚭鍙N100 棰濆畾娴侀噺50m鲁/h 棰濆畾鎵▼12.5m 3kW HT200鍙惰疆 1鍙�',
+ description: '鏅鸿兘鎶�鏈湇鍔＄鐞嗙郴缁烿1.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>
@@ -210,13 +303,14 @@
background-color: #fff;
overflow: hidden;
box-sizing: border-box;
- transition: border-color .1s ease;
+ /* transition: border-color .1s ease; */
border-radius: 5px;
+ transition: all .3s;
}
.goods-warp-item:hover {
- border-color: #e9e9e9;
- box-shadow: 0 0 2px 2px #eee;
+ border-color: rgba(0, 0, 0, .09);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, .09)
}
.bg-grey {
@@ -260,16 +354,13 @@
.goods-name {
position: relative;
width: 100%;
- height: 45px;
+ height: 42px;
line-height: 150%;
margin-top: 5px;
color: #333;
overflow: hidden;
text-align: left;
padding-left: 2px;
- display: flex;
- justify-content: flex-start;
- align-items: center;
}
.metertitle {
--
Gitblit v1.9.3