收支明细界面，card的view结构设计

enum/commonEnum.js

@@ -29,5 +29,7 @@ export const commonEnum = {
   //收支明细
   TYPE_SELECT: 'https://api.ccttiot.com/image-1755487673678.png', //类型
   DOWN_ICON: 'https://api.ccttiot.com/image-1755484170012.png',
+  WITHDRAW: 'https://api.ccttiot.com/image-1755496777724.png', //提现
+  ORDER_NUMBER: 'https://api.ccttiot.com/image-1755496809579.png', //订单
 }
 export default commonEnum

pages/cashFlow/cashFlow.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     :style="{
-      background: `linear-gradient(to bottom, #ff803a 0, #ff803a ${getNavBarHeight() * 2}px, transparent ${getNavBarHeight() * 2}px, transparent 100%)`,
+      background: `linear-gradient(to bottom, #ff803a 0, #ff803a ${getNavBarHeight() * 2}px, #F7F7F7 ${getNavBarHeight() * 2}px, #F7F7F7 100%)`,
     }"
     class="page"
   >
@@ -35,10 +35,34 @@
       </view>
     </view>
 
-    <!-- 主要内容区域 -->
+    <!-- 卡片区域 -->
-    <view class="body">666</view>
+    <view v-for="(item, index) in billList" :key="index" class="card">
+      <view class="card-head">
+        <view class="card-date">428</view>
+        <view class="card-flow">
+          <view class="card-out">200</view>
+          <view class="card-in">201</view>
+        </view>
+      </view>
+      <view class="card-item">
+        <view class="card-item-cash-info">
+          <view class="card-icon"></view>
+          <view class="card-item-detail">
+            <view class="card-item-title">
+              <text class="left">1</text>
+              <text class="right">2</text>
+            </view>
+            <view class="card-item-body">
+              <text class="card-time">3</text>
+              <text class="order-number">4</text>
+            </view>
+          </view>
+        </view>
+        <view class="number">2222</view>
+      </view>
+      {{ item.date }}
+    </view>
   </view>
-
   <!-- 底部弹窗 -->
   <uni-popup ref="popup" :mask-click="true" type="bottom">
     <view class="popup-content">
@@ -101,6 +125,32 @@ export default {
         '公益',
         '发红包',
       ],
+      billList: [
+        {
+          date: '5月31日 星期六',
+          type: '支出',
+          category: '购物',
+          time: '22:08',
+          merchant: '京东商城平台商户',
+          amount: '-11.40',
+        },
+        {
+          date: '5月31日 星期六',
+          type: '支出',
+          category: '购物',
+          time: '22:08',
+          merchant: '京东商城平台商户',
+          amount: '-11.40',
+        },
+        {
+          date: '5月31日 星期六',
+          type: '支出',
+          category: '购物',
+          time: '22:08',
+          merchant: '京东商城平台商户',
+          amount: '-11.40',
+        },
+      ],
     }
   },
   computed: {
@@ -211,15 +261,15 @@ export default {
 }
 
 // 主要内容区域
-.body {
+.card {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  //background: #ca3232;
+  background: #ffffff;
-  border-radius: 40rpx;
+  border-radius: 20rpx;
-  margin: 0 30rpx;
+  margin: 12rpx 22rpx 12rpx 22rpx;
   padding: 40rpx;
 }