<template> <div class="app-container"> <el-form :model="queryParams" ref="queryRef" inline v-show="showSearch"> <el-form-item v-for="i in queryClouns" :label="i.label" :prop="i.prop"> <el-select style="width: 100%" v-model="queryParams.capitalSource" v-if="i.prop == 'capitalSource'" placeholder="请选择招标项目资金来源" clearable > <el-option v-for="dict in capital_source" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> <el-select style="width: 100%" v-else-if="i.prop == 'bidWay'" v-model="queryParams.bidWay" placeholder="请选择招标方式" clearable > <el-option v-for="dict in bid_way" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> <el-date-picker v-model="queryParams.timer" type="daterange" v-else-if="i.prop == 'timer'" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 240px" /> <el-input v-else clearable v-model="queryParams[i.prop]" :placeholder="i.placeholder" style='width:200px' ></el-input> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery" >搜索</el-button > <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <!-- 操作栏 --> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:post:add']" >新增</el-button > </el-col> <!-- <el-col :span="1.5"> <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:post:remove']">删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:post:export']">导出</el-button> </el-col> --> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" ></right-toolbar> </el-row> <!-- 表格 --> <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" max-height="500" > <el-table-column label="序号" align="center" type="index" width="60" /> <el-table-column :label="i.label" align="center" :prop="i.props" show-overflow-tooltip v-for="i in tenderReviewCloum" > <template #default="{ row }" v-if="i.props == 'capitalSource'"> <dict-tag :options="capital_source" :value="row.capitalSource" /> </template> <template #default="{ row }" v-if="i.props == 'bidWay'"> <dict-tag :options="bid_way" :value="row.bidWay" /> </template> <template #default="{ row }" v-if="i.props == 'earnestMoney'"> {{ row.earnestMoney||0 }}(万元) </template> </el-table-column> <el-table-column label="操作" width="250" align="center" class-name="small-padding fixed-width" > <template #default="scope"> <el-button link type="primary" icon="View" @click="handleDetails(scope.row)" >详情</el-button > <el-button link type="warning" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']" >修改</el-button > <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']" >删除</el-button > </template> </el-table-column> </el-table> <!-- 分页 --> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改对话框 --> <el-dialog :title="title" v-model="open" width="68%"> <el-form ref="postRef" :model="form" :rules="rules" label-width="auto" inline > <el-divider content-position="left">基本信息</el-divider> <el-form-item label="标书编号:" prop="tenderNumber" style="width: 45%"> <el-input v-model="form.tenderNumber" placeholder="请输入标书编号" /> </el-form-item> <el-form-item label="项目名称:" prop="projectNo" style="width: 45%"> <el-select style="width: 100%" v-model="form.projectNo" placeholder="请选择项目名称" > <el-option v-for="dict in ProjectListData" :key="dict.projectNo" :label="dict.projectName" :value="dict.projectNo" /> </el-select> </el-form-item> <el-form-item label="投标公司名称:" style="width: 45%"> <el-select v-model="form.companyId" placeholder="请选择投标公司名称" style="width: 60%" @change="companyChage" > <el-option v-for="dict in companyListData" :key="dict.id" :label="dict.unitName" :value="dict.id" /> </el-select> <el-button type="primary" icon="Plus" plain style="margin-left: 10px" @click="AddTBGS" >新增投标公司</el-button > </el-form-item> <el-form-item label="招标项目资金来源:" style="width: 45%"> <el-select v-model="form.capitalSource" placeholder="请选择招标项目资金来源" clearable style="width: 100%" > <el-option v-for="dict in capital_source" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="投标时间:" style="width: 45%"> <el-date-picker style="width: 100%" v-model="form.bidTime" type="date" placeholder="请选择投标时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item label="投标方式:" style="width: 45%"> <el-select v-model="form.bidWay" placeholder="请选择招标方式" clearable style="width: 100%" > <el-option v-for="dict in bid_way" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="投标地址:" style="width: 92.5%"> <el-input clearable v-model="form.bidAddress" placeholder="请输入投标地址" /> </el-form-item> <el-form-item label="保证金金额:" style="width: 45%"> <el-input v-model="form.earnestMoney" placeholder="请输入保证金金额"> <template #append>万元</template> </el-input> </el-form-item> <el-form-item label="开标日期:" style="width: 45%"> <el-date-picker style="width: 100%" v-model="form.bidOpenDate" type="date" placeholder="请选择开标日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item label="保证金退还时间:" style="width: 45%"> <el-date-picker style="width: 100%" v-model="form.earnestMoneyRollbackTime" type="date" placeholder="请选择保证金退还时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" /> </el-form-item> <el-form-item label="招标项目概况:" style="width: 93%"> <el-input v-model="form.bidProjectSurvey" placeholder="请输入招标项目概况" :autosize="{ minRows: 5, maxRows: 7 }" type="textarea" /> </el-form-item> <el-form-item label="项目建设内容:" style="width: 93%"> <el-input v-model="form.projectConstructionContent" placeholder="请输入项目建设内容" :autosize="{ minRows: 5, maxRows: 7 }" type="textarea" /> </el-form-item> <el-form-item label="附件:" style="width: 93%"> <el-upload v-model:file-list="fileList1" class="upload-demo" action="/prod-api/system/upload" :headers="uploadHeader" multiple :on-preview="handlePreview" :before-remove="beforeRemove" style="width: 100%" > <el-button type="primary">选择文件</el-button> <template #tip> <div class="el-upload__tip">支持CSV格式,可一次性上传多个文件</div> </template> </el-upload> </el-form-item> <el-divider content-position="left">技术审查</el-divider> <el-form-item label="技术协议偏差:" style="width: 93%"> <el-input v-model="form.technicalProtocolDeviation" placeholder="请输入技术协议偏差" :autosize="{ minRows: 5, maxRows: 7 }" type="textarea" /> </el-form-item> <br /> <el-form-item label="附件:" style="width: 93%"> <el-upload v-model:file-list="fileList2" class="upload-demo" action="/prod-api/system/upload" :headers="uploadHeader" multiple :on-preview="handlePreview" style="width: 100%" :before-remove="beforeRemove" > <el-button type="primary">选择文件</el-button> <template #tip> <div class="el-upload__tip">支持CSV格式,可一次性上传多个文件</div> </template> </el-upload> </el-form-item> <el-divider content-position="left">金额审查</el-divider> <el-form-item label="总金额:" style="width: 45%"> <el-input v-model="form.totalMoney" placeholder="请输入总金额" style="width: 80%" > <template #append>(万元)</template> </el-input> </el-form-item> <el-form-item label="税率:" style="width: 45%"> <el-input style="width: 100%" v-model="form.taxRate" placeholder="请输入税率" /> </el-form-item> <el-form-item label="付款方式:" style="width: 45%"> <el-select style="width: 100%" v-model="form.paymentMethod" placeholder="请选择付款方式" clearable > <el-option v-for="dict in payment_method" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="付款比例:" style="width: 45%"> <el-input v-model="form.ratioPayment" placeholder="请输入付款比例" /> </el-form-item> <el-form-item label="偏差说明:" style="width: 93%"> <el-input v-model="form.deviationExplain" placeholder="请输入偏差说明" :autosize="{ minRows: 5, maxRows: 7 }" type="textarea" /> </el-form-item> <el-form-item label="附件:" style="width: 93%"> <el-upload v-model:file-list="fileList3" class="upload-demo" action="/prod-api/system/upload" :headers="uploadHeader" multiple :on-preview="handlePreview" style="width: 100%" :before-remove="beforeRemove" > <el-button type="primary">选择文件</el-button> <template #tip> <div class="el-upload__tip">支持CSV格式,可一次性上传多个文件</div> </template> </el-upload> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitForm">保 存</el-button> <el-button @click="cancel">关 闭</el-button> </div> </template> <el-dialog width="60%" title="投标公司新增" v-model="open3" append-to-body align-center top="30%" > <tableDalgo :typeList="typeList" @onModalClose="onModalClose" ></tableDalgo> </el-dialog> </el-dialog> <!-- 详情对话框 --> <el-dialog title="标书审查详情" v-model="open2" width="68%" id="DiaLogBox" > <!-- 信息头部 --> <div class="DetailHeader"> <span class="DetailName">{{ DetailData.projectName }}</span> <span class="DetailTypeName">{{ DetailData.projectTypeName ? DetailData.projectTypeName : "海绵道路" }}</span> <span class="DetailNo">{{ DetailData.projectNo }}</span> </div> <!-- 金额统计 --> <div class="DetailMoney"> <div class="MoneyList"> <div class="leftBox"> <div class="Left_top" style="color: #0f69ff"> {{ DetailData.contractMoney == "" ? "--" : DetailData.contractMoney }} </div> <div class="Left_Bottom">合同金额(万元)</div> </div> <div class="RightBox"></div> </div> <div class="MoneyList"> <div class="leftBox"> <div class="Left_top" style="color: #28d290"> {{ DetailData.paidMoney == "" ? "--" : DetailData.paidMoney }} </div> <div class="Left_Bottom">已经支付(万元)</div> </div> <div class="RightBox"> <el-progress type="circle" color="" width="50" class="progressDom" :percentage="DetailData.paymentRatio" status="success" > <template #default="{ percentage }"> <span class="percentage-value">{{ percentage }}%</span> </template></el-progress > </div> </div> <div class="MoneyList"> <div class="leftBox"> <div class="Left_top" style="color: #f15261"> {{ DetailData.notPaidMoney == "" ? "--" : DetailData.notPaidMoney }} </div> <div class="Left_Bottom">未支付(万元)</div> </div> <div class="RightBox"></div> </div> </div> <!-- 项目基本信息 --> <div class="ProjectInfo" > <p class="ProjectInfoTitle">项目基本信息</p> <div class="InfoList" v-for="i in InfoListLableList" :class="{'InfoList2':i.prop=='bidProjectSurvey' ||i.prop=='projectConstructionContent'}"> <div class="InfoListLable">{{ i.label }}</div> <div class="InfoListvalue" v-if="i.prop=='capitalSource'"> <dict-tag :options="capital_source" :value="DetailData[i.prop]" /> </div> <div class="InfoListvalue" v-else-if="i.prop=='bidWay'"> <dict-tag :options="bid_way" :value="DetailData[i.prop]" /> </div> <div class="InfoListvalue" v-else>{{ DetailData[i.prop] }}</div> </div> <div class="InfoList3"> <div class="InfoListLable">附件</div> <div class="InfoListvalue" style="margin-top: 10px;"> <el-upload v-model:file-list="fileList1" class="upload-demo" action="/prod-api/system/upload" disabled multiple :on-preview="handlePreview" > </el-upload> </div> </div> </div> <!-- 技术审查 --> <div class="ProjectInfo"> <p class="ProjectInfoTitle">技术审查信息</p> <div class="InfoList InfoList2"> <div class="InfoListLable">技术协议偏差</div> <div class="InfoListvalue"> {{ DetailData.technicalProtocolDeviation }} </div> </div> <div class="InfoList3"> <div class="InfoListLable">附件</div> <div class="InfoListvalue" style="margin-top: 10px;"> <el-upload v-model:file-list="fileList2" class="upload-demo" action="/prod-api/system/upload" disabled multiple :on-preview="handlePreview" > </el-upload> </div> </div> </div> <!-- 金额审查 --> <div class="ProjectInfo"> <p class="ProjectInfoTitle">金额审查信息</p> <div class="InfoList"> <div class="InfoListLable">总金额</div> <div class="InfoListvalue">{{ DetailData.totalMoney }}</div> </div> <div class="InfoList"> <div class="InfoListLable">税率</div> <div class="InfoListvalue">{{ DetailData.taxRate }}</div> </div> <div class="InfoList"> <div class="InfoListLable">付款方式</div> <div class="InfoListvalue"> {{ selectDictLabel(payment_method, DetailData.paymentMethod) }} </div> </div> <div class="InfoList"> <div class="InfoListLable">付款比例</div> <div class="InfoListvalue">{{ DetailData.ratioPayment }}</div> </div> <div class="InfoList InfoList2"> <div class="InfoListLable">偏差说明</div> <div class="InfoListvalue">{{ DetailData.deviationExplain }}</div> </div> <div class="InfoList3"> <div class="InfoListLable">附件</div> <div class="InfoListvalue"> <el-upload v-model:file-list="fileList3" class="upload-demo" action="/prod-api/system/upload" disabled multiple :on-preview="handlePreview" > </el-upload> </div> </div> </div> <template #footer> <div class="dialog-footer"> <el-button @click="open2 = false">关 闭</el-button> </div> </template> </el-dialog> <el-dialog v-model="isMap" title="地址" :modal-append-to-body="false" :close-on-click-modal="false" width="800px" > <div class="mapBox" v-if="isMap"> <MapBox ref="mapBoxRef" :isShowTool="false" :isShowSearch="true" @getPlace="getPlace" ></MapBox> </div> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="handleOk">确 定</el-button> <el-button @click="dialogClose">取 消</el-button> </div> </template> </el-dialog> </div> </template> <script setup name="Post"> import { ElMessage, ElMessageBox } from "element-plus"; import { projectTenderExaminationPage, projectTenderExaminationAdd, projectTenderExaminationIDS, projectTenderExaminationSelectDetail, projectTenderExaminationEdit, FileSystemList, projectInfoList, projectCompanyList, } from "@/api/project/tenderReview"; import { getToken } from "@/utils/auth"; import bus from "@/bus"; import tableDalgo from "@/components/Dwwh"; // import AliMap from "@/components/AliMap/index.vue"; import MapBox from '@/components/Map' import { tenderReviewCloum } from "@/utils/cloums"; import { reactive } from "vue"; const { proxy } = getCurrentInstance(); const { bid_way, capital_source, payment_method, pro_project_info } = proxy.useDict( "bid_way", "capital_source", "payment_method", "pro_project_info" ); let isMap = ref(false); const postList = ref([]); const open = ref(false); const open2 = ref(false); const open3 = ref(false); const loading = ref(true); const showSearch = ref(true); const ids = ref([]); const single = ref(true); const multiple = ref(true); const total = ref(0); const title = ref(""); const dialogReadonly = ref(false); const typeList = ref(0); const data = reactive({ form: {}, queryParams: { pageNum: 1, pageSize: 10, projectName: undefined, tenderCompanyName: undefined, capitalSource: undefined, bidWay: undefined, timer: "", bidStartTime: "", bidEndTime: "", }, rules: { projectNo: [ { required: true, message: "项目名称不能为空", trigger: "blur" }, ], tenderNumber: [ { required: true, message: "标书编号不能为空", trigger: "blur" }, ], }, DetailData: { }, }); const { queryParams, form, rules, DetailData } = toRefs(data); const ProjectListData = ref([]); const companyListData = ref([]); const uploadHeader = ref({ Authorization: "Bearer " + getToken(), }); /** 文件上传 */ const fileList1 = ref([]); const fileList2 = ref([]); const fileList3 = ref([]); const InfoListLableList = [ { label: "标书编号", prop: "tenderNumber" }, {label: "项目名称", prop: "projectName",}, { label: "投标公司名称",prop: "tenderCompanyName",}, { label: "项目资金来源", prop: "capitalSource" }, { label: "投标时间", prop: "bidTime", }, { label: "投标方式", prop: "bidWay", }, { label: "投标地址", prop: "bidAddress", }, { label: "保证金金额", prop: "earnestMoney", }, { label: "开标日期", prop: "bidOpenDate", }, { label: "保证金退还时间", prop: "earnestMoneyRollbackTime", }, { label: "招标项目概况", prop: "bidProjectSurvey", }, { label: "项目建设内容", prop: "projectConstructionContent", }, ]; const queryClouns = [ { label: "项目名称", prop: "projectName", placeholder: "请输入项目名称" }, { label: "招标项目资金来源", prop: "capitalSource", placeholder: "请选择招标项目资金来源", }, { label: "招标方式", prop: "bidWay", placeholder: "请选择招标方式", }, { label: "投标公司名称", prop: "tenderCompanyName", placeholder: "请输入公司名称" }, { label: "开标日期", prop: "timer", placeholder: "请选择招开标日期" }, ]; const mapForm = reactive({ lonLat: '' }) function clickMap(v) { console.log(v, 66); isMap.value = true; } function getPlace({ lonLat }) { console.log(lonLat) mapForm.lonLat = lonLat } function handleOk() { if(!mapForm.lonLat) return proxy.$modal.msgError('请选择位置!') form.value.bidAddress = mapForm.lonLat; isMap.value = false } function handlePreview(file) { console.log(file); return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then( () => window.open(file.url), () => false ); } function beforeRemove(file) { return true } /** 查询数据列表 */ function getList() { loading.value = true; projectTenderExaminationPage(queryParams.value).then((response) => { postList.value = response.data; total.value = response.total; loading.value = false; }); } /** 取消按钮 */ function cancel() { open.value = false; reset(); } /** 表单重置 */ function reset() { form.value = { fileSaveRequestList:[]}; fileList1.value = []; fileList2.value = []; fileList3.value = []; proxy.resetForm("postRef"); } /** 搜索按钮操作 */ function handleQuery() { if (queryParams.value.timer) { queryParams.value.bidStartTime = queryParams.value.timer[0]; queryParams.value.bidEndTime = queryParams.value.timer[1]; } else { queryParams.value.bidStartTime = ""; queryParams.value.bidEndTime = ""; } queryParams.value.pageNum = 1; console.log(queryParams.value); getList(); } /** 重置按钮操作 */ function resetQuery() { proxy.resetForm("queryRef"); queryParams.value.timer = []; handleQuery(); } /** 多选框选中数据 */ function handleSelectionChange(selection) { ids.value = selection.map((item) => item.id); single.value = selection.length != 1; multiple.value = !selection.length; } /** 新增按钮操作 */ function handleAdd() { open.value = true; dialogReadonly.value = false; title.value = "标书审查新增"; fileList1.value = []; fileList2.value = []; fileList3.value = []; nextTick(() => { proxy.$refs.postRef.resetFields(); }); } /** 修改按钮操作 */ function handleUpdate(row) { reset(); dialogReadonly.value = false; const id = row.id || ids.value; projectTenderExaminationSelectDetail(id).then((response) => { form.value = response.data; form.value.fileSaveRequestList = []; open.value = true; title.value = "修改标书"; }); // 获取文件列表 FileSystemList({ refId: id, refType: "proProjectTenderExamination", }).then((response) => { response.data.forEach((element) => { if (element.refField == "infoFile") { fileList1.value.push(element); } if (element.refField == "skillExamineFile") { fileList2.value.push(element); } if (element.refField == "moneyExamineFile") { fileList3.value.push(element); } }); }); } /**详情按钮 */ function handleDetails(row) { reset(); dialogReadonly.value = true; const id = row.id || ids.value; projectTenderExaminationSelectDetail(id).then((response) => { DetailData.value = response.data; open2.value = true; }); // 获取文件列表 FileSystemList({ refId: id, refType: "proProjectTenderExamination", }).then((response) => { response.data.forEach((element) => { if (element.refField == "infoFile") { fileList1.value.push(element); } if (element.refField == "skillExamineFile") { fileList2.value.push(element); } if (element.refField == "moneyExamineFile") { fileList3.value.push(element); } }); }); } /** 提交按钮 */ function submitForm() { proxy.$refs["postRef"].validate((valid) => { if (valid) { form.value.fileSaveRequestList = []; fileList1.value.forEach((element) => { if (element.hasOwnProperty("response")) { element.response.data.refType = "proProjectTenderExamination"; element.response.data.refField = "infoFile"; form.value.fileSaveRequestList.push(element.response.data); } else { form.value.fileSaveRequestList.push(element); } }); fileList2.value.forEach((element) => { // 技术审查 if (element.hasOwnProperty("response")) { element.response.data.refType = "proProjectTenderExamination"; element.response.data.refField = "skillExamineFile"; form.value.fileSaveRequestList.push(element.response.data); } else { form.value.fileSaveRequestList.push(element); } }); fileList3.value.forEach((element) => { // 金额审查 if (element.hasOwnProperty("response")) { element.response.data.refType = "proProjectTenderExamination"; element.response.data.refField = "moneyExamineFile"; form.value.fileSaveRequestList.push(element.response.data); } else { form.value.fileSaveRequestList.push(element); } }); if (form.value.id != undefined) { projectTenderExaminationEdit(form.value).then((response) => { proxy.$modal.msgSuccess("修改成功"); open.value = false; getList(); }); } else { projectTenderExaminationAdd(form.value).then((response) => { proxy.$modal.msgSuccess("新增成功"); open.value = false; getList(); }); } } }); } /** 删除按钮操作 */ function handleDelete(row) { const id = row.id || ids.value; proxy.$modal .confirm('是否确认删除编号为"' + id + '"的数据项?') .then(function () { return projectTenderExaminationIDS(id); }) .then(() => { getList(); proxy.$modal.msgSuccess("删除成功"); }) .catch(() => {}); } /** 导出按钮操作 */ // function handleExport() { // proxy.download( // "system/post/export", // { // ...queryParams.value, // }, // `post_${new Date().getTime()}.xlsx` // ); // } /**获取所有的项目数据 */ function loadProjerctListData() { projectInfoList().then((response) => { ProjectListData.value = response.data; }); } /**获取所有的单位数据 */ function loadProjerctCompanyData() { projectCompanyList().then((response) => { companyListData.value = response.data; }); } /**单位下拉框选择事件 */ function companyChage(val) { console.log(val); form.value.tenderCompanyName = ""; companyListData.value.forEach((element) => { if (element.id == val) { form.value.tenderCompanyName = element.unitName; } }); } /**新增投标公司 */ function AddTBGS() { open3.value = true; } /**新增成功*/ function onModalClose() { loadProjerctCompanyData(); open3.value = false; } bus.on("mapPointClickSecond", ({ lat, lng, address = "武汉市xx" }) => { form.value.bidAddress = address; isMap.value = false; }); getList(); loadProjerctListData(); loadProjerctCompanyData(); </script> <style scoped lang="scss"> :deep(.el-dialog__body) { background-color: #eef1fb; height: auto; max-height: 750px; overflow: auto; } #DiaLogBox { .DetailHeader { width: 100%; height: 54px; line-height: 53px; box-sizing: border-box; border-top: 1px solid #eaeaea; background-color: #fff; .DetailName { font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #333333; margin: 0 10px 0 20px; } .DetailTypeName { width: 66px; height: 20px; background: #dffff0; border: 1px solid #3ad68e; border-radius: 2px; font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #3ad68e; margin-right: 20px; } .DetailNo { font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #666666; } } .DetailMoney { width: 100%; height: 111px; background: #ffffff; box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1); border-radius: 6px; margin-top: 20px; .MoneyList { width: 230px; height: 70px; background: #f8faff; border: 1px solid #eaeaea; border-radius: 2px; float: left; margin: 20px; box-sizing: border-box; padding-left: 24px; .leftBox { width: 130px; height: 70px; float: left; .Left_top { width: 100%; height: 35px; line-height: 40px; text-align: left; font-size: 24px; font-family: Source Han Sans CN; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .Left_Bottom { width: 100%; height: 35px; line-height: 30px; text-align: left; font-size: 14px; font-family: Source Han Sans CN; font-weight: 500; color: #333333; } } .RightBox { float: left; width: 70px; height: 70px; .progressDom { width: 50px; height: 50px; margin: 10px; } } } } .ProjectInfo { width: 100%; height: auto; background: #ffffff; box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1); border-radius: 6px; font-size: 0; margin-top: 20px; .ProjectInfoTitle { width: 100%; height: 50px; line-height: 50px; box-sizing: border-box; padding-left: 24px; font-size: 16px; font-family: Source Han Sans CN; font-weight: bold; color: #333333; margin: 0; } .InfoList { display: inline-block; width: 50%; height: 42px; border: 1px solid #d8ddef; box-sizing: border-box; // margin-left: 1%; .InfoListLable { height: 40px; line-height: 40px; width: 100px; float: left; background-color: #f3f7ff; box-sizing: border-box; font-size: 14px; font-family: Source Han Sans CN; font-weight: 500; color: #666666; text-align: center; } .InfoListvalue { width: calc(100% - 100px); height: 40px; line-height: 40px; float: left; font-size: 14px; font-family: Source Han Sans CN; font-weight: bold; color: #333333; text-align: right; padding-right: 10px; } } .InfoList2 { width: 100%; height: 82px; .InfoListLable { height: 100%; height: 80px; line-height: 80px; } .InfoListvalue { height: 100%; height: 80px; } } .InfoList3 { width: 100%; min-height: 60px; height: auto; overflow: auto; .InfoListLable { width: 100px; float: left; font-size: 14px; font-family: Source Han Sans CN; font-weight: 500; color: #000000; text-align: center; line-height: 60px; } .InfoListvalue { float: left; width: calc(100% - 100px); height: auto; } } } } </style>