diff --git a/src/assets/images/taskpage/one.png b/src/assets/images/taskpage/one.png
new file mode 100644
index 00000000..1c8b3950
Binary files /dev/null and b/src/assets/images/taskpage/one.png differ
diff --git a/src/assets/images/taskpage/three.png b/src/assets/images/taskpage/three.png
new file mode 100644
index 00000000..8277651c
Binary files /dev/null and b/src/assets/images/taskpage/three.png differ
diff --git a/src/assets/images/taskpage/two.png b/src/assets/images/taskpage/two.png
new file mode 100644
index 00000000..1f2f85b5
Binary files /dev/null and b/src/assets/images/taskpage/two.png differ
diff --git a/src/views/learningpath/LearningPath.vue b/src/views/learningpath/LearningPath.vue
index 158e78c1..d5c582a6 100644
--- a/src/views/learningpath/LearningPath.vue
+++ b/src/views/learningpath/LearningPath.vue
@@ -95,6 +95,7 @@
       centered="true"
       v-model:visible="out"
       :footer="null"
+      wrapClassName="CreatePath"
     >
       <div class="out">
         <div class="top">
@@ -534,193 +535,195 @@ export default {
 };
 </script>
 <style lang="scss">
-.ant-modal {
-  width: 680px !important;
-  height: 528px !important;
-  .ant-modal-content {
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+.CreatePath {
+  .ant-modal {
     width: 680px !important;
     height: 528px !important;
-    .ant-modal-body {
+    .ant-modal-content {
       width: 680px !important;
       height: 528px !important;
-      padding: 0 !important;
-      .out {
-        display: block;
-        position: absolute;
-        top: 90px;
-        width: 680px;
-        // height: 525px;
-        background-color: #fff;
-
-        box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        .top {
-          width: 100%;
-          height: 68px;
-
-          background: linear-gradient(
-            rgba(78, 166, 255, 0.2) 0%,
-            rgba(78, 166, 255, 0) 100%
-          );
-          display: flex;
-          align-items: center;
-          .topimg {
-            width: 18px;
-            height: 18px;
-            margin-left: 27px;
-            margin-top: -2px;
-          }
-          .topc {
-            color: #000000;
-            font-size: 16px;
-            margin-left: 8px;
-          }
-        }
-        .mid {
-          width: 100%;
-          height: 100%;
+      .ant-modal-body {
+        width: 680px !important;
+        height: 528px !important;
+        padding: 0 !important;
+        .out {
+          display: block;
+          position: absolute;
+          top: 90px;
+          width: 680px;
+          // height: 525px;
           background-color: #fff;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          .d {
-            // margin-top: 8px;
-            // color: #ff4e4e;
-            margin-left: -5px;
-          }
-          .name {
-            width: 78%;
-            // background-color: lightcoral;
-            display: flex;
-            margin-top: 20px;
-            align-items: center;
-            height: 40px;
-            // border: 1px solid black;
 
-            .inname {
-              color: #6f6f6f;
-              font-size: 14px;
-              margin-left: 7px;
+          box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          .top {
+            width: 100%;
+            height: 68px;
+
+            background: linear-gradient(
+              rgba(78, 166, 255, 0.2) 0%,
+              rgba(78, 166, 255, 0) 100%
+            );
+            display: flex;
+            align-items: center;
+            .topimg {
+              width: 18px;
+              height: 18px;
+              margin-left: 27px;
+              margin-top: -2px;
             }
-            .in {
-              margin-left: 14px;
-              width: 81%;
-              position: relative;
-              .ant-input {
-                border-radius: 5px;
-                // height: 120%;
-                width: 100%;
-                height: 40px;
-              }
-              .showcount {
-                position: absolute;
-                right: 10px;
-                color: #c7cbd2;
-                bottom: 5px;
-              }
+            .topc {
+              color: #000000;
+              font-size: 16px;
+              margin-left: 8px;
             }
           }
-          .bac {
-            width: 78%;
-            // background-color: lightcoral;
+          .mid {
+            width: 100%;
+            height: 100%;
+            background-color: #fff;
             display: flex;
-            margin-top: 30px;
-            // border: 1px solid black;
+            flex-direction: column;
+            align-items: center;
             .d {
-              margin-top: 18px;
-              color: #ff4e4e;
+              // margin-top: 8px;
+              // color: #ff4e4e;
+              margin-left: -5px;
             }
-            .inname {
-              color: #6f6f6f;
-              font-size: 14px;
-              margin-left: 7px;
-              margin-top: 15px;
+            .name {
+              width: 78%;
+              // background-color: lightcoral;
+              display: flex;
+              margin-top: 20px;
+              align-items: center;
+              height: 40px;
+              // border: 1px solid black;
+
+              .inname {
+                color: #6f6f6f;
+                font-size: 14px;
+                margin-left: 7px;
+              }
+              .in {
+                margin-left: 14px;
+                width: 81%;
+                position: relative;
+                .ant-input {
+                  border-radius: 5px;
+                  // height: 120%;
+                  width: 100%;
+                  height: 40px;
+                }
+                .showcount {
+                  position: absolute;
+                  right: 10px;
+                  color: #c7cbd2;
+                  bottom: 5px;
+                }
+              }
             }
-            .in {
-              margin-left: 14px;
-              width: 81%;
-              height: 110px;
-              // background-color: red;
+            .bac {
+              width: 78%;
+              // background-color: lightcoral;
+              display: flex;
+              margin-top: 30px;
+              // border: 1px solid black;
+              .d {
+                margin-top: 18px;
+                color: #ff4e4e;
+              }
+              .inname {
+                color: #6f6f6f;
+                font-size: 14px;
+                margin-left: 7px;
+                margin-top: 15px;
+              }
+              .in {
+                margin-left: 14px;
+                width: 81%;
+                height: 110px;
+                // background-color: red;
+                display: flex;
+                justify-content: space-between;
+                .im {
+                  border-radius: 8px;
+                  width: 140px;
+                  height: 110px;
+                  cursor: pointer;
+                }
+              }
+            }
+            .info {
+              width: 78%;
+              // background-color: lightcoral;
+              display: flex;
+              margin-top: 30px;
+              // align-items: center;
+              // height: 40px;
+              // border: 1px solid black;
+
+              .inname {
+                color: #6f6f6f;
+                font-size: 14px;
+                margin-left: 26px;
+                margin-top: 15px;
+              }
+              .in {
+                margin-left: 14px;
+                width: 81%;
+                position: relative;
+                .ant-input {
+                  border-radius: 5px;
+                  // height: 120%;
+                  width: 100%;
+                  height: 130px;
+                  resize: none;
+                }
+                .showcount {
+                  position: absolute;
+                  right: 10px;
+                  color: #c7cbd2;
+                  bottom: 5px;
+                }
+              }
+            }
+            .btn {
+              width: 33%;
+              margin-top: 30px;
               display: flex;
               justify-content: space-between;
-              .im {
+              margin-bottom: 30px;
+              .samtn {
+                width: 100px;
+                height: 40px;
+                font-size: 14px;
+                border: 1px solid #4ea6ff;
                 border-radius: 8px;
-                width: 140px;
-                height: 110px;
                 cursor: pointer;
               }
-            }
-          }
-          .info {
-            width: 78%;
-            // background-color: lightcoral;
-            display: flex;
-            margin-top: 30px;
-            // align-items: center;
-            // height: 40px;
-            // border: 1px solid black;
-
-            .inname {
-              color: #6f6f6f;
-              font-size: 14px;
-              margin-left: 26px;
-              margin-top: 15px;
-            }
-            .in {
-              margin-left: 14px;
-              width: 81%;
-              position: relative;
-              .ant-input {
-                border-radius: 5px;
-                // height: 120%;
-                width: 100%;
-                height: 130px;
-                resize: none;
+              .btn1 {
+                background-color: #fff;
+                color: #4ea6ff;
               }
-              .showcount {
-                position: absolute;
-                right: 10px;
-                color: #c7cbd2;
-                bottom: 5px;
+              .btn2 {
+                background-color: #4ea6ff;
+                color: #fff;
               }
             }
           }
-          .btn {
-            width: 33%;
-            margin-top: 30px;
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 30px;
-            .samtn {
-              width: 100px;
-              height: 40px;
-              font-size: 14px;
-              border: 1px solid #4ea6ff;
-              border-radius: 8px;
-              cursor: pointer;
-            }
-            .btn1 {
-              background-color: #fff;
-              color: #4ea6ff;
-            }
-            .btn2 {
-              background-color: #4ea6ff;
-              color: #fff;
-            }
-          }
         }
       }
     }
   }
 }
-.clearfix:before,
-.clearfix:after {
-  content: " ";
-  display: block;
-  clear: both;
-}
 .learningPath {
   width: 100%;
   height: 100%;
diff --git a/src/views/learningpath/LevelAddDetail.vue b/src/views/learningpath/LevelAddDetail.vue
index ef516830..11b9e130 100644
--- a/src/views/learningpath/LevelAddDetail.vue
+++ b/src/views/learningpath/LevelAddDetail.vue
@@ -29,6 +29,7 @@
       centered="true"
       :footer="null"
       :closable="clos"
+      wrapClassName="AddLevel"
     >
       <div class="header">
         <div class="headmain">
@@ -310,7 +311,7 @@
       <div class="draw" style="position: relative">
         <a-drawer
           v-model:visible="visible"
-          class="drawerStyle"
+          class="drawerStyle ProjectDrawer"
           title="关联项目"
           placement="right"
           width="80%"
@@ -322,7 +323,7 @@
               <img
                 style="width: 29px; height: 29px; cursor: pointer"
                 src="../../assets/images/basicinfo/close.png"
-                @click="showDrawer"
+                @click="closeDrawer"
               />
             </div>
             <div class="drawerbox">
@@ -648,6 +649,9 @@ export default {
     const showDrawer = () => {
       state.visible = true;
     };
+    const closeDrawer = () => {
+      state.visible = false;
+    };
     const showModal = () => {
       state.modal = true;
     };
@@ -802,6 +806,7 @@ export default {
       selectProjectName2,
       tableDataFunc,
       showDrawer,
+      closeDrawer,
       showModal,
       closeModal,
       afterVisibleChange,
@@ -819,151 +824,153 @@ export default {
   display: block;
   clear: both;
 }
-.ant-modal {
-  width: 624px !important;
-  height: 388px !important;
-  .ant-modal-content {
+.AddLevel {
+  .ant-modal {
     width: 624px !important;
     height: 388px !important;
-    border-radius: 4px !important;
-    .ant-modal-body {
-      // background-color: blue;
-      width: 100% !important;
-      height: 100% !important;
-      padding: 0 !important;
+    .ant-modal-content {
+      width: 624px !important;
+      height: 388px !important;
+      border-radius: 4px !important;
+      .ant-modal-body {
+        // background-color: blue;
+        width: 100% !important;
+        height: 100% !important;
+        padding: 0 !important;
 
-      .header {
-        width: 624px;
-        height: 68px;
-        background: linear-gradient(
-          180deg,
-          rgba(78, 166, 255, 0.2) 0%,
-          rgba(78, 166, 255, 0) 100%
-        );
-        display: flex;
-        justify-content: center;
-        .headmain {
-          width: 90%;
-          height: 100%;
+        .header {
+          width: 624px;
+          height: 68px;
+          background: linear-gradient(
+            180deg,
+            rgba(78, 166, 255, 0.2) 0%,
+            rgba(78, 166, 255, 0) 100%
+          );
           display: flex;
-          align-items: center;
-          justify-content: space-between;
-          .add {
-            font-size: 16px;
-            font-weight: 600;
-            color: #333333;
-          }
-          .img {
-            width: 20px;
-            height: 20px;
-            background-image: url(../../assets/images/basicinfo/close22.png);
-            background-size: 100% 100%;
+          justify-content: center;
+          .headmain {
+            width: 90%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .add {
+              font-size: 16px;
+              font-weight: 600;
+              color: #333333;
+            }
+            .img {
+              width: 20px;
+              height: 20px;
+              background-image: url(../../assets/images/basicinfo/close22.png);
+              background-size: 100% 100%;
+            }
           }
         }
-      }
-      .main {
-        width: 100%;
-        height: calc(100% - 68px);
-        // background-color: #bfa;
-        display: flex;
-        justify-content: center;
-        .inma {
-          width: 75%;
-          height: 100%;
-          // background-color: lightblue;
-          .name {
-            display: flex;
-            position: relative;
-            margin-top: 30px;
-            .fir {
-              font-size: 14px;
-              font-weight: 400;
-              color: rgba(0, 0, 0, 0.85);
-              white-space: nowrap;
-              margin-top: 3px;
+        .main {
+          width: 100%;
+          height: calc(100% - 68px);
+          // background-color: #bfa;
+          display: flex;
+          justify-content: center;
+          .inma {
+            width: 75%;
+            height: 100%;
+            // background-color: lightblue;
+            .name {
+              display: flex;
+              position: relative;
+              margin-top: 30px;
+              .fir {
+                font-size: 14px;
+                font-weight: 400;
+                color: rgba(0, 0, 0, 0.85);
+                white-space: nowrap;
+                margin-top: 3px;
+              }
+              .input {
+                width: 100%;
+                .ant-input {
+                  border-radius: 8px;
+                  border: 1px solid #c7cbd2;
+                  &::placeholder {
+                    font-size: 12px;
+                    position: absolute;
+                    top: 5px;
+                  }
+                }
+                .ant-textarea {
+                  border-radius: 8px;
+                  border: 1px solid #c7cbd2;
+                  &::placeholder {
+                    font-size: 12px;
+                    position: absolute;
+                    top: 5px;
+                  }
+                }
+              }
+              .co {
+                position: absolute;
+                right: 10px;
+                top: 4px;
+
+                font-size: 14px;
+                font-weight: 400;
+                color: #c7cbd2;
+              }
+              .co1 {
+                position: absolute;
+                right: 10px;
+                bottom: 8px;
+
+                font-size: 14px;
+                font-weight: 400;
+                color: #c7cbd2;
+              }
             }
-            .input {
+            .btn {
+              margin-top: 40px;
               width: 100%;
-              .ant-input {
-                border-radius: 8px;
-                border: 1px solid #c7cbd2;
-                &::placeholder {
-                  font-size: 12px;
-                  position: absolute;
-                  top: 5px;
-                }
+              display: flex;
+              justify-content: center;
+              .btn1 {
+                width: 100px;
+                height: 40px;
+                border-radius: 4px;
+                border: 1px solid #387df7;
+                font-size: 14px;
+                color: #387df7;
+                cursor: pointer;
+                background: #ffffff;
+                margin-right: 20px;
               }
-              .ant-textarea {
-                border-radius: 8px;
-                border: 1px solid #c7cbd2;
-                &::placeholder {
-                  font-size: 12px;
-                  position: absolute;
-                  top: 5px;
-                }
+              .btn2 {
+                width: 100px;
+                height: 40px;
+                border-radius: 4px;
+                font-size: 14px;
+                color: #fff;
+                cursor: pointer;
+                border: 0;
+                background: #388be1;
               }
             }
-            .co {
-              position: absolute;
-              right: 10px;
-              top: 4px;
-
-              font-size: 14px;
-              font-weight: 400;
-              color: #c7cbd2;
-            }
-            .co1 {
-              position: absolute;
-              right: 10px;
-              bottom: 8px;
-
-              font-size: 14px;
-              font-weight: 400;
-              color: #c7cbd2;
-            }
-          }
-          .btn {
-            margin-top: 40px;
-            width: 100%;
-            display: flex;
-            justify-content: center;
-            .btn1 {
-              width: 100px;
-              height: 40px;
-              border-radius: 4px;
-              border: 1px solid #387df7;
-              font-size: 14px;
-              color: #387df7;
-              cursor: pointer;
-              background: #ffffff;
-              margin-right: 20px;
-            }
-            .btn2 {
-              width: 100px;
-              height: 40px;
-              border-radius: 4px;
-              font-size: 14px;
-              color: #fff;
-              cursor: pointer;
-              border: 0;
-              background: #388be1;
-            }
           }
         }
       }
     }
   }
 }
-.drawerStyle {
-  .ant-drawer-content-wrapper {
-    // max-width: 1000px;
-    .ant-drawer-header {
-      display: none !important;
-    }
-    .ant-drawer-body {
-      padding: 0;
-    }
-  }
+.ProjectDrawer {
+  // .ant-drawer-content-wrapper {
+
+  //   .ant-drawer-header {
+  //     display: none !important;
+  //   }
+  //   .ant-drawer-body {
+  //     padding: 0;
+  //   }
+  // }
   .drawerMain {
     min-width: 600px;
     margin: 0px 32px 0px 32px;
diff --git a/src/views/projectcenter/TaskPage.vue b/src/views/projectcenter/TaskPage.vue
index 1182f276..1dfc0353 100644
--- a/src/views/projectcenter/TaskPage.vue
+++ b/src/views/projectcenter/TaskPage.vue
@@ -1485,6 +1485,28 @@ export default {
           width: 50,
           align: "center",
           className: "h",
+          customRender: (text) => {
+            if (text.record.rank == "1") {
+              return (
+                <div
+                  style={{
+                    width: 24,
+                    height: 24,
+                    backgroundImage:
+                      "url(" +
+                      require("../../assets/images/taskpage/one.png") +
+                      ")",
+                  }}
+                >fewfwe</div>
+              );
+            } else if (text.record.rank == "2") {
+              return <div>ggg</div>;
+            } else if (text.record.rank == "3") {
+              return <div>ggg</div>;
+            } else {
+              return <div>{text.record.rank}</div>;
+            }
+          },
         },
         {
           title: "名称",