83 lines
1.4 KiB
Vue
83 lines
1.4 KiB
Vue
|
<template>
|
||
|
<up-sticky bgColor="#fff">
|
||
|
{{mark}}
|
||
|
<up-tabs :list="tabsLst" :itemStyle="{width:'33vw',paddingBottom:'20rpx'}" lineColor='#50C758' :current='mark'
|
||
|
@change="tabsChange"></up-tabs>
|
||
|
</up-sticky>
|
||
|
<view class="content">
|
||
|
<view class="li" v-for="item in 50">
|
||
|
<view class="li-top">
|
||
|
<text>余额宝自动转入</text>
|
||
|
<text style="font-weight: bold;">-204.00</text>
|
||
|
</view>
|
||
|
<view class="li-top" style="margin-bottom: 0;">
|
||
|
<text style="font-size: 24rpx;color: grey;">2024-10-21</text>
|
||
|
<text style="font-size: 24rpx;color: grey;">余额 204.00</text>
|
||
|
</view>
|
||
|
</view>
|
||
|
|
||
|
</view>
|
||
|
</template>
|
||
|
|
||
|
<script setup>
|
||
|
import {
|
||
|
ref,
|
||
|
reactive
|
||
|
} from "vue"
|
||
|
import {
|
||
|
onLoad
|
||
|
} from "@dcloudio/uni-app"
|
||
|
import {
|
||
|
getFundList
|
||
|
} from "@/api/address.js"
|
||
|
|
||
|
|
||
|
const tabsLst = reactive([{
|
||
|
name: '全部'
|
||
|
},
|
||
|
{
|
||
|
name: '支出'
|
||
|
},
|
||
|
{
|
||
|
name: '收入'
|
||
|
},
|
||
|
]);
|
||
|
|
||
|
const mark = ref(0)
|
||
|
const tabsChange = (e) => {
|
||
|
mark.value = e.index
|
||
|
}
|
||
|
|
||
|
|
||
|
onLoad((opt) => {
|
||
|
console.log(opt)
|
||
|
})
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss">
|
||
|
.content {
|
||
|
background-color: white;
|
||
|
width: 690rpx;
|
||
|
padding: 20rpx;
|
||
|
margin: 0 auto;
|
||
|
box-sizing: border-box;
|
||
|
margin: 0 auto;
|
||
|
margin-top: 30rpx;
|
||
|
border-radius: 20rpx;
|
||
|
|
||
|
|
||
|
.li {
|
||
|
margin-top: 20rpx;
|
||
|
border-bottom: 1px solid #EDF2FA;
|
||
|
padding-bottom: 20rpx;
|
||
|
|
||
|
.li-top {
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
margin-bottom: 20rpx;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
}
|
||
|
</style>
|