修改证书查询界面

tanghaolin

6 天以前 5ab9267c972308b7d1b250071d3d48ff98f23254

 src/views/CertificateQuery/EecLabel.vue

@@ -1,80 +1,97 @@
<template>
   <div class="flag-search-div">
      <div class="top">
         <span>能效标识查询</span>
      </div>
      <div class="flag-search-content">
         <el-card class="w100 h100" shadow="never">
            <el-form style="height: 56px; flex-shrink: 0; display: flex" :model="state.m_formData" ref="ruleFormRef"
               :inline="true" label-width="120px" class="demo-ruleForm">
               <el-form-item label="产品类型" prop="ProductType">
                  <el-select class="w-180-px" v-model="state.m_formData.ProductType" placeholder="请选择产品类型"
                     @change="changeProductType">
                     <el-option v-for="item in state.type" :key="item.tag" :value="item.tag"
                        :label="item.name"></el-option>
                  </el-select>
               </el-form-item>
               <el-form-item label="产品型号" prop="ProductModel">
                  <el-input class="w-180-px" v-model="state.m_formData.ProductModel"
                     placeholder="请输入产品型号"></el-input>
               </el-form-item>

               <el-form-item label="备案号" prop="RecordNumber">
                  <el-input class="w-180-px" v-model="state.m_formData.RecordNumber"
                     placeholder="请输入备案号"></el-input>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" color="#003a8f" @click="initData">查询</el-button>
               </el-form-item>
               <el-form-item>
                  <el-button type="info" @click="resertForm">重置</el-button>
               </el-form-item>
            </el-form>
            <div class="w100" style="flex: 1; display: flex; height: calc(100% - 56px); flex-direction: column"
               v-loading="state.m_PageLoading">
               <el-table class="w100" :data="state.m_dispTableData" style="width: 100%" border :height="910"
                  header-cell-class-name="table-header-cell-style" cell-class-name="custom-table-cell-style">
                  <el-table-column prop="TableIndex" label="序号" align="center" width="60"> </el-table-column>
                  <el-table-column prop="ModelType" label="产品类型" align="center" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="Model" label="产品型号" align="center" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="RecordNumber" label="备案号" align="center" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="EnergyEfficiencyClass" label="能效等级" align="center">
                     <template #default="scope">
                        <img height="36px" :alt="EecLevelEnum[scope.row.EnergyEfficiencyClass].name"
                           :src="EecLevelEnum[scope.row.EnergyEfficiencyClass].icon" />
                     </template>
                  </el-table-column>
                  <el-table-column prop="RecordTime" label="备案时间" align="center"> </el-table-column>
                  <el-table-column prop="CompanyName" label="厂商" align="center" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column label="操作" align="center" width="120px">
                     <template #default="scope">
                        <span class="table-detail-span" @click="clickDetail(scope.row)"
                           style="margin-right: 10px">
                           <svg t="1739499317499" class="detail-icon" viewBox="0 0 1024 1024" version="1.1"
                              xmlns="http://www.w3.org/2000/svg" p-id="27830" 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="27831"></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="27832"></path>
                           </svg>
                           详细</span>
                     </template>
                  </el-table-column>
               </el-table>
               <div class="w100" style="display: flex; justify-content: flex-end; height: 40px; flex-shrink: 0">
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :background="true" :current-page="state.m_paginationConfig.currentPage"
                     :page-sizes="[10, 20, 30, 40]" :page-size="state.m_paginationConfig.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="state.filterProductData.length" />
   <div class="page flex-col justify-start">
      <img class="image_1" referrerpolicy="no-referrer" src="/static/img/eec-search/eec_label_top.png" />
      <div class="block_1 flex-col">
         <div class="block_2 flex-col">
            <span class="text_1">能效备案查询</span>
            <span class="paragraph_1">直连中国能效标识网官方数据库<br />实时查询设备能效备案信息</span>
            <div class="section_1 flex-row">
               <div class="text-wrapper_1 flex-col">
                  <span class="text_2">政策申报依据</span>
               </div>
               <div class="group_1 flex-col">
                  <div class="text-wrapper_2 flex-col">
                     <span class="text_3">采购选型参考</span>
                  </div>
               </div>
               <div class="group_2 flex-col">
                  <div class="text-wrapper_3 flex-col">
                     <span class="text_4">节能技术验证</span>
                  </div>
               </div>
            </div>
         </el-card>
            <div class="flex section_2 rounded-[25px]">
               <el-input class="w-180-px h-full" v-model="state.m_formData.ProductModel"
                  :input-style="{ textAlign: 'center', fontSize: '24px' }" placeholder="请输入产品型号">
               </el-input>
               <el-button class="custom-search-btn" @click="initData"><el-icon :size="24" color="#fff">
                     <Search />
                  </el-icon>
               </el-button>
            </div>
            <div class="section_3 flex-row gap-[30px]">
               <el-select class="w-180-px h-full box-border py-[10px]" v-model="state.m_formData.ProductType"
                  placeholder="请选择产品类型" @change="changeProductType">
                  <el-option v-for="item in state.type" :key="item.tag" :value="item.tag"
                     :label="item.name"></el-option>
               </el-select>
               <el-select class="w-180-px h-full box-border py-[10px]" v-model="state.selFactory"
                  placeholder="请选择厂商" @change="changeFactory">
                  <el-option v-for="item in state.factoryList" :key="item.CompanyId" :value="item.CompanyId"
                     :label="item.CompanyAbbName"></el-option>
               </el-select>
               <el-select class="w-180-px h-full box-border py-[10px]" v-model="state.selEec" placeholder="请选择能效等级"
                  @change="changeEecLevel">
                  <el-option v-for="item in state.eec_Level" :key="item.value" :value="item.value"
                     :label="item.name"></el-option>
               </el-select>
            </div>
         </div>
      </div>
      <div class="image_2 px-[139px] -mt-[50px] box-border">
         <div class="w100" style="flex: 1; display: flex; flex-direction: column" v-loading="state.m_PageLoading">
            <el-table class="w100" :data="state.m_dispTableData" stripe style="width: 100%" :height="818"
               header-cell-class-name="table-header-cell-style" cell-class-name="custom-table-cell-style">
               <el-table-column prop="TableIndex" label="序号" align="center" width="65"> </el-table-column>
               <el-table-column prop="ModelType" label="产品类型" align="center" show-overflow-tooltip>
               </el-table-column>
               <el-table-column prop="Model" label="产品型号" align="center" show-overflow-tooltip>
               </el-table-column>
               <el-table-column prop="RecordNumber" label="备案号" align="center" show-overflow-tooltip>
               </el-table-column>
               <el-table-column prop="EnergyEfficiencyClass" label="能效等级" align="center">
                  <template #default="scope">
                     <img style="height: 50px" :alt="EecLevelEnum[scope.row.EnergyEfficiencyClass].name"
                        :src="EecLevelEnum[scope.row.EnergyEfficiencyClass].icon" />
                  </template>
               </el-table-column>
               <el-table-column prop="RecordTime" label="备案时间" align="center"> </el-table-column>
               <el-table-column prop="CompanyName" label="厂商" align="center" show-overflow-tooltip>
               </el-table-column>
               <el-table-column label="操作" align="center" width="120px">
                  <template #default="scope">
                     <span class="table-detail-span" @click="clickDetail(scope.row)" style="margin-right: 10px">
                        <svg style="width:24px;height: 24px" t="1739499317499" class="detail-icon"
                           viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                           p-id="27830" 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="27831"></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="27832"></path>
                        </svg>
                        详细</span>
                  </template>
               </el-table-column>
            </el-table>
            <div class="w100 flex justify-center h-[40px] shrink-[0] box-border py-[30px] z-[1] bg-[#fff]">
               <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :background="true" :current-page="state.m_paginationConfig.currentPage"
                  :page-sizes="[10, 20, 30, 40]" :page-size="state.m_paginationConfig.pageSize"
                  layout="total, sizes, prev, pager, next, jumper" :total="state.filterProductData.length" />
            </div>
         </div>
      </div>
      <el-dialog v-model="dialogVisible" title="详细" width="550" align-center>
         <div v-loading="dialogLoading">
