From a009c0021cd72a2c7379b7b04eacd694e0cb98f2 Mon Sep 17 00:00:00 2001 From: tanghaolin <1723298894@qq.com> Date: 星期四, 13 二月 2025 21:32:27 +0800 Subject: [PATCH] 修改能效标识查询页面 --- src/views/IndustrialSoftware.vue | 429 ++++++++++++++++++++++++++--------------------------- 1 files changed, 211 insertions(+), 218 deletions(-) diff --git a/src/views/IndustrialSoftware.vue b/src/views/IndustrialSoftware.vue index 909871f..2c8ce45 100644 --- a/src/views/IndustrialSoftware.vue +++ b/src/views/IndustrialSoftware.vue @@ -1,12 +1,13 @@ <template> - <div class="container mx-auto px-4 py-8 bg-white industrial-soft-style" style="margin-top: 20px;padding-top:15px ;"> + <div class="container mx-auto px-4 py-8 bg-white industrial-soft-style" v-loading="m_PageLoading" + 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="rounded-lg shadow" style="background-color: #f6f7f9; margin-bottom: 10px"> <!-- 绫诲瀷 --> - <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px;"> + <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> + <span class="text-gray-500">绫诲瀷锛�</span> <div class="flex flex-1"> <span v-for="item in type" class="ant-tag !px-4" :class="typeSelect === item.tag ? 'ant-tag-checked' : ''" :key="item.tag" @@ -19,268 +20,253 @@ </div> <!-- 鍘傚晢 --> - <div class="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px;"> - <div class="flex items-center "> + <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"> - <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 v-for="item in factory" :key="item.CompanyId" class="ant-tag !px-4" + :class="factorySelect === item.CompanyId ? 'ant-tag-checked' : ''" + @click="factorySelect = item.CompanyId" size="small"> + {{ item.CompanyAbbName }} </span> </div> </div> </div> <!-- 鑳芥晥绛夌骇 --> - <div class="flex eec-filter-sortbar" style="background-color: #ecedee;"> + <div class="flex eec-filter-sortbar" style="background-color: #ecedee"> <ul> - <li v-for="sort in EecClass" :key="sort.tag" size="small" @click="EecSelect = sort.tag" + <li v-for="sort in EecClass" :key="sort.tag" size="small" @click="handleEecLevel(sort.tag)" :type="EecSelect === sort.tag ? 'primary' : 'default'" :class="EecSelect == sort.tag ? 'eec-filter-currentOrder' : ''" class="!px-6"> {{ sort.name }} </li> </ul> - </div> </div> <!-- 杞欢鍒楄〃 --> - <div class="grid grid-cols-5 gap-4" style="padding: 0 10px;min-height: 417px;"> - <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" style=""> - <el-tag size="small" type="success">{{ app.industry }}</el-tag> - <div class="flex items-center eec-level-div"> - <img :src="EecLevelEnum[1].icon"> - <span class="eec-numb">1</span> - <span class="eec-level-name">{{ EecLevelEnum[1].name }}</span> + <div class="grid grid-cols-4 gap-4" style="padding: 0 10px;min-height: 417px;"> + <div v-for="(app, index) in dispEecProduct" :key="index" class="goods-warp-item software-card"> + <el-tooltip class="box-item" effect="dark" :offset="20" placement="top"> + <div class="flex flex-col h-full" style="cursor: pointer;"> + <div style="position: relative;display: flex;"> + <img :src="app.PhysicalPicturePath" :alt="app.Model" + class=" object-contain mx-auto goods-img" /> + <div class="goods-company">{{ app.CompanyName }}</div> </div> - </div> - <div class="goods-price"><span class="goods-price-selling">{{ app.price }}</span> </div> - <!-- <div class="flex justify-between items-center"> + <div class="goods-name" :title="app.Model">{{ app.ModelType }}</div> + <div class="metertitle mb-2"><span>鍨嬪彿锛歿{ app.Model }}</span></div> + <!-- <p class="text-gray-500 text-sm mb-4 flex-1">{{ app.description }}</p> --> + <div class="flex gap-2" style="justify-content: space-between;align-items: center;"> + <!-- <el-tag size="small" type="success">{{ app.CompanyName }}</el-tag> --> + <div class="goods-price"><span class="goods-price-selling"> 楼{{ app.Price }}</span> </div> + <div class="flex items-center eec-level-div"> + <img :src="EecLevelEnum[app.EnergyEfficiencyClass].icon"> + <span class="eec-numb">{{ app.EnergyEfficiencyClass }}</span> + <span class="eec-level-name">{{ EecLevelEnum[app.EnergyEfficiencyClass].name + }}</span> + </div> + </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 class="link-btn" @click="handleBuyClick(app.id)">绔嬪嵆璐叆</div> + </div> + <template #content> + <div class="goods-tip-content" style="white-space: pre-wrap;">{{ app.Tip }}</div> + </template> + </el-tooltip> </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" /> --> + <el-pagination v-model:current-page="m_paginationConfig.currentPage" + v-model:page-size="m_paginationConfig.pageSize" :page-sizes="[10, 50, 100, 200]" :background="true" + layout="total, sizes, prev, pager, next, jumper" :total="filterProductData.length" + @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </div> </div> </template> <script setup lang="ts"> -import { id } from 'element-plus/es/locale'; -import { ref, onMounted } from 'vue'; -import EecLevel1 from '@/assets/icons/energy_level_1.svg' -import EecLevel2 from '@/assets/icons/energy_level_2.svg' +import EecLevel1 from '@/assets/icons/energy_level_1.svg'; +import EecLevel2 from '@/assets/icons/energy_level_2.svg'; +import { onMounted, ref } from 'vue'; +import { useRouter } from 'vue-router'; +import axios from 'axios'; +const router = useRouter(); + // 鍒嗙被閫夐」 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 }, + { name: "鐢垫満", tag: 7 }, ]; -const factory = [ - { name: "鍏ㄩ儴", tag: "鍏ㄩ儴" }, - { name: '鍑硥', tag: '鍑硥' }, -]; +const factory = ref([]); const EecClass = [ { name: "鍏ㄩ儴", tag: 0 }, { name: "涓�绾ц兘鏁�", tag: 1 }, - { name: "浜岀骇鑳芥晥", tag: 2 }, - { name: '涓夌骇鑳芥晥', tag: 3 }, + { name: "浜岀骇鑳芥晥", tag: 2 } ]; -// 閫変腑鐘舵�� -const typeSelect = ref(0); -const factorySelect = ref('鍏ㄩ儴'); -const EecSelect = ref(0); +const m_PageLoading = ref(false) +// 閫変腑鐘舵�� +const typeSelect = ref(1); +const factorySelect = ref('-99'); +const EecSelect = ref(0); const EecLevelEnum = { 1: { name: '涓�绾ц兘鏁�', icon: EecLevel1 }, 2: { name: '浜岀骇鑳芥晥', icon: EecLevel2 }, +}; + +const m_RequestDataObj = { + 1: { requestPath: "static/EecProductData/Pump.json" }, + 2: { requestPath: "static/EecProductData/AirCompressor.json" }, + 3: { requestPath: "static/EecProductData/Fan.json" }, + 4: { requestPath: "static/EecProductData/WaterChiller.json" }, + 5: { requestPath: "static/EecProductData/PowerTransformer.json" }, + 6: { requestPath: "static/EecProductData/IndustrialBoiler.json" }, + 7: { requestPath: "static/EecProductData/ElectricMachinery.json" }, } -// 绀轰緥鏁版嵁 -const softwareList = ref([ - { - 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', - type: '琛屼笟閫氱敤绫�', - applicationCode: "AE2977837", - industry: '鐢熶骇鍒堕�犵被', - price: '楼1770.65', - rating: 5, - date: '2024-01-06', - tag: 0 - }, - { - 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: 0 - }, - { - 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: 0 - }, - { - 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: '琛屼笟閫氱敤绫�', - applicationCode: "AC0394797", - industry: '杩愮淮鏈嶅姟绫�', - price: '楼1770.65', - rating: 4.2, - date: '2024-12-20', - tag: 0 - }, - { - 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: '琛屼笟閫氱敤绫�', - applicationCode: "AC0394822", - industry: '杩愮淮鏈嶅姟绫�', - price: '楼1770.65', - rating: 4.2, - date: '2024-12-20', - tag: 0 - }, - { - id: 6, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1 - }, - { - id: 7, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1 - }, - { - id: 8, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1 - }, - { - id: 9, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1 - }, - { - id: 10, - name: 'KQ/鍑硥 绗叚浠QL绯诲垪鐏伴搧娉靛3绔嬪紡鍗曠骇绂诲績娉�(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: 1 - }, -]); -const dispProductType = ref([]) +// 婧愭暟鎹� +const allEecProduct = ref([]); +// 杩囨护鍚庣殑鏁版嵁 +const filterProductData = ref([]) +//鏄剧ず鐨勬暟鎹� +const dispEecProduct = ref([]) + +const m_paginationConfig = ref({ + currentPage: 1, + pageSize: 12, +}) onMounted(() => { - filterProduct(); + initComanyData(); + initData(); + // filterProduct(); }) -const filterProduct = () => { - dispProductType.value = softwareList.value.filter((item) => { - return item.tag === typeSelect.value +const initComanyData = () => { + axios({ + method: 'get', + url: 'static/EecProductData/CompanyData.json', + }).then((res) => { + let result = res.data; + factory.value = result.map((item: any) => { + return { + CompanyId: item.CompanyId, + CompanyAllName: item.CompanyAllName, + CompanyAbbName: item.CompanyAbbName, + Type: item.Type, + } + }) + factory.value.unshift({ CompanyId: "-99", CompanyAllName: '鍏ㄩ儴', CompanyAbbName: '鍏ㄩ儴', Type: null }) + }).catch((err) => { }) +} +const initData = () => { + m_PageLoading.value = true; + axios({ + method: 'get', + url: m_RequestDataObj[typeSelect.value].requestPath, + }).then((res) => { + m_PageLoading.value = false; + let result = res.data; + let arr = []; + result.forEach((item: any) => { + let node = { + Id: item.Id, + Type: item.Type, + ModelType: item.ModelType, + Model: item.Model, + CompanyName: item.CompanyName, + RecordNumber: item.RecordNumber, + EnergyEfficiencyClass: item.EnergyEfficiencyClass, + RecordTime: item.RecordTime, + Price: item.Price, + PhysicalPicturePath: "/static/EecProductData/" + item.PhysicalPicturePath, + CertificatePath: `/static/EecProductData/${item.CertificatePath}`, + Tip: `澶囨鏃堕棿锛�${item.RecordTime} \n 澶囨鍙凤細${item.RecordNumber}`, + } + arr.push(node) + }) + allEecProduct.value = arr; + filterProduct(); + }).catch((err) => { + m_PageLoading.value = false; }) } +const filterProduct = () => { + filterProductData.value = allEecProduct.value.filter((item) => { + return item.Type === typeSelect.value + }) + + if (EecSelect.value !== 0) { + filterProductData.value = filterProductData.value.filter((item) => { + return item.EnergyEfficiencyClass === EecSelect.value + }) + } + if (factorySelect.value !== '-99') { + filterProductData.value = filterProductData.value.filter((item) => { + return item.CompanyName === factorySelect.value + }) + } + dispEecProduct.value = getSelectPageData(filterProductData.value); + +} +const handleCurrentChange = (val: number) => { + m_paginationConfig.value.currentPage = val; + let allTableData = filterProductData.value; + let pagingData = getSelectPageData(allTableData); + dispEecProduct.value = pagingData; +} +const handleSizeChange = (val: number) => { + m_paginationConfig.value.currentPage = val; + let allTableData = filterProductData.value; + let pagingData = getSelectPageData(allTableData); + dispEecProduct.value = pagingData; +} +//鑾峰彇鍒嗛〉鏁版嵁 +const getSelectPageData = (list: any) => { + let filterList = list.slice( + (m_paginationConfig.value.currentPage - 1) * m_paginationConfig.value.pageSize, + m_paginationConfig.value.currentPage * m_paginationConfig.value.pageSize + ); + //褰撳墠椤� + return filterList; +}; + //鐩戝惉绫诲瀷閫夋嫨绛涢�� const changeSelectType = (tag: number) => { typeSelect.value = tag; - filterProduct() + initData(); }; + +const handleBuyClick = (productId: string) => { + // 鎵惧埌褰撳墠鐐瑰嚮鐨勪骇鍝� + const currentProduct = dispEecProduct.value.find((item) => item.id === productId); + if (currentProduct) { + console.log("馃殌 ~ currentProduct:", currentProduct) + // 淇濆瓨浜у搧淇℃伅鍒發ocalStorage + localStorage.setItem('currentProduct', JSON.stringify(currentProduct)); + } + router.push(`/product/${productId}`); +}; +const handleEecLevel = (tag: number) => { + EecSelect.value = tag; + filterProduct(); +} </script> <style scoped> @@ -298,20 +284,20 @@ .goods-warp-item { position: relative; - padding: 34px 12px 17px; + padding: 10px 12px 17px; margin: 20px 3px 0; - background-color: #fff; + background-color: #f6f7f9; overflow: hidden; box-sizing: border-box; /* transition: border-color .1s ease; */ border-radius: 5px; - transition: all .3s; + transition: all 0.3s; margin-top: 10px; } .goods-warp-item:hover { - border-color: rgba(0, 0, 0, .09); - box-shadow: 0 2px 8px rgba(0, 0, 0, .2) + border-color: rgba(0, 0, 0, 0.09); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .bg-grey { @@ -335,7 +321,7 @@ } .industrial-soft-style::after { - content: ""; + content: ''; position: absolute; top: 0; left: 0; @@ -350,6 +336,8 @@ max-height: 180px; vertical-align: top; border: 0; + padding-bottom: 20px; + box-sizing: border-box; } .goods-name { @@ -374,7 +362,7 @@ color: #999; line-height: 16px; overflow: hidden; - text-align: left + text-align: left; } .link-btn { @@ -399,27 +387,36 @@ } .goods-price { - width: 100%; + /* width: 100%; */ padding: 0 3px; text-align: left; box-sizing: border-box; margin-bottom: 11px; } +.goods-company { + position: absolute; + bottom: 0; + height: 20px; + background-color: rgb(0 0 0 / 32%); + width: 100%; + color: #fff; +} + .goods-price .goods-price-selling { - font-size: 14px; + font-size: 16px; font-weight: 700; color: #f74747; } .ant-tag { box-sizing: border-box; - color: rgba(0, 0, 0, .65); + color: rgba(0, 0, 0, 0.65); font-size: 14px; font-variant: tabular-nums; line-height: 1.5; list-style: none; - font-feature-settings: "tnum"; + font-feature-settings: 'tnum'; display: inline-block; height: auto; margin: 0 8px 0 0; @@ -429,7 +426,7 @@ white-space: nowrap; cursor: default; opacity: 1; - transition: all .3s cubic-bezier(.78, .14, .15, .86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); margin-right: 24px; font-size: 14px; } @@ -476,10 +473,8 @@ } .eec-filter-currentOrder { - border-bottom: 4px solid #1c97b7; color: #1c97b7; - } .eec-filter-currentOrder:hover { @@ -511,8 +506,6 @@ color: #fff; font-size: 12px; } - - :deep(.el-button--default) { --el-button-bg-color: transparent; -- Gitblit v1.9.3