|
|
@@ -1,28 +1,20 @@
|
|
|
<template>
|
|
|
<view class="family-feed">
|
|
|
- <view class="feed-header" v-if="showHeader">
|
|
|
- <text class="feed-icon">📢</text>
|
|
|
- <text class="feed-title">动态</text>
|
|
|
- </view>
|
|
|
- <!-- 平台公告（置顶显示） -->
|
|
|
- <view class="notice-list" v-if="notices.length > 0">
|
|
|
- <view class="notice-item" v-for="(n, idx) in notices" :key="'n' + idx" @click="onNoticeClick(n)">
|
|
|
- <view class="notice-tag" :class="'notice-type-' + n.type">{{ noticeTypeLabel(n.type) }}</view>
|
|
|
- <text class="notice-title">{{ n.title }}</text>
|
|
|
- <text class="notice-time">{{ n.time }}</text>
|
|
|
+ <!-- 有动态：标题 + 小喇叭 + 单行滚动 -->
|
|
|
+ <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>
|
|
|
- <!-- 家庭动态（横向滚动） -->
|
|
|
- <scroll-view scroll-x class="feed-scroll" scroll-with-animation :show-scrollbar="false" v-if="familyItems.length > 0">
|
|
|
- <view class="feed-list">
|
|
|
- <view class="feed-item" v-for="(item, idx) in familyItems" :key="idx">
|
|
|
- <text class="feed-msg">{{ item.text }}</text>
|
|
|
- <text class="feed-time">{{ item.time }}</text>
|
|
|
+ <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>
|
|
|
- </scroll-view>
|
|
|
+ </view>
|
|
|
<!-- 空态 -->
|
|
|
- <view v-if="notices.length === 0 && familyItems.length === 0" class="feed-empty">
|
|
|
+ <view v-else class="feed-empty">
|
|
|
<text class="feed-empty-text">暂无动态</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -46,19 +38,24 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
- familyItems: function() {
|
|
|
- return this.items.filter(function(item) {
|
|
|
- return item.type !== 'notice'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- noticeTypeLabel: function(type) {
|
|
|
- var labels = { platform: '公告', activity: '活动', promotion: '优惠' }
|
|
|
- return labels[type] || '公告'
|
|
|
- },
|
|
|
- onNoticeClick: function(n) {
|
|
|
- this.$emit('notice-click', n)
|
|
|
+ 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(' ｜ ')
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -69,113 +66,70 @@ export default {
|
|
|
margin: 12rpx 30rpx 0;
|
|
|
background: #fff;
|
|
|
border-radius: 16rpx;
|
|
|
- padding: 12rpx 16rpx 14rpx;
|
|
|
+ padding: 10rpx 16rpx;
|
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.feed-header {
|
|
|
+.feed-row {
|
|
|
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;
|
|
|
-}
|
|
|
-
|
|
|
-/* 平台公告 */
|
|
|
-.notice-list {
|
|
|
- margin-bottom: 12rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.notice-item {
|
|
|
+.feed-header {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
- padding: 10rpx 12rpx;
|
|
|
- background: #FFF7ED;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- border-left: 4rpx solid #F97316;
|
|
|
-}
|
|
|
-
|
|
|
-.notice-tag {
|
|
|
- font-size: 18rpx;
|
|
|
- padding: 2rpx 10rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- margin-right: 10rpx;
|
|
|
+ gap: 4rpx;
|
|
|
flex-shrink: 0;
|
|
|
+ margin-right: 12rpx;
|
|
|
}
|
|
|
|
|
|
-.notice-tag-platform { background: #FEF3C7; color: #92400E; }
|
|
|
-.notice-tag-activity { background: #DBEAFE; color: #1E40AF; }
|
|
|
-.notice-tag-promotion { background: #FCE7F3; color: #9D174D; }
|
|
|
-
|
|
|
-.notice-title {
|
|
|
- flex: 1;
|
|
|
+.feed-title {
|
|
|
font-size: 24rpx;
|
|
|
+ font-weight: bold;
|
|
|
color: #333;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
-.notice-time {
|
|
|
+.feed-icon {
|
|
|
font-size: 20rpx;
|
|
|
- color: #999;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-left: 12rpx;
|
|
|
}
|
|
|
|
|
|
-/* 家庭动态横向滚动 */
|
|
|
-.feed-scroll {
|
|
|
- width: 100%;
|
|
|
+/* 单行跑马灯 */
|
|
|
+.feed-marquee {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
}
|
|
|
|
|
|
-.feed-list {
|
|
|
+.feed-marquee-inner {
|
|
|
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;
|
|
|
+ animation: feedMarquee 20s linear infinite;
|
|
|
}
|
|
|
|
|
|
-.feed-msg {
|
|
|
- font-size: 20rpx;
|
|
|
- color: #333;
|
|
|
- margin-right: 4rpx;
|
|
|
+.feed-marquee-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
+ padding-right: 40rpx;
|
|
|
}
|
|
|
|
|
|
-.feed-time {
|
|
|
- font-size: 16rpx;
|
|
|
- color: #999;
|
|
|
- flex-shrink: 0;
|
|
|
+@keyframes feedMarquee {
|
|
|
+ 0% { transform: translateX(0); }
|
|
|
+ 100% { transform: translateX(-50%); }
|
|
|
}
|
|
|
|
|
|
.feed-empty {
|
|
|
- padding: 20rpx 0;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
