feat:taskAdd无数据样式 模板库任务大纲（差一点样式没找到）

src/views/projectcenter/LibraryAdd.vue

@@ -8,7 +8,9 @@
         <div class="forz">管理者进阶-腾飞班1备份</div>
         <div class="fort">
           <div class="fort1">项目经理：黄华、刘俊备份</div>
-            <div class="fort2">起止时间：2022-09-21 00:00 至 2022-10-21 00:00</div>
+          <div class="fort2">
+            起止时间：2022-09-21 00:00 至 2022-10-21 00:00
+          </div>
         </div>
       </div>
       <div class="right">
@@ -48,29 +50,259 @@
         :tabBarStyle="{ marginLeft: '10px' }"
       >
         <a-tab-pane key="1" tab="任务">
-                1
+          <div class="taskBox" style="flex: 1">
+            <div class="split"></div>
+            <div class="onerow">
+              <div class="taskmain">任务大纲</div>
+              <button class="btn" @click="showFaceIn">批量面授报名</button>
+              <router-link to="/taskadd" class="edit">
+                <img
+                  class="editimg"
+                  src="../../assets/images/projectadd/edit.png"
+                />
+                <span class="editext">编辑</span>
+              </router-link>
+            </div>
+            <!-- <div class="taskSyllabus">
+                <a-collapse v-model:activeKey="taskSyllabusActive" accordion>
+                  <template #expandIcon="{ isActive }">
+                    <img
+                      class="editimg"
+                      src="../../assets/images/projectadd/edit.png"
+                    />
+                    <span class="editext">编辑</span>
+                  </router-link>
+                </div> -->
+            <div class="taskSyllabus">
+              <a-collapse v-model:activeKey="taskSyllabusActive" accordion>
+                <template #expandIcon="{ isActive }">
+                  <img
+                    :style="{
+                      width: isActive ? 9.1 : 8.1,
+                      height: isActive ? 8.1 : 9.1,
+                      'margin-right': isActive ? '12px' : '13px',
+                    }"
+                    :src="
+                      isActive
+                        ? require('../../assets/images/projectadd/open.png')
+                        : require('../../assets/images/projectadd/close.png')
+                    "
+                  />
+                  <div></div>
+                </template>
+                <a-collapse-panel
+                  v-for="(value, index) in taskSyllabus"
+                  :key="index"
+                  :header="value.text"
+                >
+                  <div
+                    class="course"
+                    v-for="(item, key) in value.children"
+                    :key="key"
+                  >
+                    <!-- :style="{width:item.course==='在线'?'28px':
+                            height:item.course==='在线'?'27px':}" -->
+                    <div class="first">
+                      <div class="icon">
+                        <div
+                          style="
+                            width: 31px;
+                            height: 28px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                          "
+                        >
+                          <img
+                            :src="
+                              item.course === '在线'
+                                ? require('../../assets/images/leveladd/zai.png')
+                                : item.course === '面授'
+                                ? require('../../assets/images/leveladd/mian.png')
+                                : item.course === '案例'
+                                ? require('../../assets/images/leveladd/an.png')
+                                : item.course === '作业'
+                                ? require('../../assets/images/leveladd/zuo.png')
+                                : item.course === '考试'
+                                ? require('../../assets/images/leveladd/kao.png')
+                                : item.course === '直播'
+                                ? require('../../assets/images/leveladd/zhi.png')
+                                : item.course === '外链'
+                                ? require('../../assets/images/leveladd/wai.png')
+                                : item.course === '讨论'
+                                ? require('../../assets/images/leveladd/tao.png')
+                                : item.course === '活动'
+                                ? require('../../assets/images/leveladd/huo.png')
+                                : item.course === '测评'
+                                ? require('../../assets/images/leveladd/ce.png')
+                                : item.course === '调研'
+                                ? require('../../assets/images/leveladd/diao.png')
+                                : item.course === '投票'
+                                ? require('../../assets/images/leveladd/tou.png')
+                                : null
+                            "
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <div class="iconame">「{{ item.course }}」</div>
+                        <div class="icontext">{{ item.name }}</div>
+                      </div>
+                    </div>
+                    <div class="type">
+                      <div
+                        :class="
+                          item.classify == '必修' ? 'typename1' : 'typename'
+                        "
+                      >
+                        {{ item.classify }}
+                      </div>
+                    </div>
+                    <div class="time">
+                      <div class="timetext">开始时间</div>
+                      <div class="timetext">{{ item.beginTime }}</div>
+                    </div>
+                    <div class="progress">
+                      <div class="progresstext">
+                        {{ item.complete }}/{{ item.total }}人
+                      </div>
+                      <div style="display: flex">
+                        <a-progress
+                          :showInfo="false"
+                          :percent="item.percent"
+                          strokeColor="#FFC067"
+                          trailColor="rgba(253, 209, 98, 0.2)"
+                        />
+                        <span class="progresstext" style="margin-left: 10px"
+                          >{{ item.percent }}%</span
+                        >
+                      </div>
+                    </div>
+                    <div class="operations">
+                      <div
+                        class="operation"
+                        style="cursor: pointer"
+                        :style="{
+                          display: item.course === '面授' ? 'flex' : 'none',
+                        }"
+                        @click="showFS"
+                      >
+                        学员
+                      </div>
+                      <div
+                        class="operation"
+                        style="cursor: pointer"
+                        @click="showAA"
+                        :style="{
+                          display:
+                            item.course === '直播' || item.course === '活动'
+                              ? 'flex'
+                              : 'none',
+                        }"
+                      >
+                        考勤
+                      </div>
+                      <div
+                        class="operation"
+                        style="cursor: pointer"
+                        :style="{
+                          display:
+                            item.course === '直播' ||
+                            item.course === '活动' ||
+                            item.course === '面授'
+                              ? 'flex'
+                              : 'none',
+                        }"
+                      >
+                        二维码
+                      </div>
+                      <div
+                        class="operation"
+                        style="cursor: pointer; margin-right: 35px"
+                        @click="
+                          item.course === '在线' ||
+                          item.course === '案例' ||
+                          item.course === '外链' ||
+                          item.course === '讨论' ||
+                          item.course === '直播' ||
+                          item.course === '调研' ||
+                          item.course === '投票' ||
+                          item.course === '活动'
+                            ? showTime(item.course, item.name)
+                            : item.course === '考试' || item.course === '测评'
+                            ? showTest(item.course, item.name)
+                            : item.course === '面授'
+                            ? showFace(item.course)
+                            : item.course === '作业'
+                            ? showWork(item.course)
+                            : null
+                        "
+                      >
+                        管理
+                      </div>
+                    </div>
+                  </div>
+                </a-collapse-panel>
+              </a-collapse>
+              <!-- 无数据创建任务 -->
+              <div
+                class="taskbox"
+                style="
+                  background: linear-gradient(180deg, #ddeaff, #f0f8fe);
+                  display: none;
+                "
+              >
+                <div class="leftt">
+                  <img src="../../assets/images/taskpage/left2.png" />
+                </div>
+                <div class="photo">
+                  <img src="../../assets/images/taskpage/picture8.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>
+            <div style="display: flex; height: 20px"></div>
+          </div>
         </a-tab-pane>
         <a-tab-pane key="2" tab="公告" force-render>
           <div class="notice">
             <div class="ntc_tit"><span>公告</span></div>
-                    <hr color="#E8E8E8"/>
+            <hr color="#E8E8E8" />
             <div class="ntc_body">
               <div class="ntc_switch">
-                        <a-switch v-model:checked="checked" @click="changeopclo"/>
+                <a-switch v-model:checked="checked" @click="changeopclo" />
-                        <div class="opclo"
+                <div
-                        :style="{ display: hideshow ? 'block' : 'none' }">
+                  class="opclo"
+                  :style="{ display: hideshow ? 'block' : 'none' }"
+                >
                   <span>关闭</span>
                 </div>
-                        <div class="opclo"
+                <div
-                        :style="{ display: hideshow ? 'none' : 'block'  }">
+                  class="opclo"
+                  :style="{ display: hideshow ? 'none' : 'block' }"
+                >
                   <span>开启</span>
                 </div>
               </div>
-                    <div class="ntc_content"
+              <div
-                    :style="{ display: hideshow ? 'block' : 'none' }">
+                class="ntc_content"
+                :style="{ display: hideshow ? 'block' : 'none' }"
+              >
                 <div class="ntcc_tit">公告内容</div>
                 <div class="textarea">
-                            <a-textarea v-model:value="value2" placeholder="公告信息最多输入150个字。" :maxlength="textnum" allow-clear />
+                  <a-textarea
+                    v-model:value="value2"
+                    placeholder="公告信息最多输入150个字。"
+                    :maxlength="textnum"
+                    allow-clear
+                  />
                   <div class="btnarea">
                     <div>&nbsp;</div>
                     <div class="area_btn">
@@ -88,7 +320,7 @@
             <div class="pjc_tit">
               <span>获取规则</span>
             </div>
-                    <hr color="#E8E8E8"/>
+            <hr color="#E8E8E8" />
             <div class="pjc_body">
               <div class="pjcb_header">
                 <span>规则</span>
@@ -98,9 +330,15 @@
                 </div>
               </div>
               <div class="pjcb_content">
-                            <div class="content content1"><span>当前设计下，学员可以获得 10 积分</span></div>
+                <div class="content content1">
-                            <div class="content content2"><span>完成【必修/选修】获得 5 积分</span></div>
+                  <span>当前设计下，学员可以获得 10 积分</span>
-                            <div class="content content3"><span>优秀学员可获得 5 积分</span></div>
+                </div>
+                <div class="content content2">
+                  <span>完成【必修/选修】获得 5 积分</span>
+                </div>
+                <div class="content content3">
+                  <span>优秀学员可获得 5 积分</span>
+                </div>
               </div>
             </div>
           </div>
@@ -110,66 +348,74 @@
             <div class="set_tit">
               <span>基本信息</span>
             </div>
-                    <hr color="#E8E8E8"/>
+            <hr color="#E8E8E8" />
             <div class="set_body">
               <div class="set_content">
                 <div class="setc_name"><span>项目名称：</span></div>
                 <div class="setc_main">
-                                <span style="color:#999999;">管理者进阶 - 管理者腾飞班</span>
+                  <span style="color: #999999">管理者进阶 - 管理者腾飞班</span>
                 </div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>封面图：</span></div>
                 <div class="setc_main">
-                                <img src="@/assets/images/projectadd/picture.png" alt="">
+                  <img src="@/assets/images/projectadd/picture.png" alt="" />
                 </div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>项目时间：</span></div>
                 <div class="setc_main">
-                                <span style="color:#999999;">2022-7-16 12:30 ～ 2022-7-30 12:30</span>
+                  <span style="color: #999999"
+                    >2022-7-16 12:30 ～ 2022-7-30 12:30</span
+                  >
                 </div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>项目经理：</span></div>
                 <div class="setc_main">
-                                <span style="color:#999999;">张雪</span>
+                  <span style="color: #999999">张雪</span>
                 </div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>资源归属：</span></div>
                 <div class="setc_main">
-                                <span style="color:#999999;">-</span>
+                  <span style="color: #999999">-</span>
                 </div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>项目说明：</span></div>
                 <div class="setc_main">
-                                <span style="color:#999999;">-</span>
+                  <span style="color: #999999">-</span>
                 </div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>同步学习记录：</span></div>
                 <div class="setc_main" @click="changecheck2">
-                                <a-radio v-model:checked="checked2"><span style="color:#333333">同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span></a-radio>
+                  <a-radio v-model:checked="checked2"
+                    ><span style="color: #333333"
+                      >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
+                    ></a-radio
+                  >
                 </div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>项目级别：</span></div>
                 <div class="setc_main">
-                                <span style="color:#999999;">-</span>
+                  <span style="color: #999999">-</span>
                 </div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>培训体系：</span></div>
                 <div class="setc_main">
-                                <span style="color:#999999;">-</span>
+                  <span style="color: #999999">-</span>
                 </div>
               </div>
               <div class="set_content">
                 <div class="setc_name"><span>是否BOEU实施：</span></div>
                 <div class="setc_main" @click="changecheck3">
-                                <a-radio v-model:checked="checked3"><span style="color:#333333">BOEU实施</span></a-radio>
+                  <a-radio v-model:checked="checked3"
+                    ><span style="color: #333333">BOEU实施</span></a-radio
+                  >
                 </div>
               </div>
             </div>
@@ -223,27 +469,153 @@ export default defineComponent({
   name: "LibraryAdd",
   setup() {
     const state = reactive({
+      //任务大纲列表
+      taskSyllabus: [
+        {
+          text: "阶段1腾飞班阶段1",
+          children: [
+            {
+              course: "在线",
+              name: "时间管理",
+              classify: "选修",
+              beginTime: "2022-09-10 14:03",
+              total: 50, //总人数
+              complete: 20, //完成人数
+              percent: 40,
+            },
+            {
+              course: "直播",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-12 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+            {
+              course: "面授",
+              name: "管理面授课",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 80, //总人数
+              complete: 0, //完成人数
+              percent: 0,
+            },
+            {
+              course: "活动",
+              name: "管理活动",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 40, //完成人数
+              percent: 80,
+            },
+            {
+              course: "作业",
+              name: "管理者作业",
+              classify: "选修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 30, //完成人数
+              percent: 60,
+            },
+            {
+              course: "考试",
+              name: "管理者考试",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 50, //完成人数
+              percent: 100,
+            },
+            {
+              course: "案例",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+            {
+              course: "外链",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+          ],
+        },
+        {
+          text: "阶段2腾飞班阶段2",
+          children: [
+            {
+              course: "讨论",
+              name: "时间管理",
+              classify: "选修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 20, //完成人数
+              percent: 40,
+            },
+            {
+              course: "测评",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+            {
+              course: "调研",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+            {
+              course: "投票",
+              name: "管理直播间",
+              classify: "必修",
+              beginTime: "2022-09-16 14:03",
+              total: 50, //总人数
+              complete: 10, //完成人数
+              percent: 20,
+            },
+          ],
+        },
+      ],
+      taskSyllabusActive: 0,
+      //在线管理等页面传递参数
+      showTimeText: "",
+      //考试、测评页面传递参数
+      showTestText: "",
       activeKey: ref("1"),
       // value: ref(" "),
       checked: false,
       checked2: false,
       checked3: false,
-        value3:false,
+      value3: false,
-        value4:false,
+      value4: false,
-        hideshow:false,
+      hideshow: false,
     });
-        const value = ref('');
+    const value = ref("");
-        const value2 = ref('');
+    const value2 = ref("");
-        const textnum = '150'
+    const textnum = "150";
     const changeopclo = () => {
-            state.hideshow = !state.hideshow
+      state.hideshow = !state.hideshow;
-        }
+    };
     const changecheck2 = () => {
-            state.checked2 = !state.checked2
+      state.checked2 = !state.checked2;
-        }
+    };
     const changecheck3 = () => {
-            state.checked3 = !state.checked3
+      state.checked3 = !state.checked3;
-        }
+    };
     return {
       ...toRefs(state),
       value,
@@ -254,8 +626,7 @@ export default defineComponent({
       changecheck3,
     };
   },
-})
+});
-
 </script>
 <style lang="scss" scoped>
 .clearfix:before,
@@ -331,7 +702,7 @@ export default defineComponent({
       }
       .pub {
         // color: #ffb64e;
-        color: #65A4F8;
+        color: #65a4f8;
         font-size: 14px;
         margin-top: 5px;
         margin-right: 30px;
@@ -344,7 +715,7 @@ export default defineComponent({
         margin-right: 60px;
       }
       .more {
-        color: #7895DD;
+        color: #7895dd;
         position: relative;
         margin-right: 30px;
         height: 30px;
@@ -413,51 +784,279 @@ export default defineComponent({
       }
     }
   }
+  .bom {
+    .ant-tabs-top > .ant-tabs-nav::before,
+    .ant-tabs-bottom > .ant-tabs-nav::before,
+    .ant-tabs-top > div > .ant-tabs-nav::before,
+    .ant-tabs-bottom > div > .ant-tabs-nav::before {
+      border-bottom: 0px;
+    }
+    .ant-tabs-nav-wrap {
+      margin-left: 30px;
+      margin-top: 10px;
+    }
+
+    .taskBox {
       .split {
         width: 100%;
         height: 20px;
         background-color: #edf0f5;
       }
-  .bom {
+      .onerow {
-    .tab {
+        //width: 100%;
-      margin-top: 10px;
+        display: flex;
-      // margin-left: 10px;
+        height: 40px;
+        position: relative;
+        margin-top: 15px;
+        margin-left: 38px;
+        //margin-right: 38px;
+        .taskmain {
+          font-size: 18px;
+          padding-top: 7px;
+          color: #000000;
         }
-    .ant-tabs > .ant-tabs-nav,
+        .btn {
-    .ant-tabs > div > .ant-tabs-nav {
+          position: absolute;
-      margin-left: 0px !important;
+          top: 0;
-      padding-left: 32px !important;
+          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");
+          }
+        }
+      }
+      .taskSyllabus {
+        // flex: 1;
+        overflow-x: scroll;
+
+        .ant-collapse {
+          border: 0px;
+          background-color: rgba(255, 255, 255, 0);
+          min-width: 1040px;
         }
 
-    .notice{
+        .ant-collapse-content > .ant-collapse-content-box {
-        .ntc_tit{
+          padding-top: 0px;
-            margin-left: 34px;
+          padding-bottom: 0px;
-            font-size:18px;
-            font-weight: 500;
-            color:#232425;
         }
-        .ntc_body{
+        .ant-collapse > .ant-collapse-item {
+          border: 0px;
+        }
+        .ant-collapse-header {
+          display: flex;
+          height: 49px;
+          background-color: #fcf0ef;
+          align-items: center;
+          margin-top: 20px;
+          margin-left: 38px;
+          margin-right: 40px;
+          font-size: 16px;
+          font-weight: 400;
+          color: #409eff;
+          line-height: 36px;
+          .ant-collapse-arrow {
+            margin-left: 15px !important;
+          }
+        }
+        .ant-collapse-content {
+          border-top: 0px;
+        }
+      }
+      .course {
+      //width: 100%;
+      flex-shrink: 0;
+      margin-right: 24px;
+
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      padding: 25px 0px;
+      margin-left: 22px;
+
+      //margin: 0 12px;
+      border: 1px solid #f2f6fc;
+      border-top: 0px;
+      .first {
+        //position: relative;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        //height: 71px;
+        margin-left: 12px;
+        margin-right: 50px;
+
+        .iconame {
+          //position: absolute;
+          color: #4f5156;
+          font-size: 16px;
+          margin-left: 4px;
+        }
+        .icontext {
+          //positipn: absolute;
+          color: #999ba3;
+          font-size: 14px;
+          margin-left: 12px;
+          width: 83px;
+        }
+      }
+      .type {
+        //height: 71px;
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        margin-right: 50px;
+        .typename {
+          width: 63px;
+          height: 23px;
+          color: #5dc988;
+          font-size: 14px;
+          background-color: #f2f6fc;
+          border-radius: 4px;
+          text-align: center;
+        }
+        .typename1 {
+          width: 63px;
+          height: 23px;
+          color: #f0f4fe;
+          font-size: 14px;
+          background-color: #5dc988;
+          border-radius: 4px;
+          text-align: center;
+        }
+      }
+      .time {
+        //height: 71px;
+        flex-grow: 1;
+        margin-right: 50px;
+        .timetext {
+          font-size: 14px;
+          color: #999ba3;
+        }
+      }
+      .progress {
+        width: 168px;
+        margin-left: 10px;
+        margin-right: 50px;
+        flex-grow: 1;
+        .progresstext {
+          color: #ffc067;
+          font-size: 14px;
+        }
+      }
+      .operations {
+        display: flex;
+        width: 200px;
+        //flex-grow: 1;
+        .operation {
+          color: #4ea6ff;
+          font-size: 14px;
+          padding: 10px;
+          margin-left: auto;
+        }
+      }
+      }
+      .taskbox {
+        width: 412px;
+        height: 160px;
+        border-radius: 10px;
+        position: relative;
+        margin-left: 68px;
+        margin-bottom: 40px;
+        margin-top: 32px;
+        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;
+        }
+      }
+    }
+
+    .notice {
+      .ntc_tit {
+        margin-left: 34px;
+        font-size: 18px;
+        font-weight: 500;
+        color: #232425;
+      }
+      .ntc_body {
         margin-left: 34px;
         margin-right: 34px;
-            .ntc_switch{
+        .ntc_switch {
           display: flex;
           margin: 32px 0px;
-            .opclo{
+          .opclo {
             margin-left: 9px;
           }
         }
-        .ntc_content{
+        .ntc_content {
-            .ntcc_tit{
+          .ntcc_tit {
             margin-bottom: 16px;
           }
-            .textarea{
+          .textarea {
             display: flex;
             flex-direction: column;
-                .btnarea{
+            .btnarea {
               display: flex;
               justify-content: flex-end;
             }
-                .area_btn{
+            .area_btn {
               width: 100px;
               // padding: 0px 26px 0px 26px;
               height: 38px;
@@ -489,22 +1088,22 @@ export default defineComponent({
       }
     }
 
-    .projectscore{
+    .projectscore {
-        .pjc_tit{
+      .pjc_tit {
         margin-left: 34px;
-            font-size:18px;
+        font-size: 18px;
         font-weight: 500;
-            color:#232425;
+        color: #232425;
       }
-        .pjc_body{
+      .pjc_body {
-            margin-left:34px;
+        margin-left: 34px;
-            margin-right:34px;
+        margin-right: 34px;
-            .pjcb_header{
+        .pjcb_header {
           display: flex;
           justify-content: space-between;
           align-items: center;
-                margin:24px auto;
+          margin: 24px auto;
-                .edit_btn{
+          .edit_btn {
             width: 100px;
             // padding: 0px 26px 0px 26px;
             height: 38px;
@@ -531,41 +1130,40 @@ export default defineComponent({
             }
           }
         }
-            .pjcb_content{
+        .pjcb_content {
-                border: 1px solid #388BE1;
+          border: 1px solid #388be1;
           padding: 32px;
-                .pjcb_content :last-child{
+          .pjcb_content :last-child {
-                    margin-bottom:0px;
+            margin-bottom: 0px;
           }
-                .content{
+          .content {
-                    margin-bottom:24px;
+            margin-bottom: 24px;
           }
-
         }
       }
     }
 
-    .setting{
+    .setting {
-        .set_tit{
+      .set_tit {
         margin-left: 34px;
-            font-size:18px;
+        font-size: 18px;
         font-weight: 500;
-            color:#232425;
+        color: #232425;
       }
-        .set_body{
+      .set_body {
-            margin-left:34px;
+        margin-left: 34px;
-            margin-right:34px;
+        margin-right: 34px;
-            .set_content{
+        .set_content {
           margin: 32px auto;
           display: flex;
           // justify-content: end;
-                .setc_name{
+          .setc_name {
-                    width:150px;
+            width: 150px;
             display: flex;
             justify-content: end;
           }
-                .setc_main{
+          .setc_main {
-                    flex:1;
+            flex: 1;
             margin-left: 12px;
           }
         }

src/views/projectcenter/TaskAdd.vue

@@ -252,6 +252,23 @@
               <span class="editext">批量删除</span>
             </div>
           </div>
+          <!-- 无数据样式 -->
+          <div class="notable" style="display: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 class="rwbox">
             <div class="talk">
               <img class="im" src="../../assets/images/leveladd/gan.png" />
               <div class="xu">
@@ -293,6 +310,8 @@
                 />
               </div>
             </div>
+          </div>
+
           <!-- 编辑在线侧弹窗 -->
           <div>
             <edit-online v-model:editonlineVisible="editonlinevisible" />
@@ -1695,7 +1714,6 @@ export default {
       }
     }
     .boom {
-      position: relative;
       width: 100%;
       flex: 1;
       background-color: #fff;
@@ -1758,6 +1776,56 @@ export default {
             }
           }
         }
+        .notable {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          .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-top: 77px;
+            margin-bottom: 109px;
+            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;
+              }
+            }
+          }
+        }
+        .rwbox {
+          position: relative;
           .talk {
             margin-top: 24px;
             margin-bottom: 11px;
@@ -1792,7 +1860,7 @@ export default {
             }
           }
           .tableBox {
-          margin-bottom: 80px;
+            padding-bottom: 80px;
             .classify {
               margin-left: 10px !important;
               padding-left: 9px !important;
@@ -1830,6 +1898,7 @@ export default {
           }
         }
       }
+    }
     // .drawerbox {
     //   // margin: 20px 38px 30px;
     //   th.h {

src/views/projectcenter/TaskPage.vue

@@ -211,22 +211,6 @@
         <a-tab-pane key="2" tab="任务" force-render>
           <div style="flex: 1">
             <div class="split"></div>
-            <!-- 无数据样式 -->
-            <div class="notable" style="display: 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 class="onerow">
               <div class="taskmain">任务大纲</div>
               <button class="btn" @click="showFaceIn">批量面授报名</button>
@@ -2983,55 +2967,6 @@ export default {
       margin-left: 30px;
       margin-top: 10px;
     }
-    .notable {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      .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-top: 77px;
-        margin-bottom: 109px;
-        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;
-          }
-        }
-      }
-    }
     .onerow {
       //width: 100%;
       display: flex;