排版

hdPad/src/pages/home/components/balanceChange.vue

@@ -2,12 +2,16 @@
     <view class="balance-change">
         <block v-if="!$util.isEmpty(list.data)">
             <view class="balance-table">
-                <view v-for="(item, index) in list.data" :key="index" class="table-body">
-                    <view class="table-row table-row-data">
-                        <view class="table-cell cell-date">{{ formatDate(item.addTime) }}</view>
-                        <view class="table-cell cell-event">{{ formatText(item.event) }}</view>
-                        <view class="table-cell cell-amount">{{ item.amount }}</view>
-                        <view class="table-cell cell-balance">{{ parseFloat(item.balance) }}</view>
+                <view v-for="(item, index) in list.data" :key="index" class="balance-item">
+                    <view class="balance-item-main">
+                        <view class="balance-item-left">
+                            <view class="item-date">{{ formatDate(item.addTime) }}</view>
+                            <view class="item-event">{{ formatText(item.event) }}</view>
+                        </view>
+                        <view class="balance-item-right">
+                            <view class="item-amount" :class="{'income': item.amount.includes('+'), 'expense': item.amount.includes('-')}">{{ item.amount }}</view>
+                            <view class="item-balance">余额: {{ parseFloat(item.balance) }}</view>
+                        </view>
                     </view>
                 </view>
             </view>
