apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
周林芳
2023-08-11 10:45:20 +08:00
commit 161ca982f3
31850 changed files with 2706500 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/views/index/supplySettlement.vue Normal file
View File

@ -0,0 +1,137 @@
<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>