Joe
1 year ago
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> |
<template> |
||||
<Card class='DispatchLiaison' title="调度联络"> |
<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> |
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "./../../components/Card.vue" |
import Card from "./../../components/Card.vue" |
||||
|
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
||||
|
import Descriptions from '@screen/components/Descriptions.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: 'DispatchLiaison', |
name: 'DispatchLiaison', |
||||
components: { |
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> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.DispatchLiaison {} |
.DispatchLiaison { |
||||
|
::v-deep { |
||||
|
.content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue