cfc/cfc-frontend/components/FamilyMemberCard.vue

<template>
  <view class="member-card" :class="{ 'member-card--selected': isSelected }" @click="handleClick">
    <view class="member-card__avatar" :class="'avatar-color-' + (member.id % 6)">
      <image v-if="member.avatar" class="member-card__avatar-img" :src="member.avatar" mode="aspectFill" />
      <text v-else class="member-card__avatar-text">{{ member.nickname && member.nickname[0] || '?' }}</text>
    </view>
    <text class="member-card__name">{{ member.nickname }}</text>
    <view class="member-card__tags">
      <text class="member-card__role">{{ member.roleLabel }}</text>
      <text v-if="member.danLevel" class="member-card__dan">{{ member.danLevel }}</text>
    </view>
    <view v-if="isSelected" class="member-card__check">
      <text class="member-card__check-icon">✓</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FamilyMemberCard',
  props: {
    member: { type: Object, required: true },
    isSelected: { type: Boolean, default: false }
  },
  methods: {
    handleClick() {
      this.$emit('select', this.member)
    }
  }
}
</script>

<style scoped>
.member-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 120rpx;
  padding: 16rpx 8rpx 12rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  border: 2rpx solid transparent;
  position: relative;
  transition: all 0.2s ease;
}

.member-card--selected {
  border-color: #5B9BD5;
  background: #EBF5FF;
}

.member-card__avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  overflow: hidden;
}

.member-card__avatar-img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
}

.member-card__avatar-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #FFFFFF;
}

.member-card__name {
  font-size: 22rpx;
  color: #1E293B;
  font-weight: 500;
  max-width: 104rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 1.3;
}

.member-card__tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4rpx;
}

.member-card__role {
  font-size: 18rpx;
  color: #64748B;
  line-height: 1.3;
}

.member-card__dan {
  font-size: 18rpx;
  color: #F97316;
  font-weight: 600;
  line-height: 1.3;
}

.member-card__check {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32rpx;
  height: 32rpx;
  background: #5B9BD5;
  border-radius: 50% 0 16rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-card__check-icon {
  font-size: 18rpx;
  color: #FFFFFF;
  font-weight: 700;
}

/* Avatar color palette */
.avatar-color-0 { background: #5B9BD5; }
.avatar-color-1 { background: #F08A7A; }
.avatar-color-2 { background: #4CAF50; }
.avatar-color-3 { background: #FFB74D; }
.avatar-color-4 { background: #AB47BC; }
.avatar-color-5 { background: #26A69A; }
</style>