cfc/cfc-frontend/components/FamilyFeed.vue

<template>
  <view class="family-feed">
    <!-- 有动态：标题 + 小喇叭 + 单行滚动 -->
    <view class="feed-row" v-if="marqueeText">
      <view class="feed-header" v-if="showHeader">
        <text class="feed-title">动态</text>
        <text class="feed-icon">📢</text>
      </view>
      <view class="feed-marquee">
        <view class="feed-marquee-inner">
          <text class="feed-marquee-text">{{ marqueeText }}</text>
          <text class="feed-marquee-text">{{ marqueeText }}</text>
        </view>
      </view>
    </view>
    <!-- 空态 -->
    <view v-else class="feed-empty">
      <text class="feed-empty-text">暂无动态</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FamilyFeed',
  props: {
    items: {
      type: Array,
      default: function() { return [] }
    },
    notices: {
      type: Array,
      default: function() { return [] }
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    marqueeText: function() {
      var parts = []
      var i
      var notices = this.notices || []
      for (i = 0; i < notices.length; i++) {
        var n = notices[i]
        if (n && n.title) {
          parts.push(n.title)
        }
      }
      var items = this.items || []
      for (i = 0; i < items.length; i++) {
        var item = items[i]
        if (item && item.type !== 'notice' && item.text) {
          parts.push(item.text)
        }
      }
      return parts.join('　｜　')
    }
  }
}
</script>

<style>
.family-feed {
  margin: 12rpx 30rpx 0;
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  overflow: hidden;
}

.feed-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 44rpx;
  line-height: 44rpx;
  overflow: hidden;
}

.feed-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4rpx;
  flex-shrink: 0;
  margin-right: 12rpx;
}

.feed-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #333;
}

.feed-icon {
  font-size: 20rpx;
}

/* 单行跑马灯 */
.feed-marquee {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  height: 44rpx;
  line-height: 44rpx;
}

.feed-marquee-inner {
  display: inline-flex;
  flex-direction: row;
  white-space: nowrap;
  animation: feedMarquee 20s linear infinite;
}

.feed-marquee-text {
  font-size: 24rpx;
  color: #666;
  white-space: nowrap;
  padding-right: 40rpx;
}

@keyframes feedMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.feed-empty {
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
}

.feed-empty-text {
  font-size: 24rpx;
  color: #ccc;
}
</style>