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/styles/theme.scss | 31 ++
src/views/components/the-a-change/index.vue | 25 ++
src/views/oneThree/comprehensive/index.vue | 200 +++++++++++--------
src/views/components/the-box-card/index.vue | 2
src/views/oneThree/comprehensive/index1.vue | 247 ++++++++++++++++++++++++
src/views/components/the-a-search/index.vue | 27 ++
src/views/components/the-a-cascader/index.vue | 29 ++
7 files changed, 467 insertions(+), 94 deletions(-)
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index f8f8a41..242e058 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -2,17 +2,18 @@
--color-black: #000000;
--color-border: #333335;
--color-bg-1: #17171a;
- --color-bg-2: #1f2935;
- --color-bg-3: #2a2a2b;
+ --color-bg-2: #0f2a58;
+ --color-bg-popup: #0f2a58;
+ --color-bg-3: rgba(255, 255, 255, 0.1);
--color-bg-4: #313132;
- --color-bg-5: #373739;
+ --color-bg-5: #1057fd;
--color-bg-white: #f6f6f6;
--color-text-1: rgba(255, 255, 255, 0.9);
--color-text-2: rgba(255, 255, 255, 0.7);
--color-text-3: rgba(255, 255, 255, 0.5);
--color-text-4: rgba(255, 255, 255, 0.3);
--color-fill-1: rgba(255, 255, 255, 0.04);
- --color-fill-2: rgba(255, 255, 255, 0.08);
+ --color-fill-2: #0d2448;
--color-fill-3: rgba(255, 255, 255, 0.12);
--color-fill-4: rgba(255, 255, 255, 0.16);
--color-border-1: #2e2e30;
@@ -46,7 +47,7 @@
--color-tooltip-bg: #373739;
--color-spin-layer-bg: rgba(51, 51, 51, 0.6);
--color-menu-dark-bg: #232324;
- --color-menu-light-bg: linear-gradient(180deg, #1d4765 0%, #425365 100%);
+ --color-menu-light-bg: #0f2a58;
--color-menu-dark-hover: var(--color-fill-2);
--color-mask-bg: rgba(23, 23, 26, 0.6);
--red-1: 77, 0, 10;
@@ -194,7 +195,7 @@
--primary-3: var(--arcoblue-3);
--primary-4: var(--arcoblue-4);
--primary-5: var(--arcoblue-5);
- --primary-6: var(--arcoblue-6);
+ --primary-6: #fff;
--primary-7: var(--arcoblue-7);
--primary-8: var(--arcoblue-8);
--primary-9: var(--arcoblue-9);
@@ -240,8 +241,20 @@
--warning-9: var(--orange-9);
--warning-10: var(--orange-10);
.arco-card {
- background: rgba(0, 0, 10, 0.8);
- border: 1px solid #0e9cff;
- box-shadow: inset 0px 0px 87px 0px rgba(1, 194, 255, 0.4);
+ border: none;
+ }
+ .card-bg-1 {
+ background: #0d2448;
+ }
+ .arco-timepicker-container {
+ background-color: var(--color-bg-1);
+ }
+ .arco-btn-primary,
+ .arco-btn-primary[type="button"],
+ .arco-btn-primary[type="submit"] {
+ background-color: #1057fd;
+ &:hover {
+ opacity: 0.9;
+ }
}
}
diff --git a/src/views/components/the-a-cascader/index.vue b/src/views/components/the-a-cascader/index.vue
new file mode 100644
index 0000000..0c3658b
--- /dev/null
+++ b/src/views/components/the-a-cascader/index.vue
@@ -0,0 +1,29 @@
+<template>
+ <div>
+ <p>{{ title }}</p>
+ <a-cascader :options="data" :style="{ width: '250px' }" :placeholder="placeholder" />
+ </div>
+</template>
+<script lang="ts" setup name="TheACascader">
+const props = withDefaults(
+ defineProps<{
+ placeholder?: string;
+ title?: string;
+ data?: Array<any>;
+ }>(),
+ {
+ data: () => [],
+ placeholder: "",
+ title: ""
+ }
+);
+</script>
+<style lang="scss" scoped>
+div {
+ display: flex;
+ align-items: center;
+ > p {
+ margin-right: 10px;
+ }
+}
+</style>
diff --git a/src/views/components/the-a-change/index.vue b/src/views/components/the-a-change/index.vue
new file mode 100644
index 0000000..90b523d
--- /dev/null
+++ b/src/views/components/the-a-change/index.vue
@@ -0,0 +1,25 @@
+<template>
+ <a-radio-group type="button">
+ <a-radio v-for="item in data" :key="item.value" :value="item.value">{{ item.name }}</a-radio>
+ </a-radio-group>
+ {{ defaultData }}
+</template>
+<script lang="ts" setup name="TheAChange">
+const props = withDefaults(
+ defineProps<{
+ data?: Array<any>;
+ }>(),
+ {
+ data: () => []
+ }
+);
+</script>
+<style lang="scss" scoped>
+div {
+ display: flex;
+ align-items: center;
+ > p {
+ margin-right: 10px;
+ }
+}
+</style>
diff --git a/src/views/components/the-a-search/index.vue b/src/views/components/the-a-search/index.vue
new file mode 100644
index 0000000..2b05158
--- /dev/null
+++ b/src/views/components/the-a-search/index.vue
@@ -0,0 +1,27 @@
+<template>
+ <div>
+ <p>{{ title }}</p>
+ <a-input-search :style="{ width: '250px' }" :placeholder="placeholder" />
+ </div>
+</template>
+<script lang="ts" setup name="TheASearch">
+const props = withDefaults(
+ defineProps<{
+ title?: string;
+ placeholder?: string;
+ }>(),
+ {
+ placeholder: "",
+ title: ""
+ }
+);
+</script>
+<style lang="scss" scoped>
+div {
+ display: flex;
+ align-items: center;
+ > p {
+ margin-right: 10px;
+ }
+}
+</style>
diff --git a/src/views/components/the-box-card/index.vue b/src/views/components/the-box-card/index.vue
index 9fc2dc9..ba6ef04 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">
+ <a-card class="card-box card-bg-1">
<div class="card-title">
<div class="title-left">
<icon-home />
diff --git a/src/views/oneThree/comprehensive/index.vue b/src/views/oneThree/comprehensive/index.vue
index eda980c..a36e2be 100644
--- a/src/views/oneThree/comprehensive/index.vue
+++ b/src/views/oneThree/comprehensive/index.vue
@@ -8,82 +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-card class="card-box">
- <the-img-card></the-img-card>
- <div class="card-box-right">
- <div>
- <a-space>
- <a-button type="primary" size="mini">涓婅</a-button>
- <a-button type="primary" status="danger" size="mini">娑夋瘨</a-button>
- </a-space>
- </div>
-
- <div>
- <a-space>
- <icon-book />
- <icon-bar-chart />
- </a-space>
- </div>
- </div>
- </a-card>
- </div>
- <div>
- <the-a-table
- :columns="columns"
- :data="data"
- :pagination="false"
- :checkedValue="checkedValue"
- :colOpenShow="true"
- :showSelection="false"
- @selTableCol="selTableCol"
- >
- <template #index="{ record, rowIndex, column }">
- {{ rowIndex + 1 }}
- </template>
- <template #action="{ record, rowIndex, column }">
- <a-button type="text" size="small">鏌ョ湅</a-button>
- <a-button type="text" size="small">绠＄悊</a-button>
- <a-button type="text" size="small">鍏抽棴</a-button>
- </template>
- </the-a-table>
- </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: "瀹炴湁鎴垮眿",
@@ -189,36 +233,6 @@
// 鏇村鍒�...
];
-const checkedValue = ref<string[]>(["搴忓彿", "Name", "Email", "鎿嶄綔"]);
-
-// const onChange = (checkedValues: string[]) => {
-// console.log("checked = ", checkedValues);
-// checkedValue.value = checkedValues;
-// };
-
-const data = [
- {
- id: "1",
- name: "John Doe",
- age: 32,
- email: "john@example.com",
- address: "New York No. 1 Lake Park"
- },
- {
- id: "2",
- name: "Jane Smith",
- age: 28,
- email: "jane@example.com",
- address: "London No. 1 Lake Park"
- }
- // 鏇村鏁版嵁椤�...
-];
-
-const selTableCol = (val: any) => {
- checkedValue.value = val;
- console.log(val);
-};
-
const handleClick = (item: any) => {
console.log(item, 888);
};
@@ -229,7 +243,25 @@
<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;
}
diff --git a/src/views/oneThree/comprehensive/index1.vue b/src/views/oneThree/comprehensive/index1.vue
new file mode 100644
index 0000000..e500e1d
--- /dev/null
+++ b/src/views/oneThree/comprehensive/index1.vue
@@ -0,0 +1,247 @@
+<template>
+ <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></div>
+ <div>
+ <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>
+ <div>
+ <a-card class="card-box">
+ <the-img-card></the-img-card>
+ <div class="card-box-right">
+ <div>
+ <a-space>
+ <a-button type="primary" size="mini">涓婅</a-button>
+ <a-button type="primary" status="danger" size="mini">娑夋瘨</a-button>
+ </a-space>
+ </div>
+
+ <div>
+ <a-space>
+ <icon-book />
+ <icon-bar-chart />
+ </a-space>
+ </div>
+ </div>
+ </a-card>
+ </div>
+ <div>
+ <the-a-table
+ :columns="columns"
+ :data="data"
+ :pagination="false"
+ :checked-value="checkedValue"
+ :col-open-show="true"
+ :show-selection="false"
+ @selTableCol="selTableCol"
+ >
+ <template #index="{ record, rowIndex, column }">
+ {{ rowIndex + 1 }}
+ </template>
+ <template #action="{ record, rowIndex, column }">
+ <a-button type="text" size="small">鏌ョ湅</a-button>
+ <a-button type="text" size="small">绠＄悊</a-button>
+ <a-button type="text" size="small">鍏抽棴</a-button>
+ </template>
+ </the-a-table>
+ </div>
+ <div>
+ <a-pagination :total="50" show-total show-jumper show-page-size />
+ </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 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"
+ }
+]);
+const list = reactive([
+ {
+ icon: "",
+ title: "A灏忓尯",
+ unitTitle: "瀹炴湁灏忓尯",
+ unitNum: 32,
+ unit: "鏍�",
+ id: 1,
+ metering: 0,
+ name: 23,
+ notName: 54,
+ hire: 2,
+ vacant: 43,
+ 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 checkedValue = ref<string[]>(["搴忓彿", "Name", "Email", "鎿嶄綔"]);
+
+// const onChange = (checkedValues: string[]) => {
+// console.log("checked = ", checkedValues);
+// checkedValue.value = checkedValues;
+// };
+
+const data = [
+ {
+ id: "1",
+ name: "John Doe",
+ age: 32,
+ email: "john@example.com",
+ address: "New York No. 1 Lake Park"
+ },
+ {
+ id: "2",
+ name: "Jane Smith",
+ age: 28,
+ email: "jane@example.com",
+ address: "London No. 1 Lake Park"
+ }
+ // 鏇村鏁版嵁椤�...
+];
+
+const selTableCol = (val: any) => {
+ checkedValue.value = val;
+ console.log(val);
+};
+
+const handleClick = (item: any) => {
+ console.log(item, 888);
+};
+const handleDetails = (item: any) => {
+ console.log(item, 666);
+};
+</script>
+
+<style lang="scss" scoped>
+.comprehensive {
+ padding: 20px;
+ .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