<template>
|
<basic-container style="margin-bottom: 40px;">
|
<div class="current-page-box">
|
<div v-for="(item, index) in data" :key="index">
|
<div v-if="index == 0">
|
<!-- <box-title class="m10" :classVal="9" :title="item.name"></box-title> -->
|
<div v-for="(item1, childIndex) in item.children" :key="childIndex">
|
<div v-if="item1.name === '民政标签'">
|
<box-title class="m10" :classVal="9" :title="item1.name"></box-title>
|
<div v-for="(item2, index2) in item1.children" :key="index2">
|
<!-- <box-title class="m10" :classVal="9" :title="item2.name"></box-title> -->
|
<div class="m20 m-t-28 grid-content bg-purple-dark">
|
<el-divider content-position="left">{{ item2.name }}</el-divider>
|
</div>
|
|
<div class="grid-container" v-if="item2.children">
|
<div v-for="(item3, index3) in item2.children" :key="index3">
|
<div>
|
{{ item3.count }}
|
</div>
|
<div>
|
{{ item3.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div v-else>
|
<!-- <div class="m20 m-t-28 grid-content bg-purple-dark">
|
<el-divider content-position="left">{{ item1.name }}</el-divider>
|
</div> -->
|
<box-title class="m10" :classVal="9" :title="item1.name"></box-title>
|
|
<div class="grid-container" v-if="item1.children">
|
<div v-for="(item2, childChildIndex) in item1.children" :key="childChildIndex">
|
<div>
|
{{ item2.count }}
|
</div>
|
<div>
|
{{ item2.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
|
<div v-if="index == 1">
|
<box-title class="m10" :classVal="9" :title="item.name"></box-title>
|
|
<div class="grid-container">
|
<div v-for="(item1, childIndex) in item.children" :key="childIndex">
|
<div>
|
{{ item1.count }}
|
</div>
|
<div>
|
{{ item1.name }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- <div v-if="index == 2">
|
<box-title class="m10" :classVal="9" :title="item.name"></box-title>
|
|
<div class="grid-container">
|
<div>
|
<div>
|
{{ item.count }}
|
</div>
|
<div>
|
{{ item.name }}
|
</div>
|
</div>
|
</div>
|
</div> -->
|
|
</div>
|
</div>
|
</basic-container>
|
</template>
|
<script>
|
import {
|
getTreeList,
|
add,
|
update,
|
remove
|
} from '@/api/label/label'
|
|
import boxTitle from '../components/boxTitle.vue'
|
|
export default {
|
data() {
|
return {
|
items: [],
|
query: {
|
parentId: 0
|
},
|
data: [],
|
loading: true,
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0
|
},
|
option: {
|
span: 4,
|
data: []
|
},
|
}
|
},
|
|
components: {
|
boxTitle
|
},
|
|
mounted() {
|
this.onLoad()
|
},
|
|
methods: {
|
onLoad(page, params = {}) {
|
this.loading = true
|
getTreeList().then(res => {
|
const data = res.data.data
|
this.data = data
|
this.loading = false
|
// this.selectionClear();
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.m10 {
|
margin: 10px;
|
}
|
|
.m20 {
|
margin: 20px;
|
}
|
|
.m-t-28 {
|
margin-top: 28px;
|
}
|
|
.grid-container {
|
display: flex;
|
flex-wrap: wrap;
|
font-size: 15px;
|
color: #fff;
|
}
|
|
.grid-container>div {
|
margin: 18px;
|
padding: 10px 8px;
|
display: flex;
|
flex-direction: column;
|
width: calc(100% / 6 - 36px);
|
background-color: #429FFF;
|
text-align: center;
|
border-radius: 10px;
|
box-sizing: border-box;
|
|
&>div {
|
font-size: 14px;
|
line-height: 22px;
|
text-align: center;
|
}
|
|
&>div:first-child {
|
font-size: 18px;
|
font-weight: bold;
|
}
|
}
|
|
/* .el-row {
|
margin-bottom: 20px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.el-col {
|
border-radius: 4px;
|
}
|
|
.bg-purple-dark {
|
background: #99a9bf;
|
}
|
|
.bg-purple {
|
background: #d3dce6;
|
}
|
|
.bg-purple-light {
|
background: #e5e9f2;
|
}
|
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
|
.row-bg {
|
padding: 10px 0;
|
background-color: #f9fafc;
|
} */
|
</style>
|
