|
@@ -39,20 +39,17 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="body flex-grow flex-column">
|
|
<view class="body flex-grow flex-column">
|
|
|
- <view class="tabs flex-shrink flex-align-center">
|
|
|
|
|
|
|
+ <view class="tabs flex-shrink flex-center">
|
|
|
<view
|
|
<view
|
|
|
v-for="(item, index) in tabs"
|
|
v-for="(item, index) in tabs"
|
|
|
:key="index"
|
|
:key="index"
|
|
|
- class="flex-align-center fs-30 mr-60"
|
|
|
|
|
|
|
+ class="tab-item flex-center fs-30"
|
|
|
:style="{
|
|
:style="{
|
|
|
- color:
|
|
|
|
|
- tab === item.value ? '#1c2b29;' : '#5c6b69;',
|
|
|
|
|
|
|
+ color: tab === item.value ? '#1c2b29' : '#5c6b69',
|
|
|
fontWeight: tab === item.value ? '600' : '400',
|
|
fontWeight: tab === item.value ? '600' : '400',
|
|
|
}"
|
|
}"
|
|
|
@click="changeTab(index)"
|
|
@click="changeTab(index)"
|
|
|
- >{{
|
|
|
|
|
- item.label
|
|
|
|
|
- }}
|
|
|
|
|
|
|
+ >{{ item.label }}
|
|
|
<view
|
|
<view
|
|
|
:style="{ opacity: tab === item.value ? '1' : '0' }"
|
|
:style="{ opacity: tab === item.value ? '1' : '0' }"
|
|
|
class="active"
|
|
class="active"
|
|
@@ -70,7 +67,7 @@
|
|
|
@click="detail(index)"
|
|
@click="detail(index)"
|
|
|
>
|
|
>
|
|
|
<view>
|
|
<view>
|
|
|
- <view class="fs-30 fw-500" key="title" duration="300">{{
|
|
|
|
|
|
|
+ <view class="fs-30 fw-500">{{
|
|
|
typeMap[item.type - 1]
|
|
typeMap[item.type - 1]
|
|
|
}}
|
|
}}
|
|
|
</view>
|
|
</view>
|
|
@@ -82,24 +79,30 @@
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="ml-auto" style="text-align: right">
|
|
|
|
|
|
|
+ <view class="list-right flex-column flex-align-end">
|
|
|
<view class="fs-30 fw-500">
|
|
<view class="fs-30 fw-500">
|
|
|
<text>{{ item.type == 3 ? "- " : "" }}{{ item.amount }}</text>
|
|
<text>{{ item.type == 3 ? "- " : "" }}{{ item.amount }}</text>
|
|
|
<text class="fs-24 ml-6">元</text>
|
|
<text class="fs-24 ml-6">元</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="fs-24" style="color: #8c9997">{{
|
|
|
|
|
|
|
+ <view class="fs-24 mt-4" style="color: #8c9997">{{
|
|
|
item.transactionTime
|
|
item.transactionTime
|
|
|
}}
|
|
}}
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="ml-32" v-if="item.type === 3">
|
|
|
|
|
|
|
+ <view class="list-arrow" v-if="item.type === 3">
|
|
|
<uni-icons
|
|
<uni-icons
|
|
|
type="right"
|
|
type="right"
|
|
|
size="12"
|
|
size="12"
|
|
|
color="rgba(28,43,41,0.4)"
|
|
color="rgba(28,43,41,0.4)"
|
|
|
></uni-icons>
|
|
></uni-icons>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="ml-32" v-else> </view>
|
|
|
|
|
|
|
+ <view class="list-arrow" v-else></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="list-empty flex-center flex-column"
|
|
|
|
|
+ v-if="dataList && dataList.length <= 0"
|
|
|
|
|
+ >
|
|
|
|
|
+ <view class="fs-26" style="color: #8c9997">暂无记录</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
<view style="height: 170rpx"></view>
|
|
<view style="height: 170rpx"></view>
|
|
@@ -336,10 +339,10 @@ const detail = (index: number) => {
|
|
|
.tabs {
|
|
.tabs {
|
|
|
padding: 0 40rpx;
|
|
padding: 0 40rpx;
|
|
|
|
|
|
|
|
- & > view {
|
|
|
|
|
|
|
+ .tab-item {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
+ flex-grow: 1;
|
|
|
height: 72rpx;
|
|
height: 72rpx;
|
|
|
- transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
|
|
|
|
|
|
|
|
|
|
.active {
|
|
.active {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -364,6 +367,21 @@ const detail = (index: number) => {
|
|
|
border-bottom: none;
|
|
border-bottom: none;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .list-right {
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .list-arrow {
|
|
|
|
|
+ width: 32rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
+ flex-shrink: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .list-empty {
|
|
|
|
|
+ padding: 120rpx 0;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|