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

src/views/projectcenter/TaskAdd.vue

@@ -252,47 +252,66 @@
               <span class="editext">批量删除</span>
             </div>
           </div>
-          <div class="talk">
+          <!-- 无数据样式 -->
-            <img class="im" src="../../assets/images/leveladd/gan.png" />
+          <div class="notable" style="display:none;">
-            <div class="xu">
+            <div class="notablebox">
-              <span class="yi">已选择</span>
+              <div class="boxbody">
-              <div style="width: 5px; display: inline-block"></div>
+                <div class="boximg"></div>
-              <span class="th">3</span>
+                <div class="boxtitle">
-              <div style="width: 5px; display: inline-block"></div>
+                  <span style="color: #ffb64e; font-size: 20px">无课程</span>
-              <span class="yi">项</span>
+                </div>
-              <span class="zon">任务总数：</span>
+                <div class="boxtitle2">
-              <span class="yi">5</span>
+                  <span style="color: #878b92">请点击新建开课，创建课程</span>
-              <span class="yi">条</span>
+                </div>
+              </div>
+              <div class="smallleft"></div>
+              <div class="smallright"></div>
             </div>
           </div>
-          <div class="tableBox">
+          <div class="rwbox">
-            <a-table
+            <div class="talk">
-              style="border: 1px solid #f2f6fe"
+              <img class="im" src="../../assets/images/leveladd/gan.png" />
-              :columns="tableDataFunc()"
+              <div class="xu">
-              :data-source="tableData"
+                <span class="yi">已选择</span>
-              :loading="tableDataTotal === -1 ? true : false"
+                <div style="width: 5px; display: inline-block"></div>
-              expandRowByClick="true"
+                <span class="th">3</span>
-              @expand="expandTable"
+                <div style="width: 5px; display: inline-block"></div>
-              :pagination="false"
+                <span class="yi">项</span>
-              :row-selection="{
+                <span class="zon">任务总数：</span>
-                columnWidth: 30,
+                <span class="yi">5</span>
-                selectedRowKeys: selectedRowKeys,
+                <span class="yi">条</span>
-                onChange: onSelectChange,
+              </div>
-              }"
+            </div>
-            />
+            <div class="tableBox">
-
+              <a-table
-            <div class="pa">
+                style="border: 1px solid #f2f6fe"
-              <a-pagination
+                :columns="tableDataFunc()"
-                showSizeChanger="true"
+                :data-source="tableData"
-                showQuickJumper="true"
+                :loading="tableDataTotal === -1 ? true : false"
-                hideOnSinglePage="true"
+                expandRowByClick="true"
-                :pageSize="pageSize"
+                @expand="expandTable"
-                :current="currentPage"
+                :pagination="false"
-                :total="tableDataTotal"
+                :row-selection="{
-                class="pagination"
+                  columnWidth: 30,
+                  selectedRowKeys: selectedRowKeys,
+                  onChange: onSelectChange,
+                }"
               />
+
+              <div class="pa">
+                <a-pagination
+                  showSizeChanger="true"
+                  showQuickJumper="true"
+                  hideOnSinglePage="true"
+                  :pageSize="pageSize"
+                  :current="currentPage"
+                  :total="tableDataTotal"
+                  class="pagination"
+                />
+              </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,74 +1776,125 @@ export default {
             }
           }
         }
-        .talk {
+        .notable {
-          margin-top: 24px;
-          margin-bottom: 11px;
           width: 100%;
-          height: 50px;
-          background: #f5faff;
-          border: 1px solid #4ea6ff;
-          // opacity: 0.22;
           display: flex;
-          align-items: center;
+          justify-content: center;
-          .im {
+          .notablebox {
-            width: 14px;
+            width: 412px;
-            height: 15px;
+            height: 212px;
-            margin-left: 27px;
+            background: linear-gradient(180deg, #fef3dd 0%, #fffaf0 100%);
-          }
+            border-radius: 10px;
-          .xu {
+            display: flex;
-            height: 100%;
+            justify-content: center;
-            line-height: 50px;
+            text-align: center;
-            margin-left: 13px;
+            margin-top: 77px;
-            .yi {
+            margin-bottom: 109px;
-              color: #4f5156;
+            cursor: pointer;
-              font-size: 14px;
+            position: relative;
+            .smallleft {
+              position: absolute;
+              top: 18px;
+              left: 0px;
+              width: 8px;
+              height: 21px;
+              border-radius: 0px 4px 4px 0px;
+              background-color: #ffb64e;
             }
-            .zon {
+            .smallright {
-              color: #999ba3;
+              position: absolute;
-              font-size: 14px;
+              bottom: 18px;
-              margin-left: 34px;
+              right: 0px;
+              width: 8px;
+              height: 21px;
+              border-radius: 4px 0px 0px 4px;
+              background-color: #ffb64e;
             }
-            .th {
+            .boxbody {
-              color: #4ea6ff;
+              .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;
+              }
             }
           }
         }
-        .tableBox {
+        .rwbox {
-          margin-bottom: 80px;
+          position: relative;
-          .classify {
+          .talk {
-            margin-left: 10px !important;
+            margin-top: 24px;
-            padding-left: 9px !important;
+            margin-bottom: 11px;
-          }
-          .ant-checkbox-wrapper {
-            align-items: center;
-            margin-top: -2px;
-          }
-          .ant-table-selection-column {
-            padding: 0px !important;
-            padding-left: 60px !important;
-          }
-          .ant-table-thead > tr > th {
-            background-color: rgba(239, 244, 252, 1);
-          }
-          th.h {
-            background-color: #eff4fc !important;
-          }
-
-          .ant-table-tbody
-            > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
-            > td {
-            background: #f6f9fd;
-          }
-          .pa {
-            left: 0;
             width: 100%;
-            // height: 20px;
+            height: 50px;
-            // background-color: red;
+            background: #f5faff;
+            border: 1px solid #4ea6ff;
+            // opacity: 0.22;
             display: flex;
-            justify-content: center;
+            align-items: center;
-            position: absolute;
+            .im {
-            bottom: 20px;
+              width: 14px;
+              height: 15px;
+              margin-left: 27px;
+            }
+            .xu {
+              height: 100%;
+              line-height: 50px;
+              margin-left: 13px;
+              .yi {
+                color: #4f5156;
+                font-size: 14px;
+              }
+              .zon {
+                color: #999ba3;
+                font-size: 14px;
+                margin-left: 34px;
+              }
+              .th {
+                color: #4ea6ff;
+              }
+            }
+          }
+          .tableBox {
+            padding-bottom: 80px;
+            .classify {
+              margin-left: 10px !important;
+              padding-left: 9px !important;
+            }
+            .ant-checkbox-wrapper {
+              align-items: center;
+              margin-top: -2px;
+            }
+            .ant-table-selection-column {
+              padding: 0px !important;
+              padding-left: 60px !important;
+            }
+            .ant-table-thead > tr > th {
+              background-color: rgba(239, 244, 252, 1);
+            }
+            th.h {
+              background-color: #eff4fc !important;
+            }
+
+            .ant-table-tbody
+              > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+              > td {
+              background: #f6f9fd;
+            }
+            .pa {
+              left: 0;
+              width: 100%;
+              // height: 20px;
+              // background-color: red;
+              display: flex;
+              justify-content: center;
+              position: absolute;
+              bottom: 20px;
+            }
           }
         }
       }

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;