feat: 职业查询页面，增加picker-view组件，增加tab组件

src/login-sub/components/LoginMask.vue

@@ -29,7 +29,9 @@
             <wd-radio :value="true" shape="dot"></wd-radio>
           </wd-radio-group>
           <view class="flex items-center">
-            <text class="text-[24rpx]">已阅读并同意《服务条款》和《隐私条款》</text>
+            <text class="text-[24rpx] whitespace-nowrap">
+              已阅读并同意《服务条款》和《隐私条款》
+            </text>
           </view>
         </view>
       </view>

src/login-sub/components/navbar/Navbar.vue

@@ -10,10 +10,7 @@
     <!-- 导航栏主体 -->
     <view
       class="navbar-content"
-      :class="{
+      :class="[contentClass, fixed ? 'navbar-fixed' : '', bordered ? 'navbar-border' : '']"
-        'navbar-fixed': fixed,
-        'navbar-border': bordered,
-      }"
       :style="{
         backgroundColor: bgColor,
         height: navHeight + 'px',
@@ -23,7 +20,7 @@
       <!-- 左侧区域 -->
       <view class="navbar-left" @click="handleClickLeft">
         <view v-if="leftArrow" class="back-icon">
-          <image src="./left.jpg" mode="aspectFit" class="w-[48rpx] h-[48rpx]" />
+          <view class="i-carbon-chevron-left text-[48rpx] text-[#333] font-semibold" />
         </view>
         <slot name="left"></slot>
       </view>
@@ -49,6 +46,7 @@
         backgroundColor: bgColor,
       }"
     ></view>
+    <slot name="background"></slot>
   </view>
 </template>
 
@@ -84,6 +82,10 @@ const props = defineProps({
     type: String,
     default: '#ffffff',
   },
+  contentClass: {
+    type: String,
+    default: 'justify-between',
+  },
 })
 
 const emit = defineEmits(['clickLeft'])
@@ -129,7 +131,7 @@ const handleClickLeft = () => {
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   padding: 0 32rpx;
   box-sizing: border-box;
   background-color: #fff;
@@ -149,7 +151,6 @@ const handleClickLeft = () => {
 .navbar-left {
   display: flex;
   align-items: center;
-  min-width: 100rpx;
   height: 100%;
 }
 
@@ -161,9 +162,8 @@ const handleClickLeft = () => {
 }
 
 .navbar-title {
-  flex: 1;
+  /* flex: 1; */
   text-align: center;
-  padding: 0 100rpx;
   overflow: hidden;
   height: 100%;
   display: flex;
@@ -172,7 +172,7 @@ const handleClickLeft = () => {
 }
 
 .title-text {
-  font-size: 32rpx;
+  font-size: 36rpx;
   color: #333;
   font-weight: 500;
   overflow: hidden;
@@ -187,4 +187,19 @@ const handleClickLeft = () => {
   justify-content: flex-end;
   height: 100%;
 }
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABlAAAAJMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcApcdgE2AiQDCAsGAAQgBYRnBzYbmQXIHpIkBQQKkYCABBEPz2/t/XN3twEbowBkQTxQEQ1RKaKSxEOi0agkJKF5Qvj/f037IFKwlZ2dWU2tJu0EhPwHkBwgOVAclKcvAQpI/v/fz/08XECy+YBymmPQiwIcSmhAY4uSFcgJ+IaxC1zCYwLtRjWSnZ2rGgQWBowLxCPrVBBYllQqNTQ0VISaBXEHtTRNUwW4jb4f/xYEC0kqMzDx6CGrQuKXxKc6Zf7POYQgQHs5kIwjYwEoxK3G/DpRwbi0dlNwKKjAL4lf6vw/R2zVWvTPIwuiCnp2wCRUZ3yJX5pJFVDfByyAFR2AblMAX/OR3t7+zOJi8GyyfzC1uQXLZvtnk/0zyfTy+PvH0/Xp5OzR98/H797/+/fDu3d/3739+/fd+/+nmxvLc5vrS+sry2vz84tLs9Mzc4vzs9NTM/Ozc1OzM3MzU/Mz0wvTU4vTk0tTE8uTEyuT4yv/G0E3XUxv7wwNbu/s9G8fbO9v7+3sb+3ubW4dbO4dbO3vbu4dbO3JzqPFtRE4gEGAX0NBkL+hpCZALkEp5FKUQqE0NHlXJIGrDNAOcEQBCHU+kXT5QNblC7kEv1EK9Y9SB/8o7YYu2m0YXrJLouNIjQJhH+QbVkVZrUQ+YuqzUJdzxPMHhdIj0+hg4o0D8ogj5r5bSoQUxjADz+A8hBDQFEYwh3mommXTul7Vm5ZtqAqJHIdoKCDYDyQ3mCqUG1YKn5+C0s0yiJ/qKVAQedKAhg6Y3mEHJBQaWKnvLVMiiEIxGAY8Aw6HIAhAJmEIzIIOUjLTTAB1taL1QvNq+fYN7QDjcc2okeioaOmy5LFXt3QAAAAA')
+    format('woff2');
+}
+
+.back-text {
+  font-family: 'iconfont' !important;
+  font-size: 48rpx;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #333;
+}
 </style>

src/login-sub/index.vue

@@ -14,13 +14,15 @@
       :bordered="false"
       :fixed="true"
       :placeholder="true"
+      left-arrow
       bgColor="transparent"
+      @click-left="handleClickLeft"
     >
       <template #title>
         <text class="text-[#1F2329] text-[36rpx] font-medium">新高考选科</text>
       </template>
     </Navbar>
-    <view class="flex flex-col justify-center items-center flex-1 pb-safe">
+    <view class="flex flex-col justify-center items-center flex-1 pb-safe mt-[-100px]">
       <image
         class="w-[424rpx] h-[424rpx]"
         src="https://api.static.ycymedu.com/images/logo.png"
@@ -51,4 +53,8 @@ const handleLogin = () => {
 const handleAuthReady = () => {
   uni.navigateBack()
 }
+
+const handleClickLeft = () => {
+  uni.navigateBack()
+}
 </script>

src/pages-sub/components/CustomPickerView.vue

@@ -0,0 +1,194 @@
+<template>
+  <view class="custom-picker">
+    <view class="picker-mask" @touchmove.stop.prevent></view>
+    <picker-view
+      :value="currentIndex"
+      :indicator-style="indicatorStyle"
+      :style="{
+        border: 'none',
+        'border-top': 'none',
+        'border-bottom': 'none',
+      }"
+      @change="handleChange"
+      class="picker-view"
+      :mask-class="'picker-mask'"
+      :indicator-class="'picker-indicator'"
+    >
+      <picker-view-column class="border-none">
+        <view
+          v-for="(item, index) in formattedList"
+          :key="index"
+          class="picker-item"
+          :class="{ 'picker-item-selected': currentIndex[0] === index }"
+        >
+          {{ item }}
+        </view>
+      </picker-view-column>
+    </picker-view>
+    <!-- <view class="picker-indicator-line"></view> -->
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Object],
+    default: '',
+  },
+  list: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  valueKey: {
+    type: String,
+    default: '',
+  },
+  labelKey: {
+    type: String,
+    default: '',
+  },
+  indicatorStyle: {
+    type: String,
+    default: 'height: 50px;',
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// 格式化列表数据
+const formattedList = computed(() => {
+  if (!props.list.length) return []
+
+  // 处理简单数组 ['123', '456']
+  if (typeof props.list[0] !== 'object') {
+    return props.list
+  }
+
+  // 处理对象数组，使用labelKey
+  if (props.labelKey) {
+    return props.list.map((item) => item[props.labelKey])
+  }
+
+  // 处理对象数组，使用valueKey作为显示
+  if (props.valueKey) {
+    return props.list.map((item) => item[props.valueKey])
+  }
+
+  // 默认显示整个对象
+  return props.list
+})
+
+// 计算当前选中项的索引
+const currentIndex = computed(() => {
+  if (!props.modelValue || !props.list.length) return [0]
+
+  let targetValue = props.modelValue
+  if (typeof props.list[0] === 'object' && props.valueKey) {
+    targetValue = props.modelValue[props.valueKey]
+  }
+
+  const index = props.list.findIndex((item) => {
+    if (typeof item === 'object' && props.valueKey) {
+      return item[props.valueKey] === targetValue
+    }
+    return item === targetValue
+  })
+
+  return [index > -1 ? index : 0]
+})
+
+// 处理选择变化
+const handleChange = (e: any) => {
+  const index = e.detail.value[0]
+  const selectedItem = props.list[index]
+
+  let value = selectedItem
+  if (typeof selectedItem === 'object' && props.valueKey) {
+    value = selectedItem[props.valueKey]
+  }
+
+  emit('update:modelValue', value)
+  emit('change', {
+    value,
+    index,
+    item: selectedItem,
+  })
+}
+</script>
+
+<style scoped>
+.custom-picker {
+  width: 100%;
+  height: 400rpx;
+  position: relative;
+  background-color: #fff;
+}
+
+.picker-view {
+  width: 100%;
+  height: 100%;
+}
+
+/* 覆盖picker-view的默认边框 */
+.picker-view :deep(.uni-picker-view-indicator),
+.picker-view :deep(.uni-picker-view-column),
+.picker-view :deep(.uni-picker-view-group) {
+  border: none !important;
+  border-top: none !important;
+  border-bottom: none !important;
+}
+
+.picker-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.picker-indicator {
+  height: 112rpx;
+}
+
+.picker-indicator-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  margin-top: -40rpx;
+  height: 112rpx;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.picker-item {
+  text-align: center;
+  font-size: 34rpx;
+  color: #7c7c7c;
+  transition: all 0.2s;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.picker-item-selected {
+  color: #000;
+  font-weight: 500;
+  transform: scale(1.05);
+}
+
+/* 添加触摸反馈 */
+.picker-view :deep(.uni-picker-view-wrapper) {
+  -webkit-overflow-scrolling: touch;
+}
+
+.picker-view :deep(.uni-picker-view-content) {
+  touch-action: pan-y;
+}
+</style>

src/pages-sub/components/navbar/Navbar.vue

@@ -10,10 +10,7 @@
     <!-- 导航栏主体 -->
     <view
       class="navbar-content"
-      :class="{
+      :class="[contentClass, fixed ? 'navbar-fixed' : '', bordered ? 'navbar-border' : '']"
-        'navbar-fixed': fixed,
-        'navbar-border': bordered,
-      }"
       :style="{
         backgroundColor: bgColor,
         height: navHeight + 'px',
@@ -23,7 +20,7 @@
       <!-- 左侧区域 -->
       <view class="navbar-left" @click="handleClickLeft">
         <view v-if="leftArrow" class="back-icon">
-          <image src="./left.jpg" mode="aspectFit" class="w-[48rpx] h-[48rpx]" />
+          <view class="i-carbon-chevron-left text-[48rpx] text-[#333] font-semibold" />
         </view>
         <slot name="left"></slot>
       </view>
@@ -49,6 +46,7 @@
         backgroundColor: bgColor,
       }"
     ></view>
+    <slot name="background"></slot>
   </view>
 </template>
 
@@ -84,6 +82,10 @@ const props = defineProps({
     type: String,
     default: '#ffffff',
   },
+  contentClass: {
+    type: String,
+    default: 'justify-between',
+  },
 })
 
 const emit = defineEmits(['clickLeft'])
