From 57b66478e7e335379435b31c20da4619bd1411f5 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期一, 26 八月 2024 18:47:46 +0800
Subject: [PATCH] fix: 修改部分样式
---
src/views/oneThree/comprehensive/index.vue | 300 +++++++++++++++++++++++++++++++----------------------------
1 files changed, 156 insertions(+), 144 deletions(-)
diff --git a/src/views/oneThree/comprehensive/index.vue b/src/views/oneThree/comprehensive/index.vue
index eda980c..258abbf 100644
--- a/src/views/oneThree/comprehensive/index.vue
+++ b/src/views/oneThree/comprehensive/index.vue
@@ -1,89 +1,140 @@
<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"
- :colorBg="item.colorBg"
- ></the-icon-card>
- </div>
- <div></div>
<div>
- <the-box-card
- v-for="(item, index) in list"
- :key="item.id"
- :icon="item.icon"
- :title="item.title"
- :unitTitle="item.unitTitle"
- :unitNum="item.unitNum"
- :unit="item.unit"
- :id="item.id"
- :name="item.name"
- :notName="item.notName"
- :hire="item.hire"
- :vacant="item.vacant"
- :selfOccupation="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 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>
- </a-card>
+ <div>
+ <a-button>
+ <template #icon>
+ <icon-refresh />
+ </template>
+ <template #default>閲嶇疆</template>
+ </a-button>
+ </div>
+ </div>
</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 />
+
+ <div class="main">
+ <!-- <a-scrollbar class="box-scrollbar" style="height: calc(100vh - 300px) overflow: auto"> -->
+ <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" />
+ <!-- </a-scrollbar> -->
</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: "瀹炴湁鎴垮眿",
@@ -135,8 +186,8 @@
colorBg: "#9747FF"
}
]);
-const list = reactive([
- {
+const list = reactive(
+ new Array(5).fill({
icon: "",
title: "A灏忓尯",
unitTitle: "瀹炴湁灏忓尯",
@@ -151,73 +202,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 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,9 +215,35 @@
<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;
+ width: 100%;
}
.card-box {
width: 391px;
--
Gitblit v1.8.0