721 lines
28 KiB
Vue
721 lines
28 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-row style="width: 100%">
|
||
<el-col :span="18">
|
||
<el-button type="primary" size="mini" @click="handleExport1"
|
||
>租赁明细导出</el-button>
|
||
<el-button type="primary" size="mini" @click="handleExport3"
|
||
>维修明细导出</el-button>
|
||
<el-button type="primary" size="mini" @click="handleExport4"
|
||
>报废明细导出</el-button>
|
||
<el-button type="primary" size="mini" @click="handleExport2"
|
||
>丢失明细导出</el-button>
|
||
<el-button type="primary" size="mini" @click="handleExport5"
|
||
>减免明细导出</el-button>
|
||
<el-button type="warning" size="mini" @click="handleExportAll"
|
||
>全部明细导出</el-button>
|
||
</el-col>
|
||
<!-- <el-col :span="4">
|
||
<el-button type="danger" size="mini" style="float: right" @click="handleBack"
|
||
>返回</el-button>
|
||
</el-col> -->
|
||
</el-row>
|
||
|
||
<!-- <div style="color: rgb(217, 0, 27); font-weight: 700; padding: 20px 0">
|
||
结算费用合计：¥{{ costAll }}，租赁费用¥{{ leaseCost }}，维修费用¥{{
|
||
repairCost
|
||
}}，报废费用¥{{ scrapCost }}，丢失费用{{ loseCost }}
|
||
</div> -->
|
||
|
||
<div style="margin-top:20px">
|
||
<div class="tabelAllTop">
|
||
<div class="costTop">结算费用</div>
|
||
</div>
|
||
<div class="tabelAllTop">
|
||
<div class="costTopTwo">本工程清算项目及金额（元）</div>
|
||
</div>
|
||
<div class="tabelAllTopUnit">
|
||
<div class="costTopUnit">一、施工机具有偿使用费：</div>
|
||
<div class="costRightUnit">
|
||
{{ leaseCost }}
|
||
</div>
|
||
</div>
|
||
<div class="tabelAllTopUnit">
|
||
<div class="costTopUnit">二、施工机具维修费：</div>
|
||
<div class="costRightUnit">
|
||
{{ repairCost }}
|
||
</div>
|
||
</div>
|
||
<div class="tabelAllTopUnit">
|
||
<div class="costTopUnit">三、施工机具丢失费：</div>
|
||
<div class="costRightUnit">
|
||
{{ loseCost }}
|
||
</div>
|
||
</div>
|
||
<div class="tabelAllTopUnit">
|
||
<div class="costTopUnit">四、施工机具损坏赔偿费：</div>
|
||
<div class="costRightUnit">
|
||
{{ scrapCost }}
|
||
</div>
|
||
</div>
|
||
<div class="tabelAllTopThree">
|
||
<div class="costLeft">
|
||
<div class="costOne">费用合计金额(大写) :</div>
|
||
<div class="costTwo">{{finishCostName}}</div>
|
||
</div>
|
||
<div class="costRight">
|
||
{{ costAll.toFixed(2) }}
|
||
</div>
|
||
</div>
|
||
<div class="tabelAllTopFour">
|
||
<div class="costTopOne">说明</div>
|
||
<div class="costRightTwo">
|
||
{{ '本协议一式三份，甲方一份，乙方一份，经双方签字后生效。' }}
|
||
</div>
|
||
</div>
|
||
<div class="tabelAllTopFour">
|
||
<div class="costTopOne">备注</div>
|
||
<div class="costRightTwo">
|
||
{{ '此费用仅为在机具设备分公司发生费用，未计从项目部领用机具费用。' }}
|
||
</div>
|
||
</div>
|
||
<el-table :data="leaseList">
|
||
<el-table-column label="租赁费用明细" align="center">
|
||
<el-table-column label="序号" align="center" type="index" width="60"/>
|
||
<!-- <el-table-column label="结算单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="结算工程" align="center" prop="projectName" :show-overflow-tooltip="true"/> -->
|
||
<el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="租赁单价" align="center" prop="leasePrice" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.num">
|
||
{{ scope.row.leasePrice.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="租赁数量" align="center" prop="num" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.num.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="租赁日期" align="center" prop="startTime" :show-overflow-tooltip="true"/>
|
||
<!-- <el-table-column label="归还数量" align="center" prop="" :show-overflow-tooltip="true" /> -->
|
||
<el-table-column label="归还日期 " align="center" prop="endTime" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="租赁天数" align="center" prop="leaseDays" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.num">
|
||
{{ Number(scope.row.leaseDays).toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="租赁费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.costs">
|
||
{{ scope.row.costs.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="tabelAll">
|
||
<div class="columnAllNum">费用小计：</div>
|
||
<div class="columnAll">
|
||
{{ leaseCost }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<el-table :data="repairList">
|
||
<el-table-column label="维修费用明细" align="center">
|
||
<el-table-column label="序号" align="center" type="index" width="60"/>
|
||
<el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="维修数量" align="center" prop="num" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.num" >
|
||
{{ scope.row.num.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="维修费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.costs" >
|
||
{{ scope.row.costs.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tabelAll">
|
||
<div class="columnAllNum">费用小计：</div>
|
||
<div class="columnAll">
|
||
{{ repairCost }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<el-table :data="scrapList">
|
||
<el-table-column label="报废费用明细" align="center">
|
||
<el-table-column label="序号" align="center" type="index" width="60"/>
|
||
<el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="报废数量" align="center" prop="num" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.num">
|
||
{{ scope.row.num.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="报废费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.costs">
|
||
{{ scope.row.costs.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tabelAll">
|
||
<div class="columnAllNum">费用小计：</div>
|
||
<div class="columnAll">
|
||
{{ scrapCost }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<el-table :data="loseList">
|
||
<el-table-column label="丢失费用明细" align="center">
|
||
<el-table-column label="序号" align="center" type="index" width="60"/>
|
||
<el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="丢失数量" align="center" prop="num" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.num">
|
||
{{ scope.row.num.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="丢失费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.costs">
|
||
{{ scope.row.costs.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tabelAll">
|
||
<div class="columnAllNum">费用小计：</div>
|
||
<div class="columnAll">
|
||
{{ loseCost }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<el-table :data="reducList">
|
||
<el-table-column label="减免费用明细" align="center">
|
||
<el-table-column label="序号" align="center" type="index" width="60"/>
|
||
<el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="规格型号" align="center" prop="modeName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="计量单位" align="center" prop="unitName" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="租赁单价" align="center" prop="leasePrice" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="减免数量" align="center" prop="reduceNum" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="减免开始日期" align="center" prop="startTime" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="减免结束日期" align="center" prop="endTime" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="减免天数" align="center" prop="days" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="减免原因" align="center" prop="remark" :show-overflow-tooltip="true"/>
|
||
<el-table-column label="减免费用（元）" align="center" prop="leaseMoney" :show-overflow-tooltip="true">
|
||
<template slot-scope="scope" v-if="scope.row.leaseMoney">
|
||
{{ scope.row.leaseMoney.toFixed(2) }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="tabelAllBottom">
|
||
<div class="columnAllNum">费用小计：</div>
|
||
<div class="columnAll">
|
||
{{ reducCost }}
|
||
</div>
|
||
</div>
|
||
<div class="tabelAllBottom">
|
||
<div class="columnAllNum">合计：</div>
|
||
<div class="columnAll">
|
||
{{ costAll.toFixed(2) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getSltRecordInfo, submitFee,submitCosts } from '@/api/business/index'
|
||
|
||
export default {
|
||
name: '',
|
||
dicts: [],
|
||
props: {
|
||
row: {
|
||
type: [String],
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 往来单位数据
|
||
unitList: [],
|
||
// 工程数据
|
||
projectList: [],
|
||
leaseList: [], //租赁费用列表
|
||
leaseCost: 0,
|
||
repairList: [], //维修费用列表
|
||
repairCost: 0,
|
||
scrapList: [], //报废费用列表
|
||
scrapCost: 0,
|
||
loseList: [], //丢失费用列表
|
||
loseCost: 0,
|
||
reducList: [], //减免费用列表
|
||
reducCost: 0,
|
||
costAll: 0,
|
||
deptName: undefined,
|
||
applyList: [],
|
||
projectName: undefined, //结算工程
|
||
unitName: undefined, //结算单位
|
||
|
||
finishCost: 343242.23,
|
||
finishCostName: '',
|
||
}
|
||
},
|
||
mounted() {
|
||
let arr = JSON.parse(this.row)
|
||
this.rowData = arr
|
||
this.getDataAll()
|
||
// this.getUnitList();
|
||
// this.getProjectList();
|
||
},
|
||
methods: {
|
||
// 将数字转换为中文大写金额
|
||
numberToChinese(num) {
|
||
const cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
|
||
const cnIntRadice = ['', '拾', '佰', '仟'];
|
||
const cnIntUnits = ['', '万', '亿', '兆'];
|
||
const cnDecUnits = ['角', '分', '毫', '厘'];
|
||
const cnInteger = '整';
|
||
const cnIntLast = '元';
|
||
let integerNum;
|
||
let decimalNum;
|
||
let chineseStr = '';
|
||
let parts;
|
||
if (num === 0) {
|
||
return cnNums[0] + cnIntLast + cnInteger;
|
||
}
|
||
num = parseFloat(num).toFixed(4);
|
||
parts = num.split('.');
|
||
integerNum = parts[0];
|
||
decimalNum = parts[1];
|
||
if (parseInt(integerNum, 10) > 0) {
|
||
let zeroCount = 0;
|
||
const IntLen = integerNum.length;
|
||
for (let i = 0; i < IntLen; i++) {
|
||
const n = integerNum.substr(i, 1);
|
||
const p = IntLen - i - 1;
|
||
const q = p / 4;
|
||
const m = p % 4;
|
||
if (n === '0') {
|
||
zeroCount++;
|
||
} else {
|
||
if (zeroCount > 0) {
|
||
chineseStr += cnNums[0];
|
||
}
|
||
zeroCount = 0;
|
||
chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
|
||
}
|
||
if (m === 0 && zeroCount < 4) {
|
||
chineseStr += cnIntUnits[q];
|
||
}
|
||
}
|
||
chineseStr += cnIntLast;
|
||
}
|
||
if (decimalNum !== '') {
|
||
const decLen = decimalNum.length;
|
||
for (let i = 0; i < decLen; i++) {
|
||
const n = decimalNum.substr(i, 1);
|
||
if (n !== '0') {
|
||
chineseStr += cnNums[Number(n)] + cnDecUnits[i];
|
||
}
|
||
}
|
||
}
|
||
if (chineseStr === '') {
|
||
chineseStr += cnNums[0] + cnIntLast + cnInteger;
|
||
} else if (decimalNum === '00' || decimalNum === '0000') {
|
||
chineseStr += cnInteger;
|
||
}
|
||
return chineseStr;
|
||
},
|
||
|
||
|
||
|
||
//获取单位类型 ,getUnitList, getProjectList
|
||
getUnitList() {
|
||
getUnitList().then((response) => {
|
||
this.unitList = response.data
|
||
})
|
||
},
|
||
getProjectList() {
|
||
getProjectList().then((response) => {
|
||
this.projectList = response.data
|
||
})
|
||
},
|
||
/** 查询列表 */
|
||
getDataAll() {
|
||
getSltRecordInfo(this.rowData).then((response) => {
|
||
this.leaseList = response.data.leaseList //租赁费用列表
|
||
this.projectName = response.data.projectName
|
||
this.unitName = response.data.unitName
|
||
this.leaseCost = this.countCost(this.leaseList)
|
||
|
||
this.repairList = response.data.repairList //维修费用列表
|
||
this.repairCost = response.data.repairCost.toFixed(2)
|
||
// this.repairCost = this.countCost(this.repairList)
|
||
|
||
this.scrapList = response.data.scrapList //报废费用列表
|
||
this.scrapCost = response.data.scrapCost.toFixed(2)
|
||
// this.scrapCost = this.countCost(this.scrapList)
|
||
|
||
this.loseList = response.data.loseList //丢失费用列表
|
||
this.loseCost = this.countCost(this.loseList)
|
||
this.reducList = response.data.reductionList //减免费用列表
|
||
console.log('111111111111111111',this.reducList)
|
||
this.reducList.forEach((item) => {
|
||
this.reducCost = Number(this.reducCost) + Number(item.leaseMoney)
|
||
})
|
||
console.log('2222222222222222',this.reducCost)
|
||
this.applyList = response.data.relations
|
||
this.applyList.forEach((item) => {
|
||
item.leaseCost = Number(item.leaseCost)
|
||
item.repairCost = Number(item.repairCost)
|
||
item.scrapCost = Number(item.scrapCost)
|
||
item.loseCost = Number(item.loseCost)
|
||
item.reductionCost = Number(item.reductionCost)
|
||
item.cost =
|
||
Number(item.leaseCost) +
|
||
Number(item.repairCost) +
|
||
Number(item.scrapCost) +
|
||
Number(item.loseCost) +
|
||
Number(item.reductionCost) +
|
||
Number(item.addCost) -
|
||
Number(item.subCost)
|
||
})
|
||
|
||
let costSum =
|
||
Number(this.leaseCost) +
|
||
Number(this.repairCost) +
|
||
Number(this.scrapCost) +
|
||
Number(this.loseCost) -
|
||
Number(this.reducCost)
|
||
this.costAll = costSum
|
||
this.finishCostName = this.numberToChinese(this.costAll.toFixed(2));
|
||
this.subCostFlag = costSum
|
||
})
|
||
},
|
||
//计算金额1
|
||
countCost(list) {
|
||
let arrCost = 0
|
||
list.forEach((item) => {
|
||
// arrCost += parseInt(item.costs)
|
||
|
||
console.log(item)
|
||
if (item.partType != 0 && item.scrapType != 0) {
|
||
arrCost = arrCost + Number(item.costs)
|
||
}
|
||
})
|
||
|
||
return arrCost.toFixed(2)
|
||
},
|
||
//el-table-合计总费用
|
||
getSummaries(param) {
|
||
const { columns, data } = param
|
||
const sums = []
|
||
columns.forEach((column, index) => {
|
||
if (index === 9) {
|
||
sums[index] = '最终费用'
|
||
return
|
||
}
|
||
const values = data.map((item) => Number(item[column.property]))
|
||
// 只对amount这一列进行总计核算。
|
||
if (column.property === 'cost') {
|
||
if (!values.every((value) => isNaN(value))) {
|
||
sums[index] = values.reduce((prev, curr) => {
|
||
const value = Number(curr)
|
||
if (!isNaN(value)) {
|
||
return prev + curr
|
||
} else {
|
||
return prev
|
||
}
|
||
}, 0)
|
||
// sums[index] += ' 元';
|
||
} else {
|
||
sums[index] = '---'
|
||
}
|
||
}
|
||
})
|
||
return sums
|
||
},
|
||
countNum(row) {
|
||
row.cost =
|
||
Number(row.leaseCost) +
|
||
Number(row.repairCost) +
|
||
Number(row.scrapCost) +
|
||
Number(row.loseCost) +
|
||
Number(row.reduceLeaseMoney) +
|
||
Number(row.addCost || 0) -
|
||
Number(row.subCost || 0)
|
||
},
|
||
|
||
//返回
|
||
handleBack() {
|
||
this.$emit('goBackPage')
|
||
// this.$tab.closeOpenPage({
|
||
// path: '/cost/costApplyList',
|
||
// query: {
|
||
// isEdit: true,
|
||
// },
|
||
// })
|
||
},
|
||
/** 导出按钮操作 */
|
||
//租赁
|
||
handleExport1() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportLease',
|
||
{...params,},
|
||
`租赁费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
//丢失
|
||
handleExport2() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportLose',
|
||
{...params,},
|
||
`丢失费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
// 维修
|
||
handleExport3() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportRepair',
|
||
{...params,},
|
||
`维修费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
//报废
|
||
handleExport4() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportScrap',
|
||
{...params,},
|
||
`报废费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
// this.downloadJson(
|
||
// 'material/slt_agreement_info/exportScrap',
|
||
// JSON.stringify(this.rowData),
|
||
// `报废费用明细_${new Date().getTime()}.xlsx`,
|
||
// )
|
||
},
|
||
//减免
|
||
handleExport2() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportLose',
|
||
{...params,},
|
||
`减免费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
handleExport5() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportReduction',
|
||
{...params,},
|
||
`减免费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
|
||
handleExportAll() {
|
||
const params = this.rowData
|
||
this.download(
|
||
'material/slt_agreement_info/exportAlls',
|
||
{...params,},
|
||
`全部费用明细_${new Date().getTime()}.xlsx`,
|
||
)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
::v-deep.el-table .fixed-width .el-button--mini {
|
||
width: 80px !important;
|
||
margin-bottom: 10px;
|
||
}
|
||
.tabelAllTop {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
height:50px;
|
||
background-color: #f8f8f9;
|
||
border-left: none;
|
||
border-bottom: none;
|
||
.costTop {
|
||
display: flex;
|
||
padding: 5px;
|
||
border-left: 1px solid #dfe6ec;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
width:100%;
|
||
font-weight: bold; /* 添加字体加粗样式 */
|
||
}
|
||
.costTopTwo {
|
||
display: flex;
|
||
padding: 5px;
|
||
border-left: 1px solid #dfe6ec;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
width:100%;
|
||
|
||
}
|
||
}
|
||
.tabelAllTopUnit {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
height:50px;
|
||
background-color: #f8f8f9;
|
||
border-bottom: none;
|
||
.costTopUnit {
|
||
display: flex;
|
||
padding: 5px;
|
||
width:60%;
|
||
border-left: none;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
}
|
||
.costRightUnit {
|
||
display: flex;
|
||
padding: 5px;
|
||
border-left: 1px solid #dfe6ec;
|
||
text-align: center;
|
||
align-items: center;
|
||
width:40%;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
// padding-left: 20px; /* 添加左内边距 */
|
||
}
|
||
}
|
||
|
||
.tabelAllTopThree {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
height:50px;
|
||
background-color: #f8f8f9;
|
||
border-bottom: none;
|
||
.costLeft {
|
||
display: flex;
|
||
padding: 5px;
|
||
width:60%;
|
||
border-left: none;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
.costOne {
|
||
display: flex;
|
||
padding: 5px;
|
||
width:50%;
|
||
border-left: none;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
}
|
||
.costTwo {
|
||
display: flex;
|
||
padding: 5px;
|
||
width:50%;
|
||
border-left: 1px solid #dfe6ec;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
}
|
||
}
|
||
.costRight {
|
||
display: flex;
|
||
padding: 5px;
|
||
border-left: 1px solid #dfe6ec;
|
||
text-align: center;
|
||
align-items: center;
|
||
width:40%;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
// padding-left: 20px; /* 添加左内边距 */
|
||
}
|
||
}
|
||
|
||
.tabelAllTopFour {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
height:50px;
|
||
background-color: #f8f8f9;
|
||
border-bottom: none;
|
||
.costTopOne {
|
||
display: flex;
|
||
padding: 5px;
|
||
width:30%;
|
||
border-left: none;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
}
|
||
.costRightTwo {
|
||
display: flex;
|
||
padding: 5px;
|
||
border-left: 1px solid #dfe6ec;
|
||
text-align: center;
|
||
align-items: center;
|
||
width:70%;
|
||
justify-content: center; /* 将内容对齐到中间 */
|
||
// padding-left: 20px; /* 添加左内边距 */
|
||
}
|
||
}
|
||
|
||
|
||
.tabelAll {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
border-bottom: 1px solid #dfe6ec;
|
||
border-top: none;
|
||
margin-bottom: 15px;
|
||
}
|
||
.tabelAllBottom {
|
||
display: flex;
|
||
border: 1px solid #dfe6ec;
|
||
width:100%;
|
||
border-bottom: 1px solid #dfe6ec;
|
||
border-top: none;
|
||
}
|
||
.columnAll {
|
||
display: flex ;
|
||
padding: 5px;
|
||
border-left: 1px solid #dfe6ec;
|
||
text-align: center;
|
||
align-items: center;
|
||
width:100%;
|
||
justify-content: flex-end; /* 将内容对齐到右侧 */
|
||
margin-right: 60px; /* 添加右边距 */
|
||
}
|
||
.columnAllNum {
|
||
padding: 5px;
|
||
text-align: center;
|
||
width:21.4%;
|
||
border-left: none;
|
||
}
|
||
/* 最后一列无右边框 */
|
||
.tabelAll .column:last-child {
|
||
border-right: none;
|
||
}
|
||
</style>
|