@@ -136,8 +153,9 @@
               <el-form-item label="备案信息" prop="RecordNumber">
                  <div style="padding-left: 30px; background-color: rgb(243 250 255)">
                     <el-form label-width="200px">
                        <el-form-item v-for="(item, index) in state.m_OtherDetailInfo.List" style="font-size: 15px;" class="beianxinxi" :key="index"
                           :label="item.name" prop="Standard">
                        <el-form-item v-for="(item, index) in state.m_OtherDetailInfo.List"
                           style="font-size: 15px;" class="beianxinxi" :key="index" :label="item.name"
                           prop="Standard">
                           <span class="detail-text">{{ item.value }}</span>
                        </el-form-item>
                     </el-form>
@@ -180,9 +198,7 @@
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElTable, ElTableColumn, ElPagination, ElForm, ElFormItem, ElDialog } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import EecLevel1 from '@/assets/icons/ecc1.svg';
import EecLevel2 from '@/assets/icons/ecc2.svg';
import EecLevel3 from '@/assets/icons/ecc3.svg';
import { Search } from '@element-plus/icons-vue';
import axios from 'axios';
const route = useRoute();
const router = useRouter();
@@ -192,9 +208,9 @@
const dialogLoading = ref(false);

const EecLevelEnum = {
   1: { name: '一级能效', icon: EecLevel1 },
   2: { name: '二级能效', icon: EecLevel2 },
   3: { name: '二级能效', icon: EecLevel3 },
   1: { name: '一级能效', icon: "static/img/eec-search/1.svg" },
   2: { name: '二级能效', icon: "static/img/eec-search/2.svg" },
   3: { name: '三级能效', icon: "static/img/eec-search/3.svg" },
};