@@ -129,7 +131,7 @@ const handleClickLeft = () => {
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   padding: 0 32rpx;
   box-sizing: border-box;
   background-color: #fff;
@@ -149,7 +151,6 @@ const handleClickLeft = () => {
 .navbar-left {
   display: flex;
   align-items: center;
-  min-width: 100rpx;
   height: 100%;
 }
 
@@ -161,9 +162,8 @@ const handleClickLeft = () => {
 }
 
 .navbar-title {
-  flex: 1;
+  /* flex: 1; */
   text-align: center;
-  padding: 0 100rpx;
   overflow: hidden;
   height: 100%;
   display: flex;
@@ -172,7 +172,7 @@ const handleClickLeft = () => {
 }
 
 .title-text {
-  font-size: 32rpx;
+  font-size: 36rpx;
   color: #333;
   font-weight: 500;
   overflow: hidden;
@@ -187,4 +187,19 @@ const handleClickLeft = () => {
   justify-content: flex-end;
   height: 100%;
 }
+
+@font-face {
+  font-family: 'iconfont';
+  src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAKYAAsAAAAABlAAAAJMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcApcdgE2AiQDCAsGAAQgBYRnBzYbmQXIHpIkBQQKkYCABBEPz2/t/XN3twEbowBkQTxQEQ1RKaKSxEOi0agkJKF5Qvj/f037IFKwlZ2dWU2tJu0EhPwHkBwgOVAclKcvAQpI/v/fz/08XECy+YBymmPQiwIcSmhAY4uSFcgJ+IaxC1zCYwLtRjWSnZ2rGgQWBowLxCPrVBBYllQqNTQ0VISaBXEHtTRNUwW4jb4f/xYEC0kqMzDx6CGrQuKXxKc6Zf7POYQgQHs5kIwjYwEoxK3G/DpRwbi0dlNwKKjAL4lf6vw/R2zVWvTPIwuiCnp2wCRUZ3yJX5pJFVDfByyAFR2AblMAX/OR3t7+zOJi8GyyfzC1uQXLZvtnk/0zyfTy+PvH0/Xp5OzR98/H797/+/fDu3d/3739+/fd+/+nmxvLc5vrS+sry2vz84tLs9Mzc4vzs9NTM/Ozc1OzM3MzU/Mz0wvTU4vTk0tTE8uTEyuT4yv/G0E3XUxv7wwNbu/s9G8fbO9v7+3sb+3ubW4dbO4dbO3vbu4dbO3JzqPFtRE4gEGAX0NBkL+hpCZALkEp5FKUQqE0NHlXJIGrDNAOcEQBCHU+kXT5QNblC7kEv1EK9Y9SB/8o7YYu2m0YXrJLouNIjQJhH+QbVkVZrUQ+YuqzUJdzxPMHhdIj0+hg4o0D8ogj5r5bSoQUxjADz+A8hBDQFEYwh3mommXTul7Vm5ZtqAqJHIdoKCDYDyQ3mCqUG1YKn5+C0s0yiJ/qKVAQedKAhg6Y3mEHJBQaWKnvLVMiiEIxGAY8Aw6HIAhAJmEIzIIOUjLTTAB1taL1QvNq+fYN7QDjcc2okeioaOmy5LFXt3QAAAAA')
+    format('woff2');
+}
+
+.back-text {
+  font-family: 'iconfont' !important;
+  font-size: 48rpx;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #333;
+}
 </style>

src/pages-sub/home/career/components/CareerInfo.vue

@@ -0,0 +1,26 @@
+<template>
+  <view class="flex flex-col">
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">简介</text>
+      <text class="text-[22rpx] text-[#636363]">
+        {{ careerInfo.intro }}
+      </text>
+    </view>
+    <view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">职业定义</text>
+      <text class="text-[22rpx] text-[#636363]">
+        {{ careerInfo.definition }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  careerInfo: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+</script>

src/pages-sub/home/career/components/DevelopmentProspect.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="flex flex-col">
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">发展前景</text>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">行业发展前景</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ prospect.industry }}
+        </text>
+      </view>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">个人发展路径</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ prospect.person }}
+        </text>
+      </view>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">职业的就业趋势</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ prospect.career }}
+        </text>
+      </view>
+    </view>
+    <view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">薪资待遇</text>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">薪资结构</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ salary.structure }}
+        </text>
+      </view>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">满意度</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ salary.satisfaction }}
+        </text>
+      </view>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">福利制度</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ salary.welfare }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  prospect: {
+    type: Object,
+    default: () => ({
+      career: '',
+      industry: '',
+      person: '',
+    }),
+  },
+  salary: {
+    type: Object,
+    default: () => ({
+      structure: '',
+      satisfaction: '',
+      welfare: '',
+    }),
+  },
+})
+</script>

src/pages-sub/home/career/components/KnowledgeBackground.vue

@@ -0,0 +1,50 @@
+<template>
+  <view class="flex flex-col">
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">学历要求</text>
+      <text class="text-[22rpx] text-[#636363]">
+        {{ knowledgeInfo.diplomas }}
+      </text>
+    </view>
+    <view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">行业知识</text>
+      <text class="text-[22rpx] text-[#636363]">
+        {{ knowledgeInfo.trade }}
+      </text>
+    </view>
+    <view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">专业知识</text>
+      <text class="text-[22rpx] text-[#636363]">
+        {{ knowledgeInfo.pro }}
+      </text>
+    </view>
+    <view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">大学课程</text>
+      <text class="text-[22rpx] text-[#636363]">
+        {{ jsonCurriculum.important }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  knowledgeInfo: {
+    type: Object,
+    default: () => ({
+      diplomas: '',
+      pro: '',
+      trade: '',
+    }),
+  },
+  jsonCurriculum: {
+    type: Object,
+    default: () => ({
+      important: '',
+    }),
+  },
+})
+</script>

src/pages-sub/home/career/components/LeftMenu.vue

