diff --git a/src/api/task.ts b/src/api/task.ts
index f09d832..ba12075 100644
--- a/src/api/task.ts
+++ b/src/api/task.ts
@@ -41,4 +41,21 @@ export function taskAllList(data: any) {
     method: 'get',
     params: data
   })
+}
+
+//任务详情接口
+export function taskDetails(data: any) {
+  return request({
+    url: '/task/getTaskDetails',
+    method: 'get',
+    params: data
+  })
+}
+// 收藏接口
+export function taskCollection(data: any) {
+  return request({
+      url: '/course/TaskCollection',
+      method: 'post',
+      data
+  })
 }
\ No newline at end of file
diff --git a/src/assets/img/task/details-guarantee.png b/src/assets/img/task/details-guarantee.png
new file mode 100644
index 0000000..6a73d58
Binary files /dev/null and b/src/assets/img/task/details-guarantee.png differ
diff --git a/src/components/list/TaskList.vue b/src/components/list/TaskList.vue
index d95db23..1a3b0b7 100644
--- a/src/components/list/TaskList.vue
+++ b/src/components/list/TaskList.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+  import { useRouter } from "vue-router";    
+  const props=defineProps({
+    taskList:{
+        type:Array<any>,
+        default:()=>[]
+    }
+  })
+  const router = useRouter()
+    const gotoDetail = (id:any) =>{
+        router.push('/task/details/'+id)
+    }
+</script>
 <template>
     <div class="task-item" v-for="(item,index) in taskList" :key="index" @click="gotoDetail(item.task_id)">
         <div class="task-item-top">
@@ -25,19 +38,7 @@
         </div>
     </div>
 </template>
