10 changed files with 310 additions and 23 deletions
@ -0,0 +1,118 @@ |
|||||
|
<!-- <template> |
||||
|
<div class="dashboard"> |
||||
|
<div class="header"> |
||||
|
<div class="title">临沂市孤困老人志愿服务团数字化服务平台</div> |
||||
|
<div class="date-time">{{ dateTime }}</div> |
||||
|
</div> |
||||
|
<div class="main-content"> |
||||
|
<div class="grid-item"> |
||||
|
<overview-panel /> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<map-activity /> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<activity-analysis /> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<points-statistics /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import OverviewPanel from './components/OverviewPanel.vue'; |
||||
|
// import MapActivity from './components/MapActivity.vue'; |
||||
|
// import ActivityAnalysis from './components/ActivityAnalysis.vue'; |
||||
|
// import PointsStatistics from './components/PointsStatistics.vue'; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
// OverviewPanel, |
||||
|
// MapActivity, |
||||
|
// ActivityAnalysis, |
||||
|
// PointsStatistics |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dateTime: '' |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.updateTime(); |
||||
|
setInterval(this.updateTime, 1000); |
||||
|
}, |
||||
|
methods: { |
||||
|
updateTime() { |
||||
|
const now = new Date(); |
||||
|
this.dateTime = now.toLocaleString('zh-CN', { hour12: false }); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.dashboard { |
||||
|
background: linear-gradient(135deg, #1a237e, #0d47a1); |
||||
|
color: white; |
||||
|
height: 100vh; |
||||
|
font-family: "Microsoft YaHei", sans-serif; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20px; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3); |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.date-time { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.main-content { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
grid-template-rows: repeat(2, 1fr); |
||||
|
gap: 20px; |
||||
|
padding: 20px; |
||||
|
height: calc(100vh - 100px); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.grid-item { |
||||
|
background-color: rgba(255, 255, 255, 0.1); |
||||
|
border-radius: 10px; |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
.main-content { |
||||
|
grid-template-columns: repeat(1, 1fr); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.header { |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
.title { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
.date-time { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
</style> --> |
||||
@ -0,0 +1,120 @@ |
|||||
|
<template> |
||||
|
<div class="dashboard"> |
||||
|
<div class="header"> |
||||
|
<div class="title">临沂市孤困老人志愿服务团数字化服务平台</div> |
||||
|
<div class="date-time">{{ dateTime }}</div> |
||||
|
</div> |
||||
|
<div class="main-content"> |
||||
|
<div class="grid-item"> |
||||
|
<overview-panel /> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<map-activity /> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<activity-analysis /> |
||||
|
</div> |
||||
|
<div class="grid-item"> |
||||
|
<points-statistics /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// import OverviewPanel from './components/OverviewPanel.vue'; |
||||
|
// import MapActivity from './components/MapActivity.vue'; |
||||
|
// import ActivityAnalysis from './components/ActivityAnalysis.vue'; |
||||
|
// import PointsStatistics from './components/PointsStatistics.vue'; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
// OverviewPanel, |
||||
|
// MapActivity, |
||||
|
// ActivityAnalysis, |
||||
|
// PointsStatistics |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dateTime: '' |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log("125524"); |
||||
|
|
||||
|
// this.updateTime(); |
||||
|
// setInterval(this.updateTime, 1000); |
||||
|
}, |
||||
|
methods: { |
||||
|
updateTime() { |
||||
|
const now = new Date(); |
||||
|
this.dateTime = now.toLocaleString('zh-CN', { hour12: false }); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.dashboard { |
||||
|
background: linear-gradient(135deg, #1a237e, #0d47a1); |
||||
|
color: white; |
||||
|
height: 100vh; |
||||
|
font-family: "Microsoft YaHei", sans-serif; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20px; |
||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3); |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 32px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.date-time { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.main-content { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
grid-template-rows: repeat(2, 1fr); |
||||
|
gap: 20px; |
||||
|
padding: 20px; |
||||
|
height: calc(100vh - 100px); |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.grid-item { |
||||
|
background-color: rgba(255, 255, 255, 0.1); |
||||
|
border-radius: 10px; |
||||
|
padding: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
.main-content { |
||||
|
grid-template-columns: repeat(1, 1fr); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
.header { |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
.title { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
.date-time { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue