feat(dashboard): 页面骨架 + Header 占位
This commit is contained in:
parent
3676fc977e
commit
282eb72e46
94
frontend/pages/dashboard/components/DashboardHeader.vue
Normal file
94
frontend/pages/dashboard/components/DashboardHeader.vue
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<view class="dashboard-header">
|
||||||
|
<view class="header-bg"></view>
|
||||||
|
<view class="header-content">
|
||||||
|
<text class="header-title">数据看板</text>
|
||||||
|
<view class="header-tabs">
|
||||||
|
<view
|
||||||
|
:class="['tab', activeTab === 'crystal' ? 'tab-active' : '']"
|
||||||
|
@tap="$emit('update:activeTab', 'crystal')"
|
||||||
|
>
|
||||||
|
水晶相关
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
:class="['tab', activeTab === 'season' ? 'tab-active' : '']"
|
||||||
|
@tap="$emit('update:activeTab', 'season')"
|
||||||
|
>
|
||||||
|
赛季总览
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DashboardHeader',
|
||||||
|
props: {
|
||||||
|
activeTab: { type: String, default: 'crystal' },
|
||||||
|
},
|
||||||
|
emits: ['update:activeTab'],
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dashboard-header {
|
||||||
|
position: relative;
|
||||||
|
height: 280rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 700rpx;
|
||||||
|
background: linear-gradient(179deg, #FFE5E5 0%, #F3A0A1 50%, #FF9C9C 86%, #FF2024 100%);
|
||||||
|
filter: blur(4px);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 80rpx 32rpx 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
display: block;
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.15);
|
||||||
|
border-radius: 22rpx;
|
||||||
|
padding: 6rpx;
|
||||||
|
margin: 0 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
padding: 16rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
border-radius: 22rpx;
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-active {
|
||||||
|
background: linear-gradient(231deg, #A8A6ED 0%, #88C8D8 64%, #F380EF 100%);
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
112
frontend/pages/dashboard/dashboard.vue
Normal file
112
frontend/pages/dashboard/dashboard.vue
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<view class="dashboard-container" :style="{ background: pageBg }">
|
||||||
|
<DashboardHeader
|
||||||
|
:active-tab="activeTab"
|
||||||
|
@update:active-tab="handleTabChange"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Tab 1: 水晶相关 -->
|
||||||
|
<view v-if="activeTab === 'crystal'" class="dashboard-content">
|
||||||
|
<view class="placeholder-section">
|
||||||
|
<text class="placeholder-text">骨架页（组件将在 Task 5-10 添加）</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Tab 2: 赛季总览（占位） -->
|
||||||
|
<view v-else class="dashboard-content">
|
||||||
|
<view class="season-placeholder">
|
||||||
|
<text class="placeholder-icon">🏆</text>
|
||||||
|
<text class="placeholder-title">赛季总览 · 即将上线</text>
|
||||||
|
<text class="placeholder-sub">历史赛季数据正在筹备中</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref, onUnmounted } from 'vue'
|
||||||
|
import DashboardHeader from './components/DashboardHeader.vue'
|
||||||
|
import { useDashboardData } from '@/composables/useDashboardData'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { DashboardHeader },
|
||||||
|
setup() {
|
||||||
|
const activeTab = ref('crystal')
|
||||||
|
const starId = ref(uni.getStorageSync('star_id') || null)
|
||||||
|
|
||||||
|
const { loading, error, data, isReady, dispose } = useDashboardData({
|
||||||
|
starId: starId.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleTabChange(tab) {
|
||||||
|
activeTab.value = tab
|
||||||
|
}
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
dispose()
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
activeTab,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
data,
|
||||||
|
isReady,
|
||||||
|
handleTabChange,
|
||||||
|
pageBg: 'linear-gradient(153deg, #FF9597 0%, #80DFFF 33%, #B8B8B8 74%, #D9D9D9 100%)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dashboard-container {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard-content {
|
||||||
|
padding: 24rpx 32rpx 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-section {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 22rpx;
|
||||||
|
padding: 80rpx 32rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-text {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.season-placeholder {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-radius: 22rpx;
|
||||||
|
padding: 120rpx 32rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-icon {
|
||||||
|
font-size: 96rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-title {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-sub {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user