From 3c63e777b92e1cc54ae84e94074965acd03f8c4d Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Tue, 21 Nov 2023 11:28:04 +0800
Subject: [PATCH] 标签代码优化
---
src/views/userHouse/lable/statistics.vue | 175 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 133 insertions(+), 42 deletions(-)
diff --git a/src/views/userHouse/lable/statistics.vue b/src/views/userHouse/lable/statistics.vue
index 41f6706..43c88df 100644
--- a/src/views/userHouse/lable/statistics.vue
+++ b/src/views/userHouse/lable/statistics.vue
@@ -1,71 +1,162 @@
<template>
- <!-- <avue-data-box :option="option"></avue-data-box> -->
+ <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 v-for="item in items" :key="item.id"> -->
- <div id="">
-
- <div id="" v-for="(item,index) in 10">
- <el-row>
- <el-col :span="24">
- <div class="grid-content bg-purple-dark">
- <el-tag type="danger">标签五</el-tag>
+ <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="">
+ {{index2}}
+ </div>
+ <div id="">
+ {{item2.name}}
+ </div>
+ </div>
</div>
- </el-col>
- </el-row>
-
- <el-row>
- <el-col :span="24">
- <div class="grid-content bg-purple-dark">
- <el-divider content-position="left">少年包青天</el-divider>
- </div>
- </el-col>
- </el-row>
-
- <!-- <el-row :gutter="20">
- <el-col :span="6">
- <div class="grid-content bg-purple"></div>
- </el-col>
- <el-col :span="6">
- <div class="grid-content bg-purple"></div>
- </el-col>
- <el-col :span="6">
- <div class="grid-content bg-purple"></div>
- </el-col>
- <el-col :span="6">
- <div class="grid-content bg-purple"></div>
- </el-col>
- </el-row> -->
-
- <div id="" v-for="(item,index) in 10" style="display: flex;">
- <div id="">
- {{index}}
</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="">
+ {{index1}}
+ </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="">
+ {{index}}
+ </div>
+ <div id="">
+ {{item.name}}
+ </div>
+ </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>
- /* .el-row {
+ .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 {
--
Gitblit v1.9.3