diff --git a/src/components/FirstJob/components/rightPanel/active.vue b/src/components/FirstJob/components/rightPanel/active.vue
index 9727a98..3367510 100644
--- a/src/components/FirstJob/components/rightPanel/active.vue
+++ b/src/components/FirstJob/components/rightPanel/active.vue
@@ -1,5 +1,120 @@
 <template>
-  <div>
-    活动
+  <div class="list-panel-active">
+    <div class="m-title g_flex_row_between">
+      <div class="g_flex_1" style="opacity: 0.5;">
+        活动提醒
+      </div>
+      <div class="g_flex_none g_flex_column_center" style="cursor: pointer;">
+        <div class="g_flex_row_end" >
+          <div style="color: #246394;font-size: 14px;opacity: 1;" class="g_flex_column_center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
+          </div>
+          <div style="color: #246394;font-size: 14px;opacity: 1;margin-top: -2px;margin-left: 2px;font-weight: 600;">
+            提交活动
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="m-list">
+      <div v-for="(item,index) in list" :key="index"
+           class="item g_flex_column_center"
+      >
+       <div class="g_flex_none g_flex_row_start">
+         <div class="g_flex_none title">
+          {{ item.date }}
+         </div>
+         <div class="g_flex_1 g_ell_1 g_ml_12 g_mr_12 title value">
+          {{ item.title }}
+         </div>
+         <div>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#7f7f7f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-bell-plus " data-sentry-element="IconBellPlus" data-sentry-source-file="index.tsx"><path d="M12.5 17h-8.5a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6a2 2 0 1 1 4 0a7 7 0 0 1 4 6v1"></path><path d="M9 17v1a3 3 0 0 0 3.51 2.957"></path><path d="M16 19h6"></path><path d="M19 16v6"></path></svg>
+         </div>
+       </div>
+      </div>
+      <div class="m-opa g_flex_row_between g_mt_12" style="height: 20px;overflow: hidden;">
+        <div style="color: #868e96;cursor: pointer;" class="g_fs_14 g_fw_600">
+          查看全部
+        </div>
+        <div class="g_flex_row_end" style="cursor: pointer;">
+          <div style="color: #868e96;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-calendar-plus "><path d="M12.5 21h-6.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v5"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M16 19h6"></path><path d="M19 16v6"></path></svg>
+          </div>
+          <div style="color: #868e96;margin-top: -2px;" class="g_fs_14 g_fw_600 g_flex_column_center g_ml_2">
+            添加到日历
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+  export default {
+    name: 'Active',
+    props: {},
+    data() {
+      return {
+        list:[
+          {
+            title:'支持疾病、药品、医院、医生等常用医疗场景的搜索查询，致力于提供简洁可信的医疗信息内容',
+            date:'02-14'
+          },
+          {
+            title:'支持疾病、药品、医院、医生等常用医疗场景的搜索查询，致力于提供简洁可信的医疗信息内容',
+            date:'02-17'
+          },
+        ]
+      }
+    },
+    created() {},
+    mounted() {},
+    methods: {}
+  }
+</script>
+
+<style>
+  .list-panel-active {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px;
+    padding: 16px;
+    margin-top: 32px;
+    margin-bottom: 32px;
+    .m-title{
+      color: rgb(0,0,0);
+      line-height: 1.5;
+      font-size: 17px;
+      margin-bottom: 12px;
+    }
+    .m-list{
+      .item{
+        margin-bottom: 12px;
+        border-bottom: 1px solid #dcdcdc;
+        height: 50px;
+        .title{
+          color: rgb(25, 25, 25);
+          font-size: 14px;
+          line-height: 1.57;
+        }
+        .img{
+          width: 32px;
+          height: auto;
+          border-radius: 4px;
+        }
+        &:hover{
+          .value{
+            cursor: pointer;
+            text-decoration: underline;
+            color: rgba(36,99,148,.9);
+          }
+        }
+        &:first-child{
+          border-top: 1px solid #dcdcdc;
+        }
+        &:last-child{
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/FirstJob/components/rightPanel/hot.vue b/src/components/FirstJob/components/rightPanel/hot.vue
index bf91bd5..99023fe 100644
--- a/src/components/FirstJob/components/rightPanel/hot.vue
+++ b/src/components/FirstJob/components/rightPanel/hot.vue
@@ -1,13 +1,126 @@
 <template>
-  <div>
-    热门
+  <div class="list-panel-hot">
+    <div class="m-title">
+      24小时热榜
+    </div>
+    <div class="m-list">
+      <div v-for="(item,index) in list" :key="index"
+           class="item g_flex_row_start"
+      >
+        <div class="g_flex_none g_flex_column_center key">
+          {{ index + 1 }}
+        </div>
+        <div class="g_flex_1 g_ell_1 value">
+          {{ item.title }}
+        </div>
+      </div>
+    </div>
+    <div class="m-more g_flex_column_center">
+      <div class="g_flex_row_center">
+        <div class="text">
+          更多
+        </div>
+        <div class="icon">
+          <a-icon type="right" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-
+  export default {
+    name: 'Hot',
+    props: {},
+    data() {
+      return {
+        list:[
+          {
+            title:'江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子',
+          },
+          {
+            title:'江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子',
+          },
+          {
+            title:'江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子',
+          },
+          {
+            title:'江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子',
+          },
+          {
+            title:'江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子',
+          },
+          {
+            title:'江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子',
+          },
+          {
+            title:'江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子',
+          },
+          {
+            title:'江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子江苏丹阳晨阳电子',
+          }
+        ]
+      }
+    },
+    created() {},
+    mounted() {},
+    methods: {}
+  }
 </script>
 
 <style>
-
+  .list-panel-hot{
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px;
+    padding: 16px;
+    .m-title{
+      color: rgb(0,0,0);
+      opacity: 0.5;
+      line-height: 1.5;
+      font-size: 17px;
+      margin-bottom: 12px;
+    }
+    .m-list{
+      .item{
+        margin-bottom: 22px;
+        .key{
+          width: 20px;
+          font-size: 14px;
+          color: #afafaf;
+        }
+        .value{
+          font-size: 14px;
+          color: rgba(0,0,0,.9);
+        }
+        &:nth-child(1),&:nth-child(2),&:nth-child(3){
+          .key{
+            color: #e02020;
+          }
+        }
+        &:hover{
+          .value{
+            cursor: pointer;
+            text-decoration: underline;
+            color: rgba(36,99,148,.9);
+          }
+        }
+      }
+    }
+    .m-more{
+      border-radius: 3px;
+      border: .5px solid #d8d8d8;
+      background-color: #fff;
+      font-size: 14px;
+      width: 100%;
+      height: 40px;
+      cursor: pointer;
+      .icon{
+        font-size: 14px;
+      }
+      &:hover{
+        filter: brightness(.98);
+      }
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/FirstJob/components/rightPanel/recommend.vue b/src/components/FirstJob/components/rightPanel/recommend.vue
index fd75411..172cba7 100644
--- a/src/components/FirstJob/components/rightPanel/recommend.vue
+++ b/src/components/FirstJob/components/rightPanel/recommend.vue
@@ -1,5 +1,120 @@
 <template>
-  <div>
-    推荐
+  <div class="list-panel-recom">
+    <div class="m-title g_flex_row_between">
+      <div class="g_flex_1" style="opacity: 0.5;">
+        产品推荐
+      </div>
+      <div class="g_flex_none g_flex_column_center" style="cursor: pointer;">
+        <div class="g_flex_row_end" >
+          <div style="color: #246394;font-size: 14px;opacity: 1;" class="g_flex_column_center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-plus "><path d="M12 5l0 14"></path><path d="M5 12l14 0"></path></svg>
+          </div>
+          <div style="color: #246394;font-size: 14px;opacity: 1;margin-top: -2px;margin-left: 2px;font-weight: 600;">
+            提交产品
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="m-list">
+      <div v-for="(item,index) in list" :key="index"
+           class="item"
+      >
+       <div class="g_flex_none g_flex_row_start">
+         <div class="g_flex_none">
+          <img :src="item.img" class="img" alt="">
+         </div>
+         <div class="g_flex_1 g_flex_column_center">
+          <div class="g_ell_1 title">
+            {{ item.title }}
+          </div>
+         </div>
+       </div>
+       <div class="g_flex_1 subtitle">
+        {{ item.subTitle }}
+       </div>
+      </div>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+  export default {
+    name: 'Recom',
+    props: {},
+    data() {
+      return {
+        list:[
+          {
+            title:'知识星球',
+            subTitle:'知识工作者的内容变现工具',
+            img:'https://readhub.cn/_next/image?url=https%3A%2F%2Fresource.nocode.com%2Freadhub%2Fsponsor%2Fsponsor_logo_ask.png&w=32&q=75'
+          },
+          {
+            title:'知识星球',
+            subTitle:'支持疾病、药品、医院、医生等常用医疗场景的搜索查询，致力于提供简洁可信的医疗信息内容',
+            img:'https://readhub.cn/_next/image?url=https%3A%2F%2Fresource.nocode.com%2Freadhub%2Fsponsor%2Fsponsor_logo_ask.png&w=32&q=75'
+          },
+          {
+            title:'知识星球',
+            subTitle:'知识工作者的内容变现工具',
+            img:'https://readhub.cn/_next/image?url=https%3A%2F%2Fresource.nocode.com%2Freadhub%2Fsponsor%2Fsponsor_logo_ask.png&w=32&q=75'
+          },
+        ]
+      }
+    },
+    created() {},
+    mounted() {},
+    methods: {}
+  }
+</script>
+
+<style>
+  .list-panel-recom {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px;
+    padding: 16px;
+    margin-top: 32px;
+    .m-title{
+      color: rgb(0,0,0);
+      line-height: 1.5;
+      font-size: 17px;
+      margin-bottom: 12px;
+    }
+    .m-list{
+      .item{
+        margin-bottom: 12px;
+        border-radius: 8px;
+        box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px;
+        border: 1px solid #dcdcdc;
+        padding: 16px;
+        transition: all 0.1s;
+        cursor: pointer;
+        .title{
+          margin-left: 10px;
+          color: rgb(25, 25, 25);
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 1.63;
+        }
+        .subtitle{
+          margin-top: 12px;
+          color: rgb(87, 87, 87);
+          font-size: 14px;
+        }
+        .img{
+          width: 32px;
+          height: auto;
+          border-radius: 4px;
+        }
+        &:hover{
+          box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
+          transform: scale(1.001);
+        }
+        &:last-child{
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/FirstJob/components/rightPanel/sponsor.vue b/src/components/FirstJob/components/rightPanel/sponsor.vue
index ec232dd..2a5b0f3 100644
--- a/src/components/FirstJob/components/rightPanel/sponsor.vue
+++ b/src/components/FirstJob/components/rightPanel/sponsor.vue
@@ -1,5 +1,121 @@
 <template>
-  <div>
-    赞助
+  <div class="list-panel-sponsor">
+    <div class="m-title g_flex_row_between">
+      <div class="g_flex_1" style="opacity: 0.5;">
+        赞助商
+      </div>
+      <div class="g_flex_none g_flex_column_center" style="cursor: pointer;">
+        <div class="g_flex_row_end" >
+          <div style="color: #246394;font-size: 14px;opacity: 1;" class="g_flex_column_center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-mail "><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path><path d="M3 7l9 6l9 -6"></path></svg>
+          </div>
+          <div style="color: #246394;font-size: 14px;opacity: 1;margin-top: -2px;margin-left: 2px;font-weight: 600;">
+            加入
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="m-list">
+      <div v-for="(item,index) in list" :key="index"
+           class="item g_flex_row_start"
+      >
+       <div class="g_flex_1 box g_flex_column_center">
+        <div>
+          <span class="title">
+            {{ item.title }}
+          </span>
+          <span class="subtitle">
+            {{ item.subTitle }}
+          </span>
+        </div>
+       </div>
+       <div class="g_flex_none">
+         <img :src="item.img" alt="" class="img"></img>
+       </div>
+      </div>
+    </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+  export default {
+    name: 'Sponsor',
+    props: {},
+    data() {
+      return {
+        list:[
+          {
+            title:'知识星球',
+            subTitle:'知识工作者的内容变现工具',
+            img:'https://readhub.cn/_next/image?url=https%3A%2F%2Fresource.nocode.com%2Freadhub%2Fsponsor%2Fsponsor_logo_zsxq.png&w=96&q=75'
+          },
+          {
+            title:'知识星球',
+            subTitle:'知识工作者的内容变现工具',
+            img:'https://readhub.cn/_next/image?url=https%3A%2F%2Fresource.nocode.com%2Freadhub%2Fsponsor%2Fsponsor_logo_zsxq.png&w=96&q=75'
+          },
+          {
+            title:'知识星球',
+            subTitle:'知识工作者的内容变现工具',
+            img:'https://readhub.cn/_next/image?url=https%3A%2F%2Fresource.nocode.com%2Freadhub%2Fsponsor%2Fsponsor_logo_zsxq.png&w=96&q=75'
+          },
+          {
+            title:'知识星球',
+            subTitle:'知识工作者的内容变现工具',
+            img:'https://readhub.cn/_next/image?url=https%3A%2F%2Fresource.nocode.com%2Freadhub%2Fsponsor%2Fsponsor_logo_zsxq.png&w=96&q=75'
+          },
+        ]
+      }
+    },
+    created() {},
+    mounted() {},
+    methods: {}
+  }
+</script>
+
+<style>
+  .list-panel-sponsor {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px;
+    padding: 16px;
+    margin-top: 32px;
+    .m-title{
+      color: rgb(0,0,0);
+      line-height: 1.5;
+      font-size: 17px;
+      margin-bottom: 12px;
+    }
+    .m-list{
+      .item{
+        margin-bottom: 12px;
+        border-radius: 8px;
+        box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px;
+        border: 1px solid #dcdcdc;
+        padding: 16px;
+        transition: all 0.1s;
+        cursor: pointer;
+        .title{
+          color: rgb(51, 51, 51);
+          font-size: 16px;
+          font-weight: 600;
+        }
+        .subtitle{
+          color: rgb(51, 51, 51);
+          font-size: 16px;
+        }
+        .img{
+          width: 79px;
+          height: auto;
+        }
+        &:hover{
+          box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
+          transform: scale(1.001);
+        }
+        &:last-child{
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file