style：修改弹出框样式 修改分页 解决面包屑跳转 修改返回按钮

src/views/learningpath/LearningPath.vue

@@ -64,7 +64,7 @@
     </div>
     <!-- 搜索框及按钮 -->
     <!-- 表格 -->
-    <div class="tableBox">
+    <div class="tableBox" style="padding-bottom: 160px; position: relative">
       <a-table
         style="border: 1px solid #f2f6fe"
         :columns="tableDataFunc()"
@@ -75,7 +75,6 @@
         @expand="expandTable"
         :pagination="false"
       />
-
       <div class="pa">
         <a-pagination
           showSizeChanger="true"
@@ -90,83 +89,86 @@
     </div>
 
     <!-- 表格 -->
-    <div :class="out ? 'out' : 'unout'">
+
-      <div class="top">
+    <a-modal v-model:visible="out" footer="null" style="margin-top: 400px">
-        <img class="topimg" src="../../assets/images/courseManage/add1.png" />
+      <div class="out">
-        <div class="topc">创建路径</div>
+        <div class="top">
-        <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
+          <img class="topimg" src="../../assets/images/courseManage/add1.png" />
-          <img
+          <div class="topc">创建路径</div>
-            style="width: 20px; height: 20px"
+          <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
-            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"
+              style="width: 20px; height: 20px"
-              src="../../assets/images/basicinfo/asterisk.png"
+              src="../../assets/images/basicinfo/close.png"
             />
           </div>
-          <div class="inname">路径图名称</div>
-          <div class="in">
-            <a-input
-              v-model:value="valueE"
-              maxlength="20"
-              style="border-radius: 4px"
-            />
-            <div class="showcount">{{ valuei.length }}/20</div>
-          </div>
         </div>
-        <div class="bac">
+        <div class="mid clearfix">
-          <div class="d" style="margin-top: 12px">
+          <div class="name">
-            <img
+            <div class="d" style="margin-top: -4px">
-              style="width: 10px; height: 10px"
+              <img
-              src="../../assets/images/basicinfo/asterisk.png"
+                style="width: 10px; height: 10px"
-            />
+                src="../../assets/images/basicinfo/asterisk.png"
-          </div>
+              />
-          <div class="inname">路径图背景</div>
+            </div>
-          <div class="in">
+            <div class="inname">路径图名称</div>
-            <!-- <img class="im" src="../../assets/px.jpg" />
+            <div class="in">
-            <img class="im" src="../../assets/px.jpg" />
+              <a-input
-            <img class="im" src="../../assets/px.jpg" /> -->
+                v-model:value="valueE"
-            <div
+                maxlength="20"
-              @click="chooseImg(item.id)"
+                style="border-radius: 4px"
-              v-for="item in imgData"
+              />
-              :key="item.key"
+              <div class="showcount">{{ valueE.length }}/20</div>
-              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="bac">
-        <div class="info">
+            <div class="d" style="margin-top: 12px">
-          <div class="inname">路径说明</div>
+              <img
-          <div class="in">
+                style="width: 10px; height: 10px"
-            <a-textarea v-model:value="valuei" maxlength="150" />
+                src="../../assets/images/basicinfo/asterisk.png"
-            <div class="showcount">{{ valuei.length }}/150</div>
+              />
+            </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 class="btn">
+      </div></a-modal
-          <button class="samtn btn1" @click="handleOut">取消</button>
+    >
-          <button class="samtn btn2" @click="handleOut">确定</button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 <script>
@@ -564,6 +566,174 @@ export default {
 };
 </script>
 <style lang="scss">
