task#10094,调度app案件详情静态
This commit is contained in:
@ -19,7 +19,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="listWrap">
|
||||
<div class="listItem">
|
||||
<div class="listItem" @click="goPageDetail">
|
||||
<div class="line1">
|
||||
<div><span>审核批次:</span><span>PC1234123443243232131</span></div>
|
||||
<div class="right">
|
||||
|
@ -12,16 +12,57 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="listWrap">
|
||||
<div class="listItem" v-for="(item,index) in 3" :key="index">
|
||||
<div class="line1">
|
||||
<div><span>审核批次:</span><span>PC1234123443243232131</span></div>
|
||||
<div class="mapWrap">
|
||||
<div>DDA2304142407036</div>
|
||||
<div class="map">
|
||||
<div class="title">
|
||||
<div><span>司机姓名:</span><span>甜甜圈</span></div>
|
||||
<div><span>车牌号:</span><span>沪A123456</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wiadgeWrap">
|
||||
<div class="lineWrap">
|
||||
<div class="left">
|
||||
<img class="commonImg" src="@/assets/camer.png">
|
||||
<span class="free">AB(出发段)路桥费</span>
|
||||
<span>30公里</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<img class="commonImg" src="@/assets/waitSubmit.png">
|
||||
<div class="yelColor">待审核</div>
|
||||
<img class="rightArrImg" src="@/assets/list_rightArrow.png">
|
||||
<span>30</span>
|
||||
<span>元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="lineWrap">
|
||||
<div class="left">
|
||||
<img class="commonImg" src="@/assets/camer.png">
|
||||
<span class="free">BC(出发段)路桥费</span>
|
||||
<span>30公里</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>30</span>
|
||||
<span>元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="lineWrap">
|
||||
<div class="left">
|
||||
<img class="commonImg" src="@/assets/camer.png">
|
||||
<span class="free">CA(出发段)路桥费</span>
|
||||
<span>30公里</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<span>30</span>
|
||||
<span>元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="totalFree">
|
||||
<span>总金额</span>
|
||||
<span>130</span>
|
||||
<span>元</span>
|
||||
</div>
|
||||
</div>
|
||||
<div><span>报销金额:</span><span>1238元</span></div>
|
||||
</div>
|
||||
<div class="aduit">
|
||||
<div class="itemWrap">
|
||||
@ -69,7 +110,8 @@
|
||||
<textarea v-model="supplierRemk" class="multipleTxt" placeholder="描述"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<common-btn class="submitBtn"></common-btn>
|
||||
<div class="submitBtn">提交</div>
|
||||
<!-- <common-btn class="submitBtn"></common-btn>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -77,11 +119,11 @@
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins";
|
||||
import CommonBtn from "@/components/commonBtn.vue"
|
||||
// import CommonBtn from "@/components/commonBtn.vue"
|
||||
export default {
|
||||
name: "caseDetail",
|
||||
mixins: [myMixins],
|
||||
components:{CommonBtn},
|
||||
// components:{CommonBtn},
|
||||
data(){
|
||||
return{
|
||||
states:'',
|
||||
@ -132,32 +174,96 @@ export default {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 8px;
|
||||
position: relative;
|
||||
.listItem{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 14px 25px 13px 29px;
|
||||
.mapWrap{
|
||||
@include wh(100%,407px);
|
||||
background-color: #FFFFFF;
|
||||
margin-bottom: 10px;
|
||||
.line1{
|
||||
@include flexColBet();
|
||||
.viewBtn{
|
||||
@include wh(48px,18px);
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
background: #354D93;
|
||||
border-radius: 3px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 9px 8px 0;
|
||||
.map{
|
||||
@include wh(100%,204px);
|
||||
border-radius: 4px;
|
||||
border: 1px solid #F0F0F0;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 13px;
|
||||
.title{
|
||||
@include wh(100%,31px);
|
||||
line-height: 31px;
|
||||
background: #F9FCFF;
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
display: flex;
|
||||
div{
|
||||
line-height: 27px;
|
||||
width: 50%;
|
||||
margin-left: 17px;
|
||||
font-size: 12px;
|
||||
span:first-child{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
opacity: 0.5;
|
||||
color: #555A68;
|
||||
margin-right: 3px;
|
||||
}
|
||||
span:last-child{
|
||||
color: #3A3A3A;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.wiadgeWrap{
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
.lineWrap{
|
||||
@include flexBetCen();
|
||||
line-height: 32px;
|
||||
.left{
|
||||
@include flexCenter();
|
||||
img{
|
||||
@include wh( 48px,31px);
|
||||
}
|
||||
.free{
|
||||
margin: 0 11px;
|
||||
@include fontWeightSize(bold,13px);
|
||||
@include colorOpa(#000000,0.9);
|
||||
}
|
||||
span:last-child{
|
||||
font-size: 12px;
|
||||
color: #555A68;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
span:first-child{
|
||||
@include fontWeightSize(bold,18px);
|
||||
@include colorOpa(#000000,0.75);
|
||||
}
|
||||
span:last-child{
|
||||
@include fontWeightSize(bold,10px);
|
||||
@include colorOpa(#000000,0.8);
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.line{
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #E9E9EA;
|
||||
opacity: 0.6;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.totalFree{
|
||||
width: 100%;
|
||||
line-height: 42px;
|
||||
@include flexCenter();
|
||||
justify-content: flex-end;
|
||||
span:first-child{
|
||||
@include fontWeightSize(bold,13px);
|
||||
@include colorOpa(#000000,0.9);
|
||||
}
|
||||
span:nth-child(2){
|
||||
@include fontWeightSize(600,22px);
|
||||
color: #FF5D2E;
|
||||
}
|
||||
span:last-child{
|
||||
@include fontWeightSize(bold,10px);
|
||||
@include colorOpa(#000000,0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -188,9 +294,14 @@ export default {
|
||||
}
|
||||
}
|
||||
.submitBtn{
|
||||
margin-left: 4%;
|
||||
position: absolute;
|
||||
bottom: 10px
|
||||
//position: absolute;
|
||||
//bottom: 30px;
|
||||
margin:20px 0 10px 6%;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
@include bgFontColor(#FFFFFF,#354D93);
|
||||
@include fontWeightSize(bold,15px);
|
||||
@include whLin(88%,48px);
|
||||
}
|
||||
}
|
||||
.greColor{
|
||||
|
Reference in New Issue
Block a user