flat:职业图谱小程序端页面完成

2025-11-04 19:00:41 +08:00
parent 4ba6539850
commit 8764849cd6
13 changed files with 6506 additions and 9 deletions
--- a/pages/service/components/PageHeader.vue
+++ b/pages/service/components/PageHeader.vue
@@ -0,0 +1,203 @@
+<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="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="handleTabClick(0)"
+                >
+                    职业推荐
+                </view>
+                <view 
+                    class="tab-item" 
+                    :class="{ 'active': activeTab === 1 }"
+                    @click="handleTabClick(1)"
+                >
+                    职业路径
+                </view>
+                <view 
+                    class="tab-item" 
+                    :class="{ 'active': activeTab === 2 }"
+                    @click="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;
+}
+
+.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);
+}
+
+.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;
+}
+
+.tab-item.active {
+    background: linear-gradient(135deg, #9974FD 0%, #286BFA 100%);
+    color: #FFFFFF;
+    font-weight: 500;
+    border-radius: 20rpx;
+}
+</style>
+