@@ -0,0 +1,69 @@
+<template>
+  <view class="bg-white flex w-full flex-1">
+    <view class="w-[260rpx] bg-[#F7F8FA] flex flex-col items-center">
+      <view
+        v-for="item in menus"
+        :key="item._id"
+        :class="[
+          'flex items-center view-block pl-[32rpx] h-[96rpx] text-[28rpx] font-semibold',
+          currentMenuObj?._id === item._id ? 'active' : '',
+        ]"
+        @click="changeMenu(item)"
+      >
+        {{ item.rootName }}
+      </view>
+    </view>
+    <view class="flex-1 mt-[40rpx] flex flex-col">
+      <MajorTreeList v-if="currentMenuObj" :sub-major-list="currentMenuObj" />
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { getBaseProfession } from '@/service/index/api'
+import MajorTreeList from './TreeList.vue'
+
+const props = defineProps({
+  keyword: {
+    type: String,
+    default: '',
+  },
+})
+
+const menus = ref([])
+const currentMenuObj = ref(null)
+
+const changeMenu = (item: any) => {
+  currentMenuObj.value = item
+}
+
+const getProfessionList = ({ KeyWord }) => {
+  getBaseProfession({ KeyWord }).then((resp) => {
+    if (resp.code === 200) {
+      menus.value = resp.result as any[]
+      currentMenuObj.value = menus.value[0]
+    }
+  })
+}
+
+watch(
+  () => props.keyword,
+  (newV) => {
+    getProfessionList({ KeyWord: newV })
+  },
+)
+
+onBeforeMount(() => {
+  getProfessionList({ KeyWord: props.keyword })
+})
+</script>
+
+<style lang="scss" scoped>
+.active {
+  background-color: #fff;
+  color: #1580ff;
+}
+.view-block {
+  width: calc(100% - 32rpx);
+}
+</style>

src/pages-sub/home/career/components/TreeList.vue

@@ -0,0 +1,56 @@
+<template>
+  <scroll-view class="h-full">
+    <view class="font-semibold text-[#303030] text-[28rpx] mb-[32rpx] px-[32rpx]">
+      {{ subMajorList.rootName }}
+      <text class="text-[22rpx] text-[#bfbfbf] font-normal">
+        ({{ subMajorList?.itemDtos.length || 0 }}个)
+      </text>
+    </view>
+
+    <view class="px-[32rpx] flex flex-col gap-[48rpx] mt-[52rpx]">
+      <view
+        v-for="item in subMajorList.itemDtos"
+        class="text-[#303030] text-[24rpx]"
+        @click="navigatorToCareerInfo(item)"
+      >
+        {{ item.name }}
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  subMajorList: {
+    type: Object as () => {
+      rootName: string
+      _id: string
+      itemDtos: any[]
+    },
+    default: () => ({
+      rootName: '',
+      _id: '',
+      itemDtos: [],
+    }),
+  },
+})
+
+const navigatorToCareerInfo = (item: unknown) => {
+  const _item = item as { id: string }
+  uni.navigateTo({
+    url: `/pages-sub/home/career/info?id=${_item.id}`,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.custom-collapse-item) {
+  padding: 16rpx 0 !important;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>

src/pages-sub/home/career/components/VocationalSkill.vue

@@ -0,0 +1,65 @@
+<template>
+  <view class="flex flex-col">
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">职业技能</text>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">专业技能</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ proSkill.skill_pro }}
+        </text>
+      </view>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">通用技能</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ proSkill.skill_general }}
+        </text>
+      </view>
+    </view>
+    <view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[23rpx]">从业资格</text>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">必须项</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ qualification.necessary }}
+        </text>
+      </view>
+      <view class="mb-[36rpx]">
+        <view class="text-[24rpx] text-[#333] font-semibold">附加项</view>
+        <text class="text-[22rpx] text-[#636363]">
+          {{ qualification.addition }}
+        </text>
+      </view>
+    </view>
+    <view class="h-[16rpx] bg-[#f8f8f8] mt-[36rpx] mb-[40rpx]"></view>
+    <view class="flex flex-col px-[32rpx] mt-[40rpx]">
+      <text class="text-[32rpx] text-[#333] font-semibold mb-[22rpx]">职业道德</text>
+      <text class="text-[22rpx] text-[#636363]">
+        {{ ethics }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  proSkill: {
+    type: Object,
+    default: () => ({
+      skill_general: '',
+      skill_pro: '',
+    }),
+  },
+  qualification: {
+    type: Object,
+    default: () => ({
+      necessary: '',
+      addition: '',
+    }),
+  },
+  ethics: {
+    type: String,
+    default: '',
+  },
+})
+</script>

src/pages-sub/home/career/index.vue

