cfc/cfc-frontend/components/tab-transition.vue

<template>
  <view class="tab-transition-overlay" :style="'background:' + bgGradient">
    <view class="transition-content">
      <!-- Large dimension character -->
      <text class="dim-char" :style="'color:' + dimConfig.color">{{ dimConfig.char }}</text>
      <!-- Icon -->
      <text class="dim-icon">{{ dimConfig.icon }}</text>
      <!-- Dimension label -->
      <text class="dim-label" :style="'color:' + dimConfig.color">{{ dimConfig.label }}</text>
      <!-- Animated energy bar -->
      <view class="energy-bar-track">
        <view class="energy-bar-fill" :style="'background:' + dimConfig.color"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '../utils/brand-colors.js'
var DIM_MAP = {
  action:  { char: '行', icon: '🌿', color: BrandColors.success, label: '人际和谐' },
  body:    { char: '身', icon: '🌏', color: BrandColors.brownWarm, label: '根基永因' },
  wisdom:  { char: '智', icon: '⚡', color: BrandColors.wisdom, label: '赋能未来' },
  mind:    { char: '心', icon: '🔥', color: BrandColors.mind, label: '大爱传承' },
  wealth:  { char: '富', icon: '💧', color: BrandColors.wealth, label: '利他创富' }
}

export default {
  props: {
    dimCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      mountedAt: 0
    }
  },
  computed: {
    dimConfig: function() {
      return DIM_MAP[this.dimCode] || DIM_MAP['action']
    },
    bgGradient: function() {
      var cfg = this.dimConfig
      var hex = cfg.color
      var r = parseInt(hex.slice(1, 3), 16)
      var g = parseInt(hex.slice(3, 5), 16)
      var b = parseInt(hex.slice(5, 7), 16)
      return 'linear-gradient(160deg, #FFF7ED 0%, rgba(' + r + ',' + g + ',' + b + ',0.4) 100%)'
    }
  },
  mounted() {
    this.mountedAt = Date.now()
    var self = this
    // 最多 1.5 秒强制关闭
    setTimeout(function() {
      self.$emit('close')
    }, 1500)
  },
  methods: {
    // 父组件数据加载完成后调用，过渡页至少停留 800ms
    markReady: function() {
      var elapsed = Date.now() - this.mountedAt
      if (elapsed >= 800) {
        this.$emit('close')
      } else {
        var self = this
        setTimeout(function() {
          self.$emit('close')
        }, 800 - elapsed)
      }
    }
  }
}
</script>

<style scoped>
.tab-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transition-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: tab-fade-in 0.2s ease forwards;
}
.transition-content.fade-out {
  animation: tab-fade-out 0.3s ease forwards;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tab-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}

.dim-char {
  font-size: 120rpx;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8rpx;
}

.dim-icon {
  font-size: 48rpx;
  line-height: 1;
  margin-bottom: 16rpx;
}

.dim-label {
  font-size: 32rpx;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 40rpx;
  opacity: 0.8;
}

.energy-bar-track {
  width: 200rpx;
  height: 4rpx;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 2rpx;
  overflow: hidden;
}

.energy-bar-fill {
  width: 0%;
  height: 100%;
  border-radius: 2rpx;
  animation: bar-grow 0.6s ease 0.2s forwards;
}

@keyframes bar-grow {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
</style>