From 6f963e5ef3daa71aac6db339d27a6de21fe19b74 Mon Sep 17 00:00:00 2001
From: zhangnuoyan <9354631+zhangnuoyan@user.noreply.gitee.com>
Date: 星期日, 25 八月 2024 11:40:13 +0800
Subject: [PATCH] feat: 增加一些组件
---
src/views/components/the-a-select/index.vue | 31 +++++++++++++++
src/views/oneThree/actualPopulation/index.vue | 69 ++++++++++++++++++++++++++++++++++
2 files changed, 99 insertions(+), 1 deletions(-)
diff --git a/src/views/components/the-a-select/index.vue b/src/views/components/the-a-select/index.vue
new file mode 100644
index 0000000..6e6e423
--- /dev/null
+++ b/src/views/components/the-a-select/index.vue
@@ -0,0 +1,31 @@
+<template>
+ <div>
+ <p>{{ title }}</p>
+ <a-select :style="{ width: '160px' }" :placeholder="placeholder">
+ <a-option v-for="(item, key) in data" :key="key">{{ item }}</a-option>
+ </a-select>
+ </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/oneThree/actualPopulation/index.vue b/src/views/oneThree/actualPopulation/index.vue
index 7f955bc..1bc843d 100644
--- a/src/views/oneThree/actualPopulation/index.vue
+++ b/src/views/oneThree/actualPopulation/index.vue
@@ -35,6 +35,29 @@
</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>
@@ -86,6 +109,24 @@
]
})
);
+const changeData = reactive([
+ {
+ name: "1澶�",
+ value: "1"
+ },
+ {
+ name: "2澶�",
+ value: "2"
+ },
+ {
+ name: "3澶�",
+ value: "3"
+ },
+ {
+ name: "鑷畾涔�",
+ value: "custom"
+ }
+]);
const cascaderData = reactive([
{
value: "beijing",
@@ -207,8 +248,30 @@
margin-top: 8px;
padding: 14px 20px;
display: flex;
+ align-items: center;
+ position: relative;
> div {
- margin-left: 20px;
+ margin-right: 20px;
+ }
+ .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 {
@@ -216,6 +279,10 @@
background: var(--color-bg-2);
margin-top: 8px;
flex: 1;
+ .menus {
+ padding: 0;
+ margin-bottom: 20px;
+ }
.cards {
overflow: hidden;
> div {
--
Gitblit v1.8.0