diff --git a/components/DynamicIsland.vue b/components/DynamicIsland.vue
index 068aa26..a480911 100644
--- a/components/DynamicIsland.vue
+++ b/components/DynamicIsland.vue
@@ -16,54 +16,75 @@
     >
       <!-- 展开状态 -->
       <view v-if="!actualCompactState" class="expanded-content">
-        <template v-if="styleType!='timeShop'">
-			<view class="top-section" >
-			  <text class="welcome-text">{{ title }}</text>
-			  <view class="qr-code">
-					<image style="width: 39rpx;height: 39rpx;" src="https://epic.js-dyyj.com/uploads/20250728/88e0991e58e692c86c25e42537edc6ca.png"></image>
-			  </view>
-			</view>
-			<view class="bottom-section">
-			  <view class="stats-section">
-			    <view class="stat-item">
-			      <text class="stat-number">{{ getStatNumber("权益") }}</text>
-			      <text class="stat-label">权益</text>
-			    </view>
-			    <view class="stat-item">
-			      <text class="stat-number">{{ getStatNumber("时间银行") }}</text>
-			      <text class="stat-label">时间银行</text>
-			    </view>
-			  </view>
-			  <view class="divider"></view>
-			  <view class="action-section">
-			    <text class="action-text">{{ actionText }}</text>
-			    <image class="avatar" src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" mode="aspectFill"></image>
-			  </view>
-			</view>
-		</template>
-		<template v-if="styleType=='timeShop'">
-			<view class="bottom-section">
-			  <view class="stats-section">
-			    <view class="stat-item">
-			      <text class="stat-number">{{ getStatNumber("时间银行") }}</text>
-			      <text class="stat-label">时间银行</text>
-			    </view>
-			  </view>
-			  <view class="divider"></view>
-			  <view class="action-section">
-			  <view class="action-text-box">
-			  	<view class="action-text-box-des">
-			  		在努力一点点，为更好的未来蓄力吧！
-			  	</view>
-				<view class="action-text-box-msg">
-					<image class="action-text-box-img" :src="showImg('/uploads/20250728/d7ac383902515c9b507c78fdc8d29520.png')"></image>
-					今日点赞和留言<text style="font-size: 30rpx;font-weight: bold;margin: 0 10rpx;">100</text>条
-				</view>
-			  </view>
-			    <image class="avatar" src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" mode="aspectFill"></image>
-			  </view>
-			</view>
-		</template>
+        <template v-if="styleType != 'timeShop'">
+          <view class="top-section">
+            <text class="welcome-text">{{ title }}</text>
+            <view class="qr-code">
+              <image
+                style="width: 39rpx; height: 39rpx"
+                src="https://epic.js-dyyj.com/uploads/20250728/88e0991e58e692c86c25e42537edc6ca.png"
+              ></image>
+            </view>
+          </view>
+          <view class="bottom-section">
+            <view class="stats-section">
+              <view class="stat-item">
+                <text class="stat-number">{{ getStatNumber("权益") }}</text>
+                <text class="stat-label">权益</text>
+              </view>
+              <view class="stat-item">
+                <text class="stat-number">{{ getStatNumber("时间银行") }}</text>
+                <text class="stat-label">时间银行</text>
+              </view>
+            </view>
+            <view class="divider"></view>
+            <view class="action-section">
+              <text class="action-text">{{ actionText }}</text>
+              <image
+                class="avatar"
+                src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
+                mode="aspectFill"
+              ></image>
+            </view>
+          </view>
+        </template>
+        <template v-if="styleType == 'timeShop'">
+          <view class="bottom-section">
+            <view class="stats-section">
+              <view class="stat-item">
+                <text class="stat-number">{{ getStatNumber("时间银行") }}</text>
+                <text class="stat-label">时间银行</text>
+              </view>
+            </view>
+            <view class="divider"></view>
+            <view class="action-section">
+              <view class="action-text-box">
+                <view class="action-text-box-des">
+                  在努力一点点，为更好的未来蓄力吧！
+                </view>
+                <view class="action-text-box-msg">
+                  <image
+                    class="action-text-box-img"
+                    :src="
+                      showImg(
+                        '/uploads/20250728/d7ac383902515c9b507c78fdc8d29520.png'
+                      )
+                    "
+                  ></image>
+                  今日点赞和留言<text
+                    style="font-size: 30rpx; font-weight: bold; margin: 0 10rpx"
+                    >100</text
+                  >条
+                </view>
+              </view>
+              <image
+                class="avatar"
+                src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
+                mode="aspectFill"
+              ></image>
+            </view>
+          </view>
+        </template>
       </view>
 
       <!-- 紧凑状态 -->
