<template>
|
<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>
|
<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">
|
<!-- 泵产品显示 -->
|
<el-form v-if="isPumpProduct" :model="state.m_detailDialogInfo" label-width="140px" size="small">
|
<el-form-item label="产品类型" prop="ModelType">
|
<span class="detail-text">{{ state.m_detailDialogInfo.ModelType }}</span>
|
</el-form-item>
|
<el-form-item label="产品型号" prop="Model">
|
<span class="detail-text">{{ state.m_detailDialogInfo.Model }}</span>
|
</el-form-item>
|
<el-form-item label="生产厂商" prop="CompanyName">
|
<span class="detail-text">{{ state.m_detailDialogInfo.CompanyName }}</span>
|
</el-form-item>
|
<el-form-item label="能效等级" prop="EnergyEfficiencyClass">
|
<span class="detail-text">{{ state.m_detailDialogInfo.EnergyEfficiencyClass }}</span>
|
</el-form-item>
|
<el-form-item label="备案号" prop="RecordNumber">
|
<span class="detail-text">{{ state.m_detailDialogInfo.CompanyName }}</span>
|
</el-form-item>
|
<el-form-item label="备案时间" prop="RecordTime">
|
<span class="detail-text">{{ state.m_detailDialogInfo.RecordTime }}</span>
|
</el-form-item>
|
<el-form-item label="依据国家标准" prop="RecordNumber">
|
<span class="detail-text"></span>
|
</el-form-item>
|
<el-form-item label="证书" prop="RecordNumber">
|
<div>
|
<el-image style="width: 100px; height: 100px"
|
:src="state.m_detailDialogInfo.CertificatePath" :zoom-rate="0.8" :max-scale="7"
|
:min-scale="0.2" :preview-src-list="[state.m_detailDialogInfo.CertificatePath]"
|
show-progress :initial-index="4" fit="cover" />
|
</div>
|
</el-form-item>
|
</el-form>
|
<!-- 其他产品显示 -->
|
<el-form v-if="!isPumpProduct" :model="state.m_OtherDetailInfo" label-width="140px" size="small">
|
<el-form-item label="产品类型" prop="ModelType">
|
<span class="detail-text">{{ state.m_OtherDetailInfo.ModelType }}</span>
|
</el-form-item>
|
<el-form-item label="产品型号" prop="Model">
|
<span class="detail-text">{{ state.m_OtherDetailInfo.Model }}</span>
|
</el-form-item>
|
<el-form-item label="生产厂商" prop="CompanyName">
|
<span class="detail-text">{{ state.m_OtherDetailInfo.CompanyName }}</span>
|
</el-form-item>
|
<el-form-item label="能效等级" prop="EnergyEfficiencyClass">
|
<span class="detail-text">{{ state.m_OtherDetailInfo.EnergyEfficiencyClass }}</span>
|
</el-form-item>
|
<el-form-item label="备案号" prop="RecordNumber">
|
<span class="detail-text">{{ state.m_OtherDetailInfo.RecordNumber }}</span>
|
</el-form-item>
|
<el-form-item label="公告时间" prop="AnnouncementTime">
|
<span class="detail-text">{{ state.m_OtherDetailInfo.AnnouncementTime }}</span>
|
</el-form-item>
|
<el-form-item label="依据国家标准" prop="Standard">
|
<span class="detail-text">{{ state.m_OtherDetailInfo.Standard }}</span>
|
</el-form-item>
|
<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">
|
<span class="detail-text">{{ item.value }}</span>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-form-item>
|
<el-form-item label="证书" prop="RecordNumber">
|
<div>
|
<el-image style="width: 100px; height: 100px"
|
:src="state.m_detailDialogInfo.CertificatePath" :zoom-rate="0.8" :max-scale="7"
|
:min-scale="0.2" :preview-src-list="[state.m_detailDialogInfo.CertificatePath]"
|
show-progress :initial-index="4" fit="contain" />
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<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="state.m_detailDialogInfo.CertificatePath" />
|
<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" name="EecLabel">
|
import { ref, reactive, onMounted } from 'vue';
|
import { ElMessage, ElTable, ElTableColumn, ElPagination, ElForm, ElFormItem, ElDialog } from 'element-plus';
|
import { useRoute, useRouter } from 'vue-router';
|
import { Search } from '@element-plus/icons-vue';
|
import axios from 'axios';
|
const route = useRoute();
|
const router = useRouter();
|
const dialogVisible = ref(false);
|
const dialogVisibleCertifcate = ref(false);
|
const isPumpProduct = ref(true);
|
const dialogLoading = ref(false);
|
|
const EecLevelEnum = {
|
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({
|
m_formData: {
|
ProductModel: '',
|
ProductType: 2,
|
RecordNumber: '',
|
},
|
allEecProduct: [],
|
filterProductData: [],
|
m_dispTableData: [],
|
|
m_paginationConfig: {
|
currentPage: 1,
|
pageSize: 10,
|
},
|
m_detailDialogInfo: {
|
PhysicalPicturePath: '',
|
CertificatePath: '',
|
ModelType: '',
|
Model: '',
|
CompanyName: '',
|
EnergyEfficiencyClass: '',
|
RecordTime: '',
|
RecordNumber: '',
|
},
|
m_OtherDetailInfo: {
|
ModelType: '',
|
Model: '',
|
CompanyName: '',
|
RecordNumber: '',
|
EnergyEfficiencyClass: '',
|
AnnouncementTime: '',
|
Standard: '',
|
List: '',
|
RecordTime: '',
|
},
|
typeSelect: 2,
|
checkTypeList: [],//当前选择的类型列表
|
// 分类选项
|
type: [
|
{ name: '泵', tag: 1 },
|
{ name: '容积式空压机', tag: 2 },
|
{ name: '通风机', tag: 3 },
|
{ 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,
|
});
|
|
const m_RequestDataObj = {
|
1: { requestPath: 'static/EecProductData/PumpSearch.json' },
|
2: { requestPath: 'static/EecProductData/AirCompressorSearch.json' },
|
3: { requestPath: 'static/EecProductData/FanSearch.json' },
|
4: { requestPath: 'static/EecProductData/WaterChillerSearch.json' },
|
7: { requestPath: 'static/EecProductData/ElectricMachinerySearch.json' },
|
};
|
|
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');
|
|
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 = () => {
|
state.filterProductData = state.allEecProduct.filter((item) => {
|
return item.Type === state.m_formData.ProductType;
|
});
|
|
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);
|
};
|
const handleCurrentChange = (val: number) => {
|
state.m_paginationConfig.currentPage = val;
|
let allTableData = state.filterProductData;
|
let pagingData = getSelectPageData(allTableData);
|
state.m_dispTableData = pagingData;
|
};
|
const handleSizeChange = (val: number) => {
|
state.m_paginationConfig.pageSize = val;
|
let allTableData = state.filterProductData;
|
let pagingData = getSelectPageData(allTableData);
|
state.m_dispTableData = pagingData;
|
};
|
const changeProductType = () => {
|
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;
|
} else {
|
isPumpProduct.value = false;
|
getProductDetail(row.Model);
|
}
|
state.m_detailDialogInfo = row;
|
dialogVisible.value = true;
|
|
// 找到当前点击的产品
|
// const currentProduct = state.m_dispTableData.find((item) => item.id === row.id);
|
// if (currentProduct) {
|
// // 保存产品信息到localStorage
|
// localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
|
// }
|
// router.push(`/product/${currentProduct.Id}`);
|
};
|
const clickDetailCertifcate = (row: any) => {
|
// state.m_detailDialogInfo = row;
|
// dialogVisibleCertifcate.value = true;
|
// 找到当前点击的产品
|
const currentProduct = state.m_dispTableData.find((item) => item.id === row.id);
|
if (currentProduct) {
|
// 保存产品信息到localStorage
|
localStorage.setItem('currentProduct', JSON.stringify(currentProduct));
|
}
|
router.push(`/product/${currentProduct.Id}`);
|
};
|
|
const getProductDetail = async (productModel) => {
|
dialogLoading.value = true;
|
const productRegistrationList = () => {
|
return new Promise((reslvoe, reject) => {
|
axios({
|
url: 'https://www.energylabel.com.cn/admin-api/gateway/productRegistration/productRegistrationList',
|
method: 'post',
|
data: {
|
mark: 854,
|
productType: '',
|
productModel: productModel,
|
registrationNumber: '',
|
producerName: '',
|
current: 1,
|
pageSize: 10,
|
isOld: 0,
|
},
|
}).then((res) => {
|
let result = res.data.data;
|
if (!result.list.length) {
|
reslvoe([]);
|
}
|
reslvoe(result.list);
|
}).catch((err) => {
|
|
});
|
});
|
};
|
|
const listData = await productRegistrationList();
|
const firstProduct = listData[0];
|
|
const detailResponse = () => {
|
return new Promise((reslvoe, reject) => {
|
axios({
|
url: 'https://www.energylabel.com.cn/admin-api/gateway/productRegistration/productDetailById',
|
method: 'post',
|
data: {
|
productId: firstProduct.id,
|
productTypeCode: firstProduct.productTypeCode,
|
mark: 854,
|
isSign: 'true',
|
isOld: 0,
|
},
|
})
|
.then((res) => {
|
let result = res.data.data;
|
if (!result.list.length) {
|
reslvoe([]);
|
}
|
reslvoe(result);
|
})
|
.catch((err) => { });
|
});
|
};
|
|
const detailData = await detailResponse();
|
dialogLoading.value = false;
|
state.m_OtherDetailInfo = {
|
ModelType: detailData.productType,
|
Model: detailData.productModel,
|
CompanyName: detailData.producerName,
|
RecordNumber: detailData.registrationNumber,
|
EnergyEfficiencyClass: detailData.nxLever,
|
AnnouncementTime: detailData.announcementTime,
|
Standard: detailData.standard,
|
List: detailData.list,
|
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 = '';
|
state.m_formData.ProductType = 1;
|
state.m_formData.RecordNumber = '';
|
filterProduct();
|
};
|
//获取分页数据
|
const getSelectPageData = (list: any) => {
|
let filterList = list.slice(
|
(state.m_paginationConfig.currentPage - 1) * state.m_paginationConfig.pageSize,
|
state.m_paginationConfig.currentPage * state.m_paginationConfig.pageSize
|
);
|
//当前页
|
return filterList;
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import url('@/styles/common.scss');
|
|
.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: 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;
|
justify-content: center;
|
align-items: center;
|
|
|
|
|
|
}
|
}
|
|
.page {
|
background-color: rgba(255, 255, 255, 1);
|
position: relative;
|
width: 100%;
|
overflow: hidden;
|
|
.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;
|
}
|
}
|
}
|
}
|
}
|
|
.custom-search-btn {
|
background-color: #003a8f;
|
height: 100%;
|
width: 100px;
|
border-top-right-radius: 25px;
|
border-bottom-right-radius: 25px;
|
}
|
|
.table-detail-span {
|
color: #1592fc;
|
cursor: pointer;
|
font-size: 16px;
|
display: inline-flex;
|
justify-content: center;
|
align-items: center;
|
gap: 3px;
|
}
|
|
|
:deep(.el-input__wrapper) {
|
height: 100%;
|
border-radius: 25px;
|
border-top-right-radius: 0px;
|
border-bottom-right-radius: 0px;
|
}
|
|
:deep(.el-input__wrapper.is-focus) {
|
box-shadow: 0 0 0 1px var(--theme-color) inset;
|
}
|
|
:deep(.el-form--inline .el-form-item) {
|
margin-right: 0.75rem;
|
}
|
|
:deep(.el-card) {
|
width: 100%;
|
}
|
|
:deep(.el-card__body) {
|
height: 100%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
}
|
|
:deep(.el-table) {
|
font-size: 12px;
|
}
|
|
:deep(.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell) {
|
border-bottom: 1px solid #dfe6ec;
|
}
|
|
:deep(.el-table--border .el-table__cell) {
|
border-right: 1px solid #dfe6ec;
|
}
|
|
:deep(.table-header-cell-style) {
|
color: #000;
|
font-weight: bold;
|
font-size: 20px;
|
background-color: #003a8f !important;
|
color: #fff;
|
height: 98px;
|
|
}
|
|
:deep(.custom-table-cell-style) {
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
font-size: 16px;
|
color: #000000;
|
}
|
|
:deep(.el-form-item__label) {
|
font-family: Microsoft YaHei;
|
font-size: 20px;
|
font-weight: 700;
|
color: #474747;
|
}
|
</style>
|