+.out {
+  display: block;
+  position: absolute;
+  top: 90px;
+  width: 680px;
+  // height: 525px;
+  background-color: #fff;
+
+  box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  .top {
+    width: 100%;
+    height: 68px;
+
+    background: linear-gradient(
+      rgba(78, 166, 255, 0.2) 0%,
+      rgba(78, 166, 255, 0) 100%
+    );
+    display: flex;
+    align-items: center;
+    .topimg {
+      width: 18px;
+      height: 18px;
+      margin-left: 27px;
+      margin-top: -2px;
+    }
+    .topc {
+      color: #000000;
+      font-size: 16px;
+      margin-left: 8px;
+    }
+  }
+  .mid {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .d {
+      // margin-top: 8px;
+      // color: #ff4e4e;
+      margin-left: -5px;
+    }
+    .name {
+      width: 78%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 20px;
+      align-items: center;
+      height: 40px;
+      // border: 1px solid black;
+
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+      }
+      .in {
+        margin-left: 14px;
+        width: 81%;
+        position: relative;
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 40px;
+        }
+        .showcount {
+          position: absolute;
+          right: 10px;
+          color: #c7cbd2;
+          bottom: 5px;
+        }
+      }
+    }
+    .bac {
+      width: 78%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 30px;
+      // border: 1px solid black;
+      .d {
+        margin-top: 18px;
+        color: #ff4e4e;
+      }
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 7px;
+        margin-top: 15px;
+      }
+      .in {
+        margin-left: 14px;
+        width: 81%;
+        height: 110px;
+        // background-color: red;
+        display: flex;
+        justify-content: space-between;
+        .im {
+          border-radius: 8px;
+          width: 140px;
+          height: 110px;
+          cursor: pointer;
+        }
+      }
+    }
+    .info {
+      width: 78%;
+      // background-color: lightcoral;
+      display: flex;
+      margin-top: 30px;
+      // align-items: center;
+      // height: 40px;
+      // border: 1px solid black;
+
+      .inname {
+        color: #6f6f6f;
+        font-size: 14px;
+        margin-left: 26px;
+        margin-top: 15px;
+      }
+      .in {
+        margin-left: 14px;
+        width: 81%;
+        position: relative;
+        .ant-input {
+          border-radius: 5px;
+          // height: 120%;
+          width: 100%;
+          height: 130px;
+          resize: none;
+        }
+        .showcount {
+          position: absolute;
+          right: 10px;
+          color: #c7cbd2;
+          bottom: 5px;
+        }
+      }
+    }
+    .btn {
+      width: 33%;
+      margin-top: 30px;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 30px;
+      .samtn {
+        width: 100px;
+        height: 40px;
+        font-size: 14px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+      .btn1 {
+        background-color: #fff;
+        color: #4ea6ff;
+      }
+      .btn2 {
+        background-color: #4ea6ff;
+        color: #fff;
+      }
+    }
+  }
+}
 .clearfix:before,
 .clearfix:after {
   content: " ";
@@ -671,6 +841,7 @@ export default {
   }
   .tableBox {
     margin: 20px 38px 30px;
+
     th.h {
       background-color: #eff4fc !important;
     }
@@ -770,174 +941,6 @@ export default {
   //   }
   // }
 
-  .out {
-    display: block;
-    position: absolute;
-    top: 90px;
-    width: 680px;
-    // height: 525px;
-    background-color: #fff;
-
-    box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    .top {
-      width: 100%;
-      height: 68px;
-
-      background: linear-gradient(
-        rgba(78, 166, 255, 0.2) 0%,
-        rgba(78, 166, 255, 0) 100%
-      );
-      display: flex;
-      align-items: center;
-      .topimg {
-        width: 18px;
-        height: 18px;
-        margin-left: 27px;
-        margin-top: -2px;
-      }
-      .topc {
-        color: #000000;
-        font-size: 16px;
-        margin-left: 8px;
-      }
-    }
-    .mid {
-      width: 100%;
-      height: 100%;
-      background-color: #fff;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      .d {
-        // margin-top: 8px;
-        // color: #ff4e4e;
-        margin-left: -5px;
-      }
-      .name {
-        width: 78%;
-        // background-color: lightcoral;
-        display: flex;
-        margin-top: 20px;
-        align-items: center;
-        height: 40px;
-        // border: 1px solid black;
-
-        .inname {
-          color: #6f6f6f;
-          font-size: 14px;
-          margin-left: 7px;
-        }
-        .in {
-          margin-left: 14px;
-          width: 81%;
-          position: relative;
-          .ant-input {
-            border-radius: 5px;
-            // height: 120%;
-            width: 100%;
-            height: 40px;
-          }
-          .showcount {
-            position: absolute;
-            right: 10px;
-            color: #c7cbd2;
-            bottom: 5px;
-          }
-        }
-      }
-      .bac {
-        width: 78%;
-        // background-color: lightcoral;
-        display: flex;
-        margin-top: 30px;
-        // border: 1px solid black;
-        .d {
-          margin-top: 18px;
-          color: #ff4e4e;
-        }
-        .inname {
-          color: #6f6f6f;
-          font-size: 14px;
-          margin-left: 7px;
-          margin-top: 15px;
-        }
-        .in {
-          margin-left: 14px;
-          width: 81%;
-          height: 110px;
-          // background-color: red;
-          display: flex;
-          justify-content: space-between;
-          .im {
-            border-radius: 8px;
-            width: 140px;
-            height: 110px;
-            cursor: pointer;
-          }
-        }
-      }
-      .info {
-        width: 78%;
-        // background-color: lightcoral;
-        display: flex;
-        margin-top: 30px;
-        // align-items: center;
-        // height: 40px;
-        // border: 1px solid black;
-
-        .inname {
-          color: #6f6f6f;
-          font-size: 14px;
-          margin-left: 26px;
-          margin-top: 15px;
-        }
-        .in {
-          margin-left: 14px;
-          width: 81%;
-          position: relative;
-          .ant-input {
-            border-radius: 5px;
-            // height: 120%;
-            width: 100%;
-            height: 130px;
-            resize: none;
-          }
-          .showcount {
-            position: absolute;
-            right: 10px;
-            color: #c7cbd2;
-            bottom: 5px;
-          }
-        }
-      }
-      .btn {
-        width: 33%;
-        margin-top: 30px;
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 30px;
-        .samtn {
-          width: 100px;
-          height: 40px;
-          font-size: 14px;
-          border: 1px solid #4ea6ff;
-          border-radius: 8px;
-          cursor: pointer;
-        }
-        .btn1 {
-          background-color: #fff;
-          color: #4ea6ff;
-        }
-        .btn2 {
-          background-color: #4ea6ff;
-          color: #fff;
-        }
-      }
-    }
-  }
   .unout {
     display: none;
   }

src/views/learningpath/LevelAdd.vue

@@ -28,9 +28,11 @@
           </div>
         </div>
         <div class="line"></div>
-        <img class="img2" src="../../assets/images/leveladd/back.png" />
+        <router-link to="/learningpath"
-        <router-link to="/learningpath">
+          ><div style="display: flex">
-          <div class="return">返回</div></router-link
+            <img class="img2" src="../../assets/images/leveladd/back.png" />
+            <div class="return">返回</div>
+          </div></router-link
         >
       </div>
     </div>
@@ -434,7 +436,7 @@ export default {
       .return {
         color: #4ea6ff;
         font-size: 14px;
-        margin-top: 5px;
+        margin-top: 10px;
         margin-right: 60px;
       }
       .more {

src/views/learningpath/LevelAddDetail.vue

@@ -74,10 +74,13 @@
               </div>
             </div>
             <div class="line"></div>
-            <img class="img2" src="../../assets/images/leveladd/back.png" />
             <router-link to="/leveladd">
-              <div class="return">返回</div></router-link
+              <div style="display: flex">
-            >
+                <img class="img2" src="../../assets/images/leveladd/back.png" />
+
+                <div class="return">返回</div>
+              </div>
+            </router-link>
           </div>
         </div>
       </div>
@@ -791,6 +794,7 @@ export default {
 .allCon {
   width: 100%;
   height: 100%;
+  overflow: auto;
   background-color: #f1f4f8;
   display: flex;
   // min-width: 1200px;
@@ -983,7 +987,7 @@ export default {
           .return {
             color: #4ea6ff;
             font-size: 14px;
-            margin-top: 5px;
+            margin-top: 13px;
             margin-right: 20px;
           }