ks-app-employment-service/pages/service/components/PageHeader.vue

<template>
    <view class="page-header">
        <view class="header-top">
            <view class="title-section">
                <text class="main-title">职业规划推荐指导平台</text>
                <text class="sub-title">智能匹配·精准推荐·职业发展</text>
            </view>
            <view class="header-icons">
                <view class="icon-dot" @click="handleMenuClick">
                    <view class="dot"></view>
                    <view class="dot"></view>
                    <view class="dot"></view>
                </view>
                <view class="icon-single-dot" @click="handleMoreClick"></view>
            </view>
        </view>

        <!-- 搜索栏 -->
        <view class="search-bar" @click.stop="handleSearchClick" @tap.stop="handleSearchClick">
            <uni-icons class="search-icon" type="search" size="18" color="#999999"></uni-icons>
            <text class="search-placeholder">职位名称、薪资要求等</text>
        </view>

        <!-- Tab导航 -->
        <view class="tab-nav-wrapper">
            <view class="tab-nav">
                <view 
                    class="tab-item" 
                    :class="{ 'active': activeTab === 0 }"
                    @click.stop="handleTabClick(0)"
                    @tap.stop="handleTabClick(0)"
                >
                    职业推荐
                </view>
                <view 
                    class="tab-item" 
                    :class="{ 'active': activeTab === 1 }"
                    @click.stop="handleTabClick(1)"
                    @tap.stop="handleTabClick(1)"
                >
                    职业路径
                </view>
                <view 
                    class="tab-item" 
                    :class="{ 'active': activeTab === 2 }"
                    @click.stop="handleTabClick(2)"
                    @tap.stop="handleTabClick(2)"
                >
                    技能发展
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
    activeTab: {
        type: Number,
        default: 0
    }
});

const emit = defineEmits(['tab-change', 'search-click', 'menu-click', 'more-click']);

function handleTabClick(index) {
    emit('tab-change', index);
}

function handleSearchClick() {
    emit('search-click');
}

function handleMenuClick() {
    emit('menu-click');
}

function handleMoreClick() {
    emit('more-click');
}
</script>

<style lang="scss" scoped>
.page-header {
    padding: 40rpx 28rpx 0;
    flex-shrink: 0;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15rpx;
}

.title-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-title {
    font-size: 40rpx;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8rpx;
    line-height: 1.2;
}

.sub-title {
    font-size: 24rpx;
    line-height: 28rpx;
    color: rgba(51, 51, 51, 1);
    text-align: left;
    font-family: 'PingFangSC-Bold', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
    font-weight: 600;
}

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

.icon-dot {
    width: 44rpx;
    height: 44rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rpx;
    
    .dot {
        width: 6rpx;
        height: 6rpx;
        background-color: #666666;
        border-radius: 50%;
    }
}

.icon-single-dot {
    width: 44rpx;
    height: 44rpx;
    border-radius: 50%;
    background-color: #666666;
}

.search-bar {
    background-color: #EBF1FF;
    border-radius: 40rpx;
    padding: 0 28rpx;
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    height: 88rpx;
    box-shadow: none;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.search-icon {
    flex-shrink: 0;
}

.search-placeholder {
    flex: 1;
    font-size: 28rpx;
    color: #999999;
    text-align: center;
}

.tab-nav-wrapper {
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 6rpx 20rpx;
    margin-bottom: 10rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.tab-nav {
    display: flex;
    gap: 8rpx;
}

.tab-item {
    flex: 1;
    padding: 12rpx 24rpx;
    border-radius: 20rpx;
    font-size: 28rpx;
    color: #000000;
    background-color: transparent;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
}

.tab-item.active {
    background: linear-gradient(135deg, #9974FD 0%, #286BFA 100%);
    color: #FFFFFF;
    font-weight: 500;
    border-radius: 20rpx;
}
</style>