feat(ScrollableFamilyList): 改进列表项布局并添加底部提示

- 将随机偏移改为按行数规律排列（奇数行靠左，偶数行靠右）
- 增加extraPlaceholder属性控制占位数量
- 在FamilyRank页面添加底部提示文本
- 调整RankingCard组件高度和占位配置

 <!--
  * @Date: 2025-01-09 00:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-29 13:07:23
+ * @LastEditTime: 2025-10-29 13:24:24
  * @FilePath: /lls_program/src/components/RankingCard.vue
  * @Description: 排行榜卡片组件
 -->
@@ -142,7 +142,8 @@
     <view v-if="activeTab === 'support'" class="scrollable-family-section mt-1" style="padding: 0 24rpx 34rpx;">
       <ScrollableFamilyList
         :family-data="familyDanmus"
-        height="560rpx"
+        :extra-placeholder="0"
+        height="600rpx"
       />
     </view>
 

@@ -72,6 +72,11 @@ const props = defineProps({
   listenExternalScroll: {
     type: Boolean,
     default: false
+  },
+  // 添加额外占位，用于触发滚动事件
+  extraPlaceholder: {
+    type: Number,
+    default: 1
   }
 })
 
@@ -93,29 +98,28 @@ const totalPages = computed(() => {
 const currentPageData = computed(() => {
   const start = currentPage.value * props.itemsPerPage
   // 每页多显示一个item，有利于滚动触发
-  const end = start + props.itemsPerPage + 2
+  const end = start + props.itemsPerPage + props.extraPlaceholder
   return props.familyData.slice(start, end)
 })
 
 // 随机水平位置数组
 const randomOffsets = ref([])
 
-// 生成随机水平偏移
+// 生成按行数规律排列的偏移
 const generateRandomOffsets = () => {
   // 为实际显示的item数量生成偏移（包括多出的一个）
-  const actualItemCount = Math.min(props.itemsPerPage + 2, props.familyData.length - currentPage.value * props.itemsPerPage)
+  const actualItemCount = Math.min(props.itemsPerPage + props.extraPlaceholder, props.familyData.length - currentPage.value * props.itemsPerPage)
 
   randomOffsets.value = Array.from({ length: actualItemCount }, (_, index) => {
-    // 确保一屏内有靠最左和最右的简介，但不能被裁切
-    if (index === 0) {
-      // 第一个简介靠左，但留出足够边距避免裁切
-      return 0  // 不偏移，保持在安全区域
-    } else if (index === actualItemCount - 1) {
-      // 最后一个简介靠最右，使用特殊标记
-      return 100  // 使用特殊值标记需要贴右边
+    // 按行数规律排列：奇数行(1,3,5...)靠左，偶数行(2,4,6...)靠右
+    const rowNumber = index + 1 // 行号从1开始
+    
+    if (rowNumber % 2 === 1) {
+      // 奇数行靠左边容器
+      return 0  // 不偏移，靠左
     } else {
-      // 其他简介在中间随机分布，避免负偏移
-      return Math.floor(Math.random() * 81) // 0rpx 到 80rpx
+      // 偶数行靠右边容器，使用特殊标记
+      return 100  // 使用特殊值标记需要贴右边
     }
   })
 }
@@ -123,10 +127,10 @@ const generateRandomOffsets = () => {
 // 获取每个项目的样式
 const getItemStyle = (index) => {
   const offset = randomOffsets.value[index] || 0
-  const isLastItem = index === randomOffsets.value.length - 1
+  const rowNumber = index + 1 // 行号从1开始
 
-  // 最后一个item贴右边的特殊处理
-  if (isLastItem && offset === 100) {
+  // 偶数行贴右边的特殊处理
+  if (rowNumber % 2 === 0 && offset === 100) {
     return {
       marginBottom: '24rpx',
       maxWidth: '100%',
@@ -138,15 +142,13 @@ const getItemStyle = (index) => {
     }
   }
 
-  // 其他item的正常处理
+  // 奇数行靠左的处理
   return {
     transform: `translateX(${offset}rpx)`,
     marginBottom: '24rpx',
-    // 确保内容不被裁切，所有偏移都是正值或0
-    paddingRight: offset > 50 ? '24rpx' : '0',
     maxWidth: '100%',
-    // 确保左侧有足够的边距
-    paddingLeft: '0'
+    paddingLeft: '0',
+    paddingRight: '0'
   }
 }
 
@@ -313,7 +315,7 @@ onMounted(() => {
   box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
   backdrop-filter: blur(12rpx);
   border: 2rpx solid rgba(255, 255, 255, 0.5);
-  max-width: 500rpx;
+  max-width: 550rpx;
   min-width: 350rpx;
   transition: all 0.3s ease;
 }

 <!--
  * @Date: 2025-09-01 13:07:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-29 12:49:27
+ * @LastEditTime: 2025-10-29 13:34:25
  * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
  * @Description: 文件描述
 -->
@@ -177,6 +177,7 @@
         height="1200rpx"
         :listen-external-scroll="true"
       />
+      <view class="scrollable-family-list-footer">上滑有更多助力家庭自荐</view>
     </view>
 
     <!-- 我的排名悬浮卡片 -->
@@ -1107,4 +1108,15 @@ onMounted(async () => {
     }
   }
 }
+
+.scrollable-family-list-footer {
+  text-align: center;
+  font-size: 28rpx;
+  color: rgba(255, 255, 255, 0.8);
+  margin-top: 32rpx;
+  position: absolute;
+  bottom: 40rpx;
+  left: 0;
+  right: 0;
+}
 </style>