From 47fe0f44c37f22fb6835198805762e33cced12a6 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Wed, 31 May 2023 18:27:24 +0800
Subject: [PATCH] rebuild balance page

---
 src/views/balance/Balance.vue         | 407 +-------------------------
 src/views/balance/components/Exp.vue  | 207 +++++++++++++
 src/views/balance/components/Form.vue |  85 ++++++
 src/views/balance/components/Log.vue  |  66 +++++
 src/views/balance/components/log.ts   |  63 ++++
 5 files changed, 425 insertions(+), 403 deletions(-)
 create mode 100644 src/views/balance/components/Exp.vue
 create mode 100644 src/views/balance/components/Form.vue
 create mode 100644 src/views/balance/components/Log.vue
 create mode 100644 src/views/balance/components/log.ts

diff --git a/src/views/balance/Balance.vue b/src/views/balance/Balance.vue
index 6fa87b04..bc7537d0 100644
--- a/src/views/balance/Balance.vue
+++ b/src/views/balance/Balance.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
 import { currBackground } from '@/hooks/useBackgroundPicture'
+import Form from './components/Form.vue'
 </script>
 
 <template>
@@ -13,256 +14,8 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
       <div class="title">收支公示</div>
       <!-- 内容区 -->
       <div class="content">
-        <!-- 收入 -->
-        <div class="revenue">
-          <!-- 标题 -->
-          <div class="revenue-title">收入</div>
-          <!-- 收入记录的容器 -->
-          <div class="revenue-container">
-            <!-- 单条收入 -->
-            <div class="single-revenue">
-              <!-- 收入来源 -->
-              <div class="revenue-reason">啊这可海星</div>
-              <!-- 收入时间和金额 -->
-              <div class="revenue-result">
-                <!-- 收入时间 -->
-                <span class="revenue-time">2019/10/07</span>
-                <!-- 收入金额 -->
-                <span class="revenue-amount">+ 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条收入 -->
-            <div class="single-revenue">
-              <!-- 收入来源 -->
-              <div class="revenue-reason">
-                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              </div>
-              <!-- 收入时间和金额 -->
-              <div class="revenue-result">
-                <!-- 收入时间 -->
-                <span class="revenue-time">2019/10/07</span>
-                <!-- 收入金额 -->
-                <span class="revenue-amount">+ 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条收入 -->
-            <div class="single-revenue">
-              <!-- 收入来源 -->
-              <div class="revenue-reason">啊这可海星</div>
-              <!-- 收入时间和金额 -->
-              <div class="revenue-result">
-                <!-- 收入时间 -->
-                <span class="revenue-time">2019/10/07</span>
-                <!-- 收入金额 -->
-                <span class="revenue-amount">+ 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条收入 -->
-            <div class="single-revenue">
-              <!-- 收入来源 -->
-              <div class="revenue-reason">啊这可海星</div>
-              <!-- 收入时间和金额 -->
-              <div class="revenue-result">
-                <!-- 收入时间 -->
-                <span class="revenue-time">2019/10/07</span>
-                <!-- 收入金额 -->
-                <span class="revenue-amount">+ 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条收入 -->
-            <div class="single-revenue">
-              <!-- 收入来源 -->
-              <div class="revenue-reason">啊这可海星</div>
-              <!-- 收入时间和金额 -->
-              <div class="revenue-result">
-                <!-- 收入时间 -->
-                <span class="revenue-time">2019/10/07</span>
-                <!-- 收入金额 -->
-                <span class="revenue-amount">+ 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条收入 -->
-            <div class="single-revenue">
-              <!-- 收入来源 -->
-              <div class="revenue-reason">啊这可海星</div>
-              <!-- 收入时间和金额 -->
-              <div class="revenue-result">
-                <!-- 收入时间 -->
-                <span class="revenue-time">2019/10/07</span>
-                <!-- 收入金额 -->
-                <span class="revenue-amount">+ 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条收入 -->
-            <div class="single-revenue">
-              <!-- 收入来源 -->
-              <div class="revenue-reason">啊这可海星</div>
-              <!-- 收入时间和金额 -->
-              <div class="revenue-result">
-                <!-- 收入时间 -->
-                <span class="revenue-time">2019/10/07</span>
-                <!-- 收入金额 -->
-                <span class="revenue-amount">+ 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条收入 -->
-            <div class="single-revenue">
-              <!-- 收入来源 -->
-              <div class="revenue-reason">啊这可海星</div>
-              <!-- 收入时间和金额 -->
-              <div class="revenue-result">
-                <!-- 收入时间 -->
-                <span class="revenue-time">2019/10/07</span>
-                <!-- 收入金额 -->
-                <span class="revenue-amount">+ 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条收入 -->
-            <div class="single-revenue">
-              <!-- 收入来源 -->
-              <div class="revenue-reason">啊这可海星</div>
-              <!-- 收入时间和金额 -->
-              <div class="revenue-result">
-                <!-- 收入时间 -->
-                <span class="revenue-time">2019/10/07</span>
-                <!-- 收入金额 -->
-                <span class="revenue-amount">+ 1007 CNY</span>
-              </div>
-            </div>
-          </div>
-          <!-- 总收入 -->
-          <div class="revenue-sum">总收入: 1007 CNY</div>
-        </div>
-        <!-- 支出 -->
-        <div class="expenditure">
-          <!-- 支出 -->
-          <div class="expenditure-title">支出</div>
-          <!-- 支出记录的容器 -->
-          <div class="expenditure-container">
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-            <!-- 单条支出 -->
-            <div class="single-expenditure">
-              <!-- 支出原因 -->
-              <div class="expenditure-reason">啊这可海星</div>
-              <!-- 支出时间和金额 -->
-              <div class="expenditure-result">
-                <!-- 支出时间 -->
-                <span class="expenditure-time">2019/10/07</span>
-                <!-- 支出金额 -->
-                <span class="expenditure-amount">- 1007 CNY</span>
-              </div>
-            </div>
-          </div>
-          <!-- 总支出 -->
-          <div class="expenditure-sum">总支出: 1007 CNY</div>
-        </div>
+        <Form :isIncome="true" />
+        <Form />
       </div>
       <!-- 收入支出总结 -->
       <div class="sum">
