cfc/zxyj-frontend/components/PlayfulCard.vue

<template>
  <view class="playful-card" :style="cardStyle">
    <view class="playful-card__header" v-if="$slots.header">
      <slot name="header"></slot>
    </view>
    <view class="playful-card__content">
      <slot></slot>
    </view>
    <view class="playful-card__actions" v-if="$slots.actions">
      <slot name="actions"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PlayfulCard',
  props: {
    // simple elevation control (not strictly required with CSS vars)
    elevation: { type: Number, default: 1 }
  },
  computed: {
    cardStyle() {
      // Optional per-card styling hook; kept simple here
      return {};
    }
  }
}
</script>

<style scoped>
.playful-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.12);
}
.playful-card__header {
  font-weight: 700;
  font-family: var(--font-display, system-ui, -apple-system, "Noto Sans SC", sans-serif);
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.playful-card__content {
  color: var(--text, #1f2937);
  line-height: 1.6;
  font-family: var(--font-body, system-ui, -apple-system, "Inter", sans-serif);
}
.playful-card__actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>