27 changed files with 1129 additions and 643 deletions
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 372 KiB |
|
After Width: | Height: | Size: 335 KiB |
@ -0,0 +1,77 @@ |
|||||
|
<template> |
||||
|
<div class='DetailCard'> |
||||
|
<div class="header"> |
||||
|
<div class="left"> |
||||
|
<div class="title">{{ data.title || '-' }}</div> |
||||
|
<div class="state">{{ data.state || '-' }}</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<span>icon</span> |
||||
|
<span>{{ data.time || '-' }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="body"> |
||||
|
<div class=""> |
||||
|
|
||||
|
</div> |
||||
|
<div class="suffix"></div> |
||||
|
<div class="suffix"></div> |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<Button :style="{ background: '#00B3CC', width: '96px' }">审核</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Button from "@screen/components/Buttons/Button.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'DetailCard', |
||||
|
components: { |
||||
|
Button |
||||
|
}, |
||||
|
props: { |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: () => ({ |
||||
|
title: "事件详情", |
||||
|
state: 0, |
||||
|
desc: '' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.DetailCard { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
background: rgba(6, 66, 88, 0.8); |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid; |
||||
|
border-image: linear-gradient(180deg, rgba(9, 60, 80, 0), rgba(0, 134, 187, 1)) 1 1; |
||||
|
|
||||
|
>div { |
||||
|
padding: 12px 24px; |
||||
|
} |
||||
|
|
||||
|
>.header { |
||||
|
border-bottom: 2px solid #055670; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
>.body { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
>.footer { |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
justify-content: flex-end; |
||||
|
padding: 6px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<Card2 class='AuditDetails' title="审核详情"> |
||||
|
<TimeLine2 :data="timeLine2List" style="flex: 1;" direction="right"> |
||||
|
<template #content="{ data }"> |
||||
|
<DetailCard :data="data" /> |
||||
|
</template> |
||||
|
</TimeLine2> |
||||
|
</Card2> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card2 from "@screen/components/Card2/Card.vue"; |
||||
|
import TimeLine2 from "@screen/components/TimeLine/TimeLine2/index"; |
||||
|
import DetailCard from "./DetailCard.vue" |
||||
|
|
||||
|
export default { |
||||
|
name: 'AuditDetails', |
||||
|
components: { |
||||
|
Card2, |
||||
|
TimeLine2, |
||||
|
DetailCard |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
timeLine2List: Array.from({ length: 6 }).map(() => ({ |
||||
|
time: "2023-12-21 16:35:44", |
||||
|
name: "甘易玫", |
||||
|
desc: "描述性文字文字文字文字文字文字文字文字描述性文字文字文字文字文字文字文字文字", |
||||
|
posts: '淄博发展公司管理员' |
||||
|
})), |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.AuditDetails {} |
||||
|
</style> |
||||
@ -0,0 +1,110 @@ |
|||||
|
<template> |
||||
|
<div class='ListItem'> |
||||
|
<img class="prefix" :src="require(`@screen/images/ListItem/${eventTypeIcon[data.type]}.svg`)" /> |
||||
|
<div class="center"> |
||||
|
<div class="header"> |
||||
|
<span class="title">{{ data.title || '-' }}</span> |
||||
|
<span class="state" :style="{ backgroundColor: state[data.state].color }">{{ state[data.state].text }}</span> |
||||
|
</div> |
||||
|
<div class="content">{{ data.desc || '-' }}</div> |
||||
|
</div> |
||||
|
<img class="suffix" :src="require(`@screen/images/ListItem/${state[data.state].icon}.svg`)" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ListItem', |
||||
|
props: { |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: () => ({ |
||||
|
state: 0, |
||||
|
type: 0 |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
eventTypeIcon: { |
||||
|
0: 'AbnormalWeather', |
||||
|
1: 'TrafficControl', |
||||
|
}, |
||||
|
state: { |
||||
|
0: { |
||||
|
color: "#00B1A0", |
||||
|
text: "处理中", |
||||
|
icon: 'ToBeReviewed' |
||||
|
}, |
||||
|
|
||||
|
1: { |
||||
|
color: "#057DD3", |
||||
|
text: "已处理", |
||||
|
icon: 'Reviewed' |
||||
|
}, |
||||
|
2: { |
||||
|
color: "#057DD3", |
||||
|
text: "已处理", |
||||
|
icon: 'Failed' |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.ListItem { |
||||
|
min-height: 88px; |
||||
|
background: rgba(6, 66, 88, 0.8); |
||||
|
border-radius: 4px 4px 4px 4px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid; |
||||
|
padding: 21px; |
||||
|
border-image: linear-gradient(180deg, rgba(9, 60, 80, 0), rgba(0, 134, 187, .72)) 1 1; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 15px; |
||||
|
|
||||
|
.center { |
||||
|
flex: 1; |
||||
|
|
||||
|
.header { |
||||
|
margin-bottom: 9px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 9px; |
||||
|
|
||||
|
|
||||
|
.title { |
||||
|
font-size: 18px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 600; |
||||
|
color: #E2B066; |
||||
|
line-height: 21px; |
||||
|
} |
||||
|
|
||||
|
.state { |
||||
|
background: #00B1A0; |
||||
|
border-radius: 18px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 16px; |
||||
|
padding: 2px 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 19px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<Card2 class='Auditlists' title="审核列表"> |
||||
|
<InputSearch style="width: 100%;" /> |
||||
|
<div class="body"> |
||||
|
<ListItem v-for="(item, index) in list" :key="index" :data="item" /> |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<Pagination :total="90" /> |
||||
|
</div> |
||||
|
</Card2> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Card2 from "@screen/components/Card2/Card.vue"; |
||||
|
import Pagination from '@screen/components/Pagination.vue'; |
||||
|
import InputSearch from '@screen/components/InputSearch/index.vue'; |
||||
|
import ListItem from "./ListItem.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'Auditlists', |
||||
|
components: { |
||||
|
Card2, |
||||
|
InputSearch, |
||||
|
Pagination, |
||||
|
ListItem |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
list: Array.from({ length: 20 }).map(() => ({ |
||||
|
title: "异常天气", |
||||
|
desc: "2023.12.23 13:00:00 济南方向K100+000 交通事故", |
||||
|
type: (() => { |
||||
|
const min = 0; |
||||
|
const max = 1; |
||||
|
return Math.floor(Math.random() * (max - min + 1)) + min; |
||||
|
})(), |
||||
|
state: (() => { |
||||
|
const min = 0; |
||||
|
const max = 2; |
||||
|
return Math.floor(Math.random() * (max - min + 1)) + min; |
||||
|
})() |
||||
|
})), |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.Auditlists { |
||||
|
::v-deep { |
||||
|
.content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.body { |
||||
|
flex: 1; |
||||
|
overflow-y: auto; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 9px; |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,15 +1,34 @@ |
|||||
<template> |
<template> |
||||
<div class='InformationReleaseManagement'> |
<div class='InformationReleaseManagement'> |
||||
InformationReleaseManagement |
<AuditLists class="card" /> |
||||
|
<AuditDetails class="card" /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import AuditDetails from "./Cards/AuditDetails/index.vue" |
||||
|
import AuditLists from "./Cards/AuditLists" |
||||
|
|
||||
export default { |
export default { |
||||
name: 'InformationReleaseManagement', |
name: 'InformationReleaseManagement', |
||||
|
components: { |
||||
|
AuditLists, |
||||
|
AuditDetails |
||||
|
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.InformationReleaseManagement {} |
.InformationReleaseManagement { |
||||
|
padding: 24px; |
||||
|
display: grid; |
||||
|
gap: 36px; |
||||
|
grid-template-columns: 0.42fr 1fr; |
||||
|
|
||||
|
.card { |
||||
|
overflow: hidden; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue