工作内容

src/mock/index.js

@@ -486,12 +486,20 @@ export const hardCaseList = [
 ]
 
 import R1 from '@/static/img/recruit/back.png'
+import R2 from '@/static/img/recruit/gaojijiegou.png'
+import R3 from '@/static/img/recruit/gaojiyingjian.png'
+import R4 from '@/static/img/recruit/gongye.png'
+import R5 from '@/static/img/recruit/houduan.png'
+import R6 from '@/static/img/recruit/qianduan.png'
+import R7 from '@/static/img/recruit/qudong.png'
+import R8 from '@/static/img/recruit/suanfa.png'
 export const recruitList = [
   {
     id: 1,
     salary: '40-70k',
     postName: '算法工程师',
     nature: '全职',
+    imgUrl: R8,
     hasMargin: true,
     address: '北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂',
     skills: 'C、C++、Python、Matlab、机器学习、模式识别、TensorFlow、Pytorch',
@@ -508,6 +516,7 @@ export const recruitList = [
   {
     id: 2,
     salary: '30-40k',
+    imgUrl: R7,
     postName: '驱动工程师',
     nature: '全职',
     hasMargin: true,
@@ -532,6 +541,7 @@ export const recruitList = [
     id: 3,
     salary: '50k',
     postName: '高级产品经理',
+    imgUrl: R1,
     nature: '全职',
     hasMargin: true,
     address: '北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂',
@@ -555,6 +565,7 @@ export const recruitList = [
   {
     id: 4,
     salary: '30-50k',
+    imgUrl: R2,
     postName: '高级结构工程师',
     nature: '全职',
     address: '北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂',
@@ -580,6 +591,7 @@ export const recruitList = [
     id: 5,
     salary: '30-50k',
     postName: '后端工程师',
+    imgUrl: R5,
     nature: '全职',
     address: '北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂',
     skills: 'OOP、Java、Python、Spring、MySQL、Redis、消息队列',
@@ -602,6 +614,7 @@ export const recruitList = [
   {
     id: 6,
     salary: '20k',
+    imgUrl: R4,
     postName: '高级工业设计师',
     nature: '全职',
     hasMargin: true,
@@ -625,6 +638,7 @@ export const recruitList = [
   {
     id: 7,
     salary: '30-50k',
+    imgUrl: R3,
     postName: '高级嵌入式工程师',
     nature: '全职',
     address: '北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂',
@@ -647,6 +661,7 @@ export const recruitList = [
   {
     id: 8,
     salary: '30-50k',
+    imgUrl: R6,
     postName: '高级硬件工程师',
     nature: '全职',
     address: '北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂',
@@ -674,6 +689,7 @@ export const recruitList = [
     salary: '20-30k',
     postName: '前端工程师',
     nature: '全职',
+    imgUrl: R6,
     hasMargin: true,
     address: '北京市昌平区回龙观街道博纳集团3号楼一层产品梦工厂',
     skills: 'JavaScript、Vue、React、NodeJs、CSS3、Vite、Webpack',

src/pages/Recruit.vue

@@ -20,7 +20,29 @@
             />
           </div>
         </div>
-        <div class="collapse_content" v-if="activeTab == item.id">123</div>
+        <div class="collapse_content" v-if="activeTab == item.id">
+          <img :src="item.imgUrl" class="header_img" />
+          <div class="content_wrap">
+            <div class="salary_btn">
+              {{ item.nature }}-岗位待遇{{ item.salary }}
+            </div>
+            <p class="address">{{ `工作地址${item.address}` }}</p>
+            <p class="work_content">工作内容</p>
+            <div
+              class="line"
+              v-for="(it, index) in item.jobContent"
+              :key="index"
+            >
+              <img :src="Answer" class="answer" alt="" />
+              <p class="text">{{ it }}</p>
+            </div>
+            <p class="work_content">岗位职责</p>
+            <div class="line" v-for="(it, index) in item.duty" :key="index">
+              <img :src="Answer" class="answer" alt="" />
+              <p class="text">{{ it }}</p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -31,6 +53,7 @@ import { recruitList } from '@/mock'
 import SubNavigation from 'cpns/SubNavigation'
 import Right from '@/static/img/recruit/right.png'
 import Right2 from '@/static/img/recruit/right2.png'
+import Answer from '@/static/img/recruit/answer.png'
 import { ref } from 'vue'
 
 const activeTab = ref(1)
@@ -99,6 +122,66 @@ const changeTab = id => {
         }
       }
       .collapse_content {
+        .header_img {
+          width: 100%;
+          height: auto;
+          object-fit: cover;
+        }
+        .content_wrap {
+          padding: 22px 30px 0 30px;
+          .salary_btn {
+            background: #283fe7;
+            border-radius: 20px;
+            padding: 12px 28px;
+            box-sizing: border-box;
+            display: flex;
+            transform: scale(0.5);
+            transform-origin: 0 center;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            letter-spacing: 4px;
+            color: #ffffff;
+          }
+          .address {
+            font-size: 16px;
+            transform: scale(0.5);
+            transform-origin: 0 center;
+            font-family: Alibaba PuHuiTi;
+            white-space: nowrap;
+            font-weight: 300;
+            color: #595959;
+            line-height: 11px;
+          }
+          .work_content {
+            font-size: 13px;
+            font-family: Alibaba PuHuiTi;
+            font-weight: 500;
+            color: #262626;
+            margin: 18px 0;
+          }
+          .line {
+            display: flex;
+            align-items: center;
+            margin-bottom: 14px;
+            .answer {
+              width: 11px;
+              height: 11px;
+              margin-right: 7px;
+            }
+            .text {
+              font-size: 7px;
+              // transform: scale(0.5);
+              // transform-origin: 0 center;
+              font-family: Alibaba PuHuiTi;
+              font-weight: 300;
+              color: #595959;
+              line-height: 20px;
+            }
+          }
+        }
       }
     }
   }