chongqing-app/src/pages/deptProfile/index.vue

<template>
    <view class="dept-profile-page">
        <view class="page-header">
            <view class="header-title">
                <view class="title-main">部门综合信息展示</view>
                <view class="header-right">
                    <view class="current-time">{{ currentTime }}</view>
                </view>
            </view>

            <view class="time-filter">
                <scroll-view scroll-x class="time-scroll">
                    <view class="time-tags">
                        <view v-for="(tag, index) in timeTags" :key="index"
                            :class="['time-tag', { active: selectedTimeTag === index }]" @click="onTimeTagClick(index)">
                            {{ tag }}
                        </view>
                    </view>
                </scroll-view>
                <view v-if="selectedTimeTag === 4" class="date-range-picker">
                    <picker mode="date" :value="startDate" @change="onStartDateChange">
                        <view class="date-input" :class="{ filled: startDate }">
                            {{ startDate || '开始日期' }}
                        </view>
                    </picker>
                    <text class="date-separator">至</text>
                    <picker mode="date" :value="endDate" @change="onEndDateChange">
                        <view class="date-input" :class="{ filled: endDate }">
                            {{ endDate || '结束日期' }}
                        </view>
                    </picker>
                </view>
            </view>


            <view class="dept-selector">
                <view class="dept-select-trigger" :class="{ 'dept-select-trigger-disabled': !isStationMaster() }"
                    @click="isStationMaster() && (showDeptPicker = true)">
                    <u-icon name="list" color="#A78BFA" size="16"></u-icon>
                    <text class="dept-name-text">{{ selectedDeptName || '请选择部门' }}</text>
                    <u-icon name="arrow-down" color="#A78BFA" size="14"></u-icon>
                </view>
            </view>


            <view class="tab-nav">
                <view class="tab-item" :class="{ active: activeTab === 'profile' }" @click="activeTab = 'profile'">
                    能力画像
                </view>
                <view class="tab-item" :class="{ active: activeTab === 'data' }" @click="activeTab = 'data'">
                    运行数据
                </view>
            </view>
        </view>

        <view class="page-content">
            <SectionTitle title="部门概况">
                <DeptStats :statsData="deptStatsData" />
            </SectionTitle>

            <view v-if="activeTab === 'profile'">
                <SectionTitle title="五维得分一览">
                    <ProfileRadar :chartsData="radarData" />
                </SectionTitle>

                <SectionTitle title="团队成员">
                    <TeamMemberTable :chartsData="teamMemberData" />
                </SectionTitle>

                <SectionTitle title="成员基本情况分布">
                    <MemberBasicDistribution :chartsData="memberBasicData" />
                </SectionTitle>

                <SectionTitle title="成员职位情况分布">
                    <MemberPositionDistribution :chartsData="memberPositionData" />
                </SectionTitle>
            </view>

            <view v-if="activeTab === 'data'">
                <SectionTitle title="通道高峰过检率">
                    <PassengerChart :chartsData="passengerData" />
                </SectionTitle>

                <SectionTitle title="查获信息展示">
                    <SeizureInfo :chartsData="seizureInfoData" />
                </SectionTitle>

                <SectionTitle title="查获物品分布">
                    <ItemDistribution :chartsData="itemDistributionData" />
                </SectionTitle>

                <SectionTitle title="每日查获数量(总表)">
                    <SeizedNumAll :chartsData="dailySeizureTotalData" />
                </SectionTitle>

                <SectionTitle title="每日查获数量">
                    <DailySeizureChart :chartsData="dailySeizureData" :title="'班组对比'"/>
                </SectionTitle>

                <SectionTitle title="查获工作区域分布">
                    <AreaDistribution :chartsData="areaDistributionData" />
                </SectionTitle>

                <SectionTitle title="不安全事件物品分布">
                    <UnsafeItemsChart :chartsData="unsafeItemsData" />
                </SectionTitle>

                <SectionTitle title="不安全事件类型分布">
                    <UnsafeTypesChart :chartsData="unsafeTypesData" />
                </SectionTitle>

                <SectionTitle title="不安全事件岗位分布">
                    <UnsafePositionChart :chartsData="unsafePositionData" />
                </SectionTitle>

                <SecurityTestCharts :chartsData="securityTestData" />

                <SectionTitle title="各岗位监察问题分布">
                    <SupervisionDistribution :chartsData="supervisionData" />
                </SectionTitle>

                <SectionTitle title="实时质控拦截物品分布">
                    <InterceptionDistribution :chartsData="interceptionData" />
                </SectionTitle>
            </view>
        </view>

        <DeptSelector :show.sync="showDeptPicker" v-model="selectedDeptId" :options="deptList" :loading="deptLoading"
            @change="onDeptSelectChange" />
    </view>
</template>

<script>
import SectionTitle from '@/components/SectionTitle.vue'
import TeamMemberTable from '../components/TeamMemberTable.vue'
import MemberBasicDistribution from '../components/MemberBasicDistribution.vue'
import MemberPositionDistribution from '../components/MemberPositionDistribution.vue'
import PassengerChart from '../components/PassengerChart.vue'
import SeizureInfo from '../components/SeizureInfo.vue'
import ItemDistribution from '../components/ItemDistribution.vue'
import DailySeizureChart from '../components/DailySeizureChart.vue'
import AreaDistribution from '../components/AreaDistribution.vue'
import UnsafeItemsChart from '../components/UnsafeItemsChart.vue'
import UnsafeTypesChart from '../components/UnsafeTypesChart.vue'
import UnsafePositionChart from '../components/UnsafePositionChart.vue'
import SecurityTestCharts from '../components/SecurityTestCharts.vue'
import ProfileRadar from '../components/ProfileRadar.vue'
import SeizedNumAll from '../components/SeizedNumAll.vue'
import SupervisionDistribution from '../components/SupervisionDistribution.vue'
import InterceptionDistribution from '../components/InterceptionDistribution.vue'
import DeptStats from '../components/DeptStats.vue'
import DeptSelector from '../components/DeptSelector.vue'
import {
    countStationTeamStats,
    getDeptMemberDistribution,
    getDeptPositionDistribution,
    countStationHourlyThroughput,
    countSeizureInfoItem,
    countSeizeSubjectCategoryQuantity,
    countSeizureTotalQuantity,
    countSeizureSingleQuantity,
    countSeizeAreaQuantity,
    countSeizureStatsItem,
    countSeizureStatsType,
    countSeizureStatsPost,
    securityTestItemClassification,
    securityTestPassingStatus,
    securityTestRegion,
    getDimensionScoreOverview,
    countLanePeakThroughput,
    realtimeInterceptionItem,
    supervisionProblemPosition,
    countDeptTeamStats
} from '@/api/portraitManagement/portraitManagement'
import { getDeptUserTree } from '@/api/system/user'

const itemColors = ['#60A5FA', '#34D399', '#FBBF24', '#EF4444', '#9CA3AF', '#A78BFA', '#F472B6', '#6EE7B7']

export default {
    name: 'DeptProfile',
    components: {
        SectionTitle,
        TeamMemberTable,
        MemberBasicDistribution,
        MemberPositionDistribution,
        PassengerChart,
        SeizureInfo,
        ItemDistribution,
        DailySeizureChart,
        AreaDistribution,
        UnsafeItemsChart,
        UnsafeTypesChart,
        UnsafePositionChart,
        SecurityTestCharts,
        ProfileRadar,
        SeizedNumAll,
        SupervisionDistribution,
        InterceptionDistribution,
        DeptStats,
        DeptSelector
    },
    data() {
        return {
            activeTab: 'profile',
            selectedTimeTag: 3,
            timeTags: ['近一周', '近一月', '近三月', '近一年', '自定义时间范围'],
            currentTime: '',
            timer: null,
            startDate: '',
            endDate: '',

            // 部门选择相关
            selectedDeptId: null,
            selectedDeptName: '',
            showDeptPicker: false,
            deptList: [],
            deptLoading: false,
            radarData: [],
            teamMemberData: [],
            memberBasicData: {
                gender: { labels: [], data: [] },
                ethnicity: { labels: [], data: [] },
                political: { labels: [], data: [] }
            },
            memberPositionData: {
                qualification: { labels: [], data: [] },
                experience: { labels: [], data: [] },
                position: { labels: [], data: [] }
            },
            passengerData: {
                labels: [],
                areas: {},
                totalFlow: []
            },
            seizureInfoData: {
                total: 0,
                depts: {
                    labels: [],
                    data: []
                }
            },
            itemDistributionData: {
                items: []
            },
            dailySeizureTotalData: [],
            dailySeizureData: {
                total: {
                    labels: [],
                    data: []
                },
                dept: {
                    labels: [],
                    data: {}
                }
            },
            areaDistributionData: {
                labels: [],
                data: []
            },
            unsafeItemsData: {
                items: []
            },
            unsafeTypesData: {
                types: []
            },
            unsafePositionData: {
                total: 0,
                positions: {
                    labels: [],
                    data: []
                }
            },
            securityTestData: {
                items: {
                    labels: [],
                    data: []
                },
                results: {
                    labels: [],
                    data: []
                },
                areas: {
                    labels: [],
                    data: []
                }
            },
            supervisionData: [],
            interceptionData: [],
            deptStatsData: {}
        }
    },
    computed: {
        currentDate() {
            const now = new Date()
            const year = now.getFullYear()
            const month = String(now.getMonth() + 1).padStart(2, '0')
            const day = String(now.getDate()).padStart(2, '0')
            const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            const weekDay = weekDays[now.getDay()]
            return `${year}年${month}月${day}日 ${weekDay}`
        }
    },
    mounted() {
        this.updateTime()
        this.timer = setInterval(() => {
            this.updateTime()
        }, 1000)
        this.fetchDeptList()
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer)
        }
    },
    methods: {
        updateTime() {
            const now = new Date()
            const hours = String(now.getHours()).padStart(2, '0')
            const minutes = String(now.getMinutes()).padStart(2, '0')
            const seconds = String(now.getSeconds()).padStart(2, '0')
            this.currentTime = `${hours}:${minutes}:${seconds}`
        },
        // 部门选择改变
        onDeptSelectChange(item) {
            this.selectedDeptId = item.deptId
            this.selectedDeptName = item.deptName
            // 重新请求数据
            const params = this.buildTimeParams()
            this.fetchAllData(params)
        },
        getUserRoles() {
            const userInfo = this.$store.state.user
            return userInfo && userInfo.roles ? userInfo.roles : []
        },
        isStationMaster() {
            const roles = this.getUserRoles()
            return roles.includes('test') || roles.includes('zhijianke')
        },
        fetchDeptList() {
            this.deptLoading = true
            const userInfo = this.$store.state.user?.userInfo;
            let params = this.isStationMaster() ? { parentId: userInfo.deptId } : { deptId: userInfo.deptId }
            getDeptUserTree(params).then(res => {
                if (res.code === 200) {
                    let allDepts = this.flattenDeptTree(res.data || [])
                    this.deptList = this.isStationMaster() ? allDepts.filter(d => d.deptType === 'BRIGADE') : allDepts
                    if (userInfo && userInfo.deptId) {
                        const dept = this.deptList.find(d => d.deptId === userInfo.deptId)
                        if (dept) {
                            this.selectedDeptId = dept.deptId
                            this.selectedDeptName = dept.deptName
                        } else if (this.deptList.length > 0) {
                            this.selectedDeptId = this.deptList[0].deptId
                            this.selectedDeptName = this.deptList[0].deptName
                        }
                    } else if (this.deptList.length > 0) {
                        this.selectedDeptId = this.deptList[0].deptId
                        this.selectedDeptName = this.deptList[0].deptName
                    }
                    // 选择完部门后请求数据
                    this.onTimeTagClick(3)
                }
            }).catch(() => {
            }).finally(() => {
                this.deptLoading = false
            })
        },
        flattenDeptTree(tree) {
            const result = []
            const traverse = (nodes) => {
                nodes.forEach(node => {
                    if (node.id) {
                        result.push({
                            deptId: node.id,
                            deptName: node.label,
                            deptType: node.deptType
                        })
                    }
                    if (node.children && node.children.length > 0) {
                        traverse(node.children)
                    }
                })
            }
            traverse(tree)
            return result
        },
        fetchAllData(params) {
            this.fetchDeptStats(params)
            this.fetchRadarData(params)
            this.fetchTeamData(params)
            this.fetchMemberDistribution(params)
            this.fetchPositionDistribution(params)
            const copyParams = { startDate: params.startDate, endDate: params.endDate }
            this.fetchPassengerData(params)
            this.fetchSeizureInfo(params)
            this.fetchItemDistribution(params)
            this.fetchDailySeizure(params)
            this.fetchAreaDistribution(params)
            this.fetchUnsafeItems(params)
            this.fetchUnsafeTypes(params)
            this.fetchUnsafePosition(params)
            this.fetchSecurityTestData(params)
            this.fetchSupervisionData(params)
            this.fetchInterceptionData(params)
        },
        buildTimeParams() {
            const now = new Date()
            const today = this.formatDate(now)
            const deptId = this.selectedDeptId || 100
            if (this.selectedTimeTag === 4) {
                if (this.startDate && this.endDate) {
                    return { startDate: this.startDate, endDate: this.endDate, deptId }
                }
                return { deptId }
            }
            let startDate
            switch (this.selectedTimeTag) {
                case 0:
                    startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
                    break
                case 1:
                    startDate = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate())
                    break
                case 2:
                    startDate = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate())
                    break
                case 3:
                    startDate = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate())
                    break
                default:
                    return { deptId }
            }
            return { startDate: this.formatDate(startDate), endDate: today, deptId }
        },
        formatDate(date) {
            const y = date.getFullYear()
            const m = String(date.getMonth() + 1).padStart(2, '0')
            const d = String(date.getDate()).padStart(2, '0')
            return `${y}-${m}-${d}`
        },
        onTimeTagClick(index) {
            this.selectedTimeTag = index
            if (index === 4) {
                this.startDate = ''
                this.endDate = ''
                return
            }
            const params = this.buildTimeParams()
            this.fetchAllData(params)
        },
        onStartDateChange(e) {
            this.startDate = e.detail.value
            if (this.startDate && this.endDate) {
                this.fetchAllData(this.buildTimeParams())
            }
        },
        onEndDateChange(e) {
            this.endDate = e.detail.value
            if (this.startDate && this.endDate) {
                this.fetchAllData(this.buildTimeParams())
            }
        },
        fetchDeptStats(params) {
            countDeptTeamStats(params).then(res => {
                if (res.code === 200 && res.data) {
                    this.deptStatsData = res.data
                }
            }).catch(() => { })
        },
        fetchRadarData(params) {
            getDimensionScoreOverview(params).then(res => {
                if (res.code === 200 && res.data) {
                    // 支持两种数据结构
                    if (res.data.dimensions && Array.isArray(res.data.dimensions)) {

                        this.radarData = res.data.dimensions
                    } else {
                        this.radarData = []
                    }
                }
            }).catch(() => {
                this.radarData = []
            })
        },
        fetchTeamData(params) {
            countStationTeamStats(params).then(res => {
                if (res.code === 200 && res.data) {
                    this.teamMemberData = (res.data || []).map(item => ({
                        department: item.deptName,
                        employeeCount: item.employeeCount,
                        partyMemberCount: item.partyMemberCount,
                        avgAge: item.avgAge,
                        avgTenure: item.avgWorkYears,
                        certificateCount: item.qualificationLevel,
                        machineYears: item.avgXrayOperatorYears,
                        comprehensiveScore: item.totalScore
                    }))
                }
            }).catch(() => { })
        },
        fetchMemberDistribution(params) {
            getDeptMemberDistribution(params).then(res => {
                if (res.code === 200 && res.data) {
                    this.memberBasicData = {
                        gender: {
                            labels: (res.data.sexDistribution || []).map(item => item.name),
                            data: (res.data.sexDistribution || []).map(item => item.count)
                        },
                        ethnicity: {
                            labels: (res.data.nationDistribution || []).map(item => item.name),
                            data: (res.data.nationDistribution || []).map(item => item.count)
                        },
                        political: {
                            labels: (res.data.politicalDistribution || []).map(item => item.name),
                            data: (res.data.politicalDistribution || []).map(item => item.count)
                        }
                    }
                }

            }).catch(() => { })
        },
        fetchPositionDistribution(params) {
            getDeptPositionDistribution(params).then(res => {
                if (res.code === 200 && res.data) {
                    this.memberPositionData = {
                        qualification: {
                            labels: (res.data.qualificationDistribution || []).map(item => item.name),
                            data: (res.data.qualificationDistribution || []).map(item => item.count)
                        },
                        experience: {
                            labels: (res.data.xrayYearDistribution || []).map(item => item.name),
                            data: (res.data.xrayYearDistribution || []).map(item => item.count)
                        },
                        position: {
                            labels: (res.data.positionDistribution || []).map(item => item.name),
                            data: (res.data.positionDistribution || []).map(item => item.count)
                        }
                    }
                }
            }).catch(() => { })
        },
        fetchPassengerData(params) {
            countLanePeakThroughput(params).then(res => {
                if (res.code === 200 && res.data) {
                    const rawData = res.data || []
                    const hours = [...new Set(rawData.map(item => item.hour))]
                    const areaMap = {}
                    rawData.forEach(item => {
                        (item.laneList || []).forEach(lane => {
                            if (!areaMap[lane.laneName]) {
                                areaMap[lane.laneName] = []
                            }
                            areaMap[lane.laneName].push(lane.throughputRate)
                        })
                    })
                    this.passengerData = {
                        labels: hours,
                        areas: areaMap,
                        totalFlow: rawData.map(item => item.totalLaneThroughput)
                    }
                }
            }).catch(() => { })
        },
        fetchSeizureInfo(params) {
            countSeizureInfoItem(params).then(res => {
                if (res.code === 200 && res.data) {
                    const itemList = res.data.itemList || []
                    this.seizureInfoData = {
                        total: res.data.totalSeizeNum || 0,
                        depts: {
                            labels: itemList.map(item => item.name),
                            data: itemList.map(item => item.seizeNum)
                        }
                    }
                }
            }).catch(() => { })
        },
        fetchItemDistribution(params) {
            countSeizeSubjectCategoryQuantity(params).then(res => {
                if (res.code === 200 && res.data) {
                    const items = (res.data || []).map((item, index) => ({
                        name: item.itemName,
                        value: item.itemNum,
                        color: itemColors[index % itemColors.length]
                    }))
                    this.itemDistributionData = { items }
                }
            }).catch(() => { })
        },
        fetchDailySeizure(params) {
            countSeizureTotalQuantity(params).then(res => {
                if (res.code === 200 && res.data) {
                    this.dailySeizureTotalData = res.data || []
                    this.dailySeizureData.total = {
                        labels: (res.data || []).map(item => item.recordDate),
                        data: (res.data || []).map(item => item.seizeQuantity)
                    }
                }
            }).catch(() => { })
            countSeizureSingleQuantity(params).then(res => {
                if (res.code === 200 && res.data) {
                    const rawData = res.data || []
                    const dates = rawData.map(item => item.recordDate)
                    const deptMap = {}
                    rawData.forEach(dayItem => {
                        (dayItem.items || []).forEach(subItem => {
                            if (!deptMap[subItem.groupName]) {
                                deptMap[subItem.groupName] = []
                            }
                            deptMap[subItem.groupName].push(subItem.seizeQuantity)
                        })
                    })
                    this.dailySeizureData.dept = {
                        labels: dates,
                        deptData: Object.keys(deptMap).map(name => ({
                            name,
                            data: deptMap[name]
                        }))
                    }
                }
            }).catch(() => { })
        },
        fetchAreaDistribution(params) {
            countSeizeAreaQuantity(params).then(res => {
                if (res.code === 200 && res.data) {
                    const data = res.data || []
                    this.areaDistributionData = {
                        labels: data.map(item => item.workArea),
                        data: data.map(item => item.areaSeizeNum)
                    }
                }
            }).catch(() => { })
        },
        fetchUnsafeItems(params) {
            countSeizureStatsItem(params).then(res => {
                if (res.code === 200 && res.data) {
                    const data = res.data || []
                    this.unsafeItemsData = {
                        items: data.map(item => ({
                            name: item.itemName,
                            value: item.itemNum
                        }))
                    }
                }
            }).catch(() => { })
        },
        fetchUnsafeTypes(params) {
            countSeizureStatsType(params).then(res => {
                if (res.code === 200 && res.data) {
                    const data = res.data || []
                    this.unsafeTypesData = {
                        types: data.map(item => ({
                            name: item.eventType,
                            value: item.eventTypeNum
                        }))
                    }
                }
            }).catch(() => { })
        },
        fetchUnsafePosition(params) {
            countSeizureStatsPost(params).then(res => {
                if (res.code === 200 && res.data) {
                    const data = res.data || []
                    const total = data.reduce((sum, item) => sum + (item.count || 0), 0)
                    this.unsafePositionData = {
                        total: total,
                        positions: {
                            labels: data.map(item => item.positionName),
                            data: data.map(item => item.positionNum)
                        }
                    }
                }
            }).catch(() => { })
        },
        fetchSecurityTestData(params) {
            securityTestItemClassification(params).then(res => {
                if (res.code === 200 && res.data) {
                    const data = res.data || []
                    this.securityTestData.items = {
                        labels: data.map(item => item.name),
                        data: data.map(item => item.total)
                    }
                }
            }).catch(() => { })
            securityTestPassingStatus(params).then(res => {
                if (res.code === 200 && res.data) {
                    const data = res.data || []
                    this.securityTestData.results = {
                        labels: data.map(item => item.name),
                        data: data.map(item => item.total)
                    }
                }
            }).catch(() => { })
            securityTestRegion(params).then(res => {
                if (res.code === 200 && res.data) {
                    const data = res.data || []
                    this.securityTestData.areas = {
                        labels: data.map(item => item.name),
                        data: data.map(item => item.total)
                    }
                }
            }).catch(() => { })
        },
        fetchSupervisionData(params) {
            supervisionProblemPosition(params).then(res => {
                if (res.code === 200 && res.data) {
                    this.supervisionData = (res.data || []).map(item => ({
                        num: item.total,
                        name: item.name
                    }))
                }
            }).catch(() => { })
        },
        fetchInterceptionData(params) {
            realtimeInterceptionItem(params).then(res => {
                if (res.code === 200 && res.data) {
                    this.interceptionData = (res.data || []).map(item => ({
                        num: item.total,
                        name: item.name
                    }))
                }
            }).catch(() => { })
        }
    }
}
</script>

