cfc/cfc-frontend/components/PlayfulCard.vue

<template>
  <view class="playful-card" :class="cardClasses" :style="computedStyle" @click="handleClick">
    <view class="playful-card__header" v-if="hasHeader">
      <slot name="header"></slot>
    </view>
    <view class="playful-card__content">
      <slot></slot>
    </view>
    <view class="playful-card__actions" v-if="hasActions">
      <slot name="actions"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PlayfulCard',
  props: {
    variant: { type: String, default: 'flat' },
    shadow: { type: String, default: 'md' },
    clickable: { type: Boolean, default: false },
    padding: { type: String, default: '' }
  },
  data() {
    return {
      hasHeader: false,
      hasActions: false
    }
  },
  mounted() {
    this.hasHeader = !!this.$slots.header
    this.hasActions = !!this.$slots.actions
  },
  computed: {
    cardClasses() {
      return [
        'playful-card--' + this.variant,
        'playful-card--shadow-' + this.shadow,
        this.clickable ? 'playful-card--clickable' : ''
      ].filter(Boolean)
    },
    computedStyle() {
      const style = {}
      if (this.padding) style.padding = this.padding
      return style
    }
  },
  methods: {
    handleClick(e) {
      if (this.clickable) this.$emit('click', e)
    }
  }
}
</script>

<style scoped>
.playful-card {
  background: var(--surface, #ffffff);
  border-radius: 20rpx;
  padding: 24rpx;
  transition: transform .15s ease, box-shadow .2s ease;
}
.playful-card--flat {
  border: 1px solid var(--border, #CBD5E1);
  box-shadow: var(--shadow-md);
}
.playful-card--clay {
  border: 1px solid var(--border-light, #E2E8F0);
  background: var(--surface, #FFFFFF);
  box-shadow: var(--shadow-md);
}
.playful-card--bordered {
  border: 1px solid var(--border-light, #E2E8F0);
}
.playful-card--teacher {
  border-left: 4px solid var(--color-primary, #5B9BD5);
  border-top: 1px solid var(--border-light, #E2E8F0);
  border-right: 1px solid var(--border-light, #E2E8F0);
  border-bottom: 1px solid var(--border-light, #E2E8F0);
  box-shadow: var(--shadow-sm);
  background: var(--surface, #ffffff);
}
.playful-card--shadow-none { box-shadow: none; }
.playful-card--shadow-sm { box-shadow: var(--shadow-sm); }
.playful-card--shadow-md { box-shadow: var(--shadow-md); }
.playful-card--shadow-lg { box-shadow: var(--shadow-lg); }
.playful-card--clickable:active {
  transform: scale(0.98);
}
.playful-card__header {
  font-weight: 700;
  font-size: 32rpx;
  margin-bottom: 16rpx;
  color: var(--text, #1E293B);
}
.playful-card__content {
  color: var(--text, #1E293B);
  line-height: 1.6;
  font-size: 28rpx;
}
.playful-card__actions {
  margin-top: 16rpx;
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
  flex-wrap: wrap;
}
</style>