删除多余照片

tanghaolin

2025-04-15 8c3d15eae99d51193e20ff222dedf96cdba57b33

 src/views/IndustrialSoftware.vue

@@ -1,18 +1,45 @@
<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="border-b p-4 border-bottom-dashed-1 box-border" style="padding: 10px">

               <div class="flex items-center gap-4">
                  <span class="text-gray-500" >查询：</span>
                  <el-input
                     v-model="searchQuery"
                     placeholder="请输入公司名称/型号/产品名称"
                     class="!w-[300px]"
                     clearable
                     @input="handleSearch"
                  >
                     <template #prefix>
                        <el-icon><Search /></el-icon>
                     </template>
                  </el-input>
               </div>
            </div>
				
            <!-- 类型 -->
            <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 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>
@@ -24,9 +51,13 @@
               <div class="flex items-center">
                  <span class="text-gray-500">厂商：</span>
                  <div class="flex flex-1">
                     <span v-for="item in factory" :key="item.CompanyId" class="ant-tag !px-4"
                     <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">
                        @click="clickFactory(item)"
                     >
                        {{ item.CompanyAbbName }}
                     </span>
                  </div>
@@ -36,35 +67,48 @@
            <!-- 能效等级 -->
            <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="goods-company">{{ app.CompanyName }}</div>
                  <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="goods-name" style="font-size: 14px; font-weight: bold" :title="app.Model">产品名称:{{ app.ModelType }}</div>
                     <!-- 产品 -->
                     <div class="goods-name" :title="app.Model">厂家名称：{{ app.CompanyName }}</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;">
                     <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="goods-price">
                           <span class="goods-price-selling">面议</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" @click="handleCertificateClick(app)">{{
                              EecLevelEnum[app.EnergyEfficiencyClass].name
                           }}</span>
                        </div>
                     </div>

@@ -72,11 +116,88 @@
                     <el-rate v-model="app.rating" disabled />
                     <span class="text-gray-400 text-sm">{{ app.date }}</span>
                  </div> -->

                     <div class="link-btn" @click="handleBuyClick(app.id)">立即购入</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" v-if="false">
                           <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,46 +205,79 @@

         <!-- 分页 -->
         <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 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 { onMounted, ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useLogin } from '@/stores/useLogin';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

const router = useRouter();
const route = useRoute();
const loginStore = useLogin();

// 获取用户信息
const userInfo = computed(() => {
   const UserInfo = loginStore.getUserInfo();
   return UserInfo ? UserInfo : null;
});

// 分类选项
const type = [
   { name: "泵", tag: 1 },
   { name: '泵', tag: 1 },
   { name: '容积式空压机', tag: 2 },
   { name: "通风机", tag: 3 },
   { name: "冷水机组", tag: 4 },
   { name: "电力变压器", tag: 5 },
   { name: "工业锅炉", tag: 6 },
   { name: "电机", tag: 7 },
   { name: '通风机', tag: 3 },
   { name: '冷水机组', tag: 4 },
   { name: '电机', tag: 7 },
];
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(1);
const factorySelect = ref('-99');
const factoryIncludeType = ref(null);
const EecSelect = ref(0);

const m_curCertificatePath = ref('');

const EecLevelEnum = {
   1: { name: '一级能效', icon: EecLevel1 },
@@ -131,112 +285,167 @@
};

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" },
}

   1: { requestPath: 'static/EecProductData/Pump.json?v=' + new Date().getTime() },
   2: { requestPath: 'static/EecProductData/AirCompressor.json?v=' + new Date().getTime() },
   3: { requestPath: 'static/EecProductData/Fan.json?v=' + new Date().getTime() },
   4: { requestPath: 'static/EecProductData/WaterChiller.json?v=' + new Date().getTime() },
   5: { requestPath: 'static/EecProductData/PowerTransformer.json?v=' + new Date().getTime() },
   6: { requestPath: 'static/EecProductData/IndustrialBoiler.json?v=' + new Date().getTime() },
   7: { requestPath: 'static/EecProductData/ElectricMachinery.json?v=' + new Date().getTime() },
};

// 源数据
const allEecProduct = ref([]);
// 过滤后的数据
const filterProductData = ref([])
const filterProductData = ref([]);
//显示的数据
const dispEecProduct = ref([])
const dispEecProduct = ref([]);

const m_paginationConfig = ref({
   currentPage: 1,
   pageSize: 12,
})
});

