cfc/cfc-frontend/components/FamilyFeed.vue

<template>
  <view class="family-feed">
    <view class="feed-header" v-if="showHeader">
      <text class="feed-icon">📢</text>
      <text class="feed-title">家庭动态</text>
    </view>
    <scroll-view scroll-x class="feed-scroll" scroll-with-animation :show-scrollbar="false">
      <view class="feed-list">
        <view class="feed-item" v-for="(item, idx) in feedItems" :key="idx">
          <text class="feed-msg">{{ item.text }}</text>
          <text class="feed-time">{{ item.time }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'FamilyFeed',
  props: {
    items: {
      type: Array,
      default: function() { return [] }
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  data: function() {
    return {
      scrollLeft: 0
    }
  },
  computed: {
    feedItems: function() {
      return this.items.length > 0 ? this.items : [
        { text: '暂无动态，先做几个任务吧', time: '' }
      ]
    }
  }
}
</script>

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

.feed-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6rpx;
  margin-bottom: 8rpx;
}

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

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

.feed-scroll {
  width: 100%;
  white-space: nowrap;
}

.feed-list {
  display: inline-flex;
  flex-direction: row;
  gap: 12rpx;
  padding: 2rpx 0;
}

.feed-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  background: #F8FAFC;
  border-radius: 20rpx;
  padding: 6rpx 14rpx;
  white-space: nowrap;
}

.feed-msg {
  font-size: 20rpx;
  color: #333;
  margin-right: 4rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-time {
  font-size: 16rpx;
  color: #999;
  flex-shrink: 0;
}
</style>