收支明细界面，card的组件抽离0.9

components/cashFlowCard/cashFlowCard.vue

@@ -7,7 +7,7 @@
         <view class="card-in">¥{{ cardData.inflow.toFixed(2) }}</view>
       </view>
     </view>
-    <view class="card-item" v-for="(item, index) in cardData.items" :key="index">
+    <view v-for="(item, index) in cardData.items" :key="index" class="card-item">
       <view class="card-item-cash-info">
         <view class="card-icon">
           <image :src="getIconByTitle(item.title)" mode="aspectFit" />
@@ -15,7 +15,7 @@
         <view class="card-item-detail">
           <view class="card-item-title">
             <view class="left">{{ item.title }}</view>
-            <view class="right" v-if="item.status">{{ item.status }}</view>
+            <view v-if="item.status" class="right">{{ item.status }}</view>
           </view>
           <view class="card-item-body">
             <view class="card-time">{{ item.time }}</view>
@@ -24,7 +24,7 @@
           </view>
         </view>
       </view>
-      <view class="number" :class="item.amount >= 0 ? 'positive' : 'negative'">
+      <view :class="item.amount >= 0 ? 'positive' : 'negative'" class="number">
         {{ item.amount >= 0 ? '+' : '' }}¥{{ Math.abs(item.amount).toFixed(2) }}
       </view>
     </view>
@@ -39,20 +39,20 @@ export default {
   props: {
     cardData: {
       type: Object,
-      required: true
+      required: true,
-    }
+    },
   },
   methods: {
     getIconByTitle(title) {
       // 根据标题自动选择对应的图标
       const iconMap = {
-        '提现': commonEnum.WITHDRAW,
+        提现: commonEnum.WITHDRAW,
-        '订单': commonEnum.ORDER_NUMBER,
+        订单: commonEnum.ORDER_NUMBER,
         // 可以根据需要添加更多映射
       }
       return iconMap[title] || ''
-    }
+    },
-  }
+  },
 }
 </script>
 
@@ -89,7 +89,7 @@ export default {
       .card-out {
         font-size: 24rpx;
         color: #333;
-        
+
         &::before {
           content: '出 ';
           color: #666;
@@ -99,7 +99,7 @@ export default {
       .card-in {
         font-size: 24rpx;
         color: #333;
-        
+
         &::before {
           content: '入 ';
           color: #666;
@@ -113,9 +113,10 @@ export default {
     justify-content: space-between;
     align-items: flex-start;
     width: 100%;
-    margin-top: 20rpx;
+
     padding: 20rpx 0;
     border-bottom: 1rpx solid #f0f0f0;
+    background: #f7f7f7;
 
     &:last-child {
       border-bottom: none;
@@ -127,18 +128,19 @@ export default {
       flex: 1;
 
       .card-icon {
-        width: 60rpx;
+        width: 80rpx;
-        height: 60rpx;
+        height: 80rpx;
-        border-radius: 50%;
+
         margin-right: 20rpx;
-        border: 2rpx dashed #ccc;
+        //border: 2rpx dashed #ccc;
         display: flex;
         align-items: center;
         justify-content: center;
 
         image {
-          width: 40rpx;
+          width: 80rpx;
-          height: 40rpx;
+          height: 80rpx;
+          border-radius: 50%;
         }
       }
 
@@ -184,7 +186,7 @@ export default {
 
           .order-number {
             font-size: 22rpx;
-            color: #999;
+            color: #f15a04;
           }
         }
       }
@@ -195,6 +197,7 @@ export default {
       font-weight: bold;
       color: #333;
       text-align: right;
+      padding-right: 20rpx;
 
       &.positive {
         color: #ff803a;
@@ -206,4 +209,4 @@ export default {
     }
   }
 }
-</style> 
+</style>

pages/cashFlow/cashFlow.vue

@@ -15,7 +15,8 @@
         </image>
       </view>
       <view class="cash-flow">
-        <view class="uni-list-cell">
+        <view class="date">
+          <view class="uni-list-cell">
             <view class="uni-list-cell-db">
               <picker
                 :end="endDate"
@@ -78,8 +79,8 @@ export default {
     return {
       getNavBarHeight,
       expenseType: '全部类型',
-      expenditures: '',
+      expenditures: '1000.00',
-      Recorded: '',
+      Recorded: '1000.00',
       date: currentDate,
       startDate: this.getDate('start'),
       endDate: this.getDate('end'),
@@ -137,7 +138,7 @@ export default {
               title: '订单',
               time: '15:22',
               orderNumber: '213646848744124758',
-              amount: 200.0,
+              amount: 200000.0,
             },
           ],
         },
@@ -247,6 +248,7 @@ export default {
     .cash-flow-detail {
       margin-left: 22rpx;
       color: white;
+      font-size: 24rpx;
     }
   }
 }