From 0e6a3ed3eb4b30b3f22db3ecf2f3c98621542a4c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 18 Dec 2023 19:11:22 +0800
Subject: [PATCH] 标签管理样式调整
---
src/views/userHouse/lable/statistics.vue | 282 +++++++++++++++++++++++++++++---------------------------
1 files changed, 145 insertions(+), 137 deletions(-)
diff --git a/src/views/userHouse/lable/statistics.vue b/src/views/userHouse/lable/statistics.vue
index b8c077f..9d4e155 100644
--- a/src/views/userHouse/lable/statistics.vue
+++ b/src/views/userHouse/lable/statistics.vue
@@ -1,162 +1,170 @@
<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>
+ <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">
+ <div class="m10 grid-content bg-purple-dark">
+ <el-tag effect="dark" type="danger" color="red">
+ <span style="display: inline-block; min-width: 60px;">
+ {{ item.name }}
+ </span>
+ </el-tag>
+ </div>
- <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 v-for="(item1, childIndex) in item.children" :key="childIndex">
+ <div class="m20 m-t-28 grid-content bg-purple-dark">
+ <el-divider content-position="left">{{ item1.name }}</el-divider>
+ </div>
+
+ <div class="grid-container" v-if="item1.children">
+ <div v-for="(item2, childChildIndex) in item1.children" :key="childChildIndex">
+ <div>
+ {{ item2.name }}
+ </div>
+ <div>
+ {{ item2.count }}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div v-if="index == 1">
+ <div class="m10 grid-content bg-purple-dark">
+ <el-tag effect="dark" type="danger" color="red">
+ <span style="display: inline-block; min-width: 60px;">
+ {{ item.name }}
+ </span>
+ </el-tag>
+ </div>
+
+ <div class="grid-container">
+ <div v-for="(item1, childIndex) in item.children" :key="childIndex">
+ <div>
+ {{ item1.name }}
+ </div>
+
+ <div>
+ {{ item1.count }}
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ <div v-if="index == 2">
+ <div class="m10 grid-content bg-purple-dark">
+ <el-tag effect="dark" type="danger" color="red">
+ <span style="display: inline-block; min-width: 60px;">
+ {{ item.name }}
+ </span>
+ </el-tag>
+ </div>
+
+ <div class="grid-container">
+ <div>
+ <div>
+ {{ item.name }}
+ </div>
+ <div>
+ {{ item.count }}
+ </div>
+ </div>
+ </div>
+ </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>
-
+ </basic-container>
</template>
<script>
- import {
+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: []
- },
- }
+} 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()
+ 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();
- });
- },
+ 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;
+<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 {
- /* background-color: rgba(255, 255, 255, 0.8); */
- /* border: 1px solid black; */
- background-color: #2196F3;
+.grid-container>div {
+ margin: 10px;
+ padding: 0 8px;
+ display: flex;
+ width: calc(100% / 3 - 20px);
+ background-color: #097FFE;
text-align: center;
- height: 80px;
- width: 160px;
line-height: 40px;
- /* font-size: 30px; */
border-radius: 10px;
- }
+ box-sizing: border-box;
- /* .el-row {
+ &>div:first-child {
+ width: 0;
+ flex: 1;
+ text-align: left;
+ }
+
+ &>div:last-child {
+ width: 24px;
+ text-align: right;
+ }
+}
+
+/* .el-row {
margin-bottom: 20px;
&:last-child {
--
Gitblit v1.9.3