Files
dvcp_v2_wxcp_app/src/project/saas/AppHomeOld/application.vue
2022-08-08 15:39:14 +08:00

173 lines
4.6 KiB
Vue

<template>
<div class="application">
<div class="card" v-for="(item, index) in tabs" :key="index">
<div class="card-title">{{ item.title }}</div>
<div class="app-list">
<div class="app-item" v-for="(e, i) in item.list" :key="i" @click="linkTo(e.linkUrl)">
<div>
<img :src="e.iconUrl" alt="" class="app-img">
</div>
<div class="app-name">{{ e.label }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'application',
data() {
return {
tabs: [
{
title: '网格管理',
list: [
{
label: '网格管理',
iconUrl: require('./components/img/icon1wg@2x.png'),
linkUrl: '/apps/AppGridManagement/AppGridManagement'
},
{
label: '特殊人群',
iconUrl: require('./components/img/icon2ts@2x.png'),
linkUrl: '/apps/AppSpecialPeople/AppSpecialPeople'
},
{
label: '以房找人',
iconUrl: require('./components/img/icon3yf@2x.png'),
linkUrl: '/apps/AppBuilding/AppBuilding'
},
{
label: '居民管理',
iconUrl: require('./components/img/icon4jm@2x.png'),
linkUrl: '/apps/AppResidentDocument/AppResidentDocument'
}
]
},
{
title: '事务处理',
list: [
{
label: '矛盾调解',
iconUrl: require('./components/img/icon5md@2x.png'),
linkUrl: '/apps/AppConflictMediation/AppConflictMediation'
},
{
label: '走访慰问',
iconUrl: require('./components/img/icon6zf@2x.png'),
linkUrl: '/apps/AppWalkask/AppWalkask'
},
{
label: '事务记录',
iconUrl: require('./components/img/icon7sw@2x.png'),
linkUrl: '/apps/AppInterview/AppInterview'
},
{
label: '问卷表单',
iconUrl: require('./components/img/icon8wj@2x.png'),
linkUrl: '/apps/AppAskForm/AppAskForm'
},
{
label: '会议通知',
iconUrl: require('./components/img/icon9hy@2x.png'),
linkUrl: '/apps/AppMeetingNotice/AppMeetingNotice'
},
{
label: '电话簿',
iconUrl: require('./components/img/icon10txl@2x.png'),
linkUrl: '/apps/AppMailList/AppMailList'
},
{
label: '通知公告',
iconUrl: require('./components/img/icon11tzgg@2x.png'),
linkUrl: '/apps/AppNotification/AppNotification'
},
{
label: '协同宣发',
iconUrl: require('./components/img/iconxtxf.png'),
linkUrl: '/apps/AppCooperationPropaganda/AppCooperationPropaganda'
},
{
label: '宣发统计',
iconUrl: require('./components/img/iconxftj.png'),
linkUrl: '/apps/AppPropagandaStatistics/AppPropagandaStatistics'
},
]
},
{
title: '疫情防控',
list: [
{
label: '健康上报',
iconUrl: require('./components/img/icon12jksb@2x.png'),
linkUrl: '/apps/AppHealthUp/AppHealthUp'
},
{
label: '返乡登记',
iconUrl: require('./components/img/icon13fxdj@2x.png'),
linkUrl: '/apps/AppBackUserList/AppBackUserList'
}
]
},
]
}
},
created() {
document.title = '应用'
},
methods: {
linkTo(url) {
uni.navigateTo({url})
}
}
}
</script>
<style lang="scss" scoped>
.application {
padding: 40px 28px 100px 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: 0 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>