cfc/cfc-frontend/components/DimensionIntroCard.vue

<template>
  <view class="dim-intro-card" :style="'background:' + bgGradient">
    <view class="dim-intro-header">
      <text class="dim-intro-icon">{{ icon }}</text>
      <view class="dim-intro-text">
        <text class="dim-intro-title">{{ dimName }}</text>
        <text class="dim-intro-subtitle">{{ subtitle }}</text>
      </view>
    </view>
    <view class="dim-intro-features">
      <view class="dim-intro-feature" v-for="(f, i) in features" :key="i">
        <text class="dim-intro-bullet">●</text>
        <text class="dim-intro-feature-text">{{ f }}</text>
      </view>
    </view>
    <view class="dim-intro-footer" v-if="learnMoreText">
      <text class="dim-intro-link" @click="onLearnMore">{{ learnMoreText }}</text>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '../utils/brand-colors.js'
var DIM_CONFIG = {
  body:    { icon: '🌏', name: '身', subtitle: '科学管理全家健康数据', features: ['七维雷达图', '健康报告解读', '能量打卡', '精准营养方案'], gradient: 'linear-gradient(135deg, #FFF7ED, rgba(255,140,66,0.12))', color: BrandColors.body },
  mind:    { icon: '🔥', name: '心', subtitle: '关注全家心理健康与情绪成长', features: ['EMI心理测评', '情绪趋势追踪', '家庭天盘', '疏导工具'], gradient: 'linear-gradient(135deg, #FFF0F5, rgba(255,107,157,0.12))', color: BrandColors.mind },
  wisdom:  { icon: '⚡', name: '智', subtitle: '提升全家认知能力与学习效率', features: ['认知雷达图', '认知训练', '测评预约', '成长记录'], gradient: 'linear-gradient(135deg, #F0F0FF, rgba(99,102,241,0.12))', color: BrandColors.wisdom },
  action:  { icon: '🌿', name: '行', subtitle: '改善全家关系与沟通能力', features: ['关系质量问卷', '互动记录', '任务协作', '家庭挑战'], gradient: 'linear-gradient(135deg, #F0FFF4, rgba(16,185,129,0.12))', color: BrandColors.success },
  wealth:  { icon: '💧', name: '富', subtitle: '分享价值，收获财富', features: ['财富能量仪表盘', '推广收益统计', '邀请返利', '会员权益'], gradient: 'linear-gradient(135deg, #FFFBEB, rgba(245,158,11,0.12))', color: BrandColors.wealth }
}

export default {
  name: 'DimensionIntroCard',
  props: {
    dimCode: {
      type: String,
      required: true,
      validator: function(v) { return DIM_CONFIG.hasOwnProperty(v) }
    },
    learnMoreText: {
      type: String,
      default: '了解更多 ›'
    },
    learnMoreUrl: {
      type: String,
      default: ''
    }
  },
  computed: {
    dimConfig: function() {
      return DIM_CONFIG[this.dimCode]
    },
    icon: function() { return this.dimConfig.icon },
    dimName: function() { return this.dimConfig.name },
    subtitle: function() { return this.dimConfig.subtitle },
    features: function() { return this.dimConfig.features },
    bgGradient: function() { return this.dimConfig.gradient }
  },
  methods: {
    onLearnMore: function() {
      if (this.learnMoreUrl) {
        uni.navigateTo({ url: this.learnMoreUrl })
      }
    }
  }
}
</script>

<style lang="scss">
.dim-intro-card {
  margin: 16rpx 30rpx 0;
  padding: 24rpx 28rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.dim-intro-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}
.dim-intro-icon {
  font-size: 48rpx;
  margin-right: 16rpx;
}
.dim-intro-text {
  flex: 1;
}
.dim-intro-title {
  font-size: 28rpx;
  font-weight: bold;
  color: $facade-text-strong;
  display: block;
}
.dim-intro-subtitle {
  font-size: 22rpx;
  color: $facade-text-body;
  margin-top: 4rpx;
  display: block;
}
.dim-intro-features {
  margin-bottom: 16rpx;
}
.dim-intro-feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 8rpx;
}
.dim-intro-bullet {
  font-size: 16rpx;
  color: $facade-text-muted;
  margin-right: 8rpx;
}
.dim-intro-feature-text {
  font-size: 24rpx;
  color: $facade-text-strong;
}
.dim-intro-footer {
  text-align: right;
}
.dim-intro-link {
  font-size: 24rpx;
  color: $facade-text-muted;
}
</style>