first
This commit is contained in:
157
src/views/index/workOrderDetail.vue
Normal file
157
src/views/index/workOrderDetail.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="wrap">
|
||||
<div class="baseInfo common">
|
||||
<div class="title">基本信息:</div>
|
||||
<div class="line"></div>
|
||||
<div class="infoWrap fontColor">
|
||||
<div class="leftTitle">
|
||||
<div class="leftItem">工单编号:</div>
|
||||
<div class="leftItem">合同:</div>
|
||||
<div class="leftItem">结算方式:</div>
|
||||
<div class="leftItem">客户姓名:</div>
|
||||
<div class="leftItem">客户电话:</div>
|
||||
<div class="leftItem">车牌号:</div>
|
||||
<div class="leftItem">车型品牌:</div>
|
||||
</div>
|
||||
<div class="rightContent">
|
||||
<div class="rightItem" style="display: flex;align-items: center;">
|
||||
<span id="copyText">ZD23097890987</span>
|
||||
<img @click="copyText" src="@/assets/copy.png" style="width: 35px;height: 15px;margin-left: 10px"/>
|
||||
</div>
|
||||
<div class="rightItem">平安产险</div>
|
||||
<div class="rightItem">合同月结</div>
|
||||
<div class="rightItem">万女士</div>
|
||||
<div class="rightItem">15234447878</div>
|
||||
<div class="rightItem">沪A123456</div>
|
||||
<div class="rightItem">奥迪 A6L</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serviceInfo common">
|
||||
<div class="title">服务信息:</div>
|
||||
<div class="line"></div>
|
||||
<div class="infoContent">
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">服务类型:</span><span class="rightContent">故障——拖车</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">车辆位于:</span><span class="rightContent">地面</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">事发地:</span><span class="rightContent">上海市高科西路650号</span>
|
||||
</div>
|
||||
<div class="item" style="align-items: baseline">
|
||||
<span class="leftTitle fontColor">事发地补充:</span><span class="rightContent vehicleRemark" style="flex: 1">50公里免拖，超出部分费用按照市场价格由客户现场支付，原始手机号：15088752478,客户承担背车段路桥费。目的地不明确请师傅到现场核实清楚并回电反馈</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">目的地:</span><span class="rightContent">浙江省杭州市富阳区比亚迪海洋4s店</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">目的地补充:</span><span class="rightContent vehicleRemark">无</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">工单状态:</span><span class="rightContent orderStatus">师傅接单，待发车</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">服务车辆:</span><span class="rightContent">沪A123456</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="leftTitle fontColor">服务师傅:</span><span class="rightContent">周师傅/15234345656</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from '@/utils/myMixins'
|
||||
export default {
|
||||
name: "workOrderDetail",
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/mixin.scss";
|
||||
.wrap{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
.common{
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
padding: 11px 17px 15px 24px;
|
||||
}
|
||||
.fontColor{
|
||||
@include fontWeightSize(400,12px);
|
||||
color: #000000;
|
||||
line-height: 27px;
|
||||
}
|
||||
.baseInfo{
|
||||
@include wh(100%,250px);
|
||||
margin-bottom: 12px;
|
||||
.infoWrap{
|
||||
display: flex;
|
||||
.leftTitle{
|
||||
margin-left: 5px;
|
||||
margin-right: 6px;
|
||||
@include wh(60px,189px);
|
||||
opacity: .5;
|
||||
}
|
||||
.rightContent{
|
||||
@include wh(90px,189px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.serviceInfo{
|
||||
@include wh(100%,356px);
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.infoContent{
|
||||
.leftTitle{
|
||||
display: block;
|
||||
width: 72px;
|
||||
opacity: .5;
|
||||
}
|
||||
.rightContent{
|
||||
width: calc(100% - 90px);
|
||||
@include fontWeightSize(500,12px);
|
||||
}
|
||||
|
||||
.vehicleRemark{
|
||||
@include fontWeightSize(400,11px);
|
||||
opacity: 0.55;
|
||||
color: #121212;
|
||||
line-height: 14px;
|
||||
}
|
||||
.orderStatus{
|
||||
color: #E69B0B;
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
@include fontWeightSize(500,14px);
|
||||
color: #323643;
|
||||
line-height: 20px;
|
||||
opacity: .6;
|
||||
}
|
||||
.line{
|
||||
@include wh(100%,2px);
|
||||
opacity: 0.16;
|
||||
border-bottom: 1px solid;
|
||||
margin: 7px 0;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user