<style lang="scss" scoped>
.dept-selector {
    padding: 16rpx 32rpx;
    background: #fff;
}

.dept-select-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    padding: 16rpx 24rpx;
    background: #f5f5f5;
    border: 1rpx solid #e0e0e0;
    border-radius: 50rpx;
}

.dept-select-trigger-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.dept-name-text {
    font-size: 26rpx;
    color: #333;
}

.dept-profile-page {
    min-height: 100vh;
    background: #fff;
    padding-bottom: 40rpx;
}

.page-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    backdrop-filter: blur(10px);
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.header-title {
    padding: 24rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-main {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
    }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16rpx;

    .current-time {
        font-size: 24rpx;
        color: #999;
    }
}

.time-filter {
    padding: 16rpx 32rpx;
    background: #fff;
}

.time-scroll {
    width: 100%;
}

.time-tags {
    display: flex;
    gap: 16rpx;
    white-space: nowrap;
}

.time-tag {
    padding: 8rpx 10rpx;
    border-radius: 50rpx;
    background: #f0f0f0;
    font-size: 24rpx;
    color: #666;
    transition: all 0.3s;

    &.active {
        background: #60A5FA;
        color: #fff;
        font-weight: 500;
    }
}

.date-range-picker {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-top: 16rpx;
    padding-top: 16rpx;
    border-top: 1rpx solid #e0e0e0;
}

.date-input {
    flex: 1;
    padding: 12rpx 24rpx;
    border-radius: 12rpx;
    background: #f5f5f5;
    font-size: 24rpx;
    color: #999;
    text-align: center;

    &.filled {
        color: #333;
    }
}

.date-separator {
    font-size: 24rpx;
    color: #999;
    flex-shrink: 0;
}

.tab-nav {
    padding: 16rpx 32rpx;
    display: flex;
    justify-content: center;
    gap: 64rpx;
}

.tab-item {
    font-size: 28rpx;
    color: #999;
    padding-bottom: 8rpx;
    border-bottom: 2rpx solid transparent;
    transition: all 0.3s;

    &.active {
        color: #333;
        border-bottom-color: #333;
    }
}

.page-content {
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
</style>