818 lines
24 KiB
Vue
818 lines
24 KiB
Vue
<template>
|
|
<div class="app-containers">
|
|
|
|
<div class="tab-box">
|
|
<div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in tabs"
|
|
:key="index">
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div v-if="tabindex == 0">
|
|
<div class="card-box"
|
|
style="width: 98%;margin: 10px auto;background: #fff;box-sizing: border-box;padding-top: 15px">
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
|
|
<el-form-item label="" prop="status">
|
|
<el-select v-model="queryParams.status" style="width: 150px" placeholder="交班方式" clearable
|
|
@change="onChange">
|
|
<el-option label="统一交班" value="统一交班">统一交班</el-option>
|
|
<el-option label="个人交班" value="个人交班">个人交班</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="" prop="staffId">
|
|
<el-select v-model="queryParams.staffId" style="width: 150px" placeholder="交班员工" clearable @change="onChange2">
|
|
<el-option
|
|
v-for="option in staffList"
|
|
:key="option.id"
|
|
:label="option.realName"
|
|
:value="option.id"
|
|
:disabled="queryParams.status === '统一交班'"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item class="flex-container" style="float: right">
|
|
<el-button type="primary" icon="el-icon-search" :disabled="!isSearch" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<el-card style="margin-top: 20px; padding-top: 0px; height: 70vh;overflow: auto" class="box-card">
|
|
<div class="title_" style="height: 50px; padding-top: 20px; background-color: white; display: flex;justify-content: space-between">
|
|
<div style="width: 80%;margin-left: 50px">门店交接单</div>
|
|
<span style="cursor: pointer; color: blue;font-weight: 400;" >打印预览</span>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>油站名称</div>
|
|
<div>{{ baseInfo.storeName }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>油站站长</div>
|
|
<div>{{ baseInfo.realName }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>交班方式</div>
|
|
<div>{{ baseInfo.handoverType }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>开始时间</div>
|
|
<div>{{ baseInfo.startTime }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>结束时间</div>
|
|
<div>{{ baseInfo.endTime }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>订单金额</div>
|
|
<div>{{ orderSummary.oilOrder }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>优惠金额</div>
|
|
<div>{{ orderSummary.allDis }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>退款金额</div>
|
|
<div>{{ orderSummary.oilRefund }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>挂账金额</div>
|
|
<div>--</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>会员消费</div>
|
|
<div>{{ orderSummary.allBalanceP }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>实收金额</div>
|
|
<div>{{ orderSummary.allMoney }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>充值金额</div>
|
|
<div>{{ orderSummary.cardPaid }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>充值赠送</div>
|
|
<div>{{ orderSummary.cardGiftPaid }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>会员总余额</div>
|
|
<div>{{ orderSummary.points }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div>会员总积分</div>
|
|
<div>{{ orderSummary.sumnum }}</div>
|
|
</div>
|
|
<div class="xxing"></div>
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>营业收入统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">类型</div>
|
|
<div class="f-size">订单金额</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div class="l-size">营业总额</div>
|
|
<div class="s-size">{{ orderSummary.allyingye1 }}</div>
|
|
<div class="r-size">￥{{ orderSummary.allyingye }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div class="l-size">充值总额</div>
|
|
<div class="s-size">{{ orderSummary.allchuzhika1 }}</div>
|
|
<div class="r-size">￥{{ orderSummary.allchuzhika }}</div>
|
|
</div>
|
|
<div class="d-s-b">
|
|
<div class="l-size">合计</div>
|
|
<div class="s-size">{{ orderSummary.allyingye1 + orderSummary.allchuzhika1 }}</div>
|
|
<div class="r-size">￥{{ orderSummary.allyingye + orderSummary.allchuzhika }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>支付方式统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">支付方式</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all'">
|
|
<div class="l-size">{{ calculateThePaymentMethod(item.payType) }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>油品实收统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">油号</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in oilNumberStatistics">
|
|
<div class="l-size">{{ item.oilName }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>优惠统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">油号</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in oilNumberStatistics">
|
|
<div class="l-size">{{ item.oilName }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>退款统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">类型</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in oilNumberStatistics">
|
|
<div class="l-size">{{ item.oilName }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>挂账统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">挂账单位</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all' && item.payType == 'balance'">
|
|
<div class="l-size">{{ item.name }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>会员充值统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">支付方式</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'allbalance'">
|
|
<div class="l-size">{{ calculateThePaymentMethod(item.payType) }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>会员消费统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">支付方式</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'all' && item.payType == 'balance'">
|
|
<div class="l-size">合计</div>
|
|
<div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>便利店统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">支付方式</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'goods'">
|
|
<div class="l-size">{{ calculateThePaymentMethod(item.payType) }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>积分商城统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">支付方式</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in paymentAggregation" v-if="item.flag == 'point'">
|
|
<div class="l-size">{{ calculateThePaymentMethod(item.payType) }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>新增会员统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">新增会员数</div>
|
|
<!-- <div class="f-size">笔数</div>-->
|
|
<div class="r-size">{{ orderSummary.sumnum }}</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>挂账归还统计(再处理)</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">支付方式</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in returnedToTheAccount">
|
|
<div class="l-size">{{ item.name ? item.name : '--' }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="for-box">
|
|
<div class="for-title">
|
|
<div class="x-"></div>
|
|
<div>员工实收统计</div>
|
|
<div class="x-"></div>
|
|
</div>
|
|
<div class="d-s-b" style="font-weight: 600">
|
|
<div class="l-size">员工</div>
|
|
<div class="f-size">笔数</div>
|
|
<div class="r-size">实收金额</div>
|
|
</div>
|
|
<div class="d-s-b" v-for="item in employeeStatistics">
|
|
<div class="l-size">{{ item.name ? item.name : '--' }}</div>
|
|
<div class="s-size">{{ item.numberOfDeals ? item.numberOfDeals : '--' }}</div>
|
|
<div class="r-size">￥{{ item.paidAmount ? item.paidAmount : '--' }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</el-card>
|
|
<div
|
|
style="width: 98%; margin: 20px auto;display: flex;align-items: center;justify-content: center; background: #fff;box-sizing: border-box;padding: 15px ">
|
|
<el-button type="primary" @click="shift()">交班</el-button>
|
|
</div>
|
|
</div>
|
|
<div v-if="tabindex == 1">
|
|
<HandoverRecord></HandoverRecord>
|
|
</div>
|
|
<el-dialog title="订单详情" :visible.sync="openDetail" width="600px" append-to-body :close-on-click-modal="false">
|
|
<!-- <detail :dataForm = "recordData"></detail>-->
|
|
<HandoverOnly :recordData="recordData"></HandoverOnly>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
addHandoverApi,
|
|
getHandoverApi,
|
|
getHandoverApi2,
|
|
getHandoverListApi,
|
|
printLocallyApi
|
|
} from "@/api/handover/handover";
|
|
|
|
import {getStatisticsApi} from "@/api/order/order";
|
|
import {getDicts} from "@/api/order/data";
|
|
import HandoverOnly from "@/views/handover/HandoverOnly.vue";
|
|
import {listStaff} from "@/api/order/staff";
|
|
import HandoverRecord from "@/views/handover/HandoverRecord.vue";
|
|
|
|
export default {
|
|
name: "pointsCashier",
|
|
components: {HandoverRecord, HandoverOnly},
|
|
|
|
// dicts: ['zhzt'],
|
|
|
|
data() {
|
|
return {
|
|
|
|
tabs: [
|
|
"交接班",
|
|
"交班记录"
|
|
],
|
|
isSearch: true,
|
|
value: '',
|
|
tabindex: 0,
|
|
openDetail: false,
|
|
dataForm: {},
|
|
dataList: [],
|
|
recordData: '',
|
|
zhztList: '',
|
|
shiftHandoverList: '',
|
|
handoverList: {},
|
|
handoverData: {},
|
|
baseInfo: {},
|
|
billingDetails: [],
|
|
employeeStatistics: [],
|
|
greaseGunStatistics: [],
|
|
oilNumberStatistics: [],
|
|
orderSummary: {},
|
|
paymentAggregation: [],
|
|
returnedToTheAccount: [],
|
|
// base
|
|
queryParams: {
|
|
|
|
staffId: '',
|
|
status: '',
|
|
type: '',
|
|
|
|
page: null,
|
|
pageSize: null
|
|
},
|
|
loading: false,
|
|
dateRange: [new Date(), new Date()],
|
|
beginTime: new Date(),
|
|
endTime: new Date(),
|
|
defaultSort: {prop: 'createTime', order: 'descending'},
|
|
|
|
total: 0,
|
|
staffList: [],
|
|
statisticsForm: {
|
|
num: 0,
|
|
exchangeQuantity: 0,
|
|
integral: 0,
|
|
amount: 0
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getList();
|
|
this.getHandover();
|
|
this.getStatistics();
|
|
this.getStatus();
|
|
this.getStaffList();
|
|
},
|
|
mounted() {
|
|
this.queryParams.status = '统一交班';
|
|
},
|
|
methods: {
|
|
getHandover() {
|
|
console.log("getHandover", this.queryParams)
|
|
getHandoverApi2(this.queryParams).then(res => {
|
|
// this.handoverList = res.data;
|
|
this.handoverData = res.data;
|
|
this.baseInfo = this.handoverData.baseInfo,
|
|
this.billingDetails = this.handoverData.billingDetails,
|
|
this.employeeStatistics = this.handoverData.employeeStatistics,
|
|
this.greaseGunStatistics = this.handoverData.greaseGunStatistics,
|
|
this.oilNumberStatistics = this.handoverData.oilNumberStatistics,
|
|
this.orderSummary = this.handoverData.orderSummary,
|
|
this.paymentAggregation = this.handoverData.paymentAggregation,
|
|
this.returnedToTheAccount = this.handoverData.returnedToTheAccount,
|
|
console.log("this.handoverList", this.handoverList)
|
|
})
|
|
},
|
|
onChange() {
|
|
if (this.queryParams.status == '统一交班') {
|
|
this.queryParams.staffId = ''
|
|
this.isSearch = true
|
|
} else if (this.queryParams.status == '个人交班') {
|
|
this.isSearch = false
|
|
}
|
|
},
|
|
onChange2() {
|
|
console.log("this.queryParams.staffId", this.queryParams.staffId)
|
|
if (!this.queryParams.staffId) {
|
|
this.isSearch = false
|
|
} else if (this.queryParams.staffId) {
|
|
this.isSearch = true
|
|
}
|
|
},
|
|
|
|
getindex(index) {
|
|
this.tabindex = index
|
|
},
|
|
getList() {
|
|
this.dateRange = []
|
|
if (this.beginTime && this.endTime) {
|
|
this.dateRange.push(this.beginTime.toLocaleDateString())
|
|
this.dateRange.push(this.endTime.toLocaleDateString())
|
|
}
|
|
getHandoverListApi(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
|
|
this.dataList = res.data.records
|
|
this.total = res.data.total
|
|
|
|
})
|
|
},
|
|
getStatistics() {
|
|
getStatisticsApi().then(res => {
|
|
this.statisticsForm = res.data
|
|
})
|
|
console.log("123123123", this.statisticsForm)
|
|
},
|
|
|
|
// 获取支付方式
|
|
getZhzt() {
|
|
getDicts("zhzt").then(response => {
|
|
this.zhztList = response.data;
|
|
})
|
|
},
|
|
getStatus() {
|
|
getDicts("handover").then(response => {
|
|
this.shiftHandoverList = response.data;
|
|
})
|
|
},
|
|
// 交班
|
|
async shift() {
|
|
let msg = '交班, 是否继续?'
|
|
let flag = false
|
|
if (this.handoverList && this.baseInfo && this.baseInfo.handoverOut == 'jbtc') {
|
|
flag = true
|
|
} else {
|
|
msg = '确定交班？'
|
|
}
|
|
|
|
this.$confirm(msg, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
let recordData = this.handoverData
|
|
let handoverRecord = {
|
|
startTime: this.baseInfo.startTime,
|
|
recordData: JSON.stringify(recordData),
|
|
type: 0,
|
|
status: this.baseInfo.handoverType,
|
|
staffId: this.queryParams.staffId
|
|
}
|
|
addHandoverApi(handoverRecord).then(res => {
|
|
if (flag) {
|
|
this.clean()
|
|
// removeUserId();
|
|
// this.$store.dispatch('LogOut').then(() => {
|
|
// location.href = '/';
|
|
// })
|
|
}
|
|
this.getHandover();
|
|
})
|
|
})
|
|
},
|
|
handleUpdate() {
|
|
},
|
|
handleQuery() {
|
|
this.getList();
|
|
this.getHandover();
|
|
},
|
|
getStaffList() {
|
|
listStaff(this.addDateRange({
|
|
page: 1,
|
|
pageSize: 10000
|
|
})).then(response => {
|
|
this.staffList = response.data.records;
|
|
|
|
}
|
|
);
|
|
},
|
|
resetQuery() {
|
|
this.queryParams = {
|
|
giftName: '',
|
|
status: '',
|
|
mobile: '',
|
|
orderNumber: '',
|
|
page: 1,
|
|
pageSize: 10
|
|
},
|
|
this.queryParams.staffId = ''
|
|
this.dateRange = []
|
|
this.beginTime = "";
|
|
this.endTime = ""
|
|
this.queryParams.status = '统一交班';
|
|
this.getList();
|
|
this.getHandover();
|
|
},
|
|
printLocally(data) {
|
|
printLocallyApi(data).then(res => {
|
|
|
|
})
|
|
},
|
|
handleDetail(data) {
|
|
this.openDetail = true
|
|
this.recordData = data.recordData;
|
|
// JSON.parse(this.recordData )
|
|
console.log("data.recordData;", this.recordData)
|
|
|
|
},
|
|
goToAbout() {
|
|
this.$router.push({
|
|
path: '/Handover',
|
|
query: {
|
|
id: 9
|
|
}
|
|
});
|
|
},
|
|
billingDetails1() {
|
|
let count = [];
|
|
if (this.billingDetails) {
|
|
return this.billingDetails
|
|
}
|
|
return count;
|
|
},
|
|
calculateThePaymentMethod(payType) {
|
|
switch (payType) {
|
|
case 'ALIPAY':
|
|
return '支付宝'
|
|
break;
|
|
case 'WECHAT':
|
|
return '微信'
|
|
break;
|
|
case 'UNIONPAY':
|
|
return '银联二维码'
|
|
break;
|
|
case 'CASH':
|
|
return '现金'
|
|
break;
|
|
case 'balance':
|
|
return '余额'
|
|
break;
|
|
case 'oilCard':
|
|
return '油卡'
|
|
break;
|
|
}
|
|
return '未知'
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-containers {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #f6f8f9;
|
|
box-sizing: border-box;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.tab-box {
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
padding: 0px 25px;
|
|
margin-bottom: 25px;
|
|
|
|
}
|
|
|
|
.box_ {
|
|
height: 100%;
|
|
border-bottom: 2px solid #fe9554;
|
|
}
|
|
|
|
.box {
|
|
padding: 10px;
|
|
height: 80px;
|
|
width: 150px;
|
|
margin-right: 0px;
|
|
background-color: rgba(204, 204, 204, 0.3);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: left;
|
|
text-align: left;
|
|
}
|
|
|
|
.box-card {
|
|
width: 640px;
|
|
margin: 0 auto;
|
|
margin-bottom: 15px;
|
|
|
|
}
|
|
|
|
.font-chinese {
|
|
font-size: 15px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: bold;
|
|
line-height: 1.5
|
|
}
|
|
|
|
.font-number {
|
|
font-size: 20px;
|
|
font-family: PingFang SC, sans-serif;
|
|
font-weight: bold;
|
|
line-height: 1.3
|
|
}
|
|
|
|
.table-box {
|
|
width: 100%;
|
|
}
|
|
|
|
.flex-container1 {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
flex-wrap: nowrap; /* 确保不换行 */
|
|
width: 100%; /* 让父容器占满可用宽度 */
|
|
}
|
|
|
|
.el-form--inline .el-form-item {
|
|
margin-right: 44px;
|
|
}
|
|
|
|
.tab-box {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: #fff;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
margin-bottom: 25px;
|
|
|
|
}
|
|
|
|
.tab_ {
|
|
width: 75px;
|
|
height: 100%;
|
|
//border-bottom: 2px solid #FF770F;
|
|
display: flex;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 50px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active {
|
|
border-bottom: 2px solid #FF770F !important;
|
|
color: #FF770F !important;
|
|
}
|
|
|
|
.title_ {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
}
|
|
|
|
.d-s-b {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.xxing {
|
|
width: 100%;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
}
|
|
|
|
.for-box {
|
|
width: 100%;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.for-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: #333333;
|
|
|
|
}
|
|
|
|
.x- {
|
|
width: 100px;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.f-size {
|
|
width: 33%;
|
|
text-align: center;
|
|
//font-weight: 600;
|
|
//font-size: 16px;
|
|
color: #333333;
|
|
}
|
|
|
|
.s-size {
|
|
width: 33%;
|
|
text-align: center;
|
|
}
|
|
|
|
.l-size {
|
|
width: 33%;
|
|
text-align: left;
|
|
}
|
|
|
|
.r-size {
|
|
width: 33%;
|
|
text-align: right;
|
|
}
|
|
|
|
.bottom- {
|
|
width: 98%;
|
|
}
|
|
|
|
.table-boxs {
|
|
border-radius: 8px;
|
|
width: 98%;
|
|
background: #fff;
|
|
margin: 25px auto;
|
|
box-sizing: border-box;
|
|
|
|
padding: 15px;
|
|
}
|
|
</style>
|