137 lines
3.3 KiB
Vue
137 lines
3.3 KiB
Vue
<template>
|
|
<div class="wrap">
|
|
<div class="kilometers common">
|
|
<div class="title">公里数:</div>
|
|
<div class="line"></div>
|
|
<div class="metersWrap">
|
|
<div class="leftKiloMeters">
|
|
<div>AB段公里数</div>
|
|
<div>BC段公里数</div>
|
|
<div>CA段公里数</div>
|
|
</div>
|
|
<div class="rightInputMeters">
|
|
<div><input type="number"/>公里</div>
|
|
<div><input type="number"/>公里</div>
|
|
<div><input type="number"/>公里</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="roadBridgeFee common">
|
|
<div class="title">路桥费:</div>
|
|
<div class="line"></div>
|
|
<div class="metersWrap">
|
|
<div class="leftKiloMeters">
|
|
<div>AB段公里数</div>
|
|
<div>BC段公里数</div>
|
|
<div>CA段公里数</div>
|
|
</div>
|
|
<div class="rightInputMeters">
|
|
<div><input type="number"/>公里</div>
|
|
<div><input type="number"/>公里</div>
|
|
<div><input type="number"/>公里</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="otherFee common">
|
|
<div class="title">其他费用:</div>
|
|
<div class="line"></div>
|
|
<div class="metersWrap">
|
|
<div class="leftKiloMeters">
|
|
<div>小轮个数</div>
|
|
<div>等候费</div>
|
|
<div>困境费</div>
|
|
<div class="blueColor">已收取客户金额</div>
|
|
</div>
|
|
<div class="rightInputMeters" style="opacity: 1">
|
|
<div class="alignRight"><input type="number"/>个</div>
|
|
<div class="alignRight"><input type="number"/>元</div>
|
|
<div class="alignRight"><input type="number"/>元</div>
|
|
<div class="blueColor"><input type="number"/>元</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<common-btn class="btn" @submitClick="submit" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CommonBtn from "@/components/commonBtn.vue"
|
|
export default {
|
|
name: "supplySettlement",
|
|
data(){
|
|
return{}
|
|
},
|
|
methods:{
|
|
submit() {
|
|
console.log("提交")
|
|
}
|
|
},
|
|
components:{
|
|
CommonBtn
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/mixin.scss";
|
|
.wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #F4F5F7;
|
|
}
|
|
.common {
|
|
@include wh(100%, 161px);
|
|
background: #FFFFFF;
|
|
backdrop-filter: blur(5.602678571428572px);
|
|
box-sizing: border-box;
|
|
padding: 10px 17px 10px 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.otherFee {
|
|
@include wh(100%, 198px)
|
|
}
|
|
.title {
|
|
@include fontWeightSize(500, 14px);
|
|
color: #323643;
|
|
opacity: 0.66;
|
|
}
|
|
.line {
|
|
@include wh(calc(100% - 10px), 2px);
|
|
text-align: center;
|
|
opacity: 0.16;
|
|
border-top: 1px solid;
|
|
margin-top: 8px;
|
|
border-image: linear-gradient(270deg, rgba(217, 217, 217, 0.6), rgba(178, 178, 178, 1), rgba(178, 178, 178, 1), rgba(217, 217, 217, 0.6)) 1 1;
|
|
}
|
|
.metersWrap {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 37px;
|
|
.blueColor{
|
|
@include fontWeightSize(500,14px);
|
|
color: #4682FE;
|
|
}
|
|
.alignRight{
|
|
text-align: right;
|
|
opacity: .5;
|
|
}
|
|
.leftTitle {
|
|
@include fontWeightSize(400, 14px);
|
|
}
|
|
.rightInputMeters {
|
|
margin-right: 13px;
|
|
@include fontWeightSize(500, 13px);
|
|
color: #323643;
|
|
opacity: .5;
|
|
input {
|
|
border: none;
|
|
text-align: right;
|
|
color: #323643;
|
|
opacity: .8;
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
margin-left: 24px;
|
|
}
|
|
</style> |