topfans/frontend/pages/dashboard/components/DashboardHeader.vue

<template>
  <view class="dashboard-header">
    <!-- 装饰渐变背景 -->
    <view class="header-deco-bg"></view>

    <!-- 装饰光晕（红粉色） -->
    <!-- <view class="header-glow"></view> -->

    <!-- 状态栏占位（iPhone 44px） -->
    <!-- <view class="status-bar-placeholder"></view> -->

    <!-- 渐变标题 -->
    <view class="title-wrap">
      <image
            class="title-icon"
            src="/static/dashboard/dashboard-title.png"
            mode="aspectFit"
          />
    </view>

    <view class="header-content">
      <!-- Tab 胶囊 -->
      <view class="header-tabs">
        <view
          :class="['tab', activeTab === 'crystal' ? 'tab-active' : '']"
          @tap="$emit('update:activeTab', 'crystal')"
        >
          <image
            class="tab-icon"
            src="/static/dashboard/crystal-bg.png"
            mode="aspectFit"
          />
          <text class="tab-title">收益总览</text>
        </view>
        <view
          :class="['tab', activeTab === 'season' ? 'tab-active' : '']"
          @tap="$emit('update:activeTab', 'season')"
        >
          <image
            class="tab-icon"
            src="/static/dashboard/season-bg.png"
            mode="aspectFit"
          />
          <text class="tab-title">赛季总览</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  activeTab: { type: String, default: "crystal" },
});
defineEmits(["update:activeTab"]);
</script>

<style lang="scss" scoped>
.dashboard-header {
  position: relative;
  height: 360rpx;
  // overflow: hidden;
}

.status-bar-placeholder {
  height: 44px;
}

.header-deco-bg {
  background-image: url("/static/dashboard/header-bj.png");
  background-size: 130%;
  // background-repeat: no-repeat;
  // background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 700rpx;
  z-index: 0;
  // 底部渐隐蒙版：让 header 底部的红色 bg 渐变到透明，
  // 下方页面的 bj.png + 渐变蒙层从底部自然透出，形成柔和衔接
  // 700rpx 中 0-30%(0-210rpx) 完全不透明，30-50%(210-360rpx) 渐变到完全透明
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 80%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 60%,
    transparent 80%
  );
}

.header-glow {
  position: absolute;
  top: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 400rpx;
  height: 400rpx;
  background: radial-gradient(
    circle,
    rgba(255, 200, 100, 0.5) 0%,
    transparent 70%
  );
  filter: blur(30px);
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  padding: 0 32rpx 32rpx;
  top: 272rpx;
}

.mascot {
  width: 104rpx;
  height: 104rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b 0%, #ffb199 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 30px rgba(242, 21, 21, 0.47);
  margin-bottom: 16rpx;
}

.title-wrap {
  margin-bottom: 24rpx;
  /* 让出 iOS 状态栏 + 顶部 nav 区域,避免标题被遮挡 */
  // padding-top: 64rpx;
      position: absolute;
    right: 40rpx;
    top: 160rpx;
}

.title-icon{
  width: 240rpx;
  height: 64rpx;
}

.header-title {
  font-size: 48rpx;
  font-weight: 700;
  /* 实色兜底:在不支持 -webkit-background-clip 的环境(微信小程序、部分 Android WebView、老 iOS WebView)也能看见 */
  color: #ffb199;
  /* 渐变文字效果:现代环境(H5/新版 WebView)会用渐变覆盖实色 */
  background: linear-gradient(90deg, #ffe5b4 0%, #ffb199 50%, #ff8a95 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}


.header-tabs {
  display: flex;
  // background: rgba(0, 0, 0, 0.15);
  // border-radius: 22rpx;
  padding: 6rpx;
  width: 100%;
  max-width: 500rpx;
  height: 184rpx;
  position: absolute;
  right: 32rpx;
}

.tab {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 28rpx 0;
  border-radius: 22rpx;
  margin-left: 8px;
  background: linear-gradient(
    90deg,
    rgba(255, 222, 8, 0.1519) -17.54%,
    rgba(252, 100, 102, 0.31) 64.4%,
    rgba(244, 88, 104, 0.31) 116.67%
  );
  box-shadow: 2px 2px 4px 0px #f2151578;

  backdrop-filter: blur(29.299999237060547px);
  // 点击时上浮反馈
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.tab-icon {
  width: 160rpx;
  height: 160rpx;
  /* 修复:原来是 position: fixed; left: 0; top: 0; (典型复制粘贴 bug,会让两个 tab 图标都叠在屏幕左上角) */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  opacity: 0.7;
}

.tab-title {
  color: #ffffff;
  font-size: 30rpx;
  font-weight: 700;
  text-shadow: 1px 4px 4px #00000054;
  position: absolute;
}

.tab-active {
  background: linear-gradient(
    90deg,
    rgba(255, 222, 8, 0.4018) -17.54%,
    rgba(252, 100, 102, 0.82) 64.4%,
    rgba(244, 88, 104, 0.82) 116.67%
  );
  box-shadow: 2px 2px 4px 0px #f2151578;
  backdrop-filter: blur(29.799999237060547px);
  opacity: 0.79;
  transform: translateY(-22rpx);
  position: relative;
  z-index: 2;
}
</style>