From 5e69360b7440c9f1b1da3f673d456d573fa17e35 Mon Sep 17 00:00:00 2001
From: wang_fan_w <2547096351@qq.com>
Date: Thu, 23 May 2024 22:08:33 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=93=8D=E5=BA=94=E5=BC=8F=E7=BD=91?=
 =?UTF-8?q?=E6=A0=BC=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/finance copy.vue | 133 +++++++++++++++++++++
 src/views/home/components/finance.vue      |  88 ++++++--------
 2 files changed, 172 insertions(+), 49 deletions(-)
 create mode 100644 src/views/home/components/finance copy.vue

diff --git a/src/views/home/components/finance copy.vue b/src/views/home/components/finance copy.vue
new file mode 100644
index 0000000..edee194
--- /dev/null
+++ b/src/views/home/components/finance copy.vue	
@@ -0,0 +1,133 @@
+<template>
+  <div class="finance-box">
+    <div class="box-title">
+      <div>财务指标</div>
+      <div>
+        <span><icon-edit /></span>
+        <span class="margin-left-text">自定义</span>
+      </div>
+    </div>
+    <a-divider :margin="16" />
+    <!-- <div class="finance-card"> -->
+    <a-grid class="finance-card" :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :col-gap="12" :row-gap="16">
+      <a-grid-item v-for="(item, index) in financeData" :key="index">
+        <a-card hoverable class="finance-a-card" :class="'animated-fade-up-' + index">
+          <div class="finance-nav">
+            <div class="tag-dot" :style="{ border: `3px solid ${item.color}` }"></div>
+            <span class="finance-nav-title">{{ item.title }}</span>
+          </div>
+          <a-statistic
+            :value-style="{
+              fontSize: '13px',
+              marginLeft: '16px',
+              marginTop: '12px'
+            }"
+            :value="item.value"
+            :value-from="0"
+            :start="true"
+            animation
+            show-group-separator
+          />
+        </a-card>
+      </a-grid-item>
+    </a-grid>
+    <!-- <a-card
+        hoverable
+        v-for="(item, index) in financeData"
+        :key="index"
+        class="finance-a-card"
+        :class="'animated-fade-up-' + index"
+      >
+        <div class="finance-nav">
+          <div class="tag-dot" :style="{ border: `3px solid ${item.color}` }"></div>
+          <span class="finance-nav-title">{{ item.title }}</span>
+        </div>
+        <a-statistic
+          :value-style="{
+            fontSize: '13px',
+            marginLeft: '16px',
+            marginTop: '12px'
+          }"
+          :value="item.value"
+          :value-from="0"
+          :start="true"
+          animation
+          show-group-separator
+        />
+      </a-card> -->
+    <!-- </div> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+const financeData = ref([
+  {
+    id: 1,
+    title: "利润总额",
+    value: 100000,
+    color: "#ff8625"
+  },
+  {
+    id: 2,
+    title: "现金",
+    value: 750420,
+    color: "#165DFF"
+  },
+  {
+    id: 3,
+    title: "银行存款",
+    value: 100000,
+    color: "#39cbab"
+  },
+  {
+    id: 4,
+    title: "存贷",
+    value: 100000,
+    color: "#6c73ff"
+  },
+  {
+    id: 5,
+    title: "应收账款",
+    value: 100000,
+    color: "#2fd0ff"
+  }
+]);
+</script>
+
+<style lang="scss" scoped>
+.finance-box {
+  margin-top: calc($padding * 2);
+  .finance-card {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: $padding;
+    grid-row-gap: 0px;
+    border: 1px solid cyan;
+    .finance-a-card {
+      .finance-nav {
+        display: flex;
+        align-items: center;
+        border: 1px solid red;
+        .tag-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          margin-right: $margin-text;
+          box-sizing: border-box;
+        }
+        .finance-nav-title {
+          font-size: $font-size-body-1;
+        }
+      }
+    }
+  }
+}
+.box-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: $font-size-body-3;
+  color: $color-text-1;
+}
+</style>
diff --git a/src/views/home/components/finance.vue b/src/views/home/components/finance.vue
index b019fef..06c6b1f 100644
--- a/src/views/home/components/finance.vue
+++ b/src/views/home/components/finance.vue
@@ -8,35 +8,32 @@
       </div>
     </div>
     <a-divider :margin="16" />
-    <div class="finance-card">
-      <!-- <a-row>
-        <a-col :xs="24" :sm="12" :lg="8" :xl="4"></a-col>
-      </a-row> -->
-      <a-card
-        hoverable
-        v-for="(item, index) in financeData"
-        :key="index"
-        class="finance-a-card"
-        :class="'animated-fade-up-' + index"
-      >
-        <div class="finance-nav">
-          <div class="tag-dot" :style="{ border: `3px solid ${item.color}` }"></div>
-          <span class="finance-nav-title">{{ item.title }}</span>
-        </div>
-        <a-statistic
-          :value-style="{
-            fontSize: '13px',
-            marginLeft: '16px',
-            marginTop: '12px'
-          }"
-          :value="item.value"
-          :value-from="0"
-          :start="true"
-          animation
-          show-group-separator
-        />
-      </a-card>
-    </div>
+    <!-- 对于奇数的响应式系统来说，普通横向栅格或许满足不了
+    这里使用响应式网格系统，根据网格系统来分配每行的空间占比
+    这里xl大小每行5个、lg大小每行3个，依此类推，这样可以完美解决奇数的响应式布局
+    另外也可以设置横、纵向的网格间距(默认单位px) -->
+    <a-grid class="finance-card" :cols="{ xs: 1, sm: 2, lg: 3, xl: 5 }" :col-gap="16" :row-gap="16">
+      <a-grid-item v-for="(item, index) in financeData" :key="index">
+        <a-card hoverable class="finance-a-card" :class="'animated-fade-up-' + index">
+          <div class="finance-nav">
+            <div class="tag-dot" :style="{ border: `3px solid ${item.color}` }"></div>
+            <span class="finance-nav-title">{{ item.title }}</span>
+          </div>
+          <a-statistic
+            :value-style="{
+              fontSize: '13px',
+              marginLeft: '16px',
+              marginTop: '12px'
+            }"
+            :value="item.value"
+            :value-from="0"
+            :start="true"
+            animation
+            show-group-separator
+          />
+        </a-card>
+      </a-grid-item>
+    </a-grid>
   </div>
 </template>
 
@@ -78,26 +75,19 @@ const financeData = ref([
 <style lang="scss" scoped>
 .finance-box {
   margin-top: calc($padding * 2);
-  .finance-card {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: $padding;
-    grid-row-gap: 0px;
-    .finance-a-card {
-      .finance-nav {
-        display: flex;
-        align-items: center;
-        .tag-dot {
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          margin-right: $margin-text;
-          box-sizing: border-box;
-        }
-        .finance-nav-title {
-          font-size: $font-size-body-1;
-        }
+  .finance-a-card {
+    .finance-nav {
+      display: flex;
+      align-items: center;
+      .tag-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        margin-right: $margin-text;
+        box-sizing: border-box;
+      }
+      .finance-nav-title {
+        font-size: $font-size-body-1;
       }
     }
   }