@@ -71,7 +92,7 @@
         <text class="compact-name">{{ getCompactName() }}</text>
         <image
           class="compact-avatar"
-           src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
+          src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png"
           mode="aspectFill"
         ></image>
       </view>
@@ -87,7 +108,7 @@ export default {
       type: Boolean,
       default: false,
     },
-	styleType: {
+    styleType: {
       type: String,
       default: "",
     },
@@ -113,9 +134,8 @@ export default {
     },
     // 新增页面标识符，用于区分不同页面的灵动岛实例
     pageId: {
-
       type: String,
-      default: 'default_page'
+      default: "default_page",
     },
   },
   data() {
@@ -143,7 +163,7 @@ export default {
     // 计算固定定位的top值
     fixedTopPosition() {
       // 状态栏高度 + 导航栏高度(40px) + 间距(20px)
-      return this.statusBarHeight + 40+20 ;
+      return this.statusBarHeight + 40 + 20;
     },
     // 计算占位区域高度 - 始终保持固定高度，等于灵动岛大卡片高度
     placeholderHeight() {
@@ -209,7 +229,7 @@ export default {
     addScrollListener() {
       // 只监听带页面ID的滚动事件，避免不同页面间的状态冲突
       const eventName = `pageScroll_${this.pageId}`;
-      console.log('DynamicIsland 添加滚动监听:', eventName);
+      console.log("DynamicIsland 添加滚动监听:", eventName);
       uni.$on(eventName, this.handlePageScroll);
     },
     // 移除滚动监听
@@ -222,18 +242,9 @@ export default {
     handlePageScroll(e) {
       const scrollTop = e.scrollTop || e;
       const shouldScroll = scrollTop > this.scrollThreshold;
-      
-      console.log('DynamicIsland 接收到滚动事件:', {
-        pageId: this.pageId,
-        scrollTop,
-        shouldScroll,
-        currentIsScrolled: this.isScrolled
-      });
 
       if (this.isScrolled !== shouldScroll) {
         this.isScrolled = shouldScroll;
-        console.log('DynamicIsland 状态切换:', shouldScroll ? '紧凑模式' : '展开模式');
-
         // 添加触觉反馈
         if (uni.vibrateShort) {
           uni.vibrateShort();
@@ -278,7 +289,11 @@ export default {
     // 获取用户信息
     getUserInfo() {
       try {
-        this.userInfo = (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) || this.$store.state.user.userInfo || {};
+        this.userInfo =
+          (uni.getStorageSync("userInfo") &&
+            JSON.parse(uni.getStorageSync("userInfo"))) ||
+          this.$store.state.user.userInfo ||
+          {};
         // 更新标题显示用户昵称
         if (this.userInfo && this.userInfo.nickname) {
           this.currentTitle = `Hi！${this.userInfo.nickname}，欢迎回来～`;
@@ -321,8 +336,8 @@ export default {
   -webkit-backdrop-filter: blur(20rpx);
   border: 1rpx solid rgba(255, 255, 255, 0.1);
   border-radius: 40rpx;
-  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3), 
-              0 0 0 1rpx rgba(255, 255, 255, 0.05) inset;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3),
+    0 0 0 1rpx rgba(255, 255, 255, 0.05) inset;
 
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
@@ -395,7 +410,6 @@ export default {
 .qr-code {
   width: 32rpx;
   height: 32rpx;
-
 }
 
 .qr-icon {
@@ -563,22 +577,22 @@ export default {
 //     }
 //   }
 // }
-.action-text-box{
-	color: white;
-	
-	.action-text-box-des{
-		font-size: 20rpx;
-	}
-	.action-text-box-msg{
-		font-size: 24rpx;
-		display: flex;
-		align-items: center;
-		margin-top: 20rpx;
-	}
-	.action-text-box-img{
-		width: 57rpx;
-		height: 46rpx;
-		margin-right: 10rpx;
-	}
+.action-text-box {
+  color: white;
+
+  .action-text-box-des {
+    font-size: 20rpx;
+  }
+  .action-text-box-msg {
+    font-size: 24rpx;
+    display: flex;
+    align-items: center;
+    margin-top: 20rpx;
+  }
+  .action-text-box-img {
+    width: 57rpx;
+    height: 46rpx;
+    margin-right: 10rpx;
+  }
 }
 </style>
diff --git a/components/WaterfallLayout.vue b/components/WaterfallLayout.vue
index 4733d39..1796127 100644
--- a/components/WaterfallLayout.vue
+++ b/components/WaterfallLayout.vue
@@ -1,49 +1,69 @@
 <template>
   <view class="waterfall-layout">
-    <!-- 瀑布流容器 -->
-    <view
-      class="waterfall-container"
-      :style="{ height: containerHeight + 'rpx' }"
-    >
-      <view
-        class="waterfall-item"
-        v-for="(item, index) in positionedItems"
-        :key="item.id"
-        :style="{
-          position: 'absolute',
-          left: item.left + 'rpx',
-          top: item.top + 'rpx',
-          width: item.width + 'rpx',
-        }"
-        @click="handleItemClick(item)"
-      >
-        <!-- 图片 -->
-        <image
-          v-if="item.image"
-          :src="item.image"
-          class="item-image"
-          mode="aspectFill"
-        />
-        <!-- 内容区域 -->
-        <view class="item-content">
-          <text v-if="item.title" class="item-title">{{ item.title }}</text>
-          <!-- <text v-if="item.description" class="item-desc">{{ item.description }}</text> -->
-          <!-- <view v-if="item.tags && item.tags.length" class="item-tags">
-            <text class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</text>
-          </view> -->
-          <!-- 用户信息和点赞 -->
-          <view v-if="item.user" class="item-footer">
-            <view class="user-info">
-              <image
-                :src="item.user.avatar"
-                class="user-avatar"
-                mode="aspectFill"
-              />
-              <text class="username">{{ item.user.name }}</text>
+    <view class="waterfall-container">
+      <!-- 左列 -->
+      <view class="column">
+        <view
+          v-for="(item, index) in leftItems"
+          :key="item.id || index"
+          class="waterfall-item"
+          @click="handleItemClick(item)"
+        >
+          <image
+            v-if="item.image"
+            :src="item.image"
+            class="item-image"
+            mode="aspectFill"
+          />
+          <view class="item-content">
+            <text v-if="item.title" class="item-title">{{ item.title }}</text>
+            <view v-if="item.user" class="item-footer">
+              <view class="user-info">
+                <image
+                  :src="item.user.avatar"
+                  class="user-avatar"
+                  mode="aspectFill"
+                />
+                <text class="username">{{ item.user.name }}</text>
+              </view>
+              <view class="like-info">
+                <text class="like-icon">♥</text>
+                <text class="like-count">{{ item.likes }}</text>
+              </view>
             </view>
-            <view class="like-info">
-              <text class="like-icon">♥</text>
-              <text class="like-count">{{ item.likes }}</text>
+          </view>
+        </view>
+      </view>
+      
+      <!-- 右列 -->
+      <view class="column">
+        <view
+          v-for="(item, index) in rightItems"
+          :key="item.id || index"
+          class="waterfall-item"
+          @click="handleItemClick(item)"
+        >
+          <image
+            v-if="item.image"
+            :src="item.image"
+            class="item-image"
+            mode="aspectFill"
+          />
+          <view class="item-content">
+            <text v-if="item.title" class="item-title">{{ item.title }}</text>
+            <view v-if="item.user" class="item-footer">
+              <view class="user-info">
+                <image
+                  :src="item.user.avatar"
+                  class="user-avatar"
+                  mode="aspectFill"
+                />
+                <text class="username">{{ item.user.name }}</text>
+              </view>
+              <view class="like-info">
+                <text class="like-icon">♥</text>
+                <text class="like-count">{{ item.likes }}</text>
+              </view>
             </view>
           </view>
         </view>
@@ -61,7 +81,7 @@ export default {
       type: Array,
       default: () => [],
     },
-    // 列数
+    // 列数（固定为2列）
     columnCount: {
       type: Number,
       default: 2,
@@ -79,128 +99,66 @@ export default {
   },
   data() {
     return {
-      positionedItems: [],
-      containerHeight: 0,
-      columnHeights: [],
+      leftItems: [],
+      rightItems: [],
     };
   },
   watch: {
     items: {
-      handler() {
-        this.$nextTick(() => {
-          this.calculateLayout();
-        });
+      handler(newItems) {
+        this.calculateLayout(newItems);
       },
       immediate: true,
       deep: true,
     },
   },
   mounted() {
-    this.calculateLayout();
+    this.calculateLayout(this.items);
   },
   methods: {
-    // 计算布局
-    calculateLayout() {
-      if (!this.items.length) {
-        this.positionedItems = [];
-        this.containerHeight = 0;
-        return;
-      }
-
-      // 初始化列高度
-      this.columnHeights = new Array(this.columnCount).fill(0);
-      this.positionedItems = [];
-
-      // 逐个处理项目
-      this.items.forEach((item, index) => {
-        this.calculateItemPosition(item, index);
+    // 获取列的实际高度（通过DOM查询）
+    getColumnHeight(columnRef) {
+      if (!columnRef) return 0;
+      const query = uni.createSelectorQuery().in(this);
+      return new Promise((resolve) => {
+        query.select(columnRef).boundingClientRect((data) => {
+          resolve(data ? data.height : 0);
+        }).exec();
       });
-
-      // 设置容器高度
-      this.containerHeight = Math.max(...this.columnHeights) + this.itemGap;
-    },
-
-    // 计算单个项目位置
-     calculateItemPosition(item, index) {
-       // 找到最短的列
-       const shortestColumnIndex = this.columnHeights.indexOf(Math.min(...this.columnHeights))
-       
-       // 协调的间距计算：左右边距20rpx，列间距16rpx
-       const sideMargin = 20 // 左右边距
-       const columnGap = 16 // 列间距
-       // 确保左右边距都是20rpx的计算方式
-       const availableWidth = 750 - 2 * sideMargin // 可用宽度 = 750 - 40 = 710rpx
-       const itemWidth = Math.floor((availableWidth - (this.columnCount - 1) * columnGap) / this.columnCount)
-       
-       // 计算位置 - 确保左右边距都是20rpx
-       const left = sideMargin + shortestColumnIndex * (itemWidth + columnGap)
-       // 修正top计算：第一行距离顶部itemGap，后续项目距离上一个项目itemGap
-       const top = this.columnHeights[shortestColumnIndex] === 0 ? this.itemGap : this.columnHeights[shortestColumnIndex] + this.itemGap;
-
-      // 估算项目高度
-      const estimatedHeight = this.estimateItemHeight(item);
-
-      // 添加到定位项目数组
-      this.positionedItems.push({
-        ...item,
-        left,
-        top,
-        width: itemWidth,
-      });
-
-      // 更新列高度
-      this.columnHeights[shortestColumnIndex] = top + estimatedHeight;
     },
 
-    // 估算项目高度
-    estimateItemHeight(item) {
-      let height = 0;
-
-      // 图片高度
-      if (item.image) {
-        height += 476; // 图片固定高度
+    // 计算布局
+    calculateLayout(items) {
+      if (!items || !items.length) {
+        this.leftItems = [];
+        this.rightItems = [];
+        return;
       }
 
-      // 内容区域padding
-      height += 32; // 上下padding各16rpx
+      // 清空现有数据
+      this.leftItems = [];
+      this.rightItems = [];
 
-      // 标题高度 - 更精确的计算
-      if (item.title) {
-        // 基于字符数和换行估算，考虑中英文混合
-        const titleLength = item.title.length;
-        const charsPerLine = 12; // 每行大约12个字符（考虑中文字符较宽）
-        const titleLines = Math.min(Math.ceil(titleLength / charsPerLine), 2);
-        height += titleLines * 40 + 12; // 行高40rpx（稍微增加） + 底部间距
+      // 逐个添加项目
+      for (let i = 0; i < items.length; i++) {
+        this.addItem(items[i]);
       }
+    },
 
-      // 描述高度 - 更精确的计算
-      // if (item.description) {
-      //   const descLength = item.description.length;
-      //   const charsPerLine = 15; // 描述文字稍小，每行约15个字符
-      //   const descLines = Math.min(Math.ceil(descLength / charsPerLine), 2);
-      //   height += descLines * 36 + 16; // 行高36rpx + 底部间距
-      // }
-
-      // 标签高度 - 考虑多行标签
-      // if (item.tags && item.tags.length) {
-      //   // 估算标签可能占用的行数
-      //   const tagRows = Math.ceil(item.tags.length / 3); // 假设每行最多3个标签
-      //   height += tagRows * 36 + 16; // 每行标签高度36rpx + 底部间距
-      // }
-
-      // 用户信息区域
-      if (item.user) {
-        height += 48 + 16; // 用户信息高度 + 底部间距
+    // 添加单个项目到合适的列
+    addItem(item) {
+      // 简单的交替分配逻辑：比较两列的项目数量
+      if (this.leftItems.length <= this.rightItems.length) {
+        this.leftItems.push(item);
+      } else {
+        this.rightItems.push(item);
       }
-
-      return height;
     },
 
     // 清空所有项目
     clearItems() {
-      this.positionedItems = [];
-      this.containerHeight = 0;
-      this.columnHeights = new Array(this.columnCount).fill(0);
+      this.leftItems = [];
+      this.rightItems = [];
       this.$emit("items-cleared");
     },
 
@@ -211,19 +169,25 @@ export default {
 
     // 获取所有项目
     getAllItems() {
-      return this.positionedItems;
+      return [...this.leftItems, ...this.rightItems];
     },
 
     // 移除项目
     removeItem(itemId) {
-      const index = this.positionedItems.findIndex(
-        (item) => item.id === itemId
-      );
+      // 从左列移除
+      let index = this.leftItems.findIndex(item => item.id === itemId);
       if (index !== -1) {
-        this.positionedItems.splice(index, 1);
-        this.calculateLayout(); // 重新计算布局
+        this.leftItems.splice(index, 1);
+        this.$emit("item-removed", itemId);
+        return;
+      }
+      
+      // 从右列移除
+      index = this.rightItems.findIndex(item => item.id === itemId);
+      if (index !== -1) {
+        this.rightItems.splice(index, 1);
+        this.$emit("item-removed", itemId);
       }
-      this.$emit("item-removed", itemId);
     },
   },
 };
@@ -236,12 +200,19 @@ export default {
 }
 
 .waterfall-container {
-  position: relative;
-  width: 100%;
+  display: flex;
+  gap: 16rpx;
   padding: 0 20rpx;
   box-sizing: border-box;
 }
 
+.column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
 .waterfall-item {
   box-sizing: border-box;
   border-radius: 12rpx;