diff --git a/src/components/list/TaskList.vue b/src/components/list/TaskList.vue
index 44a2075..1d734bd 100644
--- a/src/components/list/TaskList.vue
+++ b/src/components/list/TaskList.vue
@@ -18,10 +18,10 @@
                 <strong>驻场</strong>
             </dt>
          </dl>
-         <p></p>
+         <p>任务要求：混合小程序开发为覅缺乏我切夫齐王府全额付后期无法秋风起恭王府哦去我服和求我盖饭齐王府...</p>
          <div class="task-item-bottom">
-            <label></label>
-            <span><van-icon name=""/></span>
+            <label>北京驻场</label>
+            <span><van-icon name="location-o" /></span>
          </div>
     </div>
 </template>
@@ -33,4 +33,82 @@
   }
 </script>
 <style  scoped>
+.task-item{
+    background-color: #ffffff;
+    border-radius: 0.53rem;
+    margin:0 0.64rem 0.53rem;
+    position: relative; 
+    font-size: 0.69rem;
+    font-weight: 100;
+    color: #666666;
+}
+.task-item-top{
+    display: flex;
+}
+.task-item-top h3{
+    font-size: 0.91rem;
+    line-height: 0.91rem;
+    font-weight: 400;
+    color: #333333;
+    margin-bottom: 1.01rem;
+}
+.task-item-top span{
+    position: absolute;
+    right: 0;
+    width: 2.29rem;
+    height: 1.08rem;
+    line-height: 1.08rem;
+    background: linear-gradient(90deg, #FEA829, #FE8F27);
+    border-radius: 0.53rem 0 0 0.53rem;
+    text-align: center;
+    font-size: 0.59rem;
+    color: #FFFFFF;
+}
+dl{
+    display: flex;
+    margin-bottom: 0.8rem;
+}
+dl dt{
+    margin-right: 1.44rem;
+}
+dl dt h5{
+    font-size: 0.69rem;
+    line-height: 0.69rem;
+    margin-bottom: 0.53rem;
+    font-weight: 100;
+    color: #999999;
+}
+dl dt strong{
+    font-size: 0.64rem;
+    line-height: 0.64rem;
+    display: block;
+    font-weight: 500;
+    color: #333333;
+}
+.task-item p{
+    color: #333333;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+.task-item-bottom{
+    display: flex;
+    border-top: 1px solid #f5f5f5;
+    margin-top: 0.72rem;
+    padding-top: 0.72rem;
+    line-height: 0.69rem;
+}
+.task-item-bottom label{
+    flex: 1;
+}
+.task-item-bottom span{
+    text-align: right;
+}
+.task-item-bottom i{
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-right: 0.1rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/view/task/index.vue b/src/view/task/index.vue
index adeccf4..fbfc93e 100644
--- a/src/view/task/index.vue
+++ b/src/view/task/index.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import FooterTabbar from '@/components/FooterTabbar.vue'
+import TaskList from '@/components/list/TaskList.vue'
 </script>
 <template>
     <div>
+        <TaskList></TaskList>
         <FooterTabbar></FooterTabbar>
     </div>
 </template>