|
|
@@ -0,0 +1,125 @@
|
|
|
+<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>
|
|
|
+var DIM_CONFIG = {
|
|
|
+ body: { icon: '🌏', name: '身', subtitle: '科学管理全家健康数据', features: ['七维雷达图', '健康报告AI解读', '能量打卡', '精准营养方案'], gradient: 'linear-gradient(135deg, #FFF7ED, rgba(255,140,66,0.12))', color: '#FF8C42' },
|
|
|
+ mind: { icon: '🔥', name: '心', subtitle: '关注全家心理健康与情绪成长', features: ['EMI心理测评', '情绪趋势追踪', '家庭天盘', '疏导工具'], gradient: 'linear-gradient(135deg, #FFF0F5, rgba(255,107,157,0.12))', color: '#FF6B9D' },
|
|
|
+ wisdom: { icon: '⚡', name: '智', subtitle: '提升全家认知能力与学习效率', features: ['认知雷达图', '认知训练', '测评预约', '成长档案'], gradient: 'linear-gradient(135deg, #F0F0FF, rgba(99,102,241,0.12))', color: '#6366F1' },
|
|
|
+ action: { icon: '🌿', name: '行', subtitle: '改善全家关系与沟通能力', features: ['关系质量问卷', '互动记录', '任务协作', '家庭挑战'], gradient: 'linear-gradient(135deg, #F0FFF4, rgba(16,185,129,0.12))', color: '#10B981' },
|
|
|
+ wealth: { icon: '💧', name: '富', subtitle: '分享价值，收获财富', features: ['财富能量仪表盘', '推广收益统计', '邀请返利', '会员权益'], gradient: 'linear-gradient(135deg, #FFFBEB, rgba(245,158,11,0.12))', color: '#F59E0B' }
|
|
|
+}
|
|
|
+
|
|
|
+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>
|
|
|
+.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: #333;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.dim-intro-subtitle {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #666;
|
|
|
+ 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: #999;
|
|
|
+ margin-right: 8rpx;
|
|
|
+}
|
|
|
+.dim-intro-feature-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.dim-intro-footer {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.dim-intro-link {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+</style>
|
iwt