let state = reactive({
@@ -209,7 +225,7 @@

   m_paginationConfig: {
      currentPage: 1,
      pageSize: 20,
      pageSize: 10,
   },
   m_detailDialogInfo: {
      PhysicalPicturePath: '',
@@ -233,6 +249,7 @@
      RecordTime: '',
   },
   typeSelect: 2,
   checkTypeList: [],//当前选择的类型列表
   // 分类选项
   type: [
      { name: '泵', tag: 1 },
@@ -241,6 +258,28 @@
      { name: '冷水机组', tag: 4 },
      { name: '电机', tag: 7 },
   ],
   selEec: 0,
   eec_Level: [
      {
         name: "全部",
         value: 0,
      },
      {
         name: "一级能效",
         value: 1,
      },
      {
         name: "二级能效",
         value: 2,
      },
      {
         name: "三级能效",
         value: 3,
      }
   ],
   selFactory: "-99",
   factoryIncludeType: [],
   factoryList: [],//工厂列表
   m_PageLoading: false,
});

@@ -254,55 +293,75 @@

onMounted(() => {
   initData();
   initComanyData()
});
const initData = () => {
   state.m_PageLoading = true;
   axios({
      method: 'get',
      url: m_RequestDataObj[state.m_formData.ProductType].requestPath,
   })
      .then((res) => {
         state.m_PageLoading = 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');
   }).then((res) => {
      state.m_PageLoading = 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 node = {
               TableIndex: index + 1,
               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);
         });
         state.allEecProduct = arr;
         filterProduct();
      })
         if (aContainsDP && !bContainsDP) {
            return -1;
         } else if (!aContainsDP && bContainsDP) {
            return 1;
         } else {
            return 0;
         }
      });
      let arr = [];
      result.forEach((item: any, index: number) => {
         let node = {
            TableIndex: index + 1,
            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);
      });
      state.allEecProduct = arr;
      filterProduct();
   })
      .catch((err) => {
         state.m_PageLoading = false;
      });
};
const initComanyData = () => {
   axios({
      method: 'get',
      url: 'static/EecProductData/CompanyData.json',
   })
      .then((res) => {
         let result = res.data;
         state.factoryList = result.map((item: any) => {
            return {
               CompanyId: item.CompanyId,
               CompanyAllName: item.CompanyAllName,
               CompanyAbbName: item.CompanyAbbName,
               Type: item.Type,
               Catalog: item.CatalogIDs
            };
         });
         state.factoryList.unshift({ CompanyId: '-99', CompanyAllName: '全部', CompanyAbbName: '全部', Type: [], CatalogIDs: null });
      })
      .catch((err) => { });
};
// 筛选查询数据
const filterProduct = () => {
@@ -310,14 +369,31 @@
      return item.Type === state.m_formData.ProductType;
   });

   if (state.m_formData.RecordNumber !== '') {
      state.filterProductData = state.filterProductData.filter((item) => {
         return item.RecordNumber.indexOf(state.m_formData.RecordNumber) > -1;
      });
   }
   if (state.m_formData.ProductModel !== '') {
      state.filterProductData = state.filterProductData.filter((item) => {
         return item.Model.indexOf(state.m_formData.ProductModel) > -1;
      });
   }

   // 搜索筛选
   if (state.m_formData.ProductModel !== '') {
      state.filterProductData = state.filterProductData.filter((item) => {
         return item.Model.indexOf(state.m_formData.ProductModel) > -1;
      });
   }

   // 能效等级筛选
   if (state.selEec !== 0) {
      state.filterProductData = state.filterProductData.filter((item) => {
         return Number(item.EnergyEfficiencyClass) === Number(state.selEec);
      });
   }
   // 厂商筛选
   if (state.selFactory !== '-99') {
      state.filterProductData = state.filterProductData.filter((item) => {
         console.log(state.factoryIncludeType,item.Type,394)

         return state.factoryIncludeType.includes(item.Type);
      });
   }
   state.m_dispTableData = getSelectPageData(state.filterProductData);
