推荐职位

src/views/recruit/position/components/rightRecommend.vue

@@ -0,0 +1,113 @@
+<template>
+  <v-card class="box">
+    <h4 class="h4">推荐职位</h4>
+    <div class="content">
+      <div v-for="item, index in list " :key="index" class="itemBox">
+        <div class="left">
+          <div>{{ item.aaa }}</div>
+          <div class="textColor666 size14">{{ item.bbb }}</div>
+        </div>
+        <div class="right">
+          <div style="color: #fe574a;">{{ item.ccc }}</div>
+          <div class="textColor666 size14">{{ item.ddd }}</div>
+        </div>
+      </div>
+    </div>
+  </v-card>
+</template>
+
+<script setup>
+defineOptions({name: 'retrieval-components-recommendedPositions'})
+const list = [
+  {
+    aaa: '职位名称',
+    bbb: '公司名称',
+    ccc: '9-12K',
+    ddd: '广州·越秀区',
+  },
+  {
+    aaa: '职位名称职位名称职位名称职位名称职位名称',
+    bbb: '公司名称公司名称公司名称公司名称公司名称',
+    ccc: '9-12K',
+    ddd: '广州·越秀区-广州·越秀区广州·越秀区',
+  },
+  // {
+  //   aaa: '职位名称',
+  //   bbb: '公司名称',
+  //   ccc: '9-12K',
+  //   ddd: '广州·越秀区',
+  // },
+  // {
+  //   aaa: '职位名称',
+  //   bbb: '公司名称',
+  //   ccc: '9-12K',
+  //   ddd: '广州·越秀区',
+  // },
+  // {
+  //   aaa: '职位名称',
+  //   bbb: '公司名称',
+  //   ccc: '9-12K',
+  //   ddd: '广州·越秀区',
+  // },
+  // {
+  //   aaa: '职位名称',
+  //   bbb: '公司名称',
+  //   ccc: '9-12K',
+  //   ddd: '广州·越秀区',
+  // },
+  // {
+  //   aaa: '职位名称',
+  //   bbb: '公司名称',
+  //   ccc: '9-12K',
+  //   ddd: '广州·越秀区',
+  // },
+  {
+    aaa: '职位名称',
+    bbb: '公司名称',
+    ccc: '9-12K',
+    ddd: '广州·越秀区',
+  }
+]
+</script>
+<style lang="scss" scoped>
+.textColor666 { color: #666; }
+.size14 { font-size: 14px; }
+.box {
+  width: 100%;
+  min-height: 100px;
+  border-radius: 8px;
+  .h4 {
+    padding: 12px 16px;
+    background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
+  }
+  .content {
+    padding: 0 8px;
+    .itemBox {
+      &:hover {
+        background-color: #f3f3f3;
+      }
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 16px;
+      margin: 8px 0;
+      border-radius: 8px;
+      cursor: pointer;
+      .left {
+        width: 148px;
+        margin-right: 12px;
+      }
+      .right {
+        width: calc(100% - 160px);
+        text-align: right;
+      }
+      .left, .right {
+        div {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/recruit/position/index.vue

@@ -13,7 +13,7 @@
       <div class="mr-3">
         <PositionLongStrip :items="items"></PositionLongStrip>
       </div>
-      <div>右侧列表</div>
+      <rightRecommend></rightRecommend>
     </div>
     <CtPagination
       v-if="total > 0"
@@ -25,6 +25,7 @@
   </div>
 </template>
 <script setup>
+import rightRecommend from './components/rightRecommend'
 import cityFilter from './components/cityFilter'
 import conditionFilter from './components/conditionFilter'
 import headSearch from '@/components/headSearch'