From 523e69a7f649b513aa8d3788c79d52fc26c894d2 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期三, 21 八月 2024 11:55:33 +0800
Subject: [PATCH] fix: 增加组件功能
---
src/views/components/the-box-card/index.vue | 122 ++++++++++++++++++++++++++++++++--------
1 files changed, 97 insertions(+), 25 deletions(-)
diff --git a/src/views/components/the-box-card/index.vue b/src/views/components/the-box-card/index.vue
index 0e28087..d6fa661 100644
--- a/src/views/components/the-box-card/index.vue
+++ b/src/views/components/the-box-card/index.vue
@@ -4,34 +4,59 @@
<div class="card-title">
<div class="title-left">
<icon-home />
- <div style="margin-left: 10px">A灏忓尯</div>
+ <div style="margin-left: 10px">{{ title }}</div>
</div>
- <div class="card-more">璇︽儏 ></div>
+ <div class="card-more" @click="handleDetails">璇︽儏 ></div>
</div>
<div class="card-content">
- <div :span="8" class="card-box-col">
+ <div :span="8" class="card-box-col" @click="handleClick">
<div class="card-box-title">
- <div>瀹炵敤浜哄彛</div>
+ <div>{{ unitTitle }}</div>
<div>></div>
</div>
- <div>2323 浜�</div>
+ <div class="title-people">
+ {{ unitNum }} <span>{{ unit }}</span>
+ </div>
</div>
- <div :span="8" class="card-box-col">
+ <div :span="8" class="card-box-col" @click="handleClick">
<div class="card-box-title">
- <div>瀹炵敤浜哄彛</div>
+ <div>{{ unitTitle }}</div>
<div>></div>
</div>
- <div>2323 浜�</div>
+ <div class="title-people">
+ {{ unitNum }} <span>{{ unit }}</span>
+ </div>
</div>
- <div :span="8" class="card-box-col">
+ <div :span="8" class="card-box-col" @click="handleClick">
<div class="card-box-title">
- <div>瀹炵敤浜哄彛</div>
+ <div>{{ unitTitle }}</div>
<div>></div>
</div>
- <div>2323 浜�</div>
+ <div class="title-people">
+ {{ unitNum }} <span>{{ unit }}</span>
+ </div>
</div>
</div>
- <div class="card-content"></div>
+ <div class="card-content-footer">
+ <div class="card-footer-box">
+ <div><span>瀹炲悕</span> | <span>鏈疄鍚�</span>锛�</div>
+ <div>
+ <span>{{ name }}</span> | <span>{{ notName }}</span>
+ </div>
+ </div>
+ <div class="card-footer-box">
+ <div><span>鍑虹</span> | <span>绌虹疆</span> | <span>鑷綇</span>锛�</div>
+ <div>
+ <span>{{ hire }}</span> | <span>{{ vacant }}</span> | <span>{{ selfOccupation }}</span>
+ </div>
+ </div>
+ <div class="card-footer-box">
+ <div><span>鍦ㄤ笟</span> | <span>鍏抽棴</span>锛�</div>
+ <div>
+ <span>{{ service }}</span> | <span>{{ closes }}</span>
+ </div>
+ </div>
+ </div>
</a-card>
</div>
</template>
@@ -44,16 +69,45 @@
defineProps<{
icon?: string;
title?: string;
+ unitTitle?: string;
+ unitNum?: number;
unit?: string;
- metering?: number;
+ name?: number;
+ notName?: number;
+ hire?: number;
+ vacant?: number;
+ selfOccupation?: number;
+ service?: number;
+ closes?: number;
}>(),
{
- icon: "",
- title: "",
- unit: "",
- metering: 0
+ icon: "", //鍥炬爣
+ title: "", //鏍囬
+ unitTitle: "", //鍗曚綅鏍囬
+ unitNum: 0, //鍗曚綅鏁伴噺
+ unit: "", //鍗曚綅
+ name: 0, //瀹炲悕
+ notName: 0, //鏈疄鍚�
+ hire: 0, //鍑虹
+ vacant: 0, //绌虹疆
+ selfOccupation: 0, //鑷綇
+ service: 0, //鍦ㄤ笟
+ closes: 0 //鍏抽棴
}
);
+const data = reactive({
+ icon: "",
+ title: "",
+ unitTitle: "",
+ unit: "",
+ name: "",
+ notName: "",
+ hire: 0,
+ vacant: 0,
+ selfOccupation: 0,
+ service: 0,
+ closes: 0
+});
// const dateType = ref("hour");
// const emits = defineEmits<{
@@ -63,6 +117,16 @@
// function initChart(v: any) {
// emits("init", v);
// }
+const emits = defineEmits<{
+ (e: "handleDetails", data: object): void;
+ (e: "handleClick", data: object): void;
+}>();
+const handleDetails = (item: any) => {
+ emits("handleDetails", item);
+};
+const handleClick = (item: any) => {
+ emits("handleClick", item);
+};
</script>
<style lang="scss" scoped>
.box-card-dark {
@@ -105,14 +169,28 @@
height: 70px;
border-radius: 5px;
padding: 10px;
- line-height: 24px;
+ line-height: 26px;
.card-box-title {
display: flex;
justify-content: space-between;
align-items: center;
- color: var(--color-text-3);
+ color: var(--color-text-1);
font-size: 14px;
}
+ .title-people {
+ color: #ffbd43;
+ font-size: 14px;
+ }
+ }
+ }
+ .card-content-footer {
+ margin-top: 10px;
+ line-height: 24px;
+ .card-footer-box {
+ display: flex;
+ align-items: center;
+ color: var(--color-text-1);
+ font-size: 14px;
}
}
@@ -124,12 +202,6 @@
// display: flex;
// align-items: center;
// justify-content: center;
- }
- .card-content {
- // margin-left: 20px;
- // line-height: 22px;
- // color: var(--color-text-1);
- // font-size: 12px;
}
}
</style>
--
Gitblit v1.8.0