@@ -338,6 +414,15 @@
   state.m_paginationConfig.currentPage = 1;
   initData();
};
const changeFactory = () => {
   state.m_paginationConfig.currentPage = 1;
   state.factoryIncludeType = getFactoryType(state.selFactory);
   initData();
}
const changeEecLevel = () => {
   state.m_paginationConfig.currentPage = 1;
   initData();
}
const clickDetail = async (row: any) => {
   if (row.Id.includes('Pupm')) {
      isPumpProduct.value = true;
@@ -345,7 +430,6 @@
      isPumpProduct.value = false;
      getProductDetail(row.Model);
   }
   console.log(row);
   state.m_detailDialogInfo = row;
   dialogVisible.value = true;

@@ -386,15 +470,15 @@
               pageSize: 10,
               isOld: 0,
            },
         })
            .then((res) => {
               let result = res.data.data;
               if (!result.list.length) {
                  reslvoe([]);
               }
               reslvoe(result.list);
            })
            .catch((err) => { });
         }).then((res) => {
            let result = res.data.data;
            if (!result.list.length) {
               reslvoe([]);
            }
            reslvoe(result.list);
         }).catch((err) => {

         });
      });
   };

@@ -439,6 +523,16 @@
      RecordTime: '',
   };
};
const getFactoryType = (factory) => {
   let factoryType = [];
   state.factoryList.forEach((item) => {
      if (Number(item.CompanyId) === Number(factory)) {
         factoryType = item.Type;
      }
   });
   return factoryType;
}


