From 6f74b574d5b2452fc6389c42e5d4c8230d9120fa Mon Sep 17 00:00:00 2001
From: yuanshun <1422672890@qq.com>
Date: Mon, 25 Dec 2023 17:11:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9task=E5=85=AC=E5=85=B1?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/TaskList.vue | 84 ++++++++++++++++++++++++++++++--
 src/view/task/index.vue          |  2 +
 2 files changed, 83 insertions(+), 3 deletions(-)

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>