职位面板翻页样式调整

src/api/common/index.js

@@ -57,6 +57,14 @@ export const getDictData = async (params) => {
   })
 }
 
+// 获得职位信息
+export const getPositionTreeData = async (params) => {
+  return await request.get({
+    url: '/app-api/menduner/system/position/get/tree',
+    params
+  })
+}
+
 // 获取行业树形
 export const getIndustryTreeData = async (params) => {
   return await request.get({

src/layout/personal/slider.vue

@@ -2,9 +2,9 @@
   <div class="slider-box">
     <div v-for="item in list" :key="item.mdi" class="slider-box-item">
       <v-tooltip :text="item.tips" location="start">
-        <template v-slot:activator="{ props }">
+        <!-- <template v-slot:activator="{ props }">
           <v-btn size="30" class="icons" variant="text" v-bind="props" :icon="item.mdi"></v-btn>
-        </template>
+        </template> -->
         <div v-if="item.showImg" class="ma-3" style="text-align: center">
           <v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" :width="170" style="height: 170px;"></v-img>
           <span class="tips-text">关注门墩儿直聘微信公众号</span>

src/views/Home/personal/components/jobTypeCard.vue

@@ -4,45 +4,60 @@
       <div class="leftCard">
         <div
           class="leftCardItem" :class="{'leftIndexAct': index === leftIndex, 'elevation-5': (index === leftIndex && !isFloat)}"
-          v-for="(item, index) in items" :key="index"
+          v-for="(item, index) in items" :key="item.id"
           @mouseover="handleMouseOver(item, index)"
         >
           <div class="rowItem d-flex">
-            <span class="categoryName">{{ item.title }}</span>
-            <div class="jobItemsBox" v-if="!isFloat && item.children?.length && item.children[0]?.data?.length">
-              <div class="outerCovering">
-                <div class="jobItems" v-for="(val, index1) in item.children[0].data" :key="index1+'index1'">{{ val }}</div>
+            <span class="categoryName">{{ item.nameCn }}</span>
+            <div class="jobItemsBox">
+              <div class="outerCovering" v-if="!isFloat && item.children?.length && item.children[0].children.length">
+                <div class="jobItems" v-for="val in item.children[0].children" :key="val.id">{{ val.nameCn }}</div>
               </div>
             </div>
             <span class="mdi mdi-menu-right"></span>
           </div>
         </div>
+        <!-- <v-divider vertical></v-divider> -->
+        <!-- 分页 -->
+        <div class="mt-2" style="border-top: 1px dashed #e6e6e6; position: absolute; bottom: 4px; width: 100%;">
+          <div class="d-flex justify-space-between align-center mx-4" style="height: 40px">
+            <div style="color: var(--v-primary-base); font-size: 14px;">
+              {{ pageInfo.current }} / {{ pageCount }}
+            </div>
+            <div>
+              <v-btn @click="previous" size="x-small" class="ml-2" color="primary" variant="tonal" style="font-size: 20px;"><v-icon icon="mdi-menu-left" size="x-small"></v-icon></v-btn>
+              <v-btn @click="nextPage" size="x-small" class="ml-2" color="primary" variant="tonal" style="font-size: 20px;"><v-icon icon="mdi-menu-right" size="x-small"></v-icon></v-btn>
+            </div>
+          </div>
+        </div>
       </div>
     </v-card>
-    <v-card v-if="card2Data.show" class="card rightCardBox ml-1">
+    <v-card v-if="rightObj.show" class="card rightCardBox ml-1">
       <div class="rightCard">
-        <div class="categoryName">{{ card2Data.data.title }}</div>
-        <div v-for="(item, index) in card2Data.data.children" :key="index+'index'">
+        <div class="categoryName">{{ rightObj.data.nameCn }}</div>
+        <div v-for="(item, index) in rightObj.data.children" :key="item.id">
           <v-divider v-if="index" class="divider"></v-divider>
           <div class="rowItem d-flex">
-            <div class="categoryName2">{{ item.title }}</div>
+            <div class="categoryName2">{{ item.nameCn }}</div>
             <div class="rightContent">
-              <div class="jobItem" v-for="(val, index1) in item.data" :key="index1+'index1'">{{ val }}</div>
+              <div v-if="!item.children?.length"></div>
+              <div v-else class="jobItem" v-for="val in item.children" :key="val.id">{{ val.nameCn }}</div>
             </div>
           </div>
         </div>
       </div>
     </v-card>
-    <v-card v-if="!isFloat && !card2Data.show" class="card ml-1">
-      <div class="rightCard rightCardBox" style="color: red;">轮播</div>
+    <v-card v-if="!isFloat && !rightObj.show" class="card rightCardBox ml-1">
+      <div class="rightCard" style="color: red;">轮播</div>
     </v-card>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, inject } from 'vue';
 
 defineOptions({ name:'personal-jobTypeCard'})
+
 const props = defineProps({
   float: { // 搜索浮动
     type: Boolean,
@@ -51,94 +66,45 @@ const props = defineProps({
 })
 const isFloat = props.float
 
-const items = [
-  { title: '互联网/Al',
-    value: '1',
-    children: [
-      { title: '后端开发', data: ['Java1','C/C++','Java','Java','Java','Java1234156164146146'] },
-      { title: '后端开发', data: ['Java1','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-      { title: '前端/移动开发移动开发移动开发', data: ['Java2','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-      { title: '测试', data: ['Java75247','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-      { title: '前端/移动开发', data: ['Java3','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-      { title: '测试', data: ['Java3'] },
-      { title: '测试', data: ['Java3'] },
-      { title: '测试', data: ['Java3'] },
-      { title: '测试', data: ['Java5757','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-      { title: '前端/移动开发', data: ['Javafedfeff','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-      { title: '测试', data: ['Java85683','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-      { title: '前端/移动开发', data: ['Javasd','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-      { title: '测试', data: ['Java;i,lu','C/C++','Java','Java','语音/视频/图形开发','Java','Python','Java','Node.js', '语音/视频/图形开发','Java','Python','Java', '其他后端开发'] },
-    ]
-  },
-  { title: '电子/电气/通信',
-    value: '2',
-  },
-  { title: '产品',
-    value: '3',
-    children: [
-      { title: '后端开发', data: ['Java3'] }
-    ]
-  },
-  { title: '互联网/Al',
-    value: '3',
-    children: [
-      { title: '后端开发', data: ['Java3'] }
-    ]
-  },
-  { title: '产品',
-    value: '3',
-    children: [
-      { title: '后端开发', data: ['Java3'] }
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
-    ]
-  },
-  { title: '客服/运营',
-    value: '4',
-    children: [
-      { title: '后端开发', data: ['Python','PHP','Python','C#','.NET','GIS工程师','区块链工程师','测试', 'Python','C#','.NET'] },
-    ]
-  },
-]
-const leftIndex = ref(null)
+// 翻页数据
+const pageInfo = reactive({ current: 1, size: 8 })
+let pageCount = ref(0)
+let defaultItems = ref()
+
+let items = ref()
+// 翻页数据
+const getPageItems = () => {
+  const startIndex = (pageInfo.current - 1) * pageInfo.size
+  const endIndex = Math.min(startIndex + pageInfo.size, defaultItems.value.length)
+  items.value = defaultItems.value.slice(startIndex, endIndex)
+}
+
+if (isFloat) items.value = JSON.parse(inject('industryTreeData').value)
+else {
+  // 翻页数据
+  defaultItems.value = JSON.parse(inject('industryTreeData').value)
+  if (defaultItems.value?.length) {
+    pageCount.value = Math.ceil(defaultItems.value.length / pageInfo.size)
+    getPageItems()
+  } else pageInfo.current = 0
+}
+// 翻页数据
+const previous = () => { if (pageInfo.current > 1) pageInfo.current--; getPageItems() }
+const nextPage = () => { if (pageInfo.current < pageCount.value) pageInfo.current++; getPageItems() }
 
 // card2
-const card2Data = reactive({ show: false, data: {} })
+const leftIndex = ref(null)
+const rightObj = reactive({ show: false, data: {} })
 
 const handleMouseOver = (val, index) => { // 鼠标移入
   leftIndex.value = index
-  card2Data.data = val
-  card2Data.show = true
+  rightObj.data = val
+  rightObj.show = true
 }
 const handleMouseLeave = () => { // 鼠标移出
-  card2Data.show = true // true false
+  rightObj.show = true // true false
   leftIndex.value = null
 }
-// defineExpose({
-//   handleMouseLeave
-// })
 
 </script>
 
@@ -159,7 +125,7 @@ const handleMouseLeave = () => { // 鼠标移出
         color: var(--v-primary-base);
         background-color: #f8f8f8;
       }
-      .categoryName { font-size: 14px; }
+      .categoryName { font-size: 14px; font-family: 微软雅黑; }
     }
     .rowItem { justify-content: space-between; }
   }
@@ -170,18 +136,18 @@ const handleMouseLeave = () => { // 鼠标移出
     padding: 0 16px;
     overflow-y: auto;
     .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px;}
-    .categoryName2 { font-size: 14px; color: #666666; width: 100px; margin-right: 4px;}
-    .jobItem { font-size: 14px; color: #333333;}
+    .categoryName2 { font-size: 14px; color: #666666; width: 110px; margin-right: 4px;}
+    .jobItem { font-size: 14px; color: #333333; }
     .rowItem {
       padding: 8px 0;
     }
     .divider {
-      margin-left: 100px;
+      margin-left: 110px;
     }
     .rightContent {
       flex: 1;
       div {
-        margin: 2px 4px;
+        margin: 4px 28px 2px 0;
         float: left;
         cursor: pointer;
         color: #333333;
@@ -205,8 +171,6 @@ const handleMouseLeave = () => { // 鼠标移出
   .leftCard {
     height: 384px;
     width: 380px;
-    // min-width: 380px;
-    // max-width: 380px;
     margin: 4px 0;
     overflow-x: hidden;
     overflow-y: auto;
@@ -231,6 +195,8 @@ const handleMouseLeave = () => { // 鼠标移出
           font-size: 14px;
           margin-left: 12px;
           cursor: pointer;
+          color: #666666;
+          font-family: 微软雅黑; 
           &:hover {
             color: var(--v-primary-base);
             // background-color: #f8f8f8;
@@ -241,24 +207,24 @@ const handleMouseLeave = () => { // 鼠标移出
   }
   .rightCardBox { flex: 1; }
   .rightCard {
-    height: 340px;
-    min-width: 786px;
+    height: 384px;
+    // min-width: 786px;
     margin: 4px 0;
     padding: 0 16px;
     overflow-y: auto;
     .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px; color: var(--v-primary-base)}
-    .categoryName2 { font-size: 14px; color: #666666; width: 100px; margin-right: 4px;}
-    .jobItem { font-size: 14px; color: #333333;}
+    .categoryName2 { font-size: 14px; color: #666666; width: 110px; margin-right: 4px;}
+    .jobItem { font-size: 14px; color: #333333; }
     .rowItem {
       padding: 8px 0;
     }
     .divider {
-      margin-left: 100px;
+      margin-left: 110px;
     }
     .rightContent {
       flex: 1;
       div {
-        margin: 2px 4px;
+        margin: 4px 28px 2px 0;
         float: left;
         cursor: pointer;
         color: #333333;

src/views/Home/personal/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <headCarousel></headCarousel>
-    <headSearch></headSearch>
+    <headSearch v-if="industryTreeData"></headSearch>
     <hotJobs></hotJobs>
     <div class="default-width mt-3">
-      <jobTypeCard class="mb-3"></jobTypeCard>
+      <jobTypeCard class="mb-3" v-if="industryTreeData"></jobTypeCard>
       <hotPromotedPositions></hotPromotedPositions>
       <PopularEnterprises class="mt-10"></PopularEnterprises>
     </div>
@@ -18,7 +18,20 @@ import hotJobs from './components/hotJobs.vue'
 import jobTypeCard from './components/jobTypeCard.vue'
 import hotPromotedPositions from './components/hotPromotedPositions.vue'
 import PopularEnterprises from './components/popularEnterprises.vue'
+import { getPositionTreeData } from '@/api/common/index'
+import { provide, ref } from 'vue';
+
 defineOptions({ name:'personal-index'})
+
+// 获取行业树形
+let industryTreeData = ref(null)
+const getTreeData = async () => {
+  const res = await getPositionTreeData()
+  if (res?.length) industryTreeData.value = JSON.stringify(res)
+  else industryTreeData.value = "[]"
+}
+provide('industryTreeData', industryTreeData)
+getTreeData()
 </script>
 
 <style lang="scss" scoped>