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

<template>
  <view class="tab-transition-overlay" :style="'background:' + bgGradient">
    <view class="transition-content" :class="{ 'fade-out': fadeOut }">
      <!-- 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>
var DIM_MAP = {
  action:  { char: '行', icon: '🌿', color: '#10B981', label: '知行合一' },
  body:    { char: '身', icon: '🌏', color: '#8D6E63', label: '主动健康' },
  wisdom:  { char: '智', icon: '⚡', color: '#6366F1', label: '赋能未来' },
  mind:    { char: '心', icon: '🔥', color: '#FF6B9D', label: '大爱传承' },
  wealth:  { char: '富', icon: '💧', color: '#F59E0B', label: '利他创富' }
}

export default {
  props: {
    dimCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      fadeOut: false
    }
  },
  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() {
    var self = this
    setTimeout(function() {
      self.fadeOut = true
    }, 800)
  }
}
</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>