167 lines
4.1 KiB
Vue
167 lines
4.1 KiB
Vue
<template>
|
|
<div class="application">
|
|
<!-- 网格管理 -->
|
|
<div class="card">
|
|
<div class="card-title">网格管理</div>
|
|
<div class="app-list">
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon1wg@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">网格管理</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon2ts@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">特殊人群</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon3yf@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">以房找人</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon4jm@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">居民管理</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 事务处理 -->
|
|
<div class="card">
|
|
<div class="card-title">事务处理</div>
|
|
<div class="app-list">
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon5md@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">矛盾调解</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon6zf@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">走访慰问</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon7sw@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">事务记录</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon8wj@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">问卷表单</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon9hy@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">会议通知</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon10txl@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">通讯录</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon11tzgg@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">通知公告</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 疫情防控 -->
|
|
<div class="card">
|
|
<div class="card-title">疫情防控</div>
|
|
<div class="app-list">
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon12jksb@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">健康上报</div>
|
|
</div>
|
|
<div class="app-item">
|
|
<div>
|
|
<img src="./components/img/icon13fxdj@2x.png" alt="" class="app-img">
|
|
</div>
|
|
<div class="app-name">返乡登记</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'application',
|
|
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
|
|
},
|
|
onShow() {
|
|
document.title = '应用'
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.application {
|
|
padding: 40px 28px 0px 28px;
|
|
box-sizing: border-box;
|
|
|
|
.card {
|
|
padding: 20px 30px;
|
|
margin-bottom: 32px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
border-radius: 12px;
|
|
box-shadow: 0px 2px 4px 2px rgba(173, 173, 173, 0.05);
|
|
|
|
.card-title {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.app-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.app-item {
|
|
width: 25%;
|
|
height: 150px;
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
box-sizing: border-box;
|
|
|
|
.app-img {
|
|
width: 72px;
|
|
height: 72px;
|
|
}
|
|
|
|
.app-name {
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|