From 392765e4c6823745345fe349e5422e1b98ca8f09 Mon Sep 17 00:00:00 2001
From: zhangnuoyan <9354631+zhangnuoyan@user.noreply.gitee.com>
Date: 星期六, 24 八月 2024 19:31:03 +0800
Subject: [PATCH] feat: 增加主题配色、增加组件
---
src/views/oneThree/comprehensive/index.vue | 177 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 163 insertions(+), 14 deletions(-)
diff --git a/src/views/oneThree/comprehensive/index.vue b/src/views/oneThree/comprehensive/index.vue
index f8c8eb8..a36e2be 100644
--- a/src/views/oneThree/comprehensive/index.vue
+++ b/src/views/oneThree/comprehensive/index.vue
@@ -8,42 +8,126 @@
:icon="item.icon"
:unit="item.unit"
:metering="item.metering"
- :colorBg="item.colorBg"
+ :color-bg="item.colorBg"
></the-icon-card>
</div>
- <div></div>
- <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>
+ <div class="main">
<the-box-card
v-for="(item, index) in list"
+ :id="item.id"
:key="item.id"
:icon="item.icon"
:title="item.title"
- :unitTitle="item.unitTitle"
- :unitNum="item.unitNum"
+ :unit-title="item.unitTitle"
+ :unit-num="item.unitNum"
:unit="item.unit"
- :id="item.id"
:name="item.name"
- :notName="item.notName"
+ :not-name="item.notName"
:hire="item.hire"
:vacant="item.vacant"
- :selfOccupation="item.selfOccupation"
+ :self-occupation="item.selfOccupation"
:service="item.service"
:closes="item.closes"
@handleClick="handleClick(item)"
@handleDetails="handleDetails(item)"
></the-box-card>
- </div>
- <div>
- <a-pagination :total="50" show-total show-jumper show-page-size />
+ <a-pagination :total="50" show-total show-jumper show-page-size style="margin-top: 8px" />
</div>
</div>
</template>
<script lang="ts" setup name="comprehensive">
-import { useTheme } from "@/hooks/useTheme";
import { Svg } from "@easyfe/admin-component";
-
-const { themeModeOptions, currentThemeMode, handleThemeChange } = useTheme();
+const changeData = reactive([
+ {
+ name: "1澶�",
+ value: "1"
+ },
+ {
+ name: "2澶�",
+ value: "2"
+ },
+ {
+ name: "3澶�",
+ value: "3"
+ },
+ {
+ name: "鑷畾涔�",
+ value: "custom"
+ }
+]);
+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: "瀹炴湁鎴垮眿",
@@ -113,6 +197,42 @@
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);
};
@@ -123,8 +243,37 @@
<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;
+ }
.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>
--
Gitblit v1.8.0