rebuild balance page
This commit is contained in:
KUN1007
parent
8e6a96fb34
commit
47fe0f44c3
|
|
@ -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;
|
||||
|
|
|
|||
207
src/views/balance/components/Exp.vue
Normal file
207
src/views/balance/components/Exp.vue
Normal file
|
|
@ -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>
|
||||
85
src/views/balance/components/Form.vue
Normal file
85
src/views/balance/components/Form.vue
Normal file
|
|
@ -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>
|
||||
66
src/views/balance/components/Log.vue
Normal file
66
src/views/balance/components/Log.vue
Normal file
|
|
@ -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>
|
||||
63
src/views/balance/components/log.ts
Normal file
63
src/views/balance/components/log.ts
Normal file
|
|
@ -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,
|
||||
},
|
||||
]
|
||||
Loading…
Reference in a new issue