cfc/cfc-frontend/components/PageBanner.vue

<template>
  <view class="page-banner" :style="bannerStyle">
    <view class="banner-left">
      <image class="banner-logo" src="/static/logo.png" mode="aspectFit" />
      <view class="banner-texts">
        <text class="banner-name">浠艾福</text>
        <text class="banner-tagline">{{ tagline }}</text>
      </view>
    </view>
    <view class="banner-right" v-if="quote">
      <text class="banner-quote">{{ quote }}</text>
    </view>
  </view>
</template>

<script>
/**
 * 各主题对应沙盘颜色的渐变背景
 * 五行色来源：wuxing-sandbox 组件和 render.js
 *   身(body/土): #8D6E63
 *   心(mind/火): #FF6B35
 *   智(wisdom/金): #FFD700
 *   行(action/木): #4CAF50
 *   富(wealth/水): #F59E0B
 */
var THEME_STYLES = {
  home: {
    background: 'linear-gradient(135deg, #FF8A65 0%, #FFB74D 100%)',
    color: '#FFFFFF'
  },
  body: {
    background: 'linear-gradient(135deg, #8D6E63 0%, #A1887F 100%)',
    color: '#FFFFFF'
  },
  mind: {
    background: 'linear-gradient(135deg, #FF6B35 0%, #E65100 100%)',
    color: '#FFFFFF'
  },
  wisdom: {
    background: 'linear-gradient(135deg, #FFD700 0%, #FFA000 100%)',
    color: '#5D4037'
  },
  'mind-wisdom': {
    background: 'linear-gradient(135deg, #FF6B35 0%, #FFD700 100%)',
    color: '#FFFFFF'
  },
  action: {
    background: 'linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%)',
    color: '#FFFFFF'
  },
  wealth: {
    background: 'linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%)',
    color: '#FFFFFF'
  }
}

export default {
  props: {
    /** banner 主题：home | body | mind | wisdom | mind-wisdom | action | wealth */
    theme: {
      type: String,
      default: 'home'
    },
    /** 平台一句介绍（显示在名称下方） */
    tagline: {
      type: String,
      default: '家庭健康成长俱乐部'
    },
    /** 右侧金句 */
    quote: {
      type: String,
      default: ''
    }
  },
  computed: {
    bannerStyle: function() {
      var style = THEME_STYLES[this.theme] || THEME_STYLES.home
      return {
        background: style.background,
        color: style.color
      }
    }
  }
}
</script>

<style scoped>
.page-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
  min-height: 100rpx;
  border-radius: 0;
  margin: 0;
}

.banner-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

.banner-logo {
  width: 56rpx;
  height: 56rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
  margin-right: 16rpx;
}

.banner-texts {
  display: flex;
  flex-direction: column;
}

.banner-name {
  font-size: 32rpx;
  font-weight: 700;
  letter-spacing: 4rpx;
  line-height: 1.3;
}

.banner-tagline {
  font-size: 20rpx;
  opacity: 0.85;
  line-height: 1.4;
  margin-top: 2rpx;
}

.banner-right {
  flex: 1;
  text-align: right;
  margin-left: 20rpx;
}

.banner-quote {
  font-size: 22rpx;
  opacity: 0.92;
  line-height: 1.4;
  display: inline-block;
  text-align: right;
  letter-spacing: 1rpx;
}
</style>