Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/components/Position/item.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="position-box">
+    <div class="sub-li" v-for="(item, index) in list" :key="index">
+      <div class="job-info">
+        <div class="sub-li-top">
+          <div class="sub-li-info">
+            <p class="name">{{ item.recruitName }}</p>
+            <v-chip size="x-small" color="error" label variant="outlined" class="mr-1">急聘</v-chip>
+            <v-chip size="x-small" color="warning" label variant="outlined">NEW</v-chip>
+          </div>
+          <p class="salary">{{ item.salary }}</p>
+        </div>
+        <v-chip size="x-small" label v-for="(k, i) in item.welfareList" :key="i" class="mr-1" color="#666">{{ k }}</v-chip>
+      </div>
+      <div class="sub-li-bottom">
+        <div class="user-info">
+          <div class="d-flex align-center">
+            <v-img :src="item.company.headImg" width="40" style="height: 40px;" />
+            <span class="names ml-2" style="font-size: 14px">{{ item.company.enterpriseName }}</span>
+          </div>
+          <p class="names float-right">
+            <span>{{ item.company.industry }}</span>
+            <span class="vline"></span>
+            <span>{{ item.company.scale }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'position-card-item' })
+const list = [
+  {
+    recruitName: '产品经理',
+    salary: '6-11k',
+    welfareList: ['广州','本科','1-3年'],
+    company: {
+      headImg: 'https://img.bosszhipin.com/beijin/mcs/banner/06123cabdf75ed08313530ec8a42aef2cfcd208495d565ef66e7dff9f98764da.jpg',
+      enterpriseName: '卓越教育',
+      industry: '互联网行业',
+      scale: '0-20人'
+    }
+  },
+  {
+    recruitName: '产品经理',
+    salary: '6-11k',
+    welfareList: ['广州','本科','1-3年'],
+    company: {
+      headImg: 'https://img.bosszhipin.com/beijin/mcs/banner/06123cabdf75ed08313530ec8a42aef2cfcd208495d565ef66e7dff9f98764da.jpg',
+      enterpriseName: '卓越教育',
+      industry: '互联网行业',
+      scale: '0-20人'
+    }
+  },
+  {
+    recruitName: '产品经理',
+    salary: '6-11k',
+    welfareList: ['广州','本科','1-3年'],
+    company: {
+      headImg: 'https://img.bosszhipin.com/beijin/mcs/banner/06123cabdf75ed08313530ec8a42aef2cfcd208495d565ef66e7dff9f98764da.jpg',
+      enterpriseName: '卓越教育',
+      industry: '互联网行业',
+      scale: '0-20人'
+    }
+  },
+  {
+    recruitName: '产品经理',
+    salary: '6-11k',
+    welfareList: ['广州','本科','1-3年'],
+    company: {
+      headImg: 'https://img.bosszhipin.com/beijin/mcs/banner/06123cabdf75ed08313530ec8a42aef2cfcd208495d565ef66e7dff9f98764da.jpg',
+      enterpriseName: '卓越教育',
+      industry: '互联网行业',
+      scale: '0-20人'
+    }
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+.position-box {
+  display: flex;
+  flex-wrap: wrap;
+}
+.sub-li {
+  width: calc((100% - 24px) / 3);
+  min-width: calc((100% - 24px) / 3);
+  max-width: calc((100% - 24px) / 3);
+  margin: 0 12px 12px 0;
+  height: 150px;
+  border-radius: 12px;
+  padding: 0;
+  overflow: hidden;
+  transition: all .2s linear;
+  background-color: #fff;
+  &:nth-child(3n) {
+    margin-right: 0;
+  }
+}
+.job-info {
+  padding: 16px 20px;
+}
+.sub-li-top {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  margin-bottom: 12px;
+}
+.sub-li-info {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  height: 22px;
+  overflow: hidden;
+  flex: 1;
+}
+.salary {
+  font-size: 16px;
+  font-weight: 700;
+  color: #fe574a;
+  line-height: 22px;
+  flex: none;
+}
+.job-text {
+  white-space: normal;
+  padding-right: 0;
+  height: 22px;
+  line-height: 22px;
+  overflow: hidden;
+  word-break: break-all;
+  max-width: none;
+}
+.sub-li-info .name {
+  position: relative;
+  max-width: 200px;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+.sub-li-bottom {
+  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
+  margin-top: 0;
+  padding-top: 0;
+  display: block;
+  border: none;
+}
+.user-info {
+  display: flex;
+  padding: 12px 20px;
+  align-items: center;
+  justify-content: space-between;
+}
+.names {
+  color: #666;
+  font-size: 13px;
+}
+.vline {
+  display: inline-block;
+  width: 1px;
+  height: 10px;
+  vertical-align: middle;
+  background-color: #e0e0e0;
+  margin: 0 10px;
+}
+</style>

src/plugins/vuetify.js

@@ -20,7 +20,7 @@ const myCustomLightTheme = {
     surface: '#FFFFFF',
     primary: '#00897B',
     secondary: '#26A69A',
-    error: '#B00020',
+    error: '#ff5252',
     info: '#2196F3',
     success: '#4CAF50',
     warning: '#FB8C00',

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

@@ -5,23 +5,22 @@
       <v-tab :value="2">最新职位</v-tab>
       <v-tab :value="3">急聘职位</v-tab>
     </v-tabs>
-    <v-window v-model="tab" class="mt-9">
-        <!-- 推荐职位 -->
+    <v-window v-model="tab" class="mt-3">
       <v-window-item :value="1">
-        111
+        <PositionCard></PositionCard>
       </v-window-item>
-        <!-- 最新职位 -->
       <v-window-item :value="2">
-        222
+        <PositionCard></PositionCard>
       </v-window-item>
       <v-window-item :value="3">
-        333
+        <PositionCard></PositionCard>
       </v-window-item>
     </v-window>
   </div>
 </template>
 
 <script setup name="hotPromotedPositions">
+import PositionCard from '@/components/Position/item.vue'
 import {ref } from 'vue'
 const tab = ref(0)
 </script>