@@ -55,8 +59,8 @@ export default {
         },
         formatText(text) {
             if (!text) return '';
-            // 如果文本太长，截取一部分
-            return text.length > 12 ? text.substring(0, 12) + '...' : text;
+            // 不再截断文本，允许完整显示
+            return text;
         },
         async init(){
             if (!this.customId) return
@@ -138,87 +142,71 @@ export default {
     font-size: 8upx;
     box-sizing: border-box;
     flex: 1;
+    padding: 5upx;
+}
+
+.balance-item {
+    margin-bottom: 8upx;
+    background: #fff;
+    border-radius: 6upx;
+    box-shadow: 0 1upx 4upx rgba(0,0,0,0.05);
+    overflow: hidden;
+    border: 1upx solid #f0f0f0;
     
-    .table-row {
+    &:last-child {
+        margin-bottom: 0;
+    }
+    
+    .balance-item-main {
         display: flex;
-        align-items: center;
-        min-height: 30upx;
-        border-bottom: 1px solid #f0f0f0;
-        width: 100%;
+        justify-content: space-between;
+        padding: 8upx 10upx;
         
-        &.table-header {
-            background: #f5f7fa;
-            font-weight: bold;
-            font-size: 8upx;
-            color: #333;
-            height: 26upx;
-            width: 100%;
+        .balance-item-left {
+            flex: 3;
             display: flex;
-            flex-direction: row;
-        }
-        
-        &.table-row-data {
-            font-size: 9upx;
-            color: #222;
-            transition: background 0.2s;
-            cursor: pointer;
-            height: 28upx;
+            flex-direction: column;
+            justify-content: center;
             
-            &:hover {
-                background: #f0f9ff;
+            .item-date {
+                font-size: 8upx;
+                color: #999;
+                margin-bottom: 4upx;
+            }
+            
+            .item-event {
+                font-size: 10upx;
+                color: #333;
+                line-height: 1.3;
+                word-break: break-all;
             }
         }
         
-        &.table-row-extra {
-            background: #f8f8f8;
-            color: #989494;
-            font-size: 8upx;
-            min-height: 20upx;
-            max-height: 40upx;
+        .balance-item-right {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            justify-content: center;
             
-            .cell-extra {
-                padding: 2upx 4upx;
-                display: flex;
-                flex-direction: column;
+            .item-amount {
+                font-size: 11upx;
+                font-weight: 500;
+                margin-bottom: 4upx;
                 
-                .extra-item {
-                    font-size: 8upx;
-                    line-height: 12upx;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    margin-bottom: 1upx;
+                &.income {
+                    color: #07c160;
+                }
+                
+                &.expense {
+                    color: #fa5151;
                 }
             }
-        }
-    }
-    
-    .table-cell {
-        flex: 1;
-        padding: 4upx 3upx;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-       
-        &.cell-date {
-            text-align: center;
-            flex: 1;
-        }
-        
-        &.cell-event {
-            text-align: left;
-            flex: 2.2;
-        }
-        
-        &.cell-amount {
-            text-align: right;
-            flex: 0.8;
-        }
-        
-        &.cell-balance {
-            text-align: right;
-            padding-right: 6upx;
-            flex: 0.8;
+            
+            .item-balance {
+                font-size: 8upx;
+                color: #666;
+            }
         }
     }
 }

hdPad/src/pages/home/components/birthdayEdit.vue

@@ -1,55 +1,61 @@
 <template>
     <div class="birthday-container full-width">
-        <!-- 类型选择 -->
-        <div class="birthday-section">
-            <div class="section-title">类型</div>
-            <div class="type-buttons">
-                <button 
-                    class="birthday-type-btn" 
-                    :class="{active: lunar == 0}" 
-                    @click="lunar = 0"
-                >公历</button>
-                <button 
-                    class="birthday-type-btn" 
-                    :class="{active: lunar == 1}" 
-                    @click="lunar = 1"
-                >农历</button>
+        <div class="birthday-layout">
+            <div class="birthday-column">
+                <!-- 类型选择 -->
+                <div class="birthday-section">
+                    <div class="section-title">类型</div>
+                    <div class="type-buttons">
+                        <button 
+                            class="birthday-type-btn" 
+                            :class="{active: lunar == 0}" 
+                            @click="lunar = 0"
+                        >公历</button>
+                        <button 
+                            class="birthday-type-btn" 
+                            :class="{active: lunar == 1}" 
+                            @click="lunar = 1"
+                        >农历</button>
+                    </div>
+                </div>
+                
+                <!-- 月份选择 -->
+                <div class="birthday-section">
+                    <div class="section-title">月份</div>
+                    <div class="month-buttons">
+                        <button 
+                            v-for="(month, index) in [1,2,3,4,5,6,7,8,9,10,11,12]" 
+                            :key="'month-'+month" 
+                            class="month-button" 
+                            :class="{ active: birthdayMonth == month }"
+                            @click="setMonth(month)"
+                        >{{ month }}</button>
+                    </div>
+                </div>
             </div>
-        </div>
-        
-        <!-- 月份选择 -->
-        <div class="birthday-section">
-            <div class="section-title">月份</div>
-            <div class="month-buttons">
-                <button 
-                    v-for="(month, index) in [1,2,3,4,5,6,7,8,9,10,11,12]" 
-                    :key="'month-'+month" 
-                    class="month-button" 
-                    :class="{ active: birthdayMonth == month }"
-                    @click="setMonth(month)"
-                >{{ month }}</button>
-            </div>
-        </div>
-        
-        <!-- 日期选择 (数字按钮形式) -->
-        <div class="birthday-section">
-            <div class="section-title">日期</div>
-            <div class="date-buttons">
-                <button 
-                    v-for="(date, index) in dateArray" 
-                    :key="date" 
-                    class="date-button" 
-                    :class="{ active: birthdayDate == date }"
-                    @click="setDate(date)"
-                >{{ date }}</button>
+            
+            <div class="birthday-column">
+                <!-- 日期选择 (数字按钮形式) -->
+                <div class="birthday-section">
+                    <div class="section-title">日期</div>
+                    <div class="date-buttons">
+                        <button 
+                            v-for="(date, index) in dateArray" 
+                            :key="date" 
+                            class="date-button" 
+                            :class="{ active: birthdayDate == date }"
+                            @click="setDate(date)"
+                        >{{ date }}</button>
+                    </div>
+                </div>
+                
+                <!-- 操作按钮 -->
+                <div class="birthday-actions">
+                    <button class="birthday-action-btn cancel-btn" @click="cancelEdit">取消</button>
+                    <button class="birthday-action-btn save-btn" @click="saveBirthday">保存</button>
+                </div>
             </div>
         </div>
-        
-        <!-- 操作按钮 -->
-        <div class="birthday-actions">
-            <button class="birthday-action-btn cancel-btn" @click="cancelEdit">取消</button>
-            <button class="birthday-action-btn save-btn" @click="saveBirthday">保存</button>
-        </div>
     </div>
 </template>
 
@@ -135,6 +141,17 @@ export default {
     overflow-y: auto;
 }
 
+.birthday-layout {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.birthday-column {
+    flex: 1;
+    padding: 0 5upx;
+}
+
 .birthday-section {
     margin-bottom: 12upx;
 }
@@ -183,7 +200,7 @@ export default {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    width: 170upx; /* 控制总宽度，使一行放6个 */
+    width: 100%; /* 使用100%宽度适应父容器 */
     margin: 0 auto;
 }
 
@@ -220,7 +237,7 @@ export default {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    width: 200upx; /* 控制总宽度，使一行放8个 */
+    width: 100%; /* 使用100%宽度适应父容器 */
     margin: 0 auto;
 }