-<script setup lang="ts">
-  import { useRouter } from "vue-router";    
-  const props=defineProps({
-    taskList:{
-        type:Array<any>,
-        default:()=>[]
-    }
-  })
-  const router=useRouter()
-  const gotoDetail=(id:any)=>{
-     router.push('/contract/details/'+id)
-  }
-</script>
+
 <style  scoped>
 .task-item{
     background: #FFFFFF;
diff --git a/src/main.ts b/src/main.ts
index 49facde..70f10f9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,7 @@ import App from './App.vue'
 import store from "./store/index.ts";
 import router from "./router";
 import './utils/rem'
-import { Button,NavBar,Tabbar,TabbarItem,Checkbox,Toast,Icon ,Popup , Swipe, SwipeItem,List,PullRefresh  } from "vant";
+import { Button,NavBar,Tabbar,TabbarItem,Checkbox,Toast,Icon ,Popup , Swipe, SwipeItem,List,PullRefresh ,ActionBarIcon } from "vant";
 const app = createApp(App)
 app.use(Button)
 app.use(NavBar)
@@ -19,6 +19,8 @@ app.use(List)
 app.use(Swipe)
 app.use(SwipeItem)
 app.use(PullRefresh)
+app.use(ActionBarIcon)
 app.use(store)
 app.use(router)
+
 app.mount('#app')
diff --git a/src/view/task/components/TaskDetail.vue b/src/view/task/components/TaskDetail.vue
new file mode 100644
index 0000000..843a09b
--- /dev/null
+++ b/src/view/task/components/TaskDetail.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+  import { useRouter } from "vue-router";    
+  const props=defineProps({
+    item:{
+        type:Object,
+        default:()=>{}
+    }
+  })
+
+</script>
+<template>
+<div class="task-detail">
+    <h3>{{item.task_name}}</h3>
+    <p class="task-h3-text">{{item.position_name}}</p>
+    <dl>
+        <dt>
+            <p>任务预算</p>
+            <strong>{{item.task_budget}}元</strong>
+        </dt>
+        <dt>
+            <p>任务周期</p>
+            <strong>{{item.task_cycle}}天</strong>
+        </dt>
+        <dt>
+            <p>服务方式</p>
+            <strong>{{item.service_mode}}</strong>
+        </dt>
+    </dl>
+    <h4>任务信息</h4>
+    <h5>任务要求</h5>
+    <p class="task-h5-text">{{item.task_ask}}</p>
+    <h4>工作保障</h4>
+    <img class="task-job" src="../../../assets/img/task/details-guarantee.png" />
+    <h4>任务来源</h4>
+    <router-link class="task-source" :to="'/task/companySource/'+item.company_id">
+        <img :src="item.head_img" />
+        <div>
+            <h5>{{item.company_name}}</h5>
+            <p>{{item.user_name}} . {{item.city}}</p>
+        </div>
+    </router-link>
+</div>
+</template>
+
+<style  scoped>
+.task-detail{
+    padding: 0.64rem;
+    font-size: 0.69rem;
+    font-weight: 100;
+    color: #666666;
+}
+h3{
+    font-size: 1.12rem;
+    line-height: 1.12rem;
+    font-weight: 400;
+    color: #333333;
+    margin-bottom: 0.93rem;
+}
+.task-h3-text{
+    line-height: 0.69rem;
+    padding-bottom: 0.85rem;
+    margin-bottom: 1.23rem;
+    border-bottom: 1px solid #f0f0f0;
+}
+dl{
+    display: flex;
+    padding-bottom: 1.12rem;
+    margin-bottom: 1.55rem;
+    border-bottom: 1px solid #f0f0f0;
+    padding-right: 2rem;
+}
+dl dt{
+    flex: 1;
+}
+dl dt p{
+    margin-bottom: 0.56rem;
+    line-height: 0.69rem;
+}
+dl dt strong{
+    font-size: 0.8rem;
+    line-height: 0.8rem;
+    font-weight: 500;
+    color: #FF9415;
+}
+h4{
+    font-size: 0.96rem;
+    line-height: 0.96rem;
+    font-weight: 400;
+    color: #333333;
+    margin-bottom: 0.61rem;
+}
+h5{
+    font-size: 0.8rem;
+    line-height: 0.8rem;
+    font-weight: 300;
+    color: #333333;
+    margin-bottom: 0.8rem;
+}
+.task-h5-text{
+    font-size: 0.69rem;
+    font-weight: 100;
+    color: #333333;
+    line-height: 1.23rem;
+    padding-bottom: 1.3rem;
+    margin-bottom: 1.33rem;
+    border-bottom: 1px solid #f0f0f0;
+}
+.task-job{
+    width: 100%;
+    padding-bottom: 1.44rem;
+    margin-bottom: 1.36rem;
+    border-bottom: 1px solid #f0f0f0;
+}
+.task-source{
+    display: flex;
+    align-items: center;
+    margin-bottom: 4rem;
+}
+.task-source img{
+    width: 2.67rem;
+    height: 2.67rem;
+    border-radius: 1.34rem;
+    margin-right: 0.61rem;
+}
+.task-source h5{
+    margin-bottom: 0.51rem;
+}
+.task-source p{
+    line-height: 0.69rem;
+    color: #666666;
+}
+</style>
\ No newline at end of file
diff --git a/src/view/task/details.vue b/src/view/task/details.vue
index e69de29..b174b90 100644
--- a/src/view/task/details.vue
+++ b/src/view/task/details.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+ import { reactive } from 'vue';
+import { taskDetails,taskCollection } from "@/api/task";
+import { showToast } from 'vant'
+import { useRouter } from 'vue-router'
+import TaskDetail from './components/TaskDetail.vue'
+const router=useRouter()
+const taskId=router.currentRoute.value.params.id//获取传来的id
+const state:any=reactive({
+    item:'',
+    status:0,
+    loading:false
+})
+
+const leftBack = ()=>history.back();
+
+const getTaskDetail=async ()=>{
+    state.loading=true
+    const res =await taskDetails({
+        task_id:taskId
+    })
+  
+    if(res){
+        state.item=res.records[0]
+        state.status=res.records[0].status
+        state.loading=false
+    }else{
+        showToast(res.msg)
+        state.loading=false
+    }
+}
+getTaskDetail()
+const setTaskCollection=async ()=>{
+    state.loading=true
+    const res =await taskCollection({
+        task_id:taskId
+    })
+  
+    if(res){
+        state.status=res.data.status
+    }
+    showToast(res.msg)
+    state.loading=false
+    
+}
+const gotoMessage= ()=>{
+    router.push('/message/talk/'+state.item.user_id)
+}
+const onClickIcon=()=>{
+    setTaskCollection()
+}
+
+   
+</script>
+<template>
+         <van-nav-bar title="任务详情" left-arrow @click-left="leftBack"/>
+        <TaskDetail :item=state.item></TaskDetail>
+         <div class="task-detail-footer">
+            <van-action-bar-icon icon="star-o" text="收藏" @click="onClickIcon" />
+            <van-button type="primary" block @click="gotoMessage">立即沟通</van-button>
+         </div>
+</template>
+<style  scoped>
+
+.task-detail-footer{
+    display: flex;
+    position: fixed;
+    left: 0;
+    width: 100%;
+    align-items: center;
+    background: #ffffff;
+    bottom: 0;
+    padding: 0.64rem 0;
+}
+.task-detail-footer button{
+    margin-right: 0.64rem;
+}
+.task-detail-footer .active >>> .van-icon-star-o:before{
+    color: #FE8F27;
+}
+</style>
\ No newline at end of file