@@ -1,5 +1,45 @@
+<route lang="json5" type="page">
+{
+  layout: 'page',
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
 <template>
-  <text>查职业</text>
+  <view class="flex flex-col h-screen">
+    <view class="relative">
+      <Navbar
+        safeAreaInsetTop
+        bg-color="transparent"
+        :bordered="false"
+        left-arrow
+        title="查职业"
+        @click-left="navigatorBack"
+        content-class="justify-between"
+      ></Navbar>
+      <view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
+    </view>
+
+    <view class="flex-1 h-[0] overflow-auto pb-safe">
+      <LeftMenu />
+    </view>
+  </view>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
+import LeftMenu from './components/LeftMenu.vue'
+
+const navigatorBack = () => {
+  uni.navigateBack()
+}
+
+const searchValue = ref('')
+const handleChange = () => {}
+</script>
+
+<style lang="scss" scoped>
+@import '@/pages-sub/home/styles/navbar-background.scss';
+@import '@/pages-sub/home/styles/navbar-custom.scss';
+</style>

src/pages-sub/home/career/info.vue

@@ -0,0 +1,176 @@
+<route lang="json5" type="page">
+{
+  layout: 'page',
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
+
+<template>
+  <view class="h-screen flex flex-col">
+    <view class="relative">
+      <Navbar
+        safeAreaInsetTop
+        bg-color="transparent"
+        :bordered="false"
+        left-arrow
+        title="职业详情"
+        @click-left="navigatorBack"
+      ></Navbar>
+      <view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
+    </view>
+    <scroll-view :scroll-y="true" class="pb-safe flex-1">
+      <view class="flex flex-col px-32rpx">
+        <text class="text-[36rpx] text-[#000] font-bold mt-[24rpx] mb-[22rpx]">
+          {{ professionInfo.career }}
+        </text>
+        <image
+          class="w-full h-[264rpx] rounded-[8rpx]"
+          :src="professionInfo.img_url"
+          mode="aspectFill"
+        />
+      </view>
+      <view class="h-[18rpx] bg-[#F8F8F8] mt-[24rpx] mb-[16rpx]"></view>
+      <view class="">
+        <z-tabs
+          :current="currentTab"
+          :list="tabsList"
+          :scrollCount="4"
+          inactive-color="#BFBFBF"
+          active-color="#303030"
+          :bar-style="{ backgroundColor: '#1580FF', width: '500rpx' }"
+          :tabsStyle="{ position: 'sticky', top: '0', zIndex: '9' }"
+          bottom-space="1rpx"
+          @change="handleTabChange"
+          v-bind="{} as any"
+        />
+        <CareerInfo
+          :career-info="{ intro: professionInfo.intro, definition: professionInfo.definition }"
+          v-show="currentTab === 0"
+        />
+        <KnowledgeBackground
+          :knowledge-info="professionInfo.json_knowledge"
+          :jsonCurriculum="professionInfo.json_curriculum"
+          v-show="currentTab === 1"
+        />
+        <VocationalSkill
+          :pro-skill="professionInfo.json_skill"
+          :qualification="professionInfo.json_qualification"
+          :ethics="professionInfo.ethics"
+          v-show="currentTab === 2"
+        />
+        <DevelopmentProspect
+          :prospect="professionInfo.json_prospect"
+          :salary="professionInfo.json_salary"
+          v-show="currentTab === 3"
+        />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { getProfessionInfo } from '@/service/index/api'
+
+import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
+import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
+import CareerInfo from './components/CareerInfo.vue'
+import KnowledgeBackground from './components/KnowledgeBackground.vue'
+import VocationalSkill from './components/VocationalSkill.vue'
+import DevelopmentProspect from './components/DevelopmentProspect.vue'
+
+const navigatorBack = () => {
+  uni.navigateBack()
+}
+
+const tabsList = ['职业概况', '知识背景', '职业技能', '发展前景']
+const currentTab = ref(0)
+
+const handleTabChange = (index: number) => {
+  currentTab.value = index
+}
+
+type ProfessionInfo = {
+  career: string
+  img_url: string
+  intro: string
+  definition: string
+  json_knowledge: {
+    diplomas: string
+    pro: string
+    trade: string
+  }
+  json_curriculum: {
+    important: string
+  }
+  json_skill: {
+    skill_general: string
+    skill_pro: string
+  }
+  json_qualification: {
+    necessary: string
+    addition: string
+  }
+  ethics: string
+  json_prospect: {
+    career: string
+    industry: string
+    person: string
+  }
+  json_salary: {
+    structure: string
+    satisfaction: string
+    welfare: string
+  }
+}
+
+const professionInfo = ref<ProfessionInfo>({
+  career: '',
+  img_url: '',
+  intro: '',
+  definition: '',
+  json_knowledge: {
+    diplomas: '',
+    pro: '',
+    trade: '',
+  },
+  json_curriculum: {
+    important: '',
+  },
+  json_skill: {
+    skill_general: '',
+    skill_pro: '',
+  },
+  json_qualification: {
+    necessary: '',
+    addition: '',
+  },
+  ethics: '',
+  json_prospect: {
+    career: '',
+    industry: '',
+    person: '',
+  },
+  json_salary: {
+    structure: '',
+    satisfaction: '',
+    welfare: '',
+  },
+})
+const professionId = ref('')
+
+onLoad((options) => {
+  professionId.value = options.id
+  getProfessionInfo({ id: professionId.value }).then((resp) => {
+    if (resp.code === 200) {
+      professionInfo.value = resp.result as ProfessionInfo
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/pages-sub/home/styles/navbar-background.scss';
+@import '@/pages-sub/home/styles/navbar-custom.scss';
+</style>

src/pages-sub/home/college/components/EnrollmentMark.vue

@@ -23,7 +23,7 @@
 
     <wd-action-sheet v-model="show" title="">
       <view class="px-[32rpx]">
-        <wd-picker-view :columns="pickList" v-model="pickValue" custom-class="picker-wrapper" />
+        <CustomPickerView :list="pickList" v-model="pickValue" />
       </view>
       <view class="flex items-center justify-between px-[32rpx]">
         <view class="cancel-btn" @click="show = false">取消</view>
@@ -37,6 +37,7 @@
 import WXXTable from '@/pages-sub/home/components/Table.vue'
 import { getAdmissionMark } from '@/service/index/api'
 import { useUserStore } from '@/store'
+import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
 
 const props = defineProps({
   id: {
@@ -129,32 +130,5 @@ const handleConfirm = () => {
 }
 </script>
 <style lang="scss" scoped>
-.submit-btn {
+@import '@/pages-sub/home/styles/picker-view-btn.scss';
-  width: 332rpx;
-  height: 80rpx;
-  background: #1580ff;
-  border-radius: 8rpx;
-
-  font-weight: 400;
-  font-size: 32rpx;
-  color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.cancel-btn {
-  width: 332rpx;
-  height: 80rpx;
-  background: #f5f5f5;
-  border-radius: 8rpx;
-
-  font-weight: 400;
-  font-size: 32rpx;
-  color: #1580ff;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 </style>

src/pages-sub/home/college/components/EnrollmentPlan.vue

@@ -26,7 +26,7 @@
 
     <wd-action-sheet v-model="show" title="">
       <view class="px-[32rpx]">
-        <wd-picker-view :columns="pickList" v-model="pickValue" custom-class="picker-wrapper" />
+        <CustomPickerView :list="pickList" v-model="pickValue" />
       </view>
       <view class="flex items-center justify-between px-[32rpx]">
         <view class="cancel-btn" @click="show = false">取消</view>
@@ -39,6 +39,7 @@
 <script lang="ts" setup>
 import WXXTable from '@/pages-sub/home/components/Table.vue'
 import { getPlanProList } from '@/service/index/api'
+import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
 import { useUserStore } from '@/store'
 
 const props = defineProps({
@@ -128,32 +129,5 @@ const handleConfirm = () => {
 }
 </script>
 <style lang="scss" scoped>
-.submit-btn {
+@import '@/pages-sub/home/styles/picker-view-btn.scss';
-  width: 332rpx;
-  height: 80rpx;
-  background: #1580ff;
-  border-radius: 8rpx;
-
-  font-weight: 400;
-  font-size: 32rpx;
-  color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.cancel-btn {
-  width: 332rpx;
-  height: 80rpx;
-  background: #f5f5f5;
-  border-radius: 8rpx;
-
-  font-weight: 400;
-  font-size: 32rpx;
-  color: #1580ff;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 </style>

src/pages-sub/home/college/components/Situation.vue

@@ -23,12 +23,7 @@
 
     <wd-action-sheet v-model="show" title="">
       <view class="px-[32rpx]">
-        <wd-picker-view
+        <CustomPickerView :list="pickList" v-model="pickValue" v-if="pickType === 1" />
-          :columns="pickList"
-          v-model="pickValue"
-          custom-class="picker-wrapper"
-          v-if="pickType === 1"
-        />
       </view>
       <view class="py-[32rpx] flex flex-col items-center justify-center">
         <text class="text-[#303030] text-[36rpx] font-bold mb-[50rpx]">省份</text>
@@ -53,6 +48,7 @@ import WXXTable from '@/pages-sub/home/components/Table.vue'
 import { getPlanProList } from '@/service/index/api'
 import { useUserStore } from '@/store'
 import Region from '@/pages-sub/home/components/Region.vue'
+import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
 
 const props = defineProps({
   id: {
@@ -147,32 +143,5 @@ const handleRegionChangeName = (val) => {
 }
 </script>
 <style lang="scss" scoped>
-.submit-btn {
+@import '@/pages-sub/home/styles/picker-view-btn.scss';
-  width: 332rpx;
-  height: 80rpx;
-  background: #1580ff;
-  border-radius: 8rpx;
-
-  font-weight: 400;
-  font-size: 32rpx;
-  color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.cancel-btn {
-  width: 332rpx;
-  height: 80rpx;
-  background: #f5f5f5;
-  border-radius: 8rpx;
-
-  font-weight: 400;
-  font-size: 32rpx;
-  color: #1580ff;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 </style>

src/pages-sub/home/inputScore/index.vue

@@ -108,7 +108,6 @@
       保存
     </wd-button>
     <view class="bg-white pb-safe" hover-class="none"></view>
-    <wd-toast />
   </view>
 </template>
 
@@ -120,9 +119,6 @@ import {
   requireSubjectList,
   optionalSubjectList,
 } from '@/pages-sub/home/inputScore/useRules'
-import { useToast } from 'wot-design-uni'
-
-const toast = useToast()
 
 const userStore = useUserStore()
 
@@ -167,7 +163,9 @@ onBeforeMount(() => {
 
 const saveScore = () => {
   if (score.value === '') {
-    toast.warning('请检查分数')
+    uni.showToast({
+      title: '请检查分数',
+    })
     return
   }
   const data = {

src/pages-sub/home/major/components/MajorList.vue

@@ -2,16 +2,19 @@
   <view class="bg-white flex w-full flex-1">
     <view class="w-[260rpx] bg-[#F7F8FA] flex flex-col items-center">
       <view
-        :class="`flex items-center view-block pl-[32rpx] h-[96rpx] text-[28rpx] font-semibold ${item.key === currentMenu ? 'active' : ''}`"
         v-for="item in menus"
         :key="item.key"
+        :class="[
+          'flex items-center view-block pl-[32rpx] h-[96rpx] text-[28rpx] font-semibold',
+          currentMenuObj?.key === item.key ? 'active' : '',
+        ]"
         @click="changeMenu(item)"
       >
         {{ item.name }}
       </view>
     </view>
     <view class="flex-1 mt-[40rpx] flex flex-col">
-      <MajorTreeList :sub-major-list="currentMenuObj" />
+      <MajorTreeList v-if="currentMenuObj" :sub-major-list="currentMenuObj" />
     </view>
   </view>
 </template>
@@ -32,43 +35,16 @@ const props = defineProps({
 })
 
 const menus = ref([])
+const currentMenuObj = ref(null)
 
-const currentMenu = ref('')
+const changeMenu = (item: any) => {
-
-const currentMenuObj = ref<{
-  name: string
-  key: string
-  count: number
-  itemsCount: number
-  items: any[]
-}>({
-  name: '',
-  key: '',
-  count: 0,
-  itemsCount: 0,
-  items: [],
-})
-
-const subMajorList = ref([])
-
-const changeMenu = (item: {
-  name: string
-  key: string
-  count: number
-  itemsCount: number
-  items: any[]
-}) => {
-  currentMenu.value = item.key
   currentMenuObj.value = item
 }
 
 const getMajorList = ({ Type, KeyWord }) => {
   getMajorLevelList({ Type, KeyWord }).then((resp) => {
     if (resp.code === 200) {
-      menus.value = resp.result[0].rootDtos as { key: string; name: string; items: any[] }[]
+      menus.value = resp.result[0].rootDtos
-      currentMenu.value = menus.value[0].key
-      subMajorList.value = menus.value[0].items
-
       currentMenuObj.value = menus.value[0]
     }
   })

src/pages-sub/home/major/components/MajorTreeList.vue

@@ -67,8 +67,11 @@ const value = ref<string>('')
 watch(
   () => props.subMajorList,
   (newV) => {
-    value.value = newV.items[0].key.toString()
+    if (newV?.items?.length > 0) {
+      value.value = newV.items[0].key
+    }
   },
+  { immediate: true },
 )
 
 const navigatorToMajorInfo = (item: unknown) => {
@@ -82,9 +85,8 @@ const navigatorToMajorInfo = (item: unknown) => {
 <style lang="scss" scoped>
 :deep(.custom-collapse-item) {
   padding: 16rpx 0 !important;
-  :deep(.wd-collapse-item__header) {
-  }
 }
+
 .header {
   display: flex;
   align-items: center;

src/pages-sub/home/major/components/MajorUniversity.vue

@@ -25,7 +25,7 @@
     <view class="flex flex-col px-[32rpx] mt-[40rpx]">
       <text class="text-[32rpx] font-semibold text-[#303030]">专业院校分布</text>
       <view
-        @click="handleShow(2)"
+        @click="handleShow"
         class="px-[24rpx] py-[8rpx] bg-[#f8f8f8] rounded-[8rpx] flex justify-between items-center text-[24rpx] w-[144rpx] mt-[30rpx]"
       >
         {{ provinceName || '不限' }}
@@ -34,7 +34,7 @@
       <scroll-view :scroll-x="true" class="">
         <view
           class="flex gap-[24rpx] py-[40rpx] border-bt"
-          v-for="item in universityList"
+          v-for="item in subUniversityList"
           :key="item"
         >
           <image class="w-[112rpx] h-[112rpx]" :src="item.logo" mode="scaleToFill" />
@@ -42,18 +42,34 @@
             <text class="text-[32rpx] font-semibold">[{{ item.yxdm }}]{{ item.yxmc }}</text>
             <text class="text-[22rpx] text-[#505050]">{{ item.cityname }}·{{ item.ulevel }}</text>
             <text class="text-[#8F959E] text-[22rpx] my-[6rpx]">
-              {{ item.featuretag.split('/').slice(0, 4).join('/') }}/ 排名68
+              {{ item.featuretag?.split('/').slice(0, 4).join('/') }}/ 排名68
             </text>
           </view>
         </view>
       </scroll-view>
     </view>
+
+    <wd-action-sheet v-model="show" title="">
+      <view class="px-[32rpx]">
+        <custom-picker-view
+          v-model="provinceCode"
+          :list="provinceList"
+          value-key="code"
+          label-key="ssmc"
+        />
+      </view>
+      <view class="flex items-center justify-between px-[32rpx]">
+        <view class="cancel-btn" @click="show = false">取消</view>
+        <view class="submit-btn" @click="handleConfirm">确认</view>
+      </view>
+    </wd-action-sheet>
   </view>
 </template>
 
 <script lang="ts" setup>
 import { getMajorUniversityList } from '@/service/index/api'
 import ProgressBar from '../../components/ProgressBar.vue'
+import CustomPickerView from '@/pages-sub/components/CustomPickerView.vue'
 import { useUserStore } from '@/store'
 
 const userStore = useUserStore()
@@ -82,6 +98,7 @@ watch(
           }
         })
         universityList.value = result.schSpecList
+        subUniversityList.value = universityList.value
       }
     })
   },
@@ -90,15 +107,27 @@ watch(
 const provinceName = ref('')
 const provinceList = ref([])
 const provinceTotal = ref(0)
+const provinceCode = ref('')
+
+const show = ref(false)
 
 const universityList = ref([])
+const subUniversityList = ref([])
 
-const handleShow = (type: number) => {
+const handleShow = () => {
-  console.log(type)
+  show.value = true
+}
+const handleConfirm = () => {
+  show.value = false
+  subUniversityList.value = universityList.value.filter((item) => {
+    return item.ssdm === provinceCode.value
+  })
+  provinceName.value = provinceList.value.find((item) => item.code === provinceCode.value)?.ssmc
 }
 </script>
 
 <style lang="scss" scoped>
+@import '@/pages-sub/home/styles/picker-view-btn.scss';
 .border-bt {
   border-bottom: 1rpx solid #f8f8f8;
 }

src/pages-sub/home/major/index.vue

@@ -8,14 +8,13 @@
 }
 </route>
 <template>
-  <scroll-view :scroll-y="true" class="flex flex-col pb-safe">
+  <view class="flex flex-col h-screen">
-    <wd-navbar
+    <Navbar
       safeAreaInsetTop
-      custom-class="bg-white!"
+      bg-color="transparent"
       :bordered="false"
       left-arrow
-      placeholder
+      title="查职业"
-      fixed
       @click-left="navigatorBack"
     >
       <template #title>
@@ -26,34 +25,36 @@
           @confirm="handleChange"
           no-border
           prefixIcon="search"
-          custom-class="rounded-[48rpx]! bg-[#F7F7F7]! flex items-center border-none! px-[24rpx] py-[12rpx]"
+          custom-class="rounded-[48rpx]! bg-[#F7F7F7]! flex items-center border-none! px-[24rpx] py-[12rpx] ml-[32rpx]!"
           custom-input-class="h-full flex items-center"
         />
       </template>
-    </wd-navbar>
+    </Navbar>
+
+    <scroll-view class="flex-1 pb-safe flex flex-col" :scroll-y="true">
+      <z-tabs
+        :current="currentTab"
+        :list="tabsList"
+        :scrollCount="4"
+        inactive-color="#BFBFBF"
+        active-color="#303030"
+        :bar-style="{ backgroundColor: '#1580FF' }"
+        :tabsStyle="{ position: 'sticky', top: '0', zIndex: '99' }"
+        @change="handleTabChange"
+        v-bind="{} as any"
+      />
 
-    <z-tabs
-      :current="currentTab"
-      :list="tabsList"
-      :scrollCount="4"
-      inactive-color="#BFBFBF"
-      active-color="#303030"
-      :bar-style="{ backgroundColor: '#1580FF' }"
-      :tabsStyle="{ position: 'sticky', top: '98px', zIndex: '99' }"
-      @change="handleTabChange"
-      v-bind="{} as any"
-    />
-    <view class="">
       <MajorList :type="1050" :keyword="searchValue" v-show="currentTab === 0"></MajorList>
       <MajorList :type="1070" :keyword="searchValue" v-show="currentTab === 1"></MajorList>
       <MajorList :type="1060" :keyword="searchValue" v-show="currentTab === 2"></MajorList>
-    </view>
+    </scroll-view>
-  </scroll-view>
+  </view>
 </template>
 
 <script lang="ts" setup>
 import MajorList from './components/MajorList.vue'
 import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
+import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
 
 const searchValue = ref('')
 
@@ -73,13 +74,5 @@ const handleTabChange = (index: number) => {
 
 <style lang="scss" scoped>
 @import '../styles/navbar_search.scss';
-
+@import '@/pages-sub/home/styles/navbar-custom.scss';
-:deep(.tabs-wrapper) {
-  --wot-tabs-nav-fs: 28rpx;
-  --wot-tabs-nav-height: 80rpx;
-  flex: 1 1 auto;
-}
-:deep(.wd-tab__body) {
-  // height: 100%;
-}
 </style>

src/pages-sub/home/major/info.vue

@@ -8,22 +8,20 @@
 </route>
 
 <template>
-  <view class="pb-safe flex flex-col">
+  <view class="pb-safe flex flex-col h-screen">
     <view class="relative">
-      <wd-navbar
+      <Navbar
         safeAreaInsetTop
-        custom-class="bg-transparent! custom-background"
+        bg-color="transparent"
         :bordered="false"
         left-arrow
-        fixed
-        placeholder
         title="专业详情"
         @click-left="navigatorBack"
-      ></wd-navbar>
+      ></Navbar>
-      <view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[1]"></view>
+      <view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
     </view>
 
-    <scroll-view class="flex-1 flex flex-col" :scroll-y="true">
+    <scroll-view class="flex-1 flex flex-col pb-safe" :scroll-y="true">
       <view class="flex items-start p-[32rpx]" hover-class="none">
         <view class="flex flex-col">
           <text class="text-[40rpx] text-[#303030] font-semibold">{{ majorDetail.zymc }}</text>
@@ -79,6 +77,7 @@ import MajorBaseInfo from './components/MajorBaseInfo.vue'
 import MajorUniversity from './components/MajorUniversity.vue'
 import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
 import EmploymentProspects from './components/EmploymentProspects.vue'
+import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
 
 import { getMajorDetail } from '@/service/index/api'
 
@@ -107,8 +106,6 @@ const navigatorBack = () => {
   uni.navigateBack()
 }
 
-const starFlag = ref(false)
-const handleStar = () => {}
 const majorDetail = ref<CollegeInfo>({
   xk: '',
   zydm: '',

src/pages-sub/home/styles/navbar-background.scss

@@ -0,0 +1,13 @@
+.custom-background {
+  background-image: linear-gradient(
+    173deg,
+    rgb(177, 221, 250) 0,
+    rgb(177, 221, 250) 13%,
+    rgba(255, 255, 255, 1) 80%,
+    rgba(255, 255, 255, 1) 100%
+  );
+  background-position: 50% 50%;
+  background-origin: padding-box;
+  background-clip: border-box;
+  background-size: auto auto;
+}

src/pages-sub/home/styles/navbar-custom.scss

@@ -0,0 +1,3 @@
+:deep(.z-tabs-bottom) {
+  border-bottom: 1px solid #f8f8f8;
+}

src/pages-sub/home/styles/picker-view-btn.scss

@@ -0,0 +1,28 @@
+.submit-btn {
+  width: 332rpx;
+  height: 80rpx;
+  background: #1580ff;
+  border-radius: 8rpx;
+
+  font-weight: 400;
+  font-size: 32rpx;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.cancel-btn {
+  width: 332rpx;
+  height: 80rpx;
+  background: #f5f5f5;
+  border-radius: 8rpx;
+
+  font-weight: 400;
+  font-size: 32rpx;
+  color: #1580ff;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/pages.json

@@ -134,7 +134,19 @@
         },
         {
           "path": "home/career/index",
-          "type": "page"
+          "type": "page",
+          "layout": "page",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "home/career/info",
+          "type": "page",
+          "layout": "page",
+          "style": {
+            "navigationStyle": "custom"
+          }
         },
         {
           "path": "home/city/index",

src/service/index/api.ts

@@ -170,3 +170,11 @@ export const getMajorUniversityList = (params: { SpecId: string }) => {
 export const getCareerProspects = (params: { zydm: string }) => {
   return http.get('/api/zhiYuan/careerProspects', params)
 }
+
+// 职业方向
+export const getBaseProfession = (params: { KeyWord: string }) => {
+  return http.get('/api/zhiYuan/baseProfession', params)
+}
+export const getProfessionInfo = (params: { id: string }) => {
+  return http.get('/api/zhiYuan/professiondetails', params)
+}

src/types/uni-pages.d.ts

@@ -13,6 +13,7 @@ interface NavigateToOptions {
        "/pages-sub/home/aiAutoFill/index" |
        "/pages-sub/home/autoFill/index" |
        "/pages-sub/home/career/index" |
+       "/pages-sub/home/career/info" |
        "/pages-sub/home/city/index" |
        "/pages-sub/home/college/enrollmentIntroDetail" |
        "/pages-sub/home/college/index" |