// 搜索相关
const searchQuery = ref('');

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,
         }
   })
      .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 });
      })
      factory.value.unshift({ CompanyId: "-99", CompanyAllName: '全部', CompanyAbbName: '全部', Type: null })
   }).catch((err) => { })
}
      .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
   })
      .then((res) => {
         m_PageLoading.value = false;
         let result = res.data;

         let arr = [];
         result.forEach((item: any, index: number) => {
            if (typeSelect.value === 2) {
               item.Price = item.Price * 10;
            }
            if (typeSelect.value === 4) {
               item.Price = item.Price * 5;
            }
            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;
   });

   // 搜索筛选
   if (searchQuery.value) {
      const query = searchQuery.value.toLowerCase();
      filterProductData.value = filterProductData.value.filter((item) => {
         return (
            item.CompanyName.toLowerCase().includes(query) ||
            item.Model.toLowerCase().includes(query) ||
            item.ModelType.toLowerCase().includes(query)
         );
      });
   }

   // 能效等级筛选
   if (EecSelect.value !== 0) {
      filterProductData.value = filterProductData.value.filter((item) => {
         return item.EnergyEfficiencyClass === EecSelect.value
      })
         return item.EnergyEfficiencyClass === EecSelect.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);

}
   // 泵类型特殊排序
   if (typeSelect.value === 1) {
      filterProductData.value.sort((a: any, b: any) => {
         const aContainsDSWQ = a.Model.includes('DSWQ');
         const bContainsDSWQ = b.Model.includes('DSWQ');
         const aContainsDRLOrDP = a.Model.substring(0, 3).includes('DRL') || a.Model.substring(0, 2).includes('DP');
         const bContainsDRLOrDP = b.Model.substring(0, 3).includes('DRL') || b.Model.substring(0, 2).includes('DP');

         if (aContainsDSWQ && !bContainsDSWQ) {
            return -1;
         } else if (!aContainsDSWQ && bContainsDSWQ) {
            return 1;
         } else if (aContainsDRLOrDP && !bContainsDRLOrDP) {
            return -1;
         } else if (!aContainsDRLOrDP && bContainsDRLOrDP) {
            return 1;
         } else {
            return 0;
         }
      });
   }

   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(
@@ -246,7 +455,11 @@
   //当前页
   return filterList;
};

const clickFactory = (item: any) => {
   factorySelect.value = item.CompanyId;
   factoryIncludeType.value = item.Type;
   filterProduct();
};
//监听类型选择筛选
const changeSelectType = (tag: number) => {
   typeSelect.value = tag;
@@ -255,21 +468,36 @@

const handleBuyClick = (productId: string) => {
   // 找到当前点击的产品
   const currentProduct = dispEecProduct.value.find((item) => item.id === productId);
   const currentProduct = dispEecProduct.value.find((item) => item.Id === productId);
   if (currentProduct) {
      console.log("🚀 ~ currentProduct:", currentProduct)
      // 保存产品信息到localStorage
      localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
   }
   router.push(`/product/${productId}`);
   if (userInfo.value&& userInfo.value.Token) {
      router.push(`/product/${currentProduct.Id}`);
   } else {
      loginStore.logOut();
      router.replace({
         path: '/login',
         query: { redirectPath: route.fullPath },
      });
   }
};
const handleCertificateClick = (row: any) => {
   dialogVisibleCertifcate.value = true;
   m_curCertificatePath.value = row.CertificatePath;
};
const handleEecLevel = (tag: number) => {
   EecSelect.value = tag;
   filterProduct();
}
};

const handleSearch = () => {
   filterProduct();
};
</script>

<style scoped>
<style lang="scss" scoped>
.w-100 {
   width: 100%;
}
@@ -332,8 +560,8 @@
}

.goods-img {
   max-width: 180px;
   max-height: 180px;
   width: 180px;
   height: 180px;
   vertical-align: top;
   border: 0;
   padding-bottom: 20px;
@@ -343,7 +571,7 @@
.goods-name {
   position: relative;
   width: 100%;
   height: 42px;
   height: auto;
   line-height: 150%;
   margin-top: 5px;
   color: #333;
@@ -366,24 +594,32 @@
}

.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;
   justify-content: center;
   align-items: center;
   gap: 15px;
}

.link-btn:hover {
   background: #e65650;
   background: #1592fc;
   color: #fff;
   cursor: pointer;

   .icon-path {
      fill: #fff;
   }
}

.goods-price {
@@ -506,7 +742,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;