From 54f5cd85e43bf92266a2617994642e1b8aa5bcb5 Mon Sep 17 00:00:00 2001
From: zhangnuoyan <9354631+zhangnuoyan@user.noreply.gitee.com>
Date: 星期日, 25 八月 2024 10:58:14 +0800
Subject: [PATCH] feat: 增加一些组件
---
src/styles/theme.scss | 7
src/views/oneThree/comprehensive/index.vue | 90 ++++-------
src/views/components/the-box-card/index.vue | 2
src/views/components/the-img-card/index.vue | 50 +-----
src/views/oneThree/actualPopulation/index.vue | 240 +++++++++++++++++++++++++++++
src/views/components/the-a-tabs/index.vue | 44 +++++
6 files changed, 329 insertions(+), 104 deletions(-)
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 242e058..4232e07 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -243,7 +243,7 @@
.arco-card {
border: none;
}
- .card-bg-1 {
+ .card-bg-custom {
background: #0d2448;
}
.arco-timepicker-container {
@@ -256,5 +256,10 @@
&:hover {
opacity: 0.9;
}
+ &.arco-btn-status-danger {
+ color: #fff;
+ background-color: rgb(var(--danger-6));
+ border-color: transparent;
+ }
}
}
diff --git a/src/views/components/the-a-tabs/index.vue b/src/views/components/the-a-tabs/index.vue
new file mode 100644
index 0000000..8e501b0
--- /dev/null
+++ b/src/views/components/the-a-tabs/index.vue
@@ -0,0 +1,44 @@
+<template>
+ <div>
+ <p v-for="(item, key) in data" :key="key" :class="index === key ? 'active' : ''">{{ item }}</p>
+ </div>
+</template>
+<script lang="ts" setup name="TheATabs">
+const props = withDefaults(
+ defineProps<{
+ index: number;
+ data?: Array<any>;
+ }>(),
+ {
+ index: 0,
+ data: () => []
+ }
+);
+</script>
+<style lang="scss" scoped>
+div {
+ display: flex;
+ align-items: center;
+ padding-bottom: 1px;
+ border-bottom: 2px solid var(--color-bg-5);
+ > p {
+ margin-right: 10px;
+ width: 86px;
+ height: 38px;
+ font-size: 14px;
+ color: var(--color-text-1);
+ line-height: 38px;
+ text-align: center;
+ border-radius: 6px 6px 0px 0px;
+ background: var(--color-bg-2);
+ &.active {
+ background: #1057fd;
+ color: #fff;
+ }
+ cursor: pointer;
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+}
+</style>
diff --git a/src/views/components/the-box-card/index.vue b/src/views/components/the-box-card/index.vue
index ba6ef04..942099c 100644
--- a/src/views/components/the-box-card/index.vue
+++ b/src/views/components/the-box-card/index.vue
@@ -1,7 +1,7 @@
<template>
<!-- 灏忓崱鐗� -->
<div class="the-box-card" :class="currentThemeMode === 'dark' ? 'box-card-dark' : ''">
- <a-card class="card-box card-bg-1">
+ <a-card class="card-box card-bg-custom">
<div class="card-title">
<div class="title-left">
<icon-home />
diff --git a/src/views/components/the-img-card/index.vue b/src/views/components/the-img-card/index.vue
index da5365d..c67a013 100644
--- a/src/views/components/the-img-card/index.vue
+++ b/src/views/components/the-img-card/index.vue
@@ -3,38 +3,21 @@
<div class="the-img-card" :class="currentThemeMode === 'dark' ? 'card-img-dark' : ''">
<div class="img-box-card">
<div class="card-icon" :style="dynamicStyle">
- <a-image
- width="140"
- height="140"
- border-radius="14px"
- :preview="false"
- src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
- />
+ <a-image width="140" height="140" border-radius="14px" :preview="false" :src="icon" />
</div>
<div class="card-content">
<div class="card-content-top">
<div class="card-name">
- <span class="name">寮犱笁</span>
+ <span class="name">{{ title }}</span>
<icon-woman v-if="sex && sex === 'woman'" />
<icon-man v-if="!sex && sex === 'woman'" />
</div>
- <div @click="handleChange" class="card-detail">璇︽儏 ></div>
+ <div class="card-detail" @click="handleChange">璇︽儏 ></div>
</div>
- <div>
- <span>浜哄憳缂栧彿</span>锛�
- <span>H324343</span>
- </div>
- <div>
- <span>鍑虹幇澶╂暟</span>锛�
- <span>2澶�</span>
- </div>
- <div>
- <span>灞呬綇鍦板潃</span>锛�
- <span>缁忔祹蹇�熺瓑绾ц�冭瘯</span>
- </div>
- <div>
- <span>韬唤璇佸彿</span>锛�
- <span>3673672627722</span>
+ <div v-for="(content, key) in contents" :key="key">
+ <span>{{ content.key }}</span
+ >锛�
+ <span>{{ content.value }}</span>
</div>
</div>
</div>
@@ -49,29 +32,14 @@
defineProps<{
icon?: string;
title?: string;
- unit?: string;
- metering?: number;
- colorBg?: string;
- sex?: boolean;
- isIcon?: boolean;
+ contents?: Array<any>;
}>(),
{
icon: "",
title: "",
- unit: "",
- metering: 0,
- colorBg: "#fff",
- sex: true,
- isIcon: true
+ contents: () => []
}
);
-
-const colorBg = computed(() => {
- return props.colorBg;
-});
-const dynamicStyle = {
- backgroundColor: colorBg.value // 鍔ㄦ�佽儗鏅壊
-};
const emits = defineEmits<{
(e: "handleChange", data: object): void;
diff --git a/src/views/oneThree/actualPopulation/index.vue b/src/views/oneThree/actualPopulation/index.vue
index 01508db..7f955bc 100644
--- a/src/views/oneThree/actualPopulation/index.vue
+++ b/src/views/oneThree/actualPopulation/index.vue
@@ -1,7 +1,241 @@
<template>
- <div class="actualPopulation">瀹炴湁浜哄彛</div>
+ <div class="comprehensive">
+ <div class="top-title">
+ <the-icon-card
+ v-for="(item, index) in dataList"
+ :key="index"
+ :title="item.title"
+ :icon="item.icon"
+ :unit="item.unit"
+ :metering="item.metering"
+ :color-bg="item.colorBg"
+ ></the-icon-card>
+ </div>
+ <div class="menus">
+ <the-a-cascader :data="cascaderData" placeholder="璇烽�夋嫨" title="鍖哄煙"></the-a-cascader>
+ <div><the-a-search placeholder="璇疯緭鍏�" title="鎼滅储"></the-a-search></div>
+ <div><the-a-change :data="changeData" default-value="custom"></the-a-change></div>
+ <div><a-time-picker type="time-range" style="width: 250px" /></div>
+ <div>
+ <a-button type="primary">
+ <template #icon>
+ <icon-search />
+ </template>
+ <template #default>鎼滅储</template>
+ </a-button>
+ </div>
+ <div>
+ <a-button>
+ <template #icon>
+ <icon-refresh />
+ </template>
+ <template #default>閲嶇疆</template>
+ </a-button>
+ </div>
+ </div>
+ <the-a-tabs style="margin: 8px 0" :data="['娴佸姩浜哄彛', '瀹炴湁浜哄彛']" :index="0" />
+ <div class="main">
+ <div class="cards">
+ <a-card v-for="(item, key) in list" :key="key" class="card-box card-bg-custom">
+ <the-img-card :title="item.title" :icon="item.icon" :contents="item.contents"></the-img-card>
+ <div class="card-box-right">
+ <div>
+ <a-space>
+ <a-button type="primary" size="mini">{{ item.tags[0] }}</a-button>
+ <a-button type="primary" status="danger" size="mini">{{ item.tags[1] }}</a-button>
+ </a-space>
+ </div>
+ <div>
+ <a-space>
+ <icon-book />
+ <icon-bar-chart />
+ </a-space>
+ </div>
+ </div>
+ </a-card>
+ </div>
+ <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
+ </div>
+ </div>
</template>
-<script lang="ts" setup name="actualPopulation"></script>
+<script lang="ts" setup name="comprehensive">
+import { Svg } from "@easyfe/admin-component";
+const list = reactive(
+ new Array(5).fill({
+ icon: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp",
+ title: "寮犱笁",
+ tags: ["涓婅", "娑夋瘨"],
+ contents: [
+ {
+ key: "浜哄憳缂栧彿",
+ value: "H324343"
+ },
+ {
+ key: "鍑虹幇澶╂暟",
+ value: "2澶�"
+ },
+ {
+ key: "灞呬綇鍦板潃",
+ value: "缁忔祹蹇�熺瓑绾ц�冭瘯"
+ },
+ {
+ key: "韬唤璇佸彿",
+ value: "3673672627722"
+ }
+ ]
+ })
+);
+const cascaderData = reactive([
+ {
+ value: "beijing",
+ label: "Beijing",
+ children: [
+ {
+ value: "chaoyang",
+ label: "ChaoYang",
+ children: [
+ {
+ value: "datunli",
+ label: "Datunli"
+ }
+ ]
+ },
+ {
+ value: "haidian",
+ label: "Haidian"
+ },
+ {
+ value: "dongcheng",
+ label: "Dongcheng"
+ },
+ {
+ value: "xicheng",
+ label: "Xicheng",
+ children: [
+ {
+ value: "jinrongjie",
+ label: "Jinrongjie"
+ },
+ {
+ value: "tianqiao",
+ label: "Tianqiao"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ value: "shanghai",
+ label: "Shanghai",
+ children: [
+ {
+ value: "huangpu",
+ label: "Huangpu"
+ }
+ ]
+ }
+]);
+const dataList = reactive([
+ {
+ title: "瀹炴湁鎴垮眿",
+ icon: "icon-house",
+ unit: "鏍�",
+ metering: 110,
+ colorBg: "#2e85ff"
+ },
+ {
+ title: "鑷富",
+ icon: "icon-people",
+ unit: "鏍�",
+ metering: 10,
+ colorBg: "#30C1A9"
+ },
+ {
+ title: "鍑虹",
+ icon: "icon-house",
+ unit: "鏍�",
+ metering: 220,
+ colorBg: "#E36B4D"
+ },
+ {
+ title: "瀹炴湁浜哄彛",
+ icon: "icon-people",
+ unit: "浜�",
+ metering: 420,
+ colorBg: "#2E85FF"
+ },
+ {
+ title: "娴佸姩浜哄憳",
+ icon: "icon-people",
+ unit: "浜�",
+ metering: 220,
+ colorBg: "#30C1A9"
+ },
+ {
+ title: "瀹炴湁鍗曚綅",
+ icon: "menu-house",
+ unit: "涓�",
+ metering: 220,
+ colorBg: "#FF4343"
+ },
+ {
+ title: "鍐嶄笟",
+ icon: "menu-house",
+ unit: "涓�",
+ metering: 220,
+ colorBg: "#9747FF"
+ }
+]);
-<style lang="scss" scoped></style>
+const handleClick = (item: any) => {
+ console.log(item, 888);
+};
+const handleDetails = (item: any) => {
+ console.log(item, 666);
+};
+</script>
+
+<style lang="scss" scoped>
+.comprehensive {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding: 20px;
+ .menus {
+ background: var(--color-bg-2);
+ margin-top: 8px;
+ padding: 14px 20px;
+ display: flex;
+ > div {
+ margin-left: 20px;
+ }
+ }
+ .main {
+ padding: 8px 20px;
+ background: var(--color-bg-2);
+ margin-top: 8px;
+ flex: 1;
+ .cards {
+ overflow: hidden;
+ > div {
+ float: left;
+ margin: 0 20px 20px 0;
+ }
+ }
+ }
+ .top-title {
+ display: flex;
+ }
+ .card-box {
+ width: 391px;
+ height: 202px;
+ border-radius: 5px;
+ }
+ .card-box-right {
+ margin-top: 10px;
+ display: flex;
+ justify-content: space-between;
+ }
+}
+</style>
diff --git a/src/views/oneThree/comprehensive/index.vue b/src/views/oneThree/comprehensive/index.vue
index a36e2be..7e80acf 100644
--- a/src/views/oneThree/comprehensive/index.vue
+++ b/src/views/oneThree/comprehensive/index.vue
@@ -34,25 +34,27 @@
</div>
</div>
<div class="main">
- <the-box-card
- v-for="(item, index) in list"
- :id="item.id"
- :key="item.id"
- :icon="item.icon"
- :title="item.title"
- :unit-title="item.unitTitle"
- :unit-num="item.unitNum"
- :unit="item.unit"
- :name="item.name"
- :not-name="item.notName"
- :hire="item.hire"
- :vacant="item.vacant"
- :self-occupation="item.selfOccupation"
- :service="item.service"
- :closes="item.closes"
- @handleClick="handleClick(item)"
- @handleDetails="handleDetails(item)"
- ></the-box-card>
+ <div class="cards">
+ <the-box-card
+ v-for="(item, index) in list"
+ :id="item.id"
+ :key="item.id"
+ :icon="item.icon"
+ :title="item.title"
+ :unit-title="item.unitTitle"
+ :unit-num="item.unitNum"
+ :unit="item.unit"
+ :name="item.name"
+ :not-name="item.notName"
+ :hire="item.hire"
+ :vacant="item.vacant"
+ :self-occupation="item.selfOccupation"
+ :service="item.service"
+ :closes="item.closes"
+ @handleClick="handleClick(item)"
+ @handleDetails="handleDetails(item)"
+ ></the-box-card>
+ </div>
<a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
</div>
</div>
@@ -179,8 +181,8 @@
colorBg: "#9747FF"
}
]);
-const list = reactive([
- {
+const list = reactive(
+ new Array(5).fill({
icon: "",
title: "A灏忓尯",
unitTitle: "瀹炴湁灏忓尯",
@@ -195,43 +197,8 @@
selfOccupation: 45,
service: 23,
closes: 54
- }
-]);
-
-//鍒楄〃
-const columns = [
- {
- title: "搴忓彿",
- key: "1",
- dataIndex: "index",
- slotName: "index",
- width: 80
- },
- {
- title: "Name",
- dataIndex: "name",
- key: "2"
- },
- {
- title: "Address",
- dataIndex: "address",
- key: "3"
- },
- {
- title: "Email",
-
- dataIndex: "email",
- key: "4"
- },
- {
- title: "鎿嶄綔",
- key: "5",
- slotName: "action",
- width: 200
- }
-
- // 鏇村鍒�...
-];
+ })
+);
const handleClick = (item: any) => {
console.log(item, 888);
@@ -261,6 +228,13 @@
background: var(--color-bg-2);
margin-top: 8px;
flex: 1;
+ .cards {
+ overflow: hidden;
+ > div {
+ float: left;
+ margin: 0 20px 20px 0;
+ }
+ }
}
.top-title {
display: flex;
--
Gitblit v1.8.0