<template>
|
<GlobalWindow
|
title="运单详情"
|
center
|
:visible.sync="isShowModal"
|
width="420px"
|
:confirm-working="subLoading"
|
@confirm="isShowDetail = false"
|
>
|
<div class="detail_modal">
|
<div class="head">
|
<div class="plate">皖A12122</div>
|
<div class="list">
|
<div class="item">
|
<span>运输单号：</span>
|
<span>22222</span>
|
</div>
|
<div class="item">
|
<span>总运输量：</span>
|
<span>22222</span>
|
</div>
|
<div class="item">
|
<span>驾驶员：</span>
|
<span>22222</span>
|
</div>
|
</div>
|
</div>
|
<div class="title">合同列表</div>
|
<div class="content">
|
<div class="item">
|
<div class="contract">合同号：1292992</div>
|
<div class="placeholder6">收货地：address</div>
|
<div class="list">
|
<div class="line">
|
<div class="left"><span>物料名称：</span><span>黄山</span></div>
|
<div class="right"><span>数量：</span><span>100</span></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { getPlatform, PlatformEdit, PlatformDel } from '@/api'
|
export default {
|
components: {
|
GlobalWindow
|
},
|
data() {
|
return {
|
isShowModal: false,
|
subLoading: false,
|
param: {}
|
|
}
|
},
|
methods: {
|
handleSub() {
|
const { param } = this
|
this.subLoading = true
|
PlatformEdit({
|
...param
|
}).then(res => {
|
this.subLoading = false
|
this.isShowEdit = false
|
this.$tip.success('提交成功')
|
this.getList()
|
}, () => {
|
this.subLoading = false
|
})
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/style/variables.scss";
|
.detail_modal {
|
font-size: 12px;
|
color: #282828;
|
.head {
|
background: rgba(39, 155, 170, 0.05);
|
border-radius: 4px;
|
border: 1px solid #dfe2e8;
|
padding: 16px;
|
.plate {
|
width: 90px;
|
text-align: center;
|
font-size: 15px;
|
color: #111111;
|
padding: 4px 5px;
|
font-weight: 700;
|
border: 1px solid #279baa;
|
background-color: #fff;
|
}
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 16px;
|
.item {
|
width: 50%;
|
margin-bottom: 8px;
|
span {
|
&:nth-child(1) {
|
color: #666666;
|
}
|
}
|
}
|
}
|
}
|
.title {
|
margin: 16px 0;
|
font-weight: 500;
|
font-size: 16px;
|
color: #222222;
|
}
|
.content {
|
.item {
|
border-radius: 4px;
|
border: 1px solid #dfe2e8;
|
padding: 16px;
|
.list {
|
background: #f7f7f7;
|
border-radius: 4px;
|
padding: 12px 16px;
|
margin-top: 10px;
|
}
|
.contract {
|
font-weight: 500;
|
font-size: 15px;
|
color: #279baa;
|
margin-bottom: 4px;
|
}
|
.line {
|
display: flex;
|
margin-bottom: 8px;
|
&:nth-last-child(1) {
|
margin: 0;
|
}
|
div {
|
span {
|
&:nth-child(1) {
|
color: #666666;
|
}
|
}
|
}
|
.left {
|
flex: 6;
|
}
|
.right {
|
flex: 4;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