@@ -284,15 +37,6 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
 </template>
 
 <style lang="scss" scoped>
-* {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  text-decoration: none;
-}
-*::-webkit-scrollbar {
-  display: none;
-}
 .root {
   height: 100vh;
   display: flex;
@@ -339,153 +83,10 @@ import { currBackground } from '@/hooks/useBackgroundPicture'
 }
 /* 内容区 */
 .content {
+  width: 100%;
   display: flex;
   justify-content: space-between;
 }
-/* 收入 */
-.revenue {
-  /* 占 49%，目的是使得中间留下间隔 */
-  width: 49%;
-  /* 固定高度 */
-  height: 300px;
-  border: 1px solid $kungalgame-blue-4;
-  display: flex;
-  flex-direction: column;
-}
-/* "收入"两个字 */
-.revenue-title {
-  font-size: 20px;
-  display: flex;
-  justify-content: center;
-  padding: 10px 0;
-  border-bottom: 1px solid $kungalgame-blue-4;
-  background-color: $kungalgame-trans-blue-0;
-}
-/* 收入记录的容器 */
-.revenue-container {
-  flex-grow: 1;
-  padding: 10px;
-  /* y 轴溢出滚动 */
-  overflow-y: scroll;
-}
-/* 滚动条的样式 */
-.revenue-container::-webkit-scrollbar {
-  display: inline;
-  width: 4px;
-  height: 0;
-  background-color: $kungalgame-red-2;
-  border-radius: 2px;
-}
-.revenue-container::-webkit-scrollbar-thumb {
-  background: $kungalgame-blue-4;
-  border-radius: 2px;
-}
-/* 单条收入 */
-.single-revenue {
-  margin-top: 20px;
-  border-bottom: 1px solid $kungalgame-blue-4;
-}
-/* 收入来源 */
-.revenue-reason {
-  border-left: 5px solid $kungalgame-blue-4;
-  padding-left: 5px;
-}
-/* 收入时间和金额 */
-.revenue-result {
-  margin-top: 10px;
-  display: flex;
-  justify-content: space-between;
-}
-/* 收入时间 */
-.revenue-time {
-  letter-spacing: 1px;
-}
-/* 收入金额 */
-.revenue-amount {
-  padding: 0 5px;
-  background-color: $kungalgame-blue-2;
-}
-/* 总收入 */
-.revenue-sum {
-  height: 40px;
-  font-size: 18px;
-  /* 文字居中 */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid $kungalgame-blue-4;
-  background-color: $kungalgame-trans-blue-0;
-}
-/* 支出 */
-.expenditure {
-  width: 49%;
-  height: 300px;
-  border: 1px solid $kungalgame-red-4;
-  display: flex;
-  flex-direction: column;
-}
-/* "支出"两个字 */
-.expenditure-title {
-  font-size: 20px;
-  display: flex;
-  justify-content: center;
-  padding: 10px 0;
-  border-bottom: 1px solid $kungalgame-red-4;
-  background-color: $kungalgame-trans-red-0;
-}
-/* 支出记录的容器 */
-.expenditure-container {
-  flex-grow: 1;
-  padding: 10px;
-  overflow-y: scroll;
-}
-/* 滚动条的样式 */
-.expenditure-container::-webkit-scrollbar {
-  display: inline;
-  width: 4px;
-  height: 0;
-  background-color: $kungalgame-red-2;
-  border-radius: 2px;
-}
-.expenditure-container::-webkit-scrollbar-thumb {
-  background: $kungalgame-blue-4;
-  border-radius: 2px;
-}
-/* 单条支出 */
-.single-expenditure {
-  margin-top: 20px;
-  border-bottom: 1px solid $kungalgame-red-4;
-}
-/* 支出原因 */
-.expenditure-reason {
-  border-left: 5px solid $kungalgame-red-4;
-  padding-left: 5px;
-}
-/* 支出的时间和金额 */
-.expenditure-result {
-  margin-top: 10px;
-  display: flex;
-  justify-content: space-between;
-}
-/* 支出时间 */
-.expenditure-time {
-  letter-spacing: 1px;
-}
-/* 支出金额 */
-.expenditure-amount {
-  padding: 0 5px;
-  background-color: $kungalgame-red-2;
-}
-/* 总支出 */
-.expenditure-sum {
-  height: 40px;
-  font-size: 18px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid $kungalgame-red-4;
-  background-color: $kungalgame-trans-red-0;
-}
 /* 收入支出总结 */
 .sum {
   margin-top: 30px;
diff --git a/src/views/balance/components/Exp.vue b/src/views/balance/components/Exp.vue
new file mode 100644
index 00000000..f6fc8e55
--- /dev/null
+++ b/src/views/balance/components/Exp.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- 支出 -->
+  <div class="expenditure">
+    <!-- 支出 -->
+    <div class="expenditure-title">支出</div>
+    <!-- 支出记录的容器 -->
+    <div class="expenditure-container">
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+      <!-- 单条支出 -->
+      <div class="single-expenditure">
+        <!-- 支出原因 -->
+        <div class="expenditure-reason">啊这可海星</div>
+        <!-- 支出时间和金额 -->
+        <div class="expenditure-result">
+          <!-- 支出时间 -->
+          <span class="expenditure-time">2019/10/07</span>
+          <!-- 支出金额 -->
+          <span class="expenditure-amount">- 1007 CNY</span>
+        </div>
+      </div>
+    </div>
+    <!-- 总支出 -->
+    <div class="expenditure-sum">总支出: 1007 CNY</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 支出 */
+.expenditure {
+  width: 49%;
+  height: 300px;
+  border: 1px solid $kungalgame-red-4;
+  display: flex;
+  flex-direction: column;
+}
+/* "支出"两个字 */
+.expenditure-title {
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+  border-bottom: 1px solid $kungalgame-red-4;
+  background-color: $kungalgame-trans-red-0;
+}
+/* 支出记录的容器 */
+.expenditure-container {
+  flex-grow: 1;
+  padding: 10px;
+  overflow-y: scroll;
+}
+/* 滚动条的样式 */
+.expenditure-container::-webkit-scrollbar {
+  display: inline;
+  width: 4px;
+  height: 0;
+  background-color: $kungalgame-red-2;
+  border-radius: 2px;
+}
+.expenditure-container::-webkit-scrollbar-thumb {
+  background: $kungalgame-blue-4;
+  border-radius: 2px;
+}
+/* 单条支出 */
+.single-expenditure {
+  margin-top: 20px;
+  border-bottom: 1px solid $kungalgame-red-4;
+}
+/* 支出原因 */
+.expenditure-reason {
+  border-left: 5px solid $kungalgame-red-4;
+  padding-left: 5px;
+}
+/* 支出的时间和金额 */
+.expenditure-result {
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-between;
+}
+/* 支出时间 */
+.expenditure-time {
+  letter-spacing: 1px;
+}
+/* 支出金额 */
+.expenditure-amount {
+  padding: 0 5px;
+  background-color: $kungalgame-red-2;
+}
+/* 总支出 */
+.expenditure-sum {
+  height: 40px;
+  font-size: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid $kungalgame-red-4;
+  background-color: $kungalgame-trans-red-0;
+}
+</style>
diff --git a/src/views/balance/components/Form.vue b/src/views/balance/components/Form.vue
new file mode 100644
index 00000000..c2a174f8
--- /dev/null
+++ b/src/views/balance/components/Form.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import Log from './Log.vue'
+
+const props = defineProps(['isIncome'])
+const status = props.isIncome ? '收入' : '支出'
+</script>
+
+<template>
+  <!-- 收入 -->
+  <div class="form" :class="$props.isIncome ? '' : 'expenditure'">
+    <!-- 标题 -->
+    <div class="title">{{ status }}</div>
+    <!-- 收入记录的容器 -->
+    <div class="container">
+      <Log />
+    </div>
+    <!-- 总收入 -->
+    <div class="sum">总{{ status }}: 1007 CNY</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 收入 */
+.form {
+  /* 占 49%，目的是使得中间留下间隔 */
+  /* 固定高度 */
+  width: 460px;
+  margin: 0 10px;
+  height: 300px;
+  border: 1px solid $kungalgame-blue-4;
+  display: flex;
+  flex-direction: column;
+  .title {
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+    border-bottom: 1px solid $kungalgame-blue-4;
+    background-color: $kungalgame-trans-blue-0;
+  }
+  /* 收入记录的容器 */
+  .container {
+    flex-grow: 1;
+    padding: 10px;
+    /* y 轴溢出滚动 */
+    overflow-y: scroll;
+  }
+  /* 总收入 */
+  .sum {
+    height: 40px;
+    font-size: 18px;
+    /* 文字居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid $kungalgame-blue-4;
+    background-color: $kungalgame-trans-blue-0;
+  }
+}
+
+/* 滚动条的样式 */
+.container::-webkit-scrollbar {
+  display: inline;
+  width: 4px;
+  height: 0;
+  background-color: $kungalgame-red-2;
+  border-radius: 2px;
+}
+.container::-webkit-scrollbar-thumb {
+  background: $kungalgame-blue-4;
+  border-radius: 2px;
+}
+/* 支出的样式 */
+.expenditure {
+  border: 1px solid $kungalgame-red-4;
+  .title {
+    border-bottom: 1px solid $kungalgame-red-4;
+    background-color: $kungalgame-trans-red-0;
+  }
+  .sum {
+    border-top: 1px solid $kungalgame-red-4;
+    background-color: $kungalgame-trans-red-0;
+  }
+}
+</style>
diff --git a/src/views/balance/components/Log.vue b/src/views/balance/components/Log.vue
new file mode 100644
index 00000000..8bdb098d
--- /dev/null
+++ b/src/views/balance/components/Log.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { FSLog } from './log'
+</script>
+
+<template>
+  <!-- 单条记录 -->
+  <div class="log" v-for="kun in FSLog" :key="kun.index">
+    <div v-if="kun.income">
+      <!-- 收入来源 -->
+      <div class="reason">{{ kun.reason }}</div>
+      <!-- 收入时间和金额 -->
+      <div class="result">
+        <!-- 收入时间 -->
+        <span class="date">{{ kun.date }}</span>
+        <!-- 收入金额 -->
+        <span class="amount">+ {{ kun.amount }} CNY</span>
+      </div>
+    </div>
+    <div v-if="!kun.income">
+      <!-- 收入来源 -->
+      <div class="reason">{{ kun.reason }}</div>
+      <!-- 收入时间和金额 -->
+      <div class="result">
+        <!-- 收入时间 -->
+        <span class="date">{{ kun.date }}</span>
+        <!-- 收入金额 -->
+        <span class="amount">+ {{ kun.amount }} CNY</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 单条收入 */
+.log {
+  margin-top: 20px;
+  border-bottom: 1px solid $kungalgame-blue-4;
+  .reason {
+    border-left: 5px solid $kungalgame-blue-4;
+    padding-left: 5px;
+  }
+  .result {
+    margin-top: 10px;
+    display: flex;
+    justify-content: space-between;
+    /* 收入时间 */
+    .date {
+      letter-spacing: 1px;
+    }
+    /* 收入金额 */
+    .amount {
+      padding: 0 5px;
+      background-color: $kungalgame-blue-2;
+    }
+  }
+}
+.expenditure {
+  border-bottom: 1px solid $kungalgame-red-4;
+  .reason {
+    border-left: 5px solid $kungalgame-red-4;
+  }
+  .amount {
+    background-color: $kungalgame-red-2;
+  }
+}
+</style>
diff --git a/src/views/balance/components/log.ts b/src/views/balance/components/log.ts
new file mode 100644
index 00000000..fdf5640b
--- /dev/null
+++ b/src/views/balance/components/log.ts
@@ -0,0 +1,63 @@
+// 注意，这只是一个临时的数据文件，后来会被替换为后端接口
+
+interface FS {
+  index: number
+  // 是否为收入
+  income: boolean
+  reason: string
+  date: string
+  amount: number
+}
+
+export const FSLog: FS[] = [
+  {
+    index: 1,
+    income: false,
+    reason:
+      '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
+    date: '2019/10/07',
+    amount: 1007,
+  },
+  {
+    index: 2,
+    income: true,
+    reason: '啊这可海星',
+    date: '2019/10/07',
+    amount: 1007,
+  },
+  {
+    index: 3,
+    income: false,
+    reason: '啊这可海星',
+    date: '2019/10/07',
+    amount: 1007,
+  },
+  {
+    index: 4,
+    income: false,
+    reason: '啊这可海星',
+    date: '2019/10/07',
+    amount: 1007,
+  },
+  {
+    index: 5,
+    income: false,
+    reason: '啊这可海星',
+    date: '2019/10/07',
+    amount: 1007,
+  },
+  {
+    index: 6,
+    income: false,
+    reason: '啊这可海星',
+    date: '2019/10/07',
+    amount: 1007,
+  },
+  {
+    index: 7,
+    income: false,
+    reason: '啊这可海星',
+    date: '2019/10/07',
+    amount: 1007,
+  },
+]