完善车辆管理模块

This commit is contained in:
2023-08-16 17:29:17 +08:00
parent c27a99d0ac
commit 1a119820dd
23 changed files with 389 additions and 92 deletions

View File

@ -0,0 +1,180 @@
<template>
<div class="wrap">
<div class="baseInfo common">
<div class="title">基本信息:</div>
<div class="line"></div>
<div class="item">
<span class="title">工单编号</span>
<span class="content" id="copyText">ZD230626124283</span>
<img @click="copyText" src="@/assets/copy.png" />
</div>
<div class="item">
<span class="title">车牌号&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="content">湘H-DD899</span>
</div>
<div class="item">
<span class="title">服务类型</span>
<span class="content" >搭电</span>
</div>
<div class="item">
<span class="title">工单状态</span>
<span class="content" >未完成</span>
</div>
<div class="item">
<span class="title">结算比例</span>
<span class="content" >按服务不成功结算</span>
</div>
<div class="item">
<span class="title">结算类型</span>
<span class="content" >系统一口价</span>
</div>
<div class="item" >
<span class="title">结算方式</span>
<div class="content" style="width: calc(100% - 84px);display: flex;justify-content: space-between;line-height: 27px" >
<span>起步价:135</span>
<span>包含公里数:15</span>
<span>超出单价:6</span>
</div>
</div>
<div class="item">
<span class="title">扣除责任险费</span>
<span class="content">0</span>
</div>
</div>
<div class="supplierData common">
<div class="title">供应商数据:</div>
<div class="line"></div>
<div class="inpInfo">
<div class="titleContent">
<div>拖车里程:</div>
<div>路桥费:</div>
<div>小轮费:</div>
<div>收取客户金额:</div>
<div>费用总计:</div>
<div>备注说明:</div>
</div>
<div class="inputContent">
<div class="halfOpcity"><input type="number"/>公里</div>
<div class="halfOpcity"><input type="number"/></div>
<div class="halfOpcity"><input type="number"/></div>
<div class="halfOpcity"><input type="number"/></div>
<div class="btnComputed">计算</div>
</div>
</div>
<textarea class="multipleTxt" placeholder="报备描述"></textarea>
<two-common-btn class="btn" @cancelClick="cancelBtn" @submitClick="submitBtn" />
</div>
</div>
</template>
<script>
import {myMixins} from '@/utils/myMixins'
import TwoCommonBtn from "@/components/twoBtnCommon.vue"
export default {
name: "accountingView",
mixins:[myMixins],
methods:{
cancelBtn(){
console.log("取消")
},
submitBtn(){
console.log("提交")
}
},
components:{
TwoCommonBtn
}
}
</script>
<style scoped lang="scss">
@import "@/styles/mixin.scss";
.wrap{
width: 100%;
height: 100%;
background-color: #F4F5F7;
}
.title{
@include fontWeightSize(bold,14px);
color: #323643;
opacity: 0.66;
}
.line{
@include wh(100%,2px);
opacity: 0.16;
border-top: 1px solid;
margin-top: 7px;
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;
}
.item{
display: flex;
align-items: center;
@include fontWeightSize(400,12px);
.title{
opacity: .5;
line-height: 27px;
}
}
img{
@include wh(35px,15px);
margin-left: 21px;
}
.common{
background-color: #FFFFFF;
padding: 11px 24px 14px;
box-sizing: border-box;
margin-bottom: 10px;
}
.baseInfo{
@include wh(100%,276px);
}
.supplierData{
@include wh(100%,438px);
.inpInfo{
display: flex;
justify-content: space-between;
margin: 0 5px;
color: #323643;
line-height: 32px;
input{
border: none;
text-align: right;
}
.titleContent{
width: 91px;
@include fontWeightSize(bold,13px);
}
.halfOpcity{
opacity: .5;
}
.inputContent{
text-align: right;
//opacity: .5;e
.btnComputed{
width: 48px;
@include all-height(18px);
text-align: center;
color: #FFFFFF;
background: #354D93;
border-radius: 3px;
position: absolute;
right: 24px;
}
}
}
.multipleTxt{
@include wh(100%,87px);
background: #FAFAFA;
border-radius: 3px;
border: 1px solid #E6E6E6;
backdrop-filter: blur(10px);
padding: 8px;
box-sizing: border-box;
}
.btn{
margin-top: 8px;
}
}
</style>