修改学习路径路径管理有无数据样式

src/components/drawers/AddOnline.vue

@@ -304,6 +304,7 @@ export default {
         }
       }
       .contentMain {
+          padding-right: 12px;
         .main_items {
           display: flex;
           justify-content: space-between;

src/components/drawers/ProjectScore.vue

@@ -1,15 +1,14 @@
 <!--发布公告-->
 <template>
-  <div class="content3">
+  <div class="contentscore">
     <a-tabs v-model:activeKey="activeKeyScore">
       <a-tab-pane key="1" tab="学员获取">
         <div class="group">
           <div class="groupleft">
             <div class="groupname" style="width: 42px">姓名：</div>
-            <a-input
+            <a-input class="ant-input"
               v-model:value="value"
               placeholder="请输入姓名"
-              style="width: 131px"
             />
           </div>
           <div class="groupright">
@@ -63,11 +62,10 @@
           </div>
           <div class="group" style="justify-content: center">
             <div class="groupleft">
-              <div class="groupname" style="width: 42px">姓名：</div>
+              <div class="groupname">姓名：</div>
-              <a-input
+              <a-input class="ant-input"
                 v-model:value="value"
                 placeholder="请输入姓名"
-                style="width: 130px"
               />
             </div>
             <div class="groupright">
@@ -156,11 +154,17 @@
       >
     </a-tabs>
   </div>
+  <stu-score-detail v-model:Svisible="Svisible" />
 </template>
+
 <script>
+import StuScoreDetail from "../../components/drawers/StuScoreDetail";
 import { reactive, toRefs } from "vue";
 export default {
   name: "ProjectScore",
+  components:{
+    StuScoreDetail,
+  },
   setup() {
     const state = reactive({
       tabledataStu: [
@@ -172,7 +176,7 @@ export default {
           group: "好好学习",
           diploma: "0",
           operation: "查看",
-          putin: "手动加入",
+          
         },
         {
           key: 2,
@@ -182,7 +186,7 @@ export default {
           group: "天天向上",
           diploma: "0",
           operation: "查看",
-          putin: "手动加入",
+         
         },
         {
           key: 3,
@@ -192,7 +196,7 @@ export default {
           group: "好好学习",
           diploma: "0",
           operation: "查看",
-          putin: "手动加入",
+        
         },
         {
           key: 4,
@@ -202,7 +206,7 @@ export default {
           group: "天天向上",
           diploma: "0",
           operation: "查看",
-          putin: "手动加入",
+          
         },
       ],
 
@@ -319,18 +323,53 @@ export default {
       todayvalue: "1",
       tableDataTotal: 30,
       stuValue: false,
+      Svisible:false,
+      
       
     });
+    const getTableData = () => {
+      let datas = state.tabledataStu;
+      datas.map((value) => {
+        {
+          //单层项目
+          value.operation = (
+            <div class="operation">
+              <div
+                class="jc"
+                onClick={() => {
+                  state.Svisible = true;
+                }}
+              >
+                查看
+              </div>                
+            </div>
+          );
+        }
+      });
+      state.tabledataStu = datas;
+    };
+    getTableData();
+   
     return {
       ...toRefs(state),
+     
     };
   },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
-.content3 {
+.contentscore {
   margin-top: 20px;
-  
+  margin-bottom: 100px;
+  .ant-tabs-tab-btn {
+    font-size: 18px;
+    font-weight: 700;
+  }
+  .ant-input {
+        border-radius: 5px;
+        width: 130px;
+        height: 40px;
+    }  
   .group {
       display: flex;
       justify-content: space-between;
@@ -338,12 +377,13 @@ export default {
         display: flex;
         align-items: center;
         margin-left: 32px;
-        .groupname {
+        .groupname {        
           height: 22px;
-          width: 70px;
+          width: 42px;
           color: #000000;
           font-size: 14px;
         }
+        
       }
       .groupright {
         display: flex;
@@ -382,6 +422,14 @@ export default {
           }
         }
       }
+      
+    }
+    
+    .ant-table-tbody{
+      .operation{
+      color: #409eff;
+    }
+
     }
   .scorelist {
     padding-left: 20%;
@@ -463,8 +511,7 @@ export default {
       }
     }
   }
-}
+  .projectscore {
-.projectscore {
   .pjc_body {
     margin-left: 34px;
     margin-right: 34px;
@@ -532,4 +579,7 @@ export default {
     }
   }
 }
+}
+
+
 </style>

src/components/drawers/StuAdd.vue

@@ -1075,7 +1075,7 @@ export default {
       display: flex;
       // height: 80%;
       margin-bottom: 72px;
-
+      overflow-y: auto;
       .left {
         // overflow-y: auto;
         width: 65%;

src/components/drawers/StuScoreDetail.vue

@@ -0,0 +1,340 @@
+<template>
+    <a-drawer
+      :visible="Svisible"
+      class="drawerStyle StuScore"
+      placement="right"
+      width="70%"
+      @after-visible-change="afterVisibleChange"
+    >
+      <div class="drawerMain">
+        <div class="header">
+          <div class="headerTitle">学员获取详情</div>
+          <img
+            style="width: 29px; height: 29px; cursor: pointer"
+            src="../../assets/images/basicinfo/close.png"
+            @click="closeDrawer"
+          />
+        </div>
+        <div class="main">
+        
+          <div class="tableBox" style="margin-top: 20px; margin-bottom: 100px">
+            <a-table
+              style="border: 1px solid #f2f6fe"
+                      :columns="tablecolumns"
+                      :data-source="tabledata"
+                      :loading="tableDataTotal === -1 ? true : false"
+        
+                      :scroll="{ x: 900, y: 560 }"
+                      @expand="expandTable"
+                      :pagination="false"
+                    
+            />
+            <div class="pa">
+              <a-pagination
+                showSizeChanger="true"
+                showQuickJumper="true"
+                hideOnSinglePage="true"
+                :pageSize="pageSize"
+                :current="currentPage"
+                :total="tableDataTotal"
+                class="pagination"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="btnn">
+          <button class="btn1" @click="closeDrawer">取消</button>
+          <button class="btn2" @click="closeDrawer">确定</button>
+        </div>
+  
+      </div>
+    </a-drawer>
+</template>
+  
+<script>
+  import { toRefs, reactive } from "vue";
+  export default {
+    name: "StuScoreDetail",
+    props: {
+      Svisible: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  
+    setup(props, ctx) {
+      const state = reactive({
+        name: null,
+        
+        pageSize: 10,
+        currentPage: 1,
+        tableDataTotal: 100,
+        selectedRowKeys: [],
+        
+        tabledata: [
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+          {
+            key: 1,
+            time: "2019-12-12 12:12",
+            score: "12",
+            type: "完成任务",
+            from: "【在线】如何成为产品经理",
+            
+          },
+        ],
+        tablecolumns: [
+          {
+            title: "获取时间",
+            dataIndex: "time",
+            key: "time",
+            width: 40,
+            align: "left",
+            className: "h head",
+          },
+          {
+            title: "积分",
+            dataIndex: "score",
+            key: "score",
+            width: 60,
+            align: "center",
+            className: "h",
+          },
+          {
+            title: "类型",
+            dataIndex: "type",
+            key: "type",
+            width: 60,
+            align: "center",
+            className: "h",
+          },
+          {
+            title: "来源",
+            dataIndex: "from",
+            key: "from",
+            width: 60,
+            align: "center",
+            className: "h",
+          },
+          
+        ],
+      });
+      const closeDrawer = () => {
+         ctx.emit("update:Svisible", false);
+      };
+      
+      return {
+        ...toRefs(state),
+        closeDrawer,
+       
+      };
+    },
+  };
+</script>
+  
+<style  lang="scss" >
+  .StuScore{
+    .drawerMain {
+      min-width: 600px;
+      margin: 0px 32px 0px 32px;
+      overflow-x: scroll;
+      display: flex;
+      flex-direction: column;
+  
+      .header {
+        height: 73px;
+        border-bottom: 1px solid #e8e8e8;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        // background-color: red;
+        margin-bottom: 20px;
+  
+        .headerTitle {
+          font-size: 18px;
+          font-weight: 600;
+          color: #333333;
+          line-height: 25px;
+          // margin-left: 24px;
+        }
+      }
+  
+      .main {
+        width: 100%;
+        height: 100%;
+  
+        // background-color: #bfa;
+        // overflow-y: auto;
+        .endtime {
+          font-size: 16px;
+          font-weight: 500;
+          color: #333333;
+        }
+  
+     
+  
+        .tableBox {
+          .ant-table-selection-column {
+            padding: 0px !important;
+            // padding-left: 45px !important;
+          }
+  
+          .ant-table-thead > tr > th {
+            background-color: rgba(239, 244, 252, 1) !important;
+            color: rgba(0, 0, 0, 0.8500);
+          }
+  
+          .ant-table-cell {
+            color: rgba(0, 0, 0, 0.6500);
+          }
+  
+          .ant-table-selection-column {
+            padding: 0 !important;
+          }
+  
+          th.h {
+            background-color: #eff4fc !important;
+          }
+  
+          
+          .ant-table-tbody
+            > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+            > td {
+              
+            background: #f6f9fd;
+          }
+          .ant-table-tbody > tr > td {
+              border-bottom: 1px solid rgba(240, 244, 254, 1);
+              padding: 16px 16px;
+              .operation {
+              color: rgba(56, 125, 247, 1);
+              cursor: pointer;
+              }
+          }
+          .pa {
+            // left: 0;
+            margin-top: 15px;
+            width: 100%;
+            // height: 20px;
+            // background-color: red;
+            display: flex;
+            justify-content: center;
+            // position: absolute;
+            // bottom: 20px;
+          }
+        }
+      }
+  
+      .btnn {
+        height: 72px;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+  
+        .btn1 {
+          width: 100px;
+          height: 40px;
+          border: 1px solid #4ea6ff;
+          border-radius: 8px;
+          color: #4ea6ff;
+          background-color: #fff;
+          cursor: pointer;
+        }
+  
+        .btn2 {
+          cursor: pointer;
+          width: 100px;
+          height: 40px;
+          background: #4ea6ff;
+          border-radius: 8px;
+          border: 0;
+          margin-left: 15px;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>

src/components/windows/DelWins.vue

@@ -37,9 +37,9 @@ import { toRefs, reactive, defineComponent } from "vue";
 export default defineComponent({
     name: "DelWins",
       props: {
-    delete_hs: {
+        delete_hs: {
-      type: Boolean,
+        type: Boolean,
-      default: false,
+        default: false,
     },
   },
     setup() {

src/views/courselibrary/CoursewareManage.vue

@@ -1053,7 +1053,7 @@
             <!-- 无数据样式 -->
             <div
               class="notable"
-              :style="{ display: stm_hs ? 'none' : 'block' }"
+              :style="{ display: stm_hs ?  'block' :'none'  }"
             >
               <div class="notablebox">
                 <div class="boxbody">
@@ -1681,24 +1681,34 @@
       </div>
     </a-modal>
     <!--请确定是否拒绝此学员学习此课程弹窗 -->
-    <!--删除弹窗 -->
+    <!--删除 复制 停用弹窗 -->
     <a-modal
       v-model:visible="delete_hs"
       :footer="null"
       :closable="closableQR"
       wrapClassName="DelModal"
       style="margin-top: 400px"
+      @cancel="delete_exit"
     >
-      <div class="delete" :style="{ display: delete_hs ? 'block' : 'none' }">
+      <div class="delete" :style="{ display: delete_hs || copy_hs || nouse_hs ? 'block' : 'none' }">
         <div class="del_header"></div>
         <div class="del_main">
           <div class="header">
-            <div class="del-icon"></div>
+            <div class="del-icon" :style="{ display: del_hs ? 'block' : 'none' }"><img src="@/assets/images/coursewareManage/notice.png" alt=""></div>
+            <div class="del-icon" :style="{ display: copy_hs || nouse_hs ? 'block' : 'none' }"><img src="@/assets/images/coursewareManage/QR.png" alt=""></div>
             <span>提示</span>
             <div class="close_exit" @click="delete_exit"></div>
           </div>
           <div class="body">
-            <span>您确定要删除此课程吗</span>
+            <div :style="{ display: del_hs ? 'block' : 'none' }">
+              <span>您确定要删除此课程吗</span>
+            </div>
+            <div :style="{ display: copy_hs ? 'block' : 'none' }">
+              <span>您确定要复制此课程吗</span>
+            </div>
+            <div :style="{ display: nouse_hs ? 'block' : 'none' }">
+              <span>您确定要停用此课程吗</span>
+            </div>
           </div>
           <div class="del_btnbox">
             <div class="del_btn btn1">
@@ -1712,68 +1722,6 @@
       </div>
     </a-modal>
     <!--删除弹窗 -->
-    <!--复制弹窗 -->
-    <a-modal
-      v-model:visible="copy_hs"
-      :footer="null"
-      :closable="closableQR"
-      wrapClassName="DelModal"
-      style="margin-top: 400px"
-    >
-      <div class="delete" :style="{ display: copy_hs ? 'block' : 'none' }">
-        <div class="del_header"></div>
-        <div class="del_main">
-          <div class="header">
-            <div class="icon"></div>
-            <span>提示</span>
-            <div class="close_exit" @click="delete_exit"></div>
-          </div>
-          <div class="body">
-            <span>您确定要复制此课程吗</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1">
-              <div class="btnText" @click="copy_exit">取消</div>
-            </div>
-            <div class="del_btn btn2">
-              <div class="btnText" @click="copy_exit">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-    <!--复制弹窗 -->
-    <!--停用弹窗 -->
-    <a-modal
-      v-model:visible="nouse_hs"
-      :footer="null"
-      :closable="closableQR"
-      wrapClassName="DelModal"
-      style="margin-top: 400px"
-    >
-      <div class="delete" :style="{ display: nouse_hs ? 'block' : 'none' }">
-        <div class="del_header"></div>
-        <div class="del_main">
-          <div class="header">
-            <div class="icon"></div>
-            <span>提示</span>
-            <div class="close_exit" @click="nouse_exit"></div>
-          </div>
-          <div class="body">
-            <span>您确定要停用此课程吗</span>
-          </div>
-          <div class="del_btnbox">
-            <div class="del_btn btn1">
-              <div class="btnText" @click="nouse_exit">取消</div>
-            </div>
-            <div class="del_btn btn2">
-              <div class="btnText" @click="nouse_exit">确定</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </a-modal>
-    <!--停用弹窗 -->
     <!-- 学员管理课程库-归属权抽屉 -->
     <own-power v-model:ownpowervisible="ownpowervisible" />
     <!-- 学员管理课程库-归属权抽屉 -->
@@ -2457,6 +2405,7 @@ export default defineComponent({
       agreestudy_hs: false,
       rejectstudy_hs: false,
       delete_hs: false,
+      del_hs:false,
       copy_hs: false,
       nouse_hs: false,
       // 二维码标题状态
@@ -2549,6 +2498,7 @@ export default defineComponent({
                       <div
                         class="jc"
                         onClick={() => {
+                          state.delete_hs = true;
                           state.copy_hs = true;
                         }}
                         style={{ width: "30px" }}
@@ -2723,6 +2673,7 @@ export default defineComponent({
                       <div
                         class="jc"
                         onClick={() => {
+                          state.delete_hs = true;
                           state.copy_hs = true;
                         }}
                         style={{ width: "30px" }}
@@ -2756,6 +2707,7 @@ export default defineComponent({
                       <div
                         class="jc"
                         onClick={() => {
+                          state.delete_hs = true;
                           state.copy_hs = true;
                         }}
                         style={{ width: "30px" }}
@@ -2803,6 +2755,7 @@ export default defineComponent({
                         class="jc"
                         onClick={() => {
                           state.delete_hs = true;
+                          state.del_hs = true;
                         }}
                         style="margin-left:22px"
                       >
@@ -2857,6 +2810,7 @@ export default defineComponent({
                         class="jc"
                         onClick={() => {
                           state.delete_hs = true;
+                          state.del_hs = true;
                         }}
                       >
                         删除
@@ -2873,6 +2827,7 @@ export default defineComponent({
                         class="jc"
                         onClick={() => {
                           state.delete_hs = true;
+                          state.del_hs = true;
                         }}
                       >
                         删除
@@ -2889,6 +2844,7 @@ export default defineComponent({
                         class="jc"
                         onClick={() => {
                           state.delete_hs = true;
+                          state.del_hs = true;
                         }}
                       >
                         删除
@@ -2962,6 +2918,7 @@ export default defineComponent({
                         <div
                           onClick={() => {
                             state.delete_hs = true;
+                          state.del_hs = true;
                           }}
                         >
                           删除
@@ -3039,7 +2996,11 @@ export default defineComponent({
                 {value.status === "已拒绝" ? (
                   <div class="nselect">
                     <div class="ops2">
-                      <div class="jc">删除</div>
+                      <div class="jc"
+                      onClick={() => {
+                          state.delete_hs = true;
+                          state.del_hs = true;
+                        }}>删除</div>
                     </div>
                   </div>
                 ) : (
@@ -3066,6 +3027,7 @@ export default defineComponent({
                   <div
                     class="use"
                     onClick={() => {
+                      state.delete_hs = true;
                       state.nouse_hs = true;
                     }}
                   >
@@ -3238,11 +3200,8 @@ export default defineComponent({
     };
     const delete_exit = () => {
       state.delete_hs = false;
-    };
+      state.del_hs = false;
-    const copy_exit = () => {
       state.copy_hs = false;
-    };
-    const nouse_exit = () => {
       state.nouse_hs = false;
     };
     const onSelectChange = (selectedRowKeys) => {
@@ -3304,8 +3263,6 @@ export default defineComponent({
       agreestudy_exit,
       rejectstudy_exit,
       delete_exit,
-      copy_exit,
-      nouse_exit,
       onSelectChange,
       faceManageChange,
       openMessage,
@@ -4792,8 +4749,6 @@ export default defineComponent({
             .notable {
               width: 100%;
               height: 100%;
-              display: flex;
-              justify-content: center;
               .notablebox {
                 width: 412px;
                 height: 212px;
@@ -4802,8 +4757,7 @@ export default defineComponent({
                 display: flex;
                 justify-content: center;
                 text-align: center;
-                margin-top: 77px;
+                margin:77px auto 109px auto;
-                margin-bottom: 109px;
                 cursor: pointer;
                 position: relative;
                 .smallleft {
@@ -4925,7 +4879,7 @@ export default defineComponent({
           }
         }
         .studentsmanage {
-          z-index: 999;
+          z-index: 1000;
           min-width: 1000px;
           background: #ffffff;
           .stm_main {
@@ -5235,18 +5189,18 @@ export default defineComponent({
               padding-left: 26px;
               font-size: 16px;
               .del-icon {
-                width: 16px;
+                  width: 16px;
-                height: 16px;
+                  height: 16px;
-                margin-right: 10px;
+                  position: relative;
-                background-image: url(@/assets/images/coursewareManage/notice.png);
+                  margin-right: 10px;
-                background-size: 100% 100%;
+                img{
-              }
+                  width: 100%;
-              .icon {
+                  height: 100%;
-                width: 16px;
+                  position: absolute;
-                height: 16px;
+                  top:0px;
-                margin-right: 10px;
+                  left:0px;
-                background-image: url(@/assets/images/coursewareManage/QR.png);
+                  background-size: 100% 100%;
-                background-size: 100% 100%;
+                }
               }
               .close_exit {
                 position: absolute;

src/views/learningpath/LearningPath.vue

@@ -40,16 +40,17 @@
             :placeholder="['      开始时间', '        结束时间']"
           />
         </div>
-      </div>
-      <div class="btns">
         <div class="btn btn1">
           <div class="search"></div>
           <div class="btnText">搜索</div>
         </div>
-        <div class="btn btn2">
+        <div class="btnn btn2">
           <div class="search"></div>
           <div class="btnText">重置</div>
         </div>
+      </div>
+      <div class="btns">
+        
         <!-- <router-link to="/projectadd">
           <div class="btn btn3">
             <div class="search"></div>
@@ -127,6 +128,128 @@
               <div class="showcount">{{ valueE.length }}/20</div>
             </div>
           </div>
+          <div class="name" style="margin-left: 27px">
+            <div class="d" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">归属组织</div>
+            <div class="in">
+              <a-input
+                v-model:value="valueE"
+                maxlength="20"
+                style="border-radius: 4px"
+              />
+              <div class="showcount">{{ valueE.length }}/20</div>
+            </div>
+          </div>
+          <div class="bac">
+            <div class="d" style="margin-top: 12px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">路径图背景</div>
+            <div class="in">
+              <!-- <img class="im" src="../../assets/px.jpg" />
+            <img class="im" src="../../assets/px.jpg" />
+            <img class="im" src="../../assets/px.jpg" /> -->
+              <div
+                @click="chooseImg(item.id)"
+                v-for="item in imgData"
+                :key="item.key"
+                style="
+                  border-radius: 8px;
+                  width: 136px;
+                  height: 106px;
+                  background-size: 100%;
+                  background-repeat: no-repeat;
+                "
+                :style="{
+                  border:
+                    learnPathBg === item.id
+                      ? '2px solid rgba(78, 166, 255, 1)'
+                      : '2px solid rgba(78, 166, 255, 0)',
+                  'background-image': 'url(' + item.source + ')',
+                }"
+              >
+                <!-- <img class="im" :src="item.source" /> -->
+              </div>
+            </div>
+          </div>
+          <div class="info">
+            <div class="inname">路径说明</div>
+            <div class="in">
+              <a-textarea v-model:value="valuei" maxlength="150" />
+              <div class="showcount">{{ valuei.length }}/150</div>
+            </div>
+          </div>
+          <div class="btn">
+            <button class="samtn btn1" @click="handleOut">取消</button>
+            <button class="samtn btn2" @click="handleOut">确定</button>
+          </div>
+        </div>
+      </div></a-modal
+    >
+    
+
+    <!-- 编辑路径弹窗 -->
+    <a-modal
+      :closable="sh"
+      centered="true"
+      v-model:visible="out1"
+      :footer="null"
+      wrapClassName="CreatePath"
+    >
+      <div class="out">
+        <div class="top">
+          <img class="topimg" src="../../assets/images/courseManage/add1.png" />
+          <div class="topc">编辑路径</div>
+          <div @click="handleOut1" style="margin-left: 500px; cursor: pointer">
+            <img
+              style="width: 20px; height: 20px"
+              src="../../assets/images/basicinfo/close.png"
+            />
+          </div>
+        </div>
+        <div class="mid clearfix">
+          <div class="name">
+            <div class="d" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">路径图名称</div>
+            <div class="in">
+              <a-input
+                v-model:value="valueE"
+                maxlength="20"
+                style="border-radius: 4px"
+              />
+              <div class="showcount">{{ valueE.length }}/20</div>
+            </div>
+          </div>
+          <div class="name" style="margin-left: 27px">
+            <div class="d" style="margin-top: -4px">
+              <img
+                style="width: 10px; height: 10px"
+                src="../../assets/images/basicinfo/asterisk.png"
+              />
+            </div>
+            <div class="inname">归属组织</div>
+            <div class="in">
+              <a-input
+                v-model:value="valueE"
+                maxlength="20"
+                style="border-radius: 4px"
+              />
+              <div class="showcount">{{ valueE.length }}/20</div>
+            </div>
+          </div>
           <div class="bac">
             <div class="d" style="margin-top: 12px">
               <img
@@ -442,6 +565,7 @@ export default {
         },
       ],
       out: false,
+      out1: false,
       number: null,
       selectTime: null,
       sh: false,
@@ -676,6 +800,9 @@ export default {
     const handleOut = () => {
       state.out = !state.out;
     };
+    const handleOut1 = () => {
+      state.out1 = !state.out1;
+    };
     const chooseImg = (id) => {
       console.log(id);
       state.learnPathBg = id;
@@ -747,14 +874,18 @@ export default {
                     >
                       发布
                     </div>
-                    <div class="jc">编辑</div>
+                    <div class="jc" onClick={() => {
+                        state.out1 = true;
+                      }}>编辑</div>
                   </div>
                 ) : (
                   <div></div>
                 )}
                 {value.state === "已发布" ? (
                   <div class="fb">
-                    <div class="jc">编辑</div>
+                    <div class="jc" onClick={() => {
+                        state.out1 = true;
+                      }}>编辑</div>
                   </div>
                 ) : (
                   <div></div>
@@ -970,6 +1101,7 @@ export default {
       selectProjectName,
       expandTable,
       handleOut,
+      handleOut1,
       showPub,
       closePub,
       showCopyModal,
@@ -1450,14 +1582,33 @@ export default {
         margin-right: 20px;
         margin-bottom: 20px;
       }
-    }
-    .btns {
-      display: flex;
-      // flex-wrap: wrap;
       .btn {
         padding: 0px 26px 0px 26px;
         height: 38px;
-        background: rgba(64, 158, 255, 0);
+        background: #409EFF;
+        border-radius: 8px;
+        //border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
+        .search {
+          background-size: 100%;
+        }
+        .btnText {
+          font-size: 14px;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height: 36px;
+          margin-left: 5px;
+        }
+      }
+      .btnn {
+        padding: 0px 26px 0px 26px;
+        height: 38px;
+        background: #FFFFFF;
         border-radius: 8px;
         border: 1px solid rgba(64, 158, 255, 1);
         display: flex;
@@ -1472,7 +1623,7 @@ export default {
         .btnText {
           font-size: 14px;
           font-weight: 400;
-          color: rgba(64, 158, 255, 1);
+          color: #409EFF;
           line-height: 36px;
           margin-left: 5px;
         }
@@ -1481,7 +1632,7 @@ export default {
         .search {
           width: 15px;
           height: 17px;
-          background-image: url("../../assets/images/courseManage/search1.png");
+          background-image: url("../../assets/images/courseManage/search0.png");
         }
       }
       .btn2 {
@@ -1491,16 +1642,8 @@ export default {
           background-image: url("../../assets/images/courseManage/reset1.png");
         }
       }
-      .btn3 {
-        margin-right: 0px;
-        .search {
-          width: 17px;
-          height: 18px;
-          background-image: url("../../assets/images/courseManage/add1.png");
-        }
-      }
       .btn1:hover {
-        background: rgba(64, 158, 255, 1);
+        background: rgba(64, 158, 255, 0.76);
         .search {
           background-image: url("../../assets/images/courseManage/search0.png");
         }
@@ -1508,17 +1651,52 @@ export default {
           color: #ffffff;
         }
       }
+      .btn1:active {
+        background: #0982FF;
+      }
       .btn2:hover {
-        background: rgba(64, 158, 255, 1);
+        background: rgba(64, 158, 255, 0.1);
+      }
+      .btn2:active {
+        background: rgba(64, 158, 255, 0.2);
+      }
+    }
+    .btns {
+      display: flex;
+      // flex-wrap: wrap;
+      .btn {
+        padding: 0px 26px 0px 26px;
+        height: 38px;
+        background: #409EFF;
+        border-radius: 8px;
+        //border: 1px solid rgba(64, 158, 255, 1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 14px;
+        flex-shrink: 0;
+        cursor: pointer;
         .search {
-          background-image: url("../../assets/images/courseManage/reset0.png");
+          background-size: 100%;
         }
         .btnText {
-          color: #ffffff;
+          font-size: 14px;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height: 36px;
+          margin-left: 5px;
+        }
+      }
+      .btn3 {
+        margin-right: 0px;
+        .search {
+          width: 17px;
+          height: 18px;
+          background-image: url("../../assets/images/courseManage/add0.png");
         }
       }
       .btn3:hover {
-        background: rgba(64, 158, 255, 1);
+        background: rgba(64, 158, 255, 0.76);
         .search {
           background-image: url("../../assets/images/courseManage/add0.png");
         }
@@ -1526,6 +1704,9 @@ export default {
           color: #ffffff;
         }
       }
+      .btn3:active {
+        background: #0982FF;
+      }
     }
   }
   .tableBox {
@@ -1563,6 +1744,7 @@ export default {
           font-size: 14px;
           margin-left: 20px;
           white-space: nowrap;
+          cursor: pointer;
         }
       }
     }

src/views/learningpath/LevelAdd.vue

@@ -44,9 +44,171 @@
         size="large"
         :tabBarStyle="{ marginLeft: '10px' }"
       >
-        <a-tab-pane key="1" tab="路径管理">
+        <a-tab-pane key="1" tab="概览">
-          <!-- 无数据时的路径管理 -->
+          <div class="split"></div>
-          <!-- <div class="cont">
+          <!-- 概览（无数据） -->
+          <div :style="{ display: nodata ? 'block' : 'none' }">
+            <div class="onerow">
+              <div class="taskmain">快速创建项目详情</div>
+            </div>
+            <div class="second">
+              <div
+                class="taskbox"
+                style="background: linear-gradient(180deg, #fef3dd, #fffaf0)"
+              >
+                <div class="leftt">
+                  <img src="../../assets/images/taskpage/left1.png" />
+                </div>
+                <div class="photo">
+                  <img src="../../assets/images/taskpage/picture1.png" />
+                </div>
+                <div class="rightt">
+                  <img src="../../assets/images/taskpage/right1.png" />
+                </div>
+                <div class="centerbox" style="color: rgba(255, 182, 78, 1)">
+                  添加任务
+                </div>
+                <div class="centermain">快速添加任务/阶段</div>
+              </div>
+              <div
+                class="taskbox"
+                style="background: linear-gradient(180deg, #ddeaff, #f0f8fe)"
+              >
+                <div class="leftt">
+                  <img src="../../assets/images/taskpage/left2.png" />
+                </div>
+                <div class="photo">
+                  <img src="../../assets/images/taskpage/picture2.png" />
+                </div>
+                <div class="rightt">
+                  <img src="../../assets/images/taskpage/right2.png" />
+                </div>
+                <div class="centerbox" style="color: rgba(78, 166, 255, 1)">
+                  添加学员
+                </div>
+                <div class="centermain">快速添加学员</div>
+              </div>
+              <div
+                class="taskbox"
+                @click="showModal"
+                style="background: linear-gradient(180deg, #e5f6ec, #eef9f3)"
+              >
+                <div class="leftt">
+                  <img src="../../assets/images/taskpage/left3.png" />
+                </div>
+                <div class="photo">
+                  <img src="../../assets/images/taskpage/picture3.png" />
+                </div>
+                <div class="rightt">
+                  <img src="../../assets/images/taskpage/right3.png" />
+                </div>
+                <div class="centerbox" style="color: rgba(93, 201, 136, 1)">
+                  发布
+                </div>
+                <div class="centermain">快速发布项目</div>
+              </div>
+            </div>
+          </div>
+          <!-- 概览（无数据） -->
+          <!-- 概览（有数据） -->
+          <div :style="{ display: nodata ? 'none' : 'block' }">
+            <div class="onerow"><div class="taskmain">项目概览</div></div>
+            <div class="second" style="margin-top: 0">
+              <div class="nubbox">
+                <span class="nub1">200</span>
+                <div class="nub2">总人数</div>
+              </div>
+              <div class="nubbox">
+                <span class="nub1" style="color: #ff90ae">15</span>
+                <div class="nub2">必修课</div>
+              </div>
+              <div class="nubbox">
+                <span class="nub1" style="color: #a497ff">15</span>
+                <div class="nub2">选修课</div>
+              </div>
+              <div class="nubbox">
+                <div>
+                  <span class="nub1" style="color: #5dc988">50</span
+                  ><span style="color: #5dc988; font-size: 14px">%</span>
+                </div>
+                <div class="nub2">完成率</div>
+              </div>
+              <div class="nubbox">
+                <div>
+                  <span class="nub1" style="color: #ff90ae">30</span
+                  ><span style="color: #ff90ae; font-size: 14px">%</span>
+                </div>
+                <div class="nub2">必修完成率</div>
+              </div>
+              <div class="nubbox">
+                <div>
+                  <span class="nub1" style="color: #a497ff">30</span
+                  ><span style="color: #a497ff; font-size: 14px">%</span>
+                </div>
+                <div class="nub2">选修完成率</div>
+              </div>
+            </div>
+            <div class="onerow"><div class="taskmain">阶段信息</div></div>
+            <div class="stagemess">
+              <div class="stage1">阶段1</div>
+              <div class="stage2">阶段2</div>
+            </div>
+            <div class="stagesecond">
+              <div class="staname">阶段名称：</div>
+              <div class="stamess">管理者进阶-腾飞班1第一阶段</div>
+            </div>
+            <div class="stagelast">
+              <div class="stagepro">
+                <a-progress
+                  type="dashboard"
+                  gapDegree="0"
+                  :percent="50"
+                  :width="140"
+                />
+                <div class="protext">课程完成率</div>
+              </div>
+              <div class="stagepro">
+                <a-progress
+                  type="dashboard"
+                  gapDegree="0"
+                  :percent="50"
+                  :width="140"
+                />
+                <div class="protext">考试通过率</div>
+              </div>
+              <div class="stagepro" style="margin-right: 0">
+                <a-progress
+                  type="dashboard"
+                  gapDegree="0"
+                  :percent="50"
+                  :width="140"
+                />
+                <div class="protext">作业合格率</div>
+              </div>
+              <div class="proright">
+                <div class="pronub" style="margin-left: 280px">10</div>
+                <div class="proright1">
+                  <span class="textpro">阶段任务总数</span>
+                  <a-progress :percent="50" style="width: 369px" />
+                </div>
+                <div class="pronub" style="margin-left: 206px">5</div>
+                <div class="proright1">
+                  <span class="textpro">必修课</span>
+                  <a-progress :percent="25" style="width: 369px" />
+                </div>
+                <div class="pronub" style="margin-left: 142px">1</div>
+                <div class="proright1">
+                  <span class="textpro">选修课</span>
+                  <a-progress :percent="5" style="width: 369px" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 概览（有数据） -->
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="路径管理">
+          <div class="split"></div>
+          <div class="cont">
             <div class="pad"></div>
             <div class="sametab">
               <div class="Lhead">
@@ -103,7 +265,8 @@
               </div>
             </div>
             <div class="pad"></div>
-          </div> -->
+          </div>
+
           <!-- 有数据时的路径管理 -->
           <div style="flex: 1">
             <div class="onerow">
@@ -297,7 +460,8 @@
             <div style="display: flex; height: 20px"></div>
           </div>
         </a-tab-pane>
-        <a-tab-pane key="2" tab="学员管理" force-render>
+        <a-tab-pane key="3" tab="学员管理" force-render>
+          <div class="split"></div>
           <div class="xwid">
             <div class="pad"></div>
             <div class="xin" style="overflow-x: auto">
@@ -378,8 +542,8 @@
             </div>
             <div class="pad"></div></div
         ></a-tab-pane>
-
+        <a-tab-pane key="4" tab="设置">
-        <a-tab-pane key="3" tab="设置">
+          <div class="split"></div>
           <div class="sametab">
             <div class="Gcon">
               <div class="pad"></div>
@@ -839,6 +1003,7 @@ export default {
       pageSize: 10,
       visiblene: false,
       sh: false,
+      nodata: true,
       closeDeleteAll: false,
       curLevel: "",
       taskSyllabusActive: 0,
@@ -1487,7 +1652,6 @@ export default {
 .addwrapper {
   width: 100%;
   height: 100%;
-  // background-color: green;
   .addhead {
     width: 100%;
     height: 130px;
@@ -1644,6 +1808,491 @@ export default {
       margin-left: 0px !important;
       padding-left: 32px !important;
     }
+    .onerow {
+      //width: 100%;
+      display: flex;
+      height: 40px;
+      position: relative;
+      margin-top: 15px;
+      margin-left: 38px;
+      //margin-right: 38px;
+      .taskmain {
+        font-size: 18px;
+        padding-top: 7px;
+        color: #000000;
+      }
+      .btn {
+        position: absolute;
+        top: 0;
+        right: 168px;
+        background-color: #409eff;
+        width: 130px;
+        height: 40px;
+        border-radius: 8px;
+        border: 1px solid #409eff;
+        color: #ffffff;
+        cursor: pointer;
+      }
+      .edit {
+        position: absolute;
+        right: 38px;
+        top: 0;
+        color: #409eff;
+        width: 100px;
+        height: 40px;
+        border: 1px solid #409eff;
+        border-radius: 8px;
+        .editimg {
+          width: 15px;
+          height: 15px;
+          margin-top: -2px;
+          margin-left: 25px;
+          margin-right: 5px;
+        }
+        .editext {
+          line-height: 40px;
+        }
+      }
+      .edit:hover {
+        color: #ffffff;
+        background-color: #409eff;
+        cursor: pointer;
+        .editimg {
+          background-image: url("../../assets/images/projectadd/edit1.png");
+        }
+      }
+    }
+    .second {
+      display: flex;
+      justify-content: left;
+      flex-wrap: wrap;
+      margin-top: 40px;
+      margin-left: 20px;
+      .nubbox {
+        width: 253px;
+        height: 116px;
+        margin-top: 20px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: #fafbfc;
+        border-radius: 10px;
+        margin-left: 15px;
+        .nub1 {
+          color: #ffb54a;
+          font-size: 30px;
+          font-weight: 700;
+        }
+        .nub2 {
+          color: #6d7584;
+          font-size: 14px;
+        }
+      }
+      .taskbox {
+        width: 412px;
+        height: 160px;
+        border-radius: 10px;
+        position: relative;
+        margin-left: 68px;
+        margin-bottom: 40px;
+        cursor: pointer;
+        .leftt {
+          position: absolute;
+          top: 18px;
+          left: 0;
+        }
+        .photo {
+          position: absolute;
+          top: 42px;
+          left: 37px;
+        }
+        .rightt {
+          position: absolute;
+          top: 69px;
+          right: 26px;
+        }
+        .centerbox {
+          position: absolute;
+          top: 52px;
+          left: 145px;
+          font-size: 20px;
+          font-weight: 700;
+          //line-height: 36px;
+        }
+        .centermain {
+          color: rgba(135, 139, 146, 1);
+          font-size: 14px;
+          position: absolute;
+          left: 144px;
+          bottom: 49px;
+        }
+      }
+    }
+    .stagemess {
+      display: flex;
+      margin-left: 38px;
+      .stage1 {
+        width: 100px;
+        height: 33px;
+        text-align: center;
+        line-height: 34px;
+        border-radius: 6px;
+        color: #ffffff;
+        font-size: 16px;
+        background: #4ea6ff;
+        margin-right: 10px;
+        margin-top: 19px;
+        cursor: pointer;
+      }
+      .stage2 {
+        width: 100px;
+        height: 33px;
+        text-align: center;
+        line-height: 34px;
+        border-radius: 6px;
+        border: 1px solid #ebeef3;
+        color: #000000;
+        font-size: 16px;
+        background: #ffffff;
+        margin-right: 10px;
+        margin-top: 19px;
+        cursor: pointer;
+      }
+    }
+    .stagesecond {
+      display: flex;
+      margin-left: 39px;
+      margin-top: 29px;
+      .staname {
+        color: #999ba3;
+        font-size: 14px;
+      }
+      .stamess {
+        color: #4f5156;
+        font-size: 14px;
+      }
+    }
+    .stagelast {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-bottom: 55px;
+      .stagepro {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 55px;
+        margin-right: 120px;
+        .ant-progress-circle-path {
+          stroke: #4ea6ff;
+        }
+        .ant-progress-text {
+          color: #4ea6ff;
+          font-weight: 700;
+        }
+        .protext {
+          color: #6d7584;
+          font-size: 14px;
+          margin-top: 25px;
+        }
+      }
+      .proright {
+        width: 500px;
+        margin-top: 55px;
+        margin-left: 50px;
+        .ant-progress-bg {
+          height: 24px !important;
+          background: #4ea6ff;
+        }
+        .ant-progress-inner {
+          height: 24px;
+        }
+        .pronub {
+          color: #4ea6ff;
+          font-size: 14px;
+          margin: 5px 0;
+        }
+        .proright1 {
+          display: flex;
+          justify-content: right;
+          .textpro {
+            color: #6d7584;
+            font-size: 14px;
+            margin-right: 20px;
+          }
+          .ant-progress-text {
+            color: #4ea6ff;
+            font-size: 14px;
+            font-weight: 700;
+          }
+        }
+      }
+    }
+    .sametab {
+      // margin-left: 30px;
+      // margin-right: 30px;
+      margin-top: 30px;
+      width: 100%;
+      // background-color: green;
+      .Lhead {
+        display: flex;
+        .btns {
+          display: flex;
+          margin-left: 20px;
+          // flex-wrap: wrap;
+          .btn {
+            padding: 0px 26px 0px 26px;
+            height: 38px;
+            background: rgba(64, 158, 255, 0);
+            border-radius: 8px;
+            border: 1px solid rgba(64, 158, 255, 1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 14px;
+            flex-shrink: 0;
+            cursor: pointer;
+            .search {
+              background-size: 100%;
+            }
+            .btnText {
+              font-size: 14px;
+              font-weight: 400;
+              color: rgba(64, 158, 255, 1);
+              line-height: 36px;
+              margin-left: 5px;
+            }
+          }
+          .btn1 {
+            .search {
+              width: 15px;
+              height: 17px;
+              background-image: url("../../assets/images/courseManage/search1.png");
+            }
+          }
+          .btn2 {
+            .search {
+              width: 16px;
+              height: 18px;
+              background-image: url("../../assets/images/courseManage/reset1.png");
+            }
+          }
+          .btn3 {
+            margin-right: 0px;
+            .search {
+              width: 17px;
+              height: 18px;
+              background-image: url("../../assets/images/courseManage/add1.png");
+            }
+          }
+          .btn1:hover {
+            background: rgba(64, 158, 255, 1);
+            .search {
+              background-image: url("../../assets/images/courseManage/search0.png");
+            }
+            .btnText {
+              color: #ffffff;
+            }
+          }
+          .btn2:hover {
+            background: rgba(64, 158, 255, 1);
+            .search {
+              background-image: url("../../assets/images/courseManage/reset0.png");
+            }
+            .btnText {
+              color: #ffffff;
+            }
+          }
+          .btn3:hover {
+            background: rgba(64, 158, 255, 1);
+            .search {
+              background-image: url("../../assets/images/courseManage/add0.png");
+            }
+            .btnText {
+              color: #ffffff;
+            }
+          }
+        }
+      }
+      .Lbom {
+        position: relative;
+        margin-bottom: 20px;
+        .item {
+          width: 100%;
+          height: 200px;
+          // background-color: green;
+          margin-top: 40px;
+          border-radius: 8px;
+          border: 1px solid #f0f4fe;
+          .itemhead {
+            height: 50px;
+            width: 100%;
+            background-color: #f0f4fe;
+            display: flex;
+            align-items: center;
+            position: relative;
+            .lev {
+              margin-left: 27px;
+              margin-right: 16px;
+              line-height: 100%;
+              color: #409eff;
+              font-size: 16px;
+            }
+            .lin {
+              width: 1px;
+              height: 35%;
+              background-color: #c7cbd2;
+            }
+            .nam {
+              margin-left: 16px;
+              color: #4f5156;
+              line-height: 100%;
+              font-size: 16px;
+            }
+            .count {
+              position: absolute;
+              line-height: 100%;
+              color: #4f5156;
+              font-size: 14px;
+              right: 40px;
+              span:nth-child(2) {
+                color: #63ca8c;
+              }
+            }
+          }
+          .itembomm {
+            display: flex;
+            align-items: center;
+            height: 150px;
+            .it {
+              // margin-left: 110px;
+              // margin-right: 110px;
+              width: 13%;
+              text-align: center;
+              .on {
+                font-size: 30px;
+              }
+              .ittext {
+                color: #4f5156;
+                margin-top: 16px;
+                margin-left: -5px;
+              }
+            }
+            .linee {
+              background-color: #ecf2fb;
+              width: 1px;
+              height: 55%;
+            }
+            .itright {
+              position: absolute;
+              right: 45px;
+              display: flex;
+              .te {
+                color: #4ea6ff;
+                font-size: 14px;
+                cursor: pointer;
+              }
+              .more {
+                position: relative;
+                height: 30px;
+                display: flex;
+                .moreArrow {
+                  width: 13px;
+                  height: 7px;
+                  display: inline-block;
+                  background-image: url("../../assets/images/navtop/down.png");
+                  background-size: 100%;
+                  margin: 2px;
+                  margin-left: 7px;
+                  margin-top: 6px;
+                }
+                .moreItems {
+                  width: 80px;
+                  height: 70px;
+                  display: none;
+                  background: #ffffff;
+                  box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
+                  border-radius: 3px;
+                  border: 0px solid #dcdcdc;
+                  position: absolute;
+                  left: 0px;
+                  top: 20px;
+                  z-index: 100;
+                  .roleItem {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: rgba(79, 81, 86, 1);
+                    line-height: 36px;
+                    display: flex;
+                    justify-content: center;
+                    cursor: pointer;
+                  }
+                  .roleItem:hover {
+                    color: #4ea6ff;
+                  }
+                }
+              }
+              .more:hover .moreArrow {
+                background-image: url("../../assets/images/navtop/up.png");
+              }
+              .more:hover .moreItems {
+                display: block;
+              }
+            }
+          }
+
+          .show {
+            color: blue;
+          }
+          .noshow {
+            display: none;
+          }
+        }
+        .create {
+          margin-top: 40px;
+          .taskbox {
+            width: 412px;
+            height: 160px;
+            border-radius: 10px;
+            position: relative;
+            // margin-left: 68px;
+            margin-bottom: 40px;
+            cursor: pointer;
+            .leftt {
+              position: absolute;
+              top: 18px;
+              left: 0;
+            }
+            .photo {
+              position: absolute;
+              top: 42px;
+              left: 37px;
+            }
+            .rightt {
+              position: absolute;
+              top: 69px;
+              right: 26px;
+            }
+            .centerbox {
+              position: absolute;
+              top: 52px;
+              left: 145px;
+              font-size: 20px;
+              font-weight: 700;
+              //line-height: 36px;
+            }
+            .centermain {
+              color: rgba(135, 139, 146, 1);
+              font-size: 14px;
+              position: absolute;
+              left: 144px;
+              bottom: 49px;
+            }
+          }
+        }
+      }
+    }
     .cont {
       display: flex;
 
@@ -1652,270 +2301,6 @@ export default {
         width: 40px;
         // background-color: red;
       }
-      .sametab {
-        // margin-left: 30px;
-        // margin-right: 30px;
-        margin-top: 30px;
-        width: 100%;
-        // background-color: green;
-        .Lhead {
-          display: flex;
-          .btns {
-            display: flex;
-            margin-left: 20px;
-            // flex-wrap: wrap;
-            .btn {
-              padding: 0px 26px 0px 26px;
-              height: 38px;
-              background: rgba(64, 158, 255, 0);
-              border-radius: 8px;
-              border: 1px solid rgba(64, 158, 255, 1);
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              margin-right: 14px;
-              flex-shrink: 0;
-              cursor: pointer;
-              .search {
-                background-size: 100%;
-              }
-              .btnText {
-                font-size: 14px;
-                font-weight: 400;
-                color: rgba(64, 158, 255, 1);
-                line-height: 36px;
-                margin-left: 5px;
-              }
-            }
-            .btn1 {
-              .search {
-                width: 15px;
-                height: 17px;
-                background-image: url("../../assets/images/courseManage/search1.png");
-              }
-            }
-            .btn2 {
-              .search {
-                width: 16px;
-                height: 18px;
-                background-image: url("../../assets/images/courseManage/reset1.png");
-              }
-            }
-            .btn3 {
-              margin-right: 0px;
-              .search {
-                width: 17px;
-                height: 18px;
-                background-image: url("../../assets/images/courseManage/add1.png");
-              }
-            }
-            .btn1:hover {
-              background: rgba(64, 158, 255, 1);
-              .search {
-                background-image: url("../../assets/images/courseManage/search0.png");
-              }
-              .btnText {
-                color: #ffffff;
-              }
-            }
-            .btn2:hover {
-              background: rgba(64, 158, 255, 1);
-              .search {
-                background-image: url("../../assets/images/courseManage/reset0.png");
-              }
-              .btnText {
-                color: #ffffff;
-              }
-            }
-            .btn3:hover {
-              background: rgba(64, 158, 255, 1);
-              .search {
-                background-image: url("../../assets/images/courseManage/add0.png");
-              }
-              .btnText {
-                color: #ffffff;
-              }
-            }
-          }
-        }
-        .Lbom {
-          position: relative;
-          margin-bottom: 20px;
-          .item {
-            width: 100%;
-            height: 200px;
-            // background-color: green;
-            margin-top: 40px;
-            border-radius: 8px;
-            border: 1px solid #f0f4fe;
-            .itemhead {
-              height: 50px;
-              width: 100%;
-              background-color: #f0f4fe;
-              display: flex;
-              align-items: center;
-              position: relative;
-              .lev {
-                margin-left: 27px;
-                margin-right: 16px;
-                line-height: 100%;
-                color: #409eff;
-                font-size: 16px;
-              }
-              .lin {
-                width: 1px;
-                height: 35%;
-                background-color: #c7cbd2;
-              }
-              .nam {
-                margin-left: 16px;
-                color: #4f5156;
-                line-height: 100%;
-                font-size: 16px;
-              }
-              .count {
-                position: absolute;
-                line-height: 100%;
-                color: #4f5156;
-                font-size: 14px;
-                right: 40px;
-                span:nth-child(2) {
-                  color: #63ca8c;
-                }
-              }
-            }
-            .itembomm {
-              display: flex;
-              align-items: center;
-              height: 150px;
-              .it {
-                // margin-left: 110px;
-                // margin-right: 110px;
-                width: 13%;
-                text-align: center;
-                .on {
-                  font-size: 30px;
-                }
-                .ittext {
-                  color: #4f5156;
-                  margin-top: 16px;
-                  margin-left: -5px;
-                }
-              }
-              .linee {
-                background-color: #ecf2fb;
-                width: 1px;
-                height: 55%;
-              }
-              .itright {
-                position: absolute;
-                right: 45px;
-                display: flex;
-                .te {
-                  color: #4ea6ff;
-                  font-size: 14px;
-                  cursor: pointer;
-                }
-                .more {
-                  position: relative;
-                  height: 30px;
-                  display: flex;
-                  .moreArrow {
-                    width: 13px;
-                    height: 7px;
-                    display: inline-block;
-                    background-image: url("../../assets/images/navtop/down.png");
-                    background-size: 100%;
-                    margin: 2px;
-                    margin-left: 7px;
-                    margin-top: 6px;
-                  }
-                  .moreItems {
-                    width: 80px;
-                    height: 70px;
-                    display: none;
-                    background: #ffffff;
-                    box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
-                    border-radius: 3px;
-                    border: 0px solid #dcdcdc;
-                    position: absolute;
-                    left: 0px;
-                    top: 20px;
-                    z-index: 100;
-                    .roleItem {
-                      font-size: 14px;
-                      font-weight: 400;
-                      color: rgba(79, 81, 86, 1);
-                      line-height: 36px;
-                      display: flex;
-                      justify-content: center;
-                      cursor: pointer;
-                    }
-                    .roleItem:hover {
-                      color: #4ea6ff;
-                    }
-                  }
-                }
-                .more:hover .moreArrow {
-                  background-image: url("../../assets/images/navtop/up.png");
-                }
-                .more:hover .moreItems {
-                  display: block;
-                }
-              }
-            }
-
-            .show {
-              color: blue;
-            }
-            .noshow {
-              display: none;
-            }
-          }
-          .create {
-            margin-top: 40px;
-            .taskbox {
-              width: 412px;
-              height: 160px;
-              border-radius: 10px;
-              position: relative;
-              // margin-left: 68px;
-              margin-bottom: 40px;
-              cursor: pointer;
-              .leftt {
-                position: absolute;
-                top: 18px;
-                left: 0;
-              }
-              .photo {
-                position: absolute;
-                top: 42px;
-                left: 37px;
-              }
-              .rightt {
-                position: absolute;
-                top: 69px;
-                right: 26px;
-              }
-              .centerbox {
-                position: absolute;
-                top: 52px;
-                left: 145px;
-                font-size: 20px;
-                font-weight: 700;
-                //line-height: 36px;
-              }
-              .centermain {
-                color: rgba(135, 139, 146, 1);
-                font-size: 14px;
-                position: absolute;
-                left: 144px;
-                bottom: 49px;
-              }
-            }
-          }
-        }
-      }
     }
 
     .onerow {

src/views/learningpath/LevelAddDetail.vue

@@ -85,46 +85,16 @@
           </div>
           <div class="rightt">
             <div class="select">
-              <a-select
+              <span>学习模式：</span>
-                v-model:value="projectName"
+              <div class="inputbox">
-                style="width: 200px"
+                <input type="text" placeholder="按学习时间解锁" />
-                placeholder="自由学习模式"
+                <div class="bottonbox"><div class="btnText">切换模式</div></div>
-                :options="projectNameList"
-                @change="selectProjectName"
-                allowClear
-                showSearch
-              ></a-select>
-            </div>
-            <div class="line"></div>
-            <img class="img2" src="../../assets/images/leveladd/pub.png" />
-            <div class="pub">发布</div>
-            <div class="line"></div>
-            <img
-              style="margin-right: 15px"
-              class="img2"
-              src="../../assets/images/leveladd/more.png"
-            />
-            <!-- <div class="more">
-              <div style="color: #7096e3">更多</div>
-              <div class="moreArrow"></div>
-              <div class="moreItems">
-                <div class="sammo">撤回</div>
-                <div class="sammo">复制</div>
-              </div>
-            </div> -->
-            <div class="role">
-              <div style="white-space: nowrap">更多</div>
-              <div class="roleArrow"></div>
-              <div class="roleItems">
-                <div class="roleItem">复制</div>
-                <div class="roleItem">删除</div>
               </div>
             </div>
             <div class="line"></div>
             <router-link to="/leveladd">
               <div style="display: flex">
                 <img class="img2" src="../../assets/images/leveladd/back.png" />
-
                 <div class="return">返回</div>
               </div>
             </router-link>
@@ -254,16 +224,19 @@
       </div>
       <div class="boom">
         <div class="boomcen">
-          <div class="select">
+          <div class="title">
-            <a-select
+            <div class="tit_left">
-              v-model:value="projectName"
+              <span>任务列表</span>
-              style="width: 270px"
+            </div>
-              placeholder="移动任务到关卡"
+            <div class="tit_right">
-              :options="projectNameList2"
+              <div class="btn btn1">
-              @change="selectProjectName2"
+                <div class="btnText">移动到任务阶段</div>
-              allowClear
+              </div>
-              showSearch
+              <div class="btn btn2">
-            ></a-select>
+                <div class="imgIcon"></div>
+                <div class="btnText">批量删除</div>
+              </div>
+            </div>
           </div>
           <div class="talk">
             <img class="im" src="../../assets/images/leveladd/gan.png" />
@@ -306,6 +279,36 @@
               />
             </div>
           </div>
+          <!-- 无数据样式 -->
+          <div class="notable" :style="{ display: stm_hs ? 'block' : 'none' }">
+            <div class="notablebox">
+              <div class="boxbody">
+                <div class="boximg"></div>
+                <div class="boxtitle">
+                  <span style="color: #ffb64e; font-size: 20px">无任务</span>
+                </div>
+                <div class="boxtitle2">
+                  <span style="color: #878b92">请点击上方，创建任务</span>
+                </div>
+              </div>
+              <div class="smallleft"></div>
+              <div class="smallright"></div>
+            </div>
+          </div>
+          <!-- 无数据样式 -->
+        </div>
+      </div>
+      <div class="footbtn">
+        <div class="btnbox">
+          <div class="btn btn2">
+            <div class="btnText">暂存</div>
+          </div>
+          <div class="btn btn2">
+            <div class="btnText">确定</div>
+          </div>
+          <div class="btn btn1">
+            <div class="btnText">下一步</div>
+          </div>
         </div>
       </div>
       <div class="draw" style="position: relative">
@@ -392,40 +395,6 @@ export default {
   name: "LevelAddDetail",
   setup() {
     const state = reactive({
-      projectNameList: [
-        {
-          id: 1,
-          value: "项目一",
-          label: "项目一",
-        },
-        {
-          id: 2,
-          value: "项目二",
-          label: "项目二",
-        },
-        {
-          id: 3,
-          value: "项目三",
-          label: "项目三",
-        },
-        {
-          id: 4,
-          value: "项目四",
-          label: "项目四",
-        },
-      ],
-      projectNameList2: [
-        {
-          id: 1,
-          value: "删除任务",
-          label: "删除任务",
-        },
-        {
-          id: 2,
-          value: "移动任务到关卡",
-          label: "移动任务到关卡",
-        },
-      ],
       level: [
         {
           id: "1",
@@ -636,16 +605,11 @@ export default {
       visible: false,
       modal: false,
       clos: false,
+      stm_hs: false,
       value1: "",
       value2: "",
       selectedRowKeys: [],
     });
-    const selectProjectName = (value, index) => {
-      console.log("value", value, index);
-    };
-    const selectProjectName2 = (value, index) => {
-      console.log("value", value, index);
-    };
     const showDrawer = () => {
       state.visible = true;
     };
@@ -802,8 +766,6 @@ export default {
     });
     return {
       ...toRefs(state),
-      selectProjectName,
-      selectProjectName2,
       tableDataFunc,
       showDrawer,
       closeDrawer,
@@ -1201,16 +1163,44 @@ export default {
         }
 
         .rightt {
-          // width: 500px;
           height: 100%;
-          // background-color: red;
-          // position: absolute;
-          // right: 0;
           display: flex;
           align-items: center;
           .select {
-            margin-right: 50px;
+            display: flex;
-            // margin-bottom: 20px;
+            align-items: center;
+            white-space: nowrap;
+            margin-right: 56px;
+            .inputbox {
+              display: flex;
+              align-items: center;
+              border: 1px solid #c7cbd2;
+              width: 238px;
+              height: 40px;
+              border-radius: 8px;
+              input {
+                border: none;
+                outline: none;
+              }
+              .bottonbox {
+                width: 100px;
+                height: 40px;
+                background: #409eff;
+                border-radius: 8px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                flex-shrink: 0;
+                .btnText {
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #ffffff;
+                  line-height: 36px;
+                  margin-left: 5px;
+                }
+              }
+            }
           }
           .line {
             height: 60px;
@@ -1218,27 +1208,6 @@ export default {
             background-color: #e8effa;
             margin-right: 18px;
           }
-          .img2 {
-            width: 42px;
-            height: 42px;
-            margin-right: 18px;
-          }
-          .pub {
-            color: #ffb64e;
-            font-size: 14px;
-            margin-top: 5px;
-            margin-right: 30px;
-            cursor: pointer;
-            white-space: nowrap;
-          }
-          @media screen and (max-width: 1050px) {
-            .pub {
-              margin-right: 10px;
-            }
-            .line {
-              margin-right: 10px;
-            }
-          }
           .return {
             color: #4ea6ff;
             font-size: 14px;
@@ -1246,53 +1215,6 @@ export default {
             margin-right: 20px;
             white-space: nowrap;
           }
-
-          .role {
-            display: flex;
-            align-items: center;
-            font-size: 16px;
-            font-weight: 400;
-            color: #333330;
-            line-height: 36px;
-            cursor: pointer;
-            position: relative;
-            margin-right: 20px;
-            .roleArrow {
-              width: 13px;
-              height: 7px;
-              margin-left: 8px;
-              background-image: url(../../assets/images/navtop/down.png);
-              background-size: 100%;
-            }
-            .roleItems {
-              width: 109px;
-              height: 90px;
-              padding-top: 10px;
-              background: #ffffff;
-              box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
-              position: absolute;
-              top: 35px;
-              right: 0px;
-              text-align: center;
-              display: none;
-              z-index: 100;
-            }
-            .roleItem {
-              font-size: 14px;
-              font-weight: 400;
-              color: rgba(79, 81, 86, 1);
-              line-height: 36px;
-            }
-            .roleItem:hover {
-              color: #4ea6ff;
-            }
-          }
-          .role:hover .roleItems {
-            display: block;
-          }
-          .role:hover .roleArrow {
-            background-image: url(../../assets/images/navtop/up.png);
-          }
         }
       }
     }
@@ -1353,8 +1275,59 @@ export default {
         width: 95%;
         // height: 100%;
         // background-color: #bfa;
-        .select {
+        .title {
-          margin-top: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .tit_left {
+            font-size: 16px;
+            font-weight: 500;
+            color: #363636;
+            line-height: 36px;
+            margin-top: 30px;
+          }
+          .tit_right {
+            display: flex;
+            align-items: center;
+            margin-top: 30px;
+            .btn {
+              padding: 0px 26px 0px 26px;
+              height: 38px;
+              border-radius: 8px;
+              border: 1px solid rgba(64, 158, 255, 1);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              margin-right: 14px;
+              flex-shrink: 0;
+              cursor: pointer;
+              white-space: nowrap;
+              .btnText {
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 36px;
+                margin-left: 5px;
+              }
+            }
+            .btn1 {
+              background-color: #409eff;
+              .btnText {
+                color: #ffffff;
+              }
+            }
+            .btn2 {
+              background-color: #ffffff;
+              .imgIcon {
+                width: 16px;
+                height: 16px;
+                background-image: url(@/assets/images/projectadd/delete.png);
+                background-size: 100%;
+              }
+              .btnText {
+                color: #409eff;
+              }
+            }
+          }
         }
         .talk {
           margin-top: 24px;
@@ -1426,20 +1399,97 @@ export default {
             bottom: 20px;
           }
         }
+        .notable {
+          width: 100%;
+          height: 100%;
+          .notablebox {
+            width: 412px;
+            height: 212px;
+            background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
+            border-radius: 10px;
+            display: flex;
+            justify-content: center;
+            text-align: center;
+            margin: 77px auto 109px auto;
+            cursor: pointer;
+            position: relative;
+            .smallleft {
+              position: absolute;
+              top: 18px;
+              left: 0px;
+              width: 8px;
+              height: 21px;
+              border-radius: 0px 4px 4px 0px;
+              background-color: #ffb64e;
+            }
+            .smallright {
+              position: absolute;
+              bottom: 18px;
+              right: 0px;
+              width: 8px;
+              height: 21px;
+              border-radius: 4px 0px 0px 4px;
+              background-color: #ffb64e;
+            }
+            .boxbody {
+              .boximg {
+                width: 72px;
+                height: 72px;
+                margin: 32px auto 20px auto;
+                background-image: url(@/assets/images/coursewareManage/nostate.png);
+                background-size: 100% 100%;
+              }
+              .boxtitle {
+                margin-bottom: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .footbtn {
+      width: 100%;
+      flex: 1;
+      background-color: #fff;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
+      display: flex;
+      justify-content: end;
+      .btnbox {
+        display: flex;
+        margin-right: 36px;
+        .btn {
+          padding: 0px 26px 0px 26px;
+          height: 38px;
+          border-radius: 8px;
+          border: 1px solid rgba(64, 158, 255, 1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          margin: 21px 0px 19px 14px;
+          cursor: pointer;
+          white-space: nowrap;
+          .btnText {
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 36px;
+            margin-left: 5px;
+          }
+        }
+        .btn1 {
+          background-color: #409eff;
+          .btnText {
+            color: #ffffff;
+          }
+        }
+        .btn2 {
+          background-color: #ffffff;
+          .btnText {
+            color: #409eff;
+          }
+        }
       }
     }
-    // .drawerbox {
-    //   // margin: 20px 38px 30px;
-    //   th.h {
-    //     background-color: #eff4fc !important;
-    //   }
-
-    //   .ant-table-tbody
-    //     > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
-    //     > td {
-    //     background: #f6f9fd;
-    //   }
-    // }
   }
 
   .opat {

src/views/research/ResearchManage.vue

@@ -766,14 +766,18 @@ export default {
               padding-left: 26px;
               font-size: 16px;
               .del-icon {
-                display: flex;
-                align-items: center;
-                margin-right: 10px;
-                // background-image: url(@/assets/images/coursewareManage/notice.png);
-                img{
-                  background-size: 100% 100%;
                   width: 16px;
                   height: 16px;
+                  position: relative;
+                  margin-right: 10px;
+                // background-image: url(@/assets/images/coursewareManage/notice.png);
+                img{
+                  width: 100%;
+                  height: 100%;
+                  position: absolute;
+                  top:0px;
+                  left:0px;
+                  background-size: 100% 100%;
                 }
               }
               .icon {