const resertForm = () => {
   state.m_formData.ProductModel = '';
@@ -458,52 +552,288 @@
</script>

<style lang="scss" scoped>
.flag-search-div {
   box-sizing: border-box;
   padding: 10px;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@import url('@/styles/common.scss');

   .flag-search-content {
.eec-label-page {
   width: 100%;
   background: linear-gradient(180deg, rgba(1, 20, 47, 0.5) 34%, rgba(175, 184, 196, 0.2809) 63%, rgba(0, 0, 0, 0) 100%), rgba(255, 255, 255, 0.4);

   .eec-label-top {
      width: 100%;
      // height: calc(100% - 86px);
      height: 500px;
      // background-image: url('static/img/eec-search/eec_label_top.png');
      // background-size: 100% 100%;
      // background-repeat: no-repeat;
      // background-position: 0% 0%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;





   }
}

.detail-text {
   font-family: Microsoft YaHei;
   font-size: 16px;
   font-weight: 400;
   color: #4a4a4a;
}

.top {
   width: 100%;
   height: 150px;
   background: url(https://www.energylabel.com.cn/static/img/topbackgroundpicture.5b933b83.jpg) no-repeat;
   background-size: 100% 150px;
.page {
   background-color: rgba(255, 255, 255, 1);
   position: relative;
   width: 100%;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;

   span {
      color: #fff;
      font-size: 36px;
   .image_1 {
      width: 100%;
      height: 830px;
   }

   .image_2 {
      width: 100%;
   }

   .block_1 {
      position: absolute;
      left: -1px;
      width: 100%;
      height: 2695px;
      background: url(https://lanhu-oss-2537-2.lanhuapp.com/MasterDDSSlicePNGa9c0eaf63702e9546db5cd3481403d4f.png) 100% no-repeat;
      background-size: 100% 100%;

      .image_3 {
         width: 100%;
         height: 141px;
         margin-top: -141px;
      }

      .block_2 {
         position: relative;
         width: 100%;
         height: 2696px;
         margin-bottom: 1px;

         .text_1 {
            text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            width: 604px;
            height: 141px;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 100px;
            font-family: Source Han Serif CN-Heavy;
            font-weight: 900;
            text-align: left;
            white-space: nowrap;
            line-height: 144px;
            margin: 40px 0 0 1229px;
         }

         .paragraph_1 {
            width: 600px;
            height: 102px;
            overflow-wrap: break-word;
            color: rgba(226, 225, 225, 1);
            font-size: 36px;
            font-family: Source Han Serif CN-SemiBold;
            font-weight: normal;
            text-align: right;
            line-height: 52px;
            margin: 13px 0 0 1220px;
         }

         .section_1 {
            width: 784px;
            height: 67px;
            margin: 40px 0 0 1062px;

            .text-wrapper_1 {
               box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
               background-color: rgba(216, 216, 216, 1);
               border-radius: 15px;
               height: 67px;
               width: 250px;

               .text_2 {
                  width: 223px;
                  height: 50px;
                  overflow-wrap: break-word;
                  color: rgba(61, 61, 61, 1);
                  font-size: 36px;
                  font-family: Source Han Serif CN-SemiBold;
                  font-weight: normal;
                  text-align: center;
                  white-space: nowrap;
                  line-height: 52px;
                  margin: 8px 0 0 14px;
               }
            }

            .group_1 {
               box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
               height: 67px;
               margin-left: 16px;
               width: 250px;

               .text-wrapper_2 {
                  background-color: rgba(216, 216, 216, 1);
                  border-radius: 15px;
                  height: 67px;
                  width: 250px;

                  .text_3 {
                     width: 223px;
                     height: 50px;
                     overflow-wrap: break-word;
                     color: rgba(61, 61, 61, 1);
                     font-size: 36px;
                     font-family: Source Han Serif CN-SemiBold;
                     font-weight: normal;
                     text-align: center;
                     white-space: nowrap;
                     line-height: 52px;
                     margin: 8px 0 0 14px;
                  }
               }
            }

            .group_2 {
               box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
               height: 67px;
               margin-left: 18px;
               width: 250px;

               .text-wrapper_3 {
                  background-color: rgba(216, 216, 216, 1);
                  border-radius: 15px;
                  height: 67px;
                  width: 250px;

                  .text_4 {
                     width: 223px;
                     height: 50px;
                     overflow-wrap: break-word;
                     color: rgba(61, 61, 61, 1);
                     font-size: 36px;
                     font-family: Source Han Serif CN-SemiBold;
                     font-weight: normal;
                     text-align: center;
                     white-space: nowrap;
                     line-height: 52px;
                     margin: 8px 0 0 14px;
                  }
               }
            }
         }

         .section_2 {
            border-radius: 25px;
            height: 67px;
            width: 998px;
            margin: 130px 0 0 462px;

            .image-wrapper_1 {
               background-color: rgba(0, 58, 142, 1);
               height: 67px;
               margin-left: 899px;
               width: 100px;

               .label_1 {
                  width: 47px;
                  height: 47px;
                  margin: 10px 0 0 25px;
               }
            }
         }

         .section_3 {
            width: 1001px;
            height: 70px;
            background-size: 100% 100%;
            margin: 40px 0 0 460px;

            .text_5 {
               width: 121px;
               overflow-wrap: break-word;
               color: rgba(255, 255, 255, 1);
               font-size: 24px;
               font-family: Source Han Sans-Bold;
               font-weight: 700;
               text-align: left;
               white-space: nowrap;
            }

            .label_2 {
               width: 24px;
               height: 24px;
               margin: 24px 0 0 106px;
            }

            .text_6 {
               width: 121px;
               height: 42px;
               overflow-wrap: break-word;
               color: rgba(255, 255, 255, 1);
               font-size: 24px;
               font-family: Source Han Sans-Bold;
               font-weight: 700;
               text-align: left;
               white-space: nowrap;
               line-height: 35px;
               margin: 18px 0 0 101px;
            }

            .label_3 {
               width: 24px;
               height: 24px;
               margin: 24px 0 0 106px;
            }

            .text_7 {
               width: 121px;
               height: 42px;
               overflow-wrap: break-word;
               color: rgba(255, 255, 255, 1);
               font-size: 24px;
               font-family: Source Han Sans-Bold;
               font-weight: 700;
               text-align: left;
               white-space: nowrap;
               line-height: 35px;
               margin: 18px 0 0 101px;
            }

            .label_4 {
               width: 24px;
               height: 24px;
               margin: 24px 24px 0 105px;
            }

            :deep(.el-select__wrapper) {
               background-color: var(--theme-color);
               height: 70px;
               border-radius: 20px;
               box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3)
            }

            :deep(.el-select__placeholder) {
               color: #fff;
               font-size: 24px;
               text-align: center;
            }

            :deep(.el-select__caret) {
               color: #fff;
               font-size: 24px;
            }
         }
      }
   }
}

.w-180-px {
   width: 10rem;
.custom-search-btn {
   background-color: #003a8f;
   height: 100%;
   width: 100px;
   border-top-right-radius: 25px;
   border-bottom-right-radius: 25px;
}

.table-detail-span {
@@ -516,42 +846,16 @@
   gap: 3px;
}

.detail-icon {
   width: 14px;
   height: 14px;

:deep(.el-input__wrapper) {
   height: 100%;
   border-radius: 25px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
}

.custom-detail-span {
   font-family: Microsoft YaHei;
   font-weight: 400;
   font-size: 16px;
   color: #000000;
}

.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;
   }
}
.beianxinxi{
   :deep(.el-form-item__label){
      font-size: 15px;
   }
:deep(.el-input__wrapper.is-focus) {
   box-shadow: 0 0 0 1px var(--theme-color) inset;
}

:deep(.el-form--inline .el-form-item) {
@@ -585,7 +889,10 @@
   color: #000;
   font-weight: bold;
   font-size: 20px;
   background-color: #f3f1f1 !important;
   background-color: #003a8f !important;
   color: #fff;
   height: 98px;

}

:deep(.custom-table-cell-style) {
@@ -601,4 +908,4 @@
   font-weight: 700;
   color: #474747;
}
</style>
</style>