From ab97e22763d1ece9f2c8061d81034657eb56ce4e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 20 Dec 2023 18:08:04 +0800
Subject: [PATCH] 标签统计调整
---
src/views/userHouse/components/boxTitle.vue | 101 +++++++++++++++++++++++++++++++++
src/views/userHouse/lable/statistics.vue | 44 +++++---------
2 files changed, 118 insertions(+), 27 deletions(-)
diff --git a/src/views/userHouse/components/boxTitle.vue b/src/views/userHouse/components/boxTitle.vue
new file mode 100644
index 0000000..9847017
--- /dev/null
+++ b/src/views/userHouse/components/boxTitle.vue
@@ -0,0 +1,101 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2023-04-11 18:14:04
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2023-12-20 18:02:20
+ * @FilePath: \jczz_web\src\views\userHouse\components\boxTitle.vue
+ * @Description:
+ *
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
+-->
+<template>
+ <div class="box-title-container flex j-c-s-b"
+ :style="{ margin: margin, height: boxHeight + 'px', lineHeight: boxHeight + 'px' }">
+ <div class="title-name">
+ <span>{{ title }}</span>
+ <slot name="icon"></slot>
+ </div>
+
+ <div class="region-more">
+ <div class="region">
+ <slot name="region"></slot>
+ </div>
+ <div class="more">
+ <slot name="more"></slot>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'boxTitle',
+ props: {
+ title: {
+ type: String,
+ default: ''
+ },
+ margin: {
+ type: String,
+ default: "0"
+ },
+ boxHeight: {
+ type: Number,
+ default: 36
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.flex {
+ display: flex;
+}
+
+.j-c-s-b {
+ justify-content: space-between;
+}
+
+.box-title-container {
+
+ .title-name {
+ display: flex;
+ align-items: center;
+ padding-left: 10px;
+ position: relative;
+ font-size: 20px;
+ font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+ font-weight: bold;
+ color: #333333;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 4px;
+ height: 18px;
+ background: #1890FF;
+ border-radius: 2px 2px 2px 2px;
+ opacity: 1;
+ transform: translate(0, -50%);
+ }
+ }
+
+ .region {
+ font-size: 20px;
+ font-family: Alibaba PuHuiTi-Bold, Alibaba PuHuiTi;
+ font-weight: bold;
+ color: #333333;
+ }
+
+ .more {
+ padding-right: 10px;
+ font-size: 15px;
+ font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+ font-weight: 400;
+ color: #1890FF;
+ cursor: pointer;
+ }
+}
+</style>
diff --git a/src/views/userHouse/lable/statistics.vue b/src/views/userHouse/lable/statistics.vue
index d859686..8f7e5cd 100644
--- a/src/views/userHouse/lable/statistics.vue
+++ b/src/views/userHouse/lable/statistics.vue
@@ -3,13 +3,7 @@
<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>
+ <box-title class="m10" :title="item.name"></box-title>
<div v-for="(item1, childIndex) in item.children" :key="childIndex">
<div class="m20 m-t-28 grid-content bg-purple-dark">
@@ -30,13 +24,7 @@
</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>
+ <box-title class="m10" :title="item.name"></box-title>
<div class="grid-container">
<div v-for="(item1, childIndex) in item.children" :key="childIndex">
@@ -51,13 +39,7 @@
</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>
+ <box-title class="m10" :title="item.name"></box-title>
<div class="grid-container">
<div>
@@ -82,6 +64,9 @@
update,
remove
} from '@/api/label/label'
+
+import boxTitle from '../components/boxTitle.vue'
+
export default {
data () {
return {
@@ -102,9 +87,13 @@
},
}
},
+
+ components: { boxTitle },
+
mounted () {
this.onLoad()
},
+
methods: {
onLoad (page, params = {}) {
this.loading = true
@@ -140,23 +129,24 @@
}
.grid-container>div {
- margin: 10px;
- padding: 12px 8px;
+ margin: 18px;
+ padding: 10px 8px;
display: flex;
flex-direction: column;
- width: calc(100% / 6 - 20px);
- background-color: #097FFE;
+ width: calc(100% / 6 - 36px);
+ background-color: #429FFF;
text-align: center;
border-radius: 10px;
box-sizing: border-box;
&>div {
- line-height: 24px;
+ font-size: 14px;
+ line-height: 22px;
text-align: center;
}
&>div:first-child {
- font-size: 20px;
+ font-size: 18px;
font-weight: bold;
}
}
--
Gitblit v1.9.3