From 1c7d1f1b7be77bc10cd549a6b778b4a55786985f Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 13 二月 2025 13:51:17 +0800
Subject: [PATCH] 修改首页样式
---
src/views/IndustrialSoftware.vue | 215 +++++++++++++++++++++++++++++------------------------
1 files changed, 118 insertions(+), 97 deletions(-)
diff --git a/src/views/IndustrialSoftware.vue b/src/views/IndustrialSoftware.vue
index c42fbae..ec1d289 100644
--- a/src/views/IndustrialSoftware.vue
+++ b/src/views/IndustrialSoftware.vue
@@ -1,73 +1,42 @@
<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="container mx-auto px-4 py-8 bg-white industrial-soft-style" style="margin-top: 20px;padding-top:15px ;">
+ <div class=" 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="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px;">
<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>
+ <span class="text-gray-500 ">绫诲瀷锛�</span>
+ <div class="flex flex-1">
+ <span v-for="item in type" class="ant-tag !px-4"
+ :class="EecSelect === item.tag ? 'ant-tag-checked' : ''" :key="item.tag"
+ @click="changeSelectType(item.tag)"
+ :type="EecSelect === item.tag ? 'primary' : 'default'" size="small">
+ {{ item.name }}
+ </span>
</div>
</div>
</div>
- <!-- 宸ヤ笟杞欢|宸ヤ笟APP浜у搧鍒嗙被 -->
- <div class="border-b p-4 border-bottom-dashed-1 box-border">
+ <!-- 鍘傚晢 -->
+ <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px;">
<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>
+ <span class="text-gray-500">鍘傚晢锛�</span>
+ <div class="flex flex-1">
+ <span v-for="item in factory" :key="item.tag" class="ant-tag !px-4"
+ :class="factorySelect === item.tag ? 'ant-tag-checked' : ''"
+ :type="factorySelect === item.tag ? 'primary' : 'default'"
+ @click="factorySelect = item.tag" size="small">
+ {{ item.name }}
+ </span>
</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)">
+ <!-- 鑳芥晥绛夌骇 -->
+ <div class="flex gap-4 p-4" style="background-color: #ecedee;padding: 10px;">
+ <el-button v-for="sort in EecClass" :key="sort.tag" size="small"
+ :type="EecSelect === sort.tag ? 'primary' : 'default'" class="!px-6">
{{ sort.name }}
</el-button>
</div>
@@ -108,34 +77,51 @@
</template>
<script setup lang="ts">
+import { id } from 'element-plus/es/locale';
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 type = [
+ { name: "鍏ㄩ儴", tag: -1 },
+ { name: "鐢垫満", tag: 0 },
+ { name: "娉�", tag: 1 },
+ { name: '瀹圭Н寮忕┖鍘嬫満', tag: 2 },
+ { name: "閫氶鏈�", tag: 3 },
+ { name: "鍐锋按鏈虹粍", tag: 4 },
+ { name: "鐢靛姏鍙樺帇鍣�", tag: 5 },
+ { name: "宸ヤ笟閿呯倝", tag: 6 },
+];
+const factory = [
+ { name: "鍏ㄩ儴", tag: "鍏ㄩ儴" },
+ { name: '鍑硥', tag: '鍑硥' },
+];
+const EecClass = [
+ { name: "鍏ㄩ儴", tag: 0 },
+ { name: "涓�绾ц兘鏁�", tag: 1 },
+ { name: "涓�绾ц兘鏁�", tag: 2 },
+ { name: '涓�绾ц兘鏁�', tag: 3 },
];
// 閫変腑鐘舵��
const selectedIndustry = ref('鍏ㄩ儴');
-const selectedProduct = ref('鍏ㄩ儴');
-const selectedSort = ref('motorPower');
-const region = ref('鍏ㄩ儴');
-const industry = ref('鍏ㄩ儴');
-const business = ref('鍏ㄩ儴');
-const currentPage = ref(1);
+const factorySelect = ref('鍏ㄩ儴');
+const EecSelect = ref(0);
+
// 绀轰緥鏁版嵁
const softwareList = ref([
{
- id:1,
+ id: 1,
+ Id: 1,
+ Type: 0,
+ ModelType: "",
+ Model: "",
+ CompanyName: "",
+ RecordNumber: "",
+ EnergyEfficiencyClass: "",
+ RecordTime: "",
+ PhysicalPicturePath: "",
+ CertificatePath: "",
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',
@@ -145,10 +131,10 @@
price: '楼1770.65',
rating: 5,
date: '2024-01-06',
- tag: 'motorPower'
+ tag: 0
},
{
- id:2,
+ 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',
@@ -158,10 +144,10 @@
price: '楼1770.65',
rating: 4.5,
date: '2024-12-25',
- tag: 'motorPower'
+ tag: 0
},
{
- id:3,
+ 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',
@@ -171,10 +157,10 @@
price: '楼1770.65',
rating: 4.8,
date: '2024-12-20',
- tag: 'motorPower'
+ tag: 0
},
{
- id:4,
+ 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',
@@ -184,10 +170,10 @@
price: '楼1770.65',
rating: 4.2,
date: '2024-12-20',
- tag: 'motorPower'
+ tag: 0
},
{
- id:5,
+ 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',
@@ -197,11 +183,11 @@
price: '楼1770.65',
rating: 4.2,
date: '2024-12-20',
- tag: 'motorPower'
+ tag: 0
},
{
- id:6,
+ 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',
@@ -211,10 +197,10 @@
price: '楼7399.00',
rating: 4.2,
date: '2024-12-20',
- tag: 'pump'
+ tag: 1
},
{
- id:7,
+ 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',
@@ -224,10 +210,10 @@
price: '楼10390.00',
rating: 4.2,
date: '2024-12-20',
- tag: 'pump'
+ tag: 1
},
{
- id:8,
+ 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',
@@ -237,10 +223,10 @@
price: '楼13490.00',
rating: 4.2,
date: '2024-12-20',
- tag: 'pump'
+ tag: 1
},
{
- id:9,
+ 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',
@@ -250,10 +236,10 @@
price: '楼10390.00',
rating: 4.2,
date: '2024-12-20',
- tag: 'pump'
+ tag: 1
},
{
- id:10,
+ 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',
@@ -263,7 +249,7 @@
price: '楼5319.0',
rating: 4.2,
date: '2024-12-20',
- tag: 'pump'
+ tag: 1
},
]);
const dispProductType = ref([])
@@ -273,12 +259,12 @@
})
const filterProduct = () => {
dispProductType.value = softwareList.value.filter((item) => {
- return item.tag===selectedSort.value
+ return item.tag === EecSelect.value
})
}
//鐩戝惉绫诲瀷閫夋嫨绛涢��
-const changeSelectType = (tag: string) => {
- selectedSort.value = tag;
+const changeSelectType = (tag: number) => {
+ EecSelect.value = tag;
filterProduct()
};
</script>
@@ -310,7 +296,7 @@
.goods-warp-item:hover {
border-color: rgba(0, 0, 0, .09);
- box-shadow: 0 2px 8px rgba(0, 0, 0, .09)
+ box-shadow: 0 2px 8px rgba(0, 0, 0, .09)
}
.bg-grey {
@@ -411,6 +397,41 @@
color: #f74747;
}
+.ant-tag {
+ box-sizing: border-box;
+ color: rgba(0, 0, 0, .65);
+ font-size: 14px;
+ font-variant: tabular-nums;
+ line-height: 1.5;
+ list-style: none;
+ font-feature-settings: "tnum";
+ display: inline-block;
+ height: auto;
+ margin: 0 8px 0 0;
+ padding: 2px 7px;
+ font-size: 12px;
+ line-height: 20px;
+ white-space: nowrap;
+ cursor: default;
+ opacity: 1;
+ transition: all .3s cubic-bezier(.78, .14, .15, .86);
+ margin-right: 24px;
+ font-size: 14px;
+}
+
+.ant-tag:hover {
+ color: #1c97b7;
+}
+
+.ant-tag-checked {
+ background-color: #1c97b7;
+ color: #fff;
+}
+
+.ant-tag-checked:hover {
+ color: #fff;
+}
+
:deep(.el-button--default) {
--el-button-bg-color: transparent;
--el-button-border-color: transparent;
--
Gitblit v1.9.3