<template>
|
<div id="" >
|
<div id="" v-for="(item,index) in data" style="padding: 10px 50px 50px 20px;">
|
<div id="" v-if="index == 0">
|
<el-row>
|
<el-col :span="24">
|
<div class="grid-content bg-purple-dark">
|
<el-tag effect="dark" type="danger">{{item.name}}</el-tag>
|
</div>
|
</el-col>
|
</el-row>
|
|
<div id="" v-for="(item1,index1) in item.children">
|
<el-row>
|
<el-col :span="24">
|
<div class="grid-content bg-purple-dark">
|
<el-divider content-position="left" >{{item1.name}}</el-divider>
|
</div>
|
</el-col>
|
</el-row>
|
<div id="" class="grid-container" v-if="item1.children">
|
<div id="" v-for="(item2,index2) in item1.children ">
|
<div id="">
|
{{item2.count}}
|
</div>
|
<div id="">
|
{{item2.name}}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div id="" v-if="index == 1">
|
<div id="">
|
<el-divider content-position="left"></el-divider>
|
</div>
|
<el-row>
|
<el-col :span="24">
|
<div class="grid-content bg-purple-dark">
|
<el-tag effect="dark" type="danger">{{item.name}}</el-tag>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<div id="" class="grid-container">
|
<div id="" v-for="(item1,index1) in item.children">
|
<div id="">
|
{{item1.count}}
|
</div>
|
<div id="">
|
{{item1.name}}
|
</div>
|
</div>
|
|
</div>
|
</el-row>
|
</div>
|
|
|
|
<div id="" v-if="index == 2">
|
<div id="">
|
<el-divider content-position="left"></el-divider>
|
</div>
|
<el-row>
|
<el-col :span="24">
|
<div class="grid-content bg-purple-dark">
|
<el-tag effect="dark" type="danger">{{item.name}}</el-tag>
|
</div>
|
</el-col>
|
</el-row>
|
|
<div id="" class="grid-container">
|
<div id="">
|
<div id="">
|
{{item.count}}
|
</div>
|
<div id="">
|
{{item.name}}
|
</div>
|
</div>
|
</div>
|
|
|
</div>
|
|
</div>
|
</div>
|
|
</template>
|
<script>
|
import {
|
getTreeList,
|
add,
|
update,
|
remove
|
} from '@/api/label/label'
|
export default {
|
data() {
|
return {
|
items: [],
|
query: {
|
parentId: 0
|
},
|
data: [],
|
loading: true,
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0
|
},
|
option: {
|
span: 4,
|
data: []
|
},
|
}
|
},
|
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>
|
.grid-container {
|
display: grid;
|
grid-template-columns: auto auto auto auto auto auto auto auto;
|
grid-gap: 10px;
|
/* background-color: #2196F3; */
|
padding: 10px;
|
font-size: 15px;
|
}
|
|
.grid-container>div {
|
/* background-color: rgba(255, 255, 255, 0.8); */
|
/* border: 1px solid black; */
|
background-color: #2196F3;
|
text-align: center;
|
height: 80px;
|
width: 160px;
|
line-height: 40px;
|
/* font-size: 30px; */
|
border-radius: 10px;
|
}
|
|
/* .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>
|
