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/actualPopulation/index.vue | 307 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 304 insertions(+), 3 deletions(-)
diff --git a/src/views/oneThree/actualPopulation/index.vue b/src/views/oneThree/actualPopulation/index.vue
index 01508db..46b4716 100644
--- a/src/views/oneThree/actualPopulation/index.vue
+++ b/src/views/oneThree/actualPopulation/index.vue
@@ -1,7 +1,308 @@
<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="menus">
+ <div>
+ <the-a-select :data="['1鍙锋ゼ', '2鍙锋ゼ']" placeholder="璇烽�夋嫨" title="灞呬綇鍦板潃"></the-a-select>
+ </div>
+ <div><the-a-select :data="['鏄�', '鍚�']" placeholder="璇烽�夋嫨" title="瀹炲悕鐘舵��"></the-a-select></div>
+ <div>
+ <the-a-select :data="['閲嶇偣', '闈為噸鐐�']" placeholder="璇烽�夋嫨" title="閲嶇偣绫诲瀷"></the-a-select>
+ </div>
+ <div>
+ <the-a-select :data="['鍐滀笟', '闈炲啘涓�']" placeholder="璇烽�夋嫨" title="鎴风睄绫诲瀷"></the-a-select>
+ </div>
+ <div>
+ <the-a-select :data="['姝ｅ簭', '鍊掑簭']" placeholder="璇烽�夋嫨" title="鎺掑簭"></the-a-select>
+ </div>
+ <div class="right">
+ <div>
+ <icon-list size="20" />
+ </div>
+ <div class="active">
+ <icon-apps size="20" />
+ </div>
+ </div>
+ </div>
+ <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 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: "瀹炴湁鎴垮眿",
+ 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>
+.menus .right {
+ background: var(--color-fill-2);
+ padding: 2px;
+ display: flex;
+ position: absolute;
+ right: 0;
+ margin-right: 0;
+ > div {
+ width: 34px;
+ height: 34px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &.active {
+ background: #1057fd;
+ color: #fff;
+ }
+ }
+}
+.main .menus {
+ padding: 0 !important;
+ margin-bottom: 20px;
+}
+.comprehensive {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding: 20px;
+ .menus {
+ background: var(--color-bg-2);
+ margin-top: 8px;
+ padding: 14px 20px;
+ display: flex;
+ align-items: center;
+ position: relative;
+ > div {
+ margin-right: 20px;
+ }
+ }
+ .main {
+ padding: 8px 12px;
+ background: var(--color-bg-2);
+ margin-top: 8px;
+ flex: 1;
+ .cards {
+ overflow: hidden;
+ > div {
+ float: left;
+ margin: 0 12px 12px 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>
--
Gitblit v1.8.0