From b5a0b7dfdb610a2c67f28e6ef9fa714b44ed23ba Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 02 四月 2025 13:25:55 +0800
Subject: [PATCH] feat: init
---
src/components/DataBoardCard/DataBoardCard.vue | 13 +++++-
src/components/DataBoardCard/DataBoardCardPrice.vue | 8 +++
config/config.ts | 2
src/router/index.ts | 2
src/views/Home/Home.vue | 59 ++++++++++++++++++++++-------
5 files changed, 64 insertions(+), 20 deletions(-)
diff --git a/config/config.ts b/config/config.ts
index 592ec91..53bb2f6 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -4,7 +4,7 @@
/**
* @description 缃戦〉title
*/
- title: '12333鏀垮姟鏈嶅姟',
+ title: '濂栧姳閲戝鏍告斂鍔＄',
errorLog: 'production',
diff --git a/src/components/DataBoardCard/DataBoardCard.vue b/src/components/DataBoardCard/DataBoardCard.vue
index d337f37..3928ffd 100644
--- a/src/components/DataBoardCard/DataBoardCard.vue
+++ b/src/components/DataBoardCard/DataBoardCard.vue
@@ -1,7 +1,7 @@
<template>
<div class="data-board-card-wrapper">
<div class="data-board-card-title">{{ title }}</div>
- <div class="data-board-card-content">
+ <div class="data-board-card-content" :class="contentBetween && 'content-between'">
<slot></slot>
</div>
</div>
@@ -14,9 +14,12 @@
type Props = {
title?: string;
+ contentBetween?: boolean;
};
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {
+ contentBetween: false,
+});
</script>
<style lang="scss" scoped>
@@ -39,6 +42,12 @@
.data-board-card-content {
flex: 1;
min-height: 0;
+
+ &.content-between {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
}
}
</style>
diff --git a/src/components/DataBoardCard/DataBoardCardPrice.vue b/src/components/DataBoardCard/DataBoardCardPrice.vue
index 8ea0630..12d6feb 100644
--- a/src/components/DataBoardCard/DataBoardCardPrice.vue
+++ b/src/components/DataBoardCard/DataBoardCardPrice.vue
@@ -1,5 +1,5 @@
<template>
- <div class="data-board-card-price">
+ <div class="data-board-card-price" :class="isInline && 'inline'">
<div class="data-board-card-value">{{ displayValue }}</div>
<div class="data-board-card-unit">{{ unit }}</div>
</div>
@@ -15,11 +15,13 @@
type Props = {
value?: number;
useThousand?: boolean;
+ isInline?: boolean;
unit?: string;
};
const props = withDefaults(defineProps<Props>(), {
useThousand: true,
+ isInline: false,
unit: '鍏�',
});
@@ -33,6 +35,10 @@
display: flex;
align-items: flex-end;
+ &.inline {
+ display: inline-flex;
+ }
+
.data-board-card-value {
margin-right: 4px;
font-size: 20px;
diff --git a/src/router/index.ts b/src/router/index.ts
index e80a65e..7e3ec75 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -81,7 +81,7 @@
component: () => import('@/views/Home/Home.vue'),
meta: {
rank: 10001,
- title: '棣栭〉',
+ title: '宸ヤ綔鍙�',
affix: true,
rootMenu: true,
},
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index 743c705..c5ab28b 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -1,26 +1,48 @@
<template>
<LoadingLayout :loading="isLoading">
<AppContainer>
- <ChunkCell title="寰呭鐞�"> </ChunkCell>
- <ChunkCell title="鏁版嵁鐪嬫澘"> </ChunkCell>
+ <ChunkCell title="寰呭鐞�">
+ <div class="data-board-card-list">
+ <DataBoardCard title="寰呭鏍镐紒涓�" :contentBetween="true">
+ <DataBoardCardPrice :value="20000" :isInline="true" :useThousand="false" unit="瀹�" />
+ <el-button type="primary" link>鍘诲鏍�</el-button>
+ </DataBoardCard>
+ <DataBoardCard title="濂栧姳閲戝緟鍙戞斁" :contentBetween="true">
+ <DataBoardCardPrice :isInline="true" :value="20000" :useThousand="false" unit="瀹�" />
+ <el-button type="primary" link>鍘诲彂鏀�</el-button>
+ </DataBoardCard>
+ </div>
+ </ChunkCell>
+ <ChunkCell title="鏁版嵁鐪嬫澘">
+ <div class="data-board-card-list">
+ <DataBoardCard title="绱宸插鏍镐紒涓�">
+ <DataBoardCardPrice :value="20000" :useThousand="false" unit="瀹�" />
+ </DataBoardCard>
+ <DataBoardCard title="绱宸插鏍搁�氳繃浼佷笟">
+ <DataBoardCardPrice :value="20000" :useThousand="false" unit="瀹�" />
+ </DataBoardCard>
+ <DataBoardCard title="绱鏈鏍搁�氳繃浼佷笟">
+ <DataBoardCardPrice :value="20000" :useThousand="false" unit="瀹�" />
+ </DataBoardCard>
+ <DataBoardCard title="绱宸插彂鏀惧鍔遍噾">
+ <DataBoardCardPrice :value="20000" unit="鍏�" />
+ </DataBoardCard>
+ <DataBoardCard title="绱寰呭彂鏀惧鍔遍噾">
+ <DataBoardCardPrice :value="20000" unit="鍏�" />
+ </DataBoardCard>
+ <DataBoardCard title="绱宸蹭娇鐢ㄥ鍔遍噾">
+ <DataBoardCardPrice :value="20000" unit="鍏�" />
+ </DataBoardCard>
+ </div>
+ </ChunkCell>
</AppContainer>
</LoadingLayout>
</template>
<script setup lang="ts">
-import {
- ProForm,
- ProFormItemV2,
- ProFormSelect,
- ProFormText,
- ProFormCol,
- ProFormColItem,
- ProFormInputNumber,
- ProFormTextArea,
- ProFormRadio,
- ChunkCell,
- AppScrollContainer,
-} from '@bole-core/components';
+import { AppContainer, ChunkCell } from '@bole-core/components';
+import DataBoardCard from '@/components/DataBoardCard/DataBoardCard.vue';
+import DataBoardCardPrice from '@/components/DataBoardCard/DataBoardCardPrice.vue';
defineOptions({
name: 'Home',
@@ -31,4 +53,11 @@
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
+
+.data-board-card-list {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ grid-gap: 40px;
+ padding: 20px;
+}
</style>
--
Gitblit v1.9.1