xiaoyu/topfans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): Header 完整视觉（毛绒怪占位+渐变标题+Tab胶囊）

Browse Source
This commit is contained in:
zheng020 2026-06-02 22:05:37 +08:00
parent b31cf01da4
commit a91d7a5e61
1 changed files with 77 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
frontend/pages/dashboard/components/DashboardHeader.vue
View File

@ -1,8 +1,26 @@
<template> <template>
<view class="dashboard-header"> <view class="dashboard-header">
<view class="header-bg"></view> <!-- 装饰渐变背景 -->
<view class="header-deco-bg"></view>
<!-- 装饰光晕（红粉色） -->
<view class="header-glow"></view>
<!-- 状态栏占位（iPhone 44px） -->
<view class="status-bar-placeholder"></view>
<view class="header-content"> <view class="header-content">
<text class="header-title">数据看板</text> <!-- 毛绒怪头像（占位：纯色块 + emoji） -->
<view class="mascot">
<text class="mascot-emoji">🐾</text>
</view>
<!-- 渐变标题 -->
<view class="title-wrap">
<text class="header-title">数据看板</text>
</view>
<!-- Tab 胶囊 -->
<view class="header-tabs"> <view class="header-tabs">
<view <view
:class="['tab', activeTab === 'crystal' ? 'tab-active' : '']" :class="['tab', activeTab === 'crystal' ? 'tab-active' : '']"
@ -21,24 +39,25 @@
</view> </view>
</template> </template>
<script> <script setup>
export default { defineProps({
name: 'DashboardHeader', activeTab: { type: String, default: 'crystal' },
props: { })
activeTab: { type: String, default: 'crystal' }, defineEmits(['update:activeTab'])
},
emits: ['update:activeTab'],
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-header { .dashboard-header {
position: relative; position: relative;
height: 280rpx; height: 360rpx;
overflow: hidden; overflow: hidden;
} }
.header-bg { .status-bar-placeholder {
height: 44px;
}
.header-deco-bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -49,38 +68,72 @@ export default {
z-index: 0; z-index: 0;
} }
.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 { .header-content {
position: relative; position: relative;
z-index: 1; z-index: 2;
padding: 80rpx 32rpx 32rpx; padding: 0 32rpx 32rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.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;
}
.mascot-emoji {
font-size: 64rpx;
}
.title-wrap {
margin-bottom: 24rpx;
} }
.header-title { .header-title {
display: block;
font-size: 48rpx; font-size: 48rpx;
font-weight: 700; font-weight: 700;
color: #ffffff; background: linear-gradient(90deg, #FFE5B4 0%, #FFB199 50%, #FF8A95 100%);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); -webkit-background-clip: text;
text-align: center; background-clip: text;
margin-bottom: 32rpx; color: transparent;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
} }
.header-tabs { .header-tabs {
display: flex; display: flex;
justify-content: center;
gap: 0;
background: rgba(0, 0, 0, 0.15); background: rgba(0, 0, 0, 0.15);
border-radius: 22rpx; border-radius: 22rpx;
padding: 6rpx; padding: 6rpx;
margin: 0 100rpx; width: 100%;
max-width: 500rpx;
} }
.tab { .tab {
flex: 1; flex: 1;
text-align: center; text-align: center;
padding: 16rpx 0; padding: 14rpx 0;
font-size: 28rpx; font-size: 28rpx;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.75);
border-radius: 22rpx; border-radius: 22rpx;
transition: all 0.25s ease; transition: all 0.25s ease;
} }