Files
supplier-dispatch-h5/src/views/index/invoicingNotify.vue
2023-08-11 10:45:20 +08:00

94 lines
2.1 KiB
Vue

<template>
<div class="wrap">
<div class="itemWrap" v-for="(item,index) in 3" :key="index">
<div class="item line1">
<div class="itemTime">
<span class="title">开票月份:</span>
<span class="content">2023年7月</span>
</div>
<div class="orderNum">
<span class="title">总案件数:</span>
<span class="content">86</span>
</div>
<div class="checkBtn" @click="goPage('invoicingDetail')">查看
</div>
</div>
<div class="item">
<span class="title">批次号:</span>
<span class="content">PC230626124283</span>
</div>
<div class="item">
<span class="title">结算总金额:</span>
<span class="content">1238</span>
</div>
<div class="item">
<span class="title">扣款金额:</span>
<span class="content">2300</span>
</div>
<div class="item">
<span class="title">扣款原因:</span>
<span class="content" style="color: #FF8F37;">调度不及时导致客户等待时间过长</span>
</div>
<div class="item">
<span class="title">最终开票金额:</span>
<span class="content">1008</span>
</div>
</div>
</div>
</template>
<script>
import {myMixins} from "@/utils/myMixins"
export default {
name: "invoicingNotify",
mixins:[myMixins],
methods:{
checkDetail(index){
console.log("查看详情"+index)
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap{
@include wh(100%,100%);
background-color: #F4F5F7;
overflow-y: auto;
}
.itemWrap{
background: #FFFFFF;
@include wh(100%,194px);
box-sizing: border-box;
padding: 14px 25px 18px 29px;
@include flexBetween;
margin-bottom: 10px;
.item{
@include fontWeightSize(400,12px);
span{
display: inline-block;
}
.title{
opacity: .5;
//width:55px;
}
.content{}
}
.line1{
width: 100%;
display: flex;
justify-content: space-between;
.checkBtn{
background: #354D93;
border-radius: 3px;
@include wh(48px,18px);
line-height: 18px;
text-align: center;
color: #FFFFFF;
}
}
}
</style>