tanghaolin
2025-02-20 ee0bf275ed4203c05653bc3456d5ee73d7a9aea2
src/views/IndustrialSoftware.vue
@@ -1,18 +1,26 @@
<template>
   <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="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"
                     <span
                        v-for="item in type"
                        class="ant-tag !px-4"
                        :class="typeSelect === item.tag ? 'ant-tag-checked' : ''"
                        :key="item.tag"
                        @click="changeSelectType(item.tag)"
                        :type="typeSelect === item.tag ? 'primary' : 'default'" size="small">
                        :type="typeSelect === item.tag ? 'primary' : 'default'"
                        size="small"
                     >
                        {{ item.name }}
                     </span>
                  </div>
@@ -20,63 +28,152 @@
            </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="clickFactory(item)"
                     >
                        {{ 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="handleEecLevel(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">
                     :class="EecSelect == sort.tag ? 'eec-filter-currentOrder' : ''"
                     class="!px-6"
                  >
                     {{ sort.name }}
                  </li>
               </ul>
            </div>
         </div>
         <!-- 软件列表 -->
         <div class="grid grid-cols-4 gap-4" style="padding: 0 10px;min-height: 417px;">
         <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="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 class="goods-name" :title="app.Model">{{ app.ModelType }}</div>
                     <div class="metertitle mb-2"><span>型号:{{ app.Model }}</span></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 flex-wrap gap-2" style="">
                     <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">
                           <img :src="EecLevelEnum[app.EnergyEfficiencyClass].icon" />
                           <span class="eec-numb">{{ app.EnergyEfficiencyClass }}</span>
                           <span class="eec-level-name">{{ EecLevelEnum[app.EnergyEfficiencyClass].name
                              }}</span>
                           <span class="eec-level-name">{{ EecLevelEnum[app.EnergyEfficiencyClass].name }}</span>
                        </div>
                     </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 class="flex justify-between gap-4">
                        <div class="link-btn text-nowrap" @click="handleBuyClick(app.id)">
                           <svg
                              t="1739504206748"
                              class="svg-size-style"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="35851"
                              width="128"
                              height="128"
                           >
                              <path
                                 d="M96.6656 1013.76a88.064 88.064 0 0 1-88.064-88.064V607.1296a38.4 38.4 0 0 1 47.7184-37.2736L502.6816 744.448a40.96 40.96 0 0 0 18.6368 0L967.68 569.856a38.2976 38.2976 0 0 1 46.08 27.8528 36.5568 36.5568 0 0 1 1.2288 9.4208v320.512A86.1184 86.1184 0 0 1 929.28 1013.76z"
                                 fill="#C2E3FF"
                                 opacity=".64"
                                 p-id="35852"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M815.104 14.2336H197.632A88.3712 88.3712 0 0 0 109.3632 102.4v347.3408a72.9088 72.9088 0 0 0 46.6944 68.096L480.1536 643.072a73.728 73.728 0 0 0 52.5312 0l324.096-125.2352a72.9088 72.9088 0 0 0 46.6944-68.096V102.4a88.3712 88.3712 0 0 0-88.3712-88.1664z m-469.4016 387.072a24.3712 24.3712 0 0 1-24.3712 24.3712h-38.8096a25.088 25.088 0 0 1-25.088-25.088v-38.7072A24.4736 24.4736 0 0 1 281.9072 337.92h39.424a24.4736 24.4736 0 0 1 24.3712 24.4736z m0-175.104a24.4736 24.4736 0 0 1-24.3712 24.4736h-39.424a24.4736 24.4736 0 0 1-24.4736-24.4736v-39.424a24.4736 24.4736 0 0 1 24.4736-24.3712h39.424a24.4736 24.4736 0 0 1 24.3712 24.3712z m421.4784 175.104a24.2688 24.2688 0 0 1-24.3712 24.3712H434.8928a20.48 20.48 0 0 1-20.48-20.48v-43.3152A24.4736 24.4736 0 0 1 438.6816 337.92h304.128a24.3712 24.3712 0 0 1 24.3712 24.4736z m0-175.104a24.3712 24.3712 0 0 1-24.3712 24.4736h-304.128a24.4736 24.4736 0 0 1-24.3712-24.4736v-39.424a24.4736 24.4736 0 0 1 24.3712-24.3712h304.128a24.3712 24.3712 0 0 1 24.3712 24.3712z"
                                 fill="#43ADFF"
                                 p-id="35853"
                                 class="icon-path"
                              ></path>
                           </svg>
                           详细
                        </div>
                        <div class="link-btn text-nowrap" @click="handleCertificateClick(app)">
                           <svg
                              t="1739503834540"
                              class="svg-size-style"
                              viewBox="0 0 1024 1024"
                              version="1.1"
                              xmlns="http://www.w3.org/2000/svg"
                              p-id="34740"
                              width="128"
                              height="128"
                           >
                              <path
                                 d="M0 115.2m76.8 0l870.4 0q76.8 0 76.8 76.8l0 640q0 76.8-76.8 76.8l-870.4 0q-76.8 0-76.8-76.8l0-640q0-76.8 76.8-76.8Z"
                                 fill="#1989FA"
                                 opacity=".3"
                                 p-id="34741"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M563.2 396.8m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                                 fill="#1989FA"
                                 p-id="34742"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M563.2 512m25.6 0l281.6 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-281.6 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                                 fill="#1989FA"
                                 p-id="34743"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M563.2 640m25.6 0l140.8 0q25.6 0 25.6 25.6l0 0q0 25.6-25.6 25.6l-140.8 0q-25.6 0-25.6-25.6l0 0q0-25.6 25.6-25.6Z"
                                 fill="#1989FA"
                                 p-id="34744"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M294.4 422.4m-140.8 0a140.8 140.8 0 1 0 281.6 0 140.8 140.8 0 1 0-281.6 0Z"
                                 fill="#1989FA"
                                 p-id="34745"
                                 class="icon-path"
                              ></path>
                              <path
                                 d="M261.1584 611.5328l-73.0624 126.5536-88.6912-51.2 69.0432-119.5776a191.3088 191.3088 0 0 0 92.7104 44.224z m162.816-47.4496l66.9696 116.0064-88.6784 51.2-69.6832-120.6912a191.4496 191.4496 0 0 0 91.392-46.5152z"
                                 fill="#1989FA"
                                 p-id="34746"
                                 class="icon-path"
                              ></path></svg
                           >报告
                        </div>
                     </div>
                  </div>
                  <template #content>
                     <div class="goods-tip-content" style="white-space: pre-wrap;">{{ app.Tip }}</div>
                     <div class="goods-tip-content" style="white-space: pre-wrap">{{ app.Tip }}</div>
                  </template>
               </el-tooltip>
            </div>
@@ -84,142 +181,199 @@
         <!-- 分页 -->
         <div class="flex justify-center mt-8">
            <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" />
            <el-pagination
               v-model:current-page="m_paginationConfig.currentPage"
               :page-size="12"
               :background="true"
               layout="total,  prev, pager, next, jumper"
               :total="filterProductData.length"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
            />
         </div>
      </div>
      <el-dialog v-model="dialogVisibleCertifcate" title="" :show-close="false" align-center fullscreen>
         <div class="h-full flex justify-center">
            <div style="position: relative">
               <img :src="m_curCertificatePath" />
               <span @click="dialogVisibleCertifcate = false" class="close-icon-style"> × </span>
            </div>
         </div>
         <template #footer>
            <div class="dialog-footer">
               <!-- <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button> -->
            </div>
         </template>
      </el-dialog>
   </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
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';
import EecLevel1 from '@/assets/icons/energy_level_1.svg'
import EecLevel2 from '@/assets/icons/energy_level_2.svg'
const router = useRouter();
// 分类选项
const type = [
   { name: "电机", tag: 1 },
   { name: "泵", tag: 2 },
   { name: '容积式空压机', tag: 3 },
   { name: "通风机", tag: 4 },
   { name: "冷水机组", tag: 5 },
   { name: "电力变压器", tag: 6 },
   { name: "工业锅炉", tag: 7 },
   { name: '泵', tag: 1 },
   { name: '容积式空压机', tag: 2 },
   { name: '通风机', tag: 3 },
   { name: '冷水机组', tag: 4 },
   { 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: 0 },
   { name: '一级能效', tag: 1 },
   { name: '二级能效', tag: 2 },
];
const m_PageLoading = ref(false)
const m_PageLoading = ref(false);
const dialogVisibleCertifcate = ref(false);
// 选中状态
const typeSelect = ref(0);
const factorySelect = ref('全部');
const typeSelect = ref(1);
const factorySelect = ref('-99');
const factoryIncludeType = ref(null);
const EecSelect = ref(0);
const m_curCertificatePath = ref('');
const EecLevelEnum = {
   1: { name: '一级能效', icon: EecLevel1 },
   2: { name: '二级能效', icon: EecLevel2 },
}
};
const m_RequestDataObj = {
   1: { requestPath: "static/EecProductData/ElectricMachinery.json" },
   2: { requestPath: "static/EecProductData/Pump.json" },
   3: { requestPath: "static/EecProductData/AirCompressor.json" },
   4: { requestPath: "static/EecProductData/Fan.json" },
   5: { requestPath: "static/EecProductData/WaterChiller.json" },
   6: { requestPath: "static/EecProductData/PowerTransformer.json" },
   7: { requestPath: "static/EecProductData/IndustrialBoiler.json" },
}
   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 allEecProduct = ref([]);
// 过滤后的数据
const filterProductData = ref([])
const filterProductData = ref([]);
//显示的数据
const dispEecProduct = ref([])
const dispEecProduct = ref([]);
const m_paginationConfig = ref({
   currentPage: 1,
   pageSize: 10,
})
   pageSize: 12,
});
onMounted(() => {
   initComanyData();
   initData();
   // filterProduct();
})
});
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,
            // PhysicalPicturePath: "/static/EecProductData/" + item.PhysicalPicturePath,
            PhysicalPicturePath: `https://private.zkh.com/PRODUCT/BIG/BIG_AE2310858_01.jpg?x-oss-process=style/WEBPCOM_style&timestamp=1735778771000`,
            CertificatePath: `/static/EecProductData/${item.CertificatePath}`,
            Tip: `备案时间:${item.RecordTime} \n 备案号:${item.RecordNumber}`,
         }
         arr.push(node)
      })
      allEecProduct.value = arr;
      filterProduct();
   }).catch((err) => {
      m_PageLoading.value = false;
   })
}
      .then((res) => {
         m_PageLoading.value = false;
         let result = res.data;
         result.sort((a: any, b: any) => {
            const aPrefix = a.Model.slice(0, 3);
            const bPrefix = b.Model.slice(0, 3);
            const aContainsDP = aPrefix.includes('DP') || aPrefix.includes('DRL');
            const bContainsDP = bPrefix.includes('DP') || bPrefix.includes('DRL');
            if (aContainsDP && !bContainsDP) {
               return -1;
            } else if (!aContainsDP && bContainsDP) {
               return 1;
            } else {
               return 0;
            }
         });
         let arr = [];
         result.forEach((item: any, index: number) => {
            let incrementFactor = 0.1 * (index + 1); // 根据索引计算递增系数
            let newPrice = parseFloat(item.Price) + parseFloat((item.Price * incrementFactor).toFixed(1)); // 计算新的Price值
            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: newPrice,
               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
   })
      return item.Type === typeSelect.value;
   });
   if (EecSelect.value !== 0) {
      filterProductData.value = filterProductData.value.filter((item) => {
         return item.EnergyEfficiencyClass === EecSelect.value
      })
         return item.EnergyEfficiencyClass === EecSelect.value;
      });
   }
   if (factorySelect.value !== '全部') {
   if (factorySelect.value !== '-99') {
      filterProductData.value = filterProductData.value.filter((item) => {
         return item.CompanyName === factorySelect.value
      })
         return factoryIncludeType.value.includes(item.Type);
      });
   }
   dispEecProduct.value = getSelectPageData(filterProductData.value);
}
};
const handleCurrentChange = (val: number) => {
   m_paginationConfig.value.currentPage = val;
   let allTableData = allEecProduct.value;
   let allTableData = filterProductData.value;
   let pagingData = getSelectPageData(allTableData);
   dispEecProduct.value = pagingData;
}
};
const handleSizeChange = (val: number) => {
   m_paginationConfig.value.currentPage = val;
   let allTableData = allEecProduct.value;
   let allTableData = filterProductData.value;
   let pagingData = getSelectPageData(allTableData);
   dispEecProduct.value = pagingData;
}
};
//获取分页数据
const getSelectPageData = (list: any) => {
   let filterList = list.slice(
@@ -229,19 +383,37 @@
   //当前页
   return filterList;
};
const clickFactory = (item: any) => {
   factorySelect.value = item.CompanyId;
   factoryIncludeType.value = item.Type;
   filterProduct();
};
//监听类型选择筛选
const changeSelectType = (tag: number) => {
   typeSelect.value = tag;
   initData();
};
const handleBuyClick = (productId: string) => {
   // 找到当前点击的产品
   const currentProduct = dispEecProduct.value.find((item) => item.id === productId);
   if (currentProduct) {
      // 保存产品信息到localStorage
      localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
   }
   router.push(`/product/${currentProduct.Id}`);
};
const handleCertificateClick = (row: any) => {
   dialogVisibleCertifcate.value = true;
   m_curCertificatePath.value = row.CertificatePath;
};
const handleEecLevel = (tag: number) => {
   EecSelect.value = tag;
   filterProduct();
}
};
</script>
<style scoped>
<style lang="scss" scoped>
.w-100 {
   width: 100%;
}
@@ -263,13 +435,13 @@
   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 {
@@ -293,7 +465,7 @@
}
.industrial-soft-style::after {
   content: "";
   content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -304,8 +476,8 @@
}
.goods-img {
   max-width: 180px;
   max-height: 180px;
   width: 180px;
   height: 180px;
   vertical-align: top;
   border: 0;
   padding-bottom: 20px;
@@ -334,32 +506,39 @@
   color: #999;
   line-height: 16px;
   overflow: hidden;
   text-align: left
   text-align: left;
}
.link-btn {
   display: inline-block;
   display: inline-flex;
   width: 100%;
   height: 32px;
   font-size: 14px;
   line-height: 30px;
   background: #fff;
   color: #e65650;
   color: #1592fc;
   border: 1px solid #e2e2e2;
   border-radius: 20px;
   text-align: center;
   margin-top: 3px;
   box-sizing: border-box;
   padding: 0 25px;
   align-items: center;
   gap: 15px;
}
.link-btn:hover {
   background: #e65650;
   background: #1592fc;
   color: #fff;
   cursor: pointer;
   .icon-path {
      fill: #fff;
   }
}
.goods-price {
   width: 100%;
   /* width: 100%; */
   padding: 0 3px;
   text-align: left;
   box-sizing: border-box;
@@ -376,19 +555,19 @@
}
.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;
@@ -398,7 +577,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;
}
@@ -445,10 +624,8 @@
}
.eec-filter-currentOrder {
   border-bottom: 4px solid #1c97b7;
   color: #1c97b7;
}
.eec-filter-currentOrder:hover {
@@ -480,9 +657,30 @@
   color: #fff;
   font-size: 12px;
}
.svg-size-style {
   width: 16px;
   height: 16px;
}
.close-icon-style {
   position: absolute;
   right: -15px;
   top: -15px;
   font-size: 30px;
   background-color: #196dd938;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   color: #196dd9;
   &:hover {
      color: #fff;
      background-color: #196dd9;
   }
}
:deep(.el-button--default) {
   --el-button-bg-color: transparent;
   --el-button-border-color: transparent;