7 changed files with 206 additions and 5 deletions
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<div class='Descriptions' :style="getStyle()"> |
|||
<div class="item" v-for="(item, index) in list" :key="`${item.key || item.label}${index}`" |
|||
:style="gridStyle(item, index)"> |
|||
<div class="title text"> |
|||
<slot :name="`title-${item.key || item.label}`" :data="item"> |
|||
{{ item.label || '-' }}: |
|||
</slot> |
|||
</div> |
|||
<div class="content text"> |
|||
<slot :name="`content-${item.key || item.label}`" :data="item"> |
|||
{{ item.text || '-' }} |
|||
</slot> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Descriptions', |
|||
props: { |
|||
/** |
|||
* { |
|||
* key: string; |
|||
* label: string; |
|||
* text: string; |
|||
* gridRow: number; |
|||
* gridColumn: number; |
|||
* }[] |
|||
*/ |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
column: { |
|||
type: String, |
|||
default: "2" |
|||
} |
|||
}, |
|||
computed: { |
|||
gridStyle() { |
|||
return (item, index) => ({ |
|||
gridRow: `span ${item.gridRow || 1}`, |
|||
gridColumn: `span ${item.gridColumn || 1}`, |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
getStyle() { |
|||
return { |
|||
gridTemplateColumns: `repeat(${this.column}, 1fr)`, |
|||
} |
|||
}, |
|||
getComponent(type) { |
|||
return `Form${type.replace(/^[a-z]/, word => word.toUpperCase())}` |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.Descriptions { |
|||
display: grid; |
|||
gap: 9px; |
|||
|
|||
.text { |
|||
font-size: 15px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFF; |
|||
line-height: 18px; |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 3px; |
|||
} |
|||
|
|||
.title { |
|||
color: #3DE8FF; |
|||
} |
|||
|
|||
.item { |
|||
display: flex; |
|||
gap: 6px; |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 866 B |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
@ -1,20 +1,90 @@ |
|||
<template> |
|||
<Card class='DispatchLiaison' title="调度联络"> |
|||
DispatchLiaison |
|||
<template #title-suffix> |
|||
<ButtonGradient class="title-button"> |
|||
调度 |
|||
</ButtonGradient> |
|||
</template> |
|||
<Descriptions :list="list" style="gap: 24px; flex: 1;"> |
|||
<template #content-phone1="{ data: { text } }"> |
|||
{{ text }} |
|||
<img src="./images/phone.svg" /> |
|||
</template> |
|||
<template #content-phone2="{ data: { text } }"> |
|||
{{ text }} |
|||
<img src="./images/phone.svg" /> |
|||
<img src="./images/camera.svg" /> |
|||
</template> |
|||
<template #content-rescueVehicles="{ data: { text } }"> |
|||
{{ text }} |
|||
<img src="./images/rescueVehicles.svg" /> |
|||
</template> |
|||
</Descriptions> |
|||
</Card> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "./../../components/Card.vue" |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
import Descriptions from '@screen/components/Descriptions.vue'; |
|||
|
|||
export default { |
|||
name: 'DispatchLiaison', |
|||
components: { |
|||
Card |
|||
Card, |
|||
ButtonGradient, |
|||
Descriptions |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [ |
|||
{ |
|||
label: '业务单位', |
|||
text: '山东正晨科技股份有限公司', |
|||
gridColumn: 2 |
|||
}, |
|||
{ |
|||
label: '值班领导', |
|||
text: '张亮亮', |
|||
}, |
|||
{ |
|||
label: '手机', |
|||
key: "phone1", |
|||
text: '18888888888', |
|||
}, |
|||
{ |
|||
label: '调度人员', |
|||
text: '', |
|||
gridColumn: 2 |
|||
}, |
|||
{ |
|||
label: '路管人员', |
|||
text: '王一博', |
|||
}, |
|||
{ |
|||
label: '手机', |
|||
key: "phone2", |
|||
text: '16666666666', |
|||
}, |
|||
{ |
|||
label: '救援车辆', |
|||
key: "rescueVehicles", |
|||
text: '鲁A34567 （大型清障车）', |
|||
gridColumn: 2 |
|||
}, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.DispatchLiaison {} |
|||
.DispatchLiaison { |
|||
::v-deep { |
|||
.content { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue