|
|
@@ -3,6 +3,10 @@
|
|
|
<!-- 头像区域 -->
|
|
|
<view class="card-avatar-wrap">
|
|
|
<image class="card-avatar" :src="member.avatar || defaultAvatar" mode="aspectFill" />
|
|
|
+ <!-- 待办角标 -->
|
|
|
+ <view v-if="pendingCount > 0" class="card-pending-badge">
|
|
|
+ <text class="badge-num">{{ pendingCount }}</text>
|
|
|
+ </view>
|
|
|
<!-- 关系标签徽章 -->
|
|
|
<view class="card-relation-badge" :style="{ background: relationColor }">
|
|
|
<text class="card-relation-text">{{ member.relationship || member.relativeLabel || member.roleLabel || '成员' }}</text>
|
|
|
@@ -51,7 +55,8 @@ export default {
|
|
|
props: {
|
|
|
member: { type: Object, required: true },
|
|
|
isSelected: { type: Boolean, default: false },
|
|
|
- energyScore: { type: Number, default: null }
|
|
|
+ energyScore: { type: Number, default: null },
|
|
|
+ pendingCount: { type: Number, default: 0 }
|
|
|
},
|
|
|
computed: {
|
|
|
defaultAvatar: function() {
|
|
|
@@ -159,6 +164,26 @@ export default {
|
|
|
.spouse-icon {
|
|
|
font-size: 18rpx;
|
|
|
}
|
|
|
+/* 待办角标 */
|
|
|
+.card-pending-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: -6rpx;
|
|
|
+ right: -6rpx;
|
|
|
+ min-width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ padding: 0 8rpx;
|
|
|
+ background: #FF6B6B;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.badge-num {
|
|
|
+ display: block;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
.card-relation-dots {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|