feat:新建关卡页面

src/components/NavLeft.vue

@@ -416,17 +416,17 @@ export default {
     const packUp = () => {
       state.packup = !state.packup;
     };
-    const getMousePosition = () => {
+    const getClientHeight = () => {
       state.screenHeight = document.body.clientHeight;
     };
 
     onMounted(() => {
       // console.log("11111", 1);
-      window.addEventListener("resize", getMousePosition, false);
+      window.addEventListener("resize", getClientHeight, false);
       // judgeUrl();
     });
     onUnmounted(() => {
-      window.removeEventListener("resize", getMousePosition, false);
+      window.removeEventListener("resize", getClientHeight, false);
     });
     return {
       ...toRefs(state),

src/views/learningpath/LevelAddDetail.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="allCon">
+  <div class="allCon" :style="{ height: rightheight }">
-    <div class="left clearfix">
+    <div class="left clearfix" :style="{ height: rightheight }">
       <div class="leftmain">
         <div class="tit">关卡</div>
         <div class="btn btn3">
@@ -40,7 +40,7 @@
             <div class="select">
               <a-select
                 v-model:value="projectName"
-                style="width: 270px"
+                style="width: 200px"
                 placeholder="自由学习模式"
                 :options="projectNameList"
                 @change="selectProjectName"
@@ -82,15 +82,6 @@
         </div>
       </div>
       <div class="mid">
-        <!-- <div class="item" v-for="(item, index) in mid" :key="item.id">
-          <div class="itcon">
-            <div class="img">
-              <img :src="item.img" />
-            </div>
-            <div class="text">{{ item.title }}</div>
-          </div>
-          <div :class="[index === mid.length - 1 ? 'no' : 'lin']"></div>
-        </div> -->
         <div class="item">
           <div class="itcon">
             <div class="img">
@@ -244,18 +235,15 @@
               :data-source="tableData"
               :loading="tableDataTotal === -1 ? true : false"
               expandRowByClick="true"
-              :scroll="{ x: 1500, y: 300 }"
               @expand="expandTable"
               :pagination="false"
               :row-selection="{
-                columnWidth: '40px',
+                columnWidth: 30,
                 selectedRowKeys: selectedRowKeys,
                 onChange: onSelectChange,
               }"
             />
-            <!-- :pagination= showSizeChanger: true, showQuickJumper: true,
+
-      hideOnSinglePage: true, pageSizeOptions: [], pageSize: pageSize, current:
-      currentPage, total: tableDataTotal, -->
             <div class="pa">
               <a-pagination
                 showSizeChanger="true"
@@ -276,7 +264,7 @@
           class="drawerStyle"
           title="关联项目"
           placement="right"
-          width="50%"
+          width="80%"
           @after-visible-change="afterVisibleChange"
         >
           <div class="drawerMain">
@@ -311,7 +299,7 @@
 </template>
 
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, onMounted } from "vue";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -354,6 +342,7 @@ export default {
   name: "LevelAddDetail",
   setup() {
     const state = reactive({
+      rightheight: null,
       projectNameList: [
         {
           id: 1,
@@ -577,7 +566,7 @@ export default {
           dataIndex: "state",
           // width: "30%",
           key: "state",
-          width: 40,
+          width: 60,
           align: "left",
           className: "classify",
           scopedSlots: { customRender: "action" }, //引入的插槽
@@ -617,7 +606,7 @@ export default {
           title: "必修/选修",
           dataIndex: "pubtime",
           key: "pubtime",
-          width: 200,
+          // width: 100,
           align: "center",
           className: "h",
           scopedSlots: { customRender: "action" }, //引入的插槽
@@ -656,7 +645,7 @@ export default {
           title: "时长",
           dataIndex: "cretime",
           key: "cretime",
-          width: 100,
+          // width: 100,
           align: "center",
           className: "h",
         },
@@ -665,7 +654,7 @@ export default {
           className: "h",
           dataIndex: "opacation",
           key: "opacation",
-          width: 100,
+          // width: 100,
           align: "center",
           scopedSlots: { customRender: "action" }, //引入的插槽
           customRender: () => {
@@ -690,6 +679,21 @@ export default {
       state.selectedRowKeys = selectedRowKeys;
     };
 
+    onMounted(() => {
+      state.rightheight =
+        document.getElementsByClassName("addhead")[0].offsetHeight +
+        document.getElementsByClassName("mid")[0].offsetHeight +
+        document.getElementsByClassName("boom")[0].offsetHeight +
+        40 +
+        "px";
+      console.log(
+        "获取元素",
+        state.rightheight,
+        document.getElementsByClassName("right")[0].offsetHeight,
+        document.getElementsByClassName("right")[0]
+      );
+    });
+
     return {
       ...toRefs(state),
       selectProjectName,
@@ -790,20 +794,21 @@ export default {
 }
 .allCon {
   width: 100%;
-  height: 100%;
+  // height: 100%;
-  background-color: #f1f4f8;
   display: flex;
+  min-width: 933px;
   // min-width: 1200px;
   // overflow-x: hidden;
   // min-width: 1400px;
   // overflow: scroll;
+  background-color: rgba(245, 247, 250, 1);
   .left {
     margin-right: 20px;
     width: 208px;
     // height: 100%;
     flex-shrink: 0;
     // flex: 1;
-    height: 100%;
+    // height: 100%;
     background: #ffffff;
     box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
     display: flex;
@@ -900,9 +905,8 @@ export default {
   }
   .right {
     flex: 1;
-    height: 100%;
-    width: 100%;
     // background-color: #fff;
+    flex-shrink: 0;
     display: flex;
     flex-direction: column;
     .addhead {
@@ -967,18 +971,18 @@ export default {
             height: 60px;
             width: 1px;
             background-color: #e8effa;
-            margin-right: 28px;
+            margin-right: 18px;
           }
           .img2 {
             width: 42px;
             height: 42px;
-            margin-right: 22px;
+            margin-right: 18px;
           }
           .pub {
             color: #ffb64e;
             font-size: 14px;
             margin-top: 5px;
-            margin-right: 30px;
+            margin-right: 18px;
           }
           .return {
             color: #4ea6ff;
@@ -1059,8 +1063,8 @@ export default {
           justify-content: center;
           height: 100%;
           width: 100%;
-          margin-left: 46px;
+          margin-left: 38px;
-          margin-right: 46px;
+          margin-right: 38px;
           .img {
             cursor: pointer;
           }
@@ -1090,7 +1094,7 @@ export default {
       justify-content: center;
       .boomcen {
         width: 95%;
-        height: 100%;
+        // height: 100%;
         // background-color: #bfa;
         .select {
           margin-top: 30px;
@@ -1140,12 +1144,11 @@ export default {
           }
           .ant-table-selection-column {
             padding: 0px !important;
-            padding-left: 68px !important;
+            padding-left: 60px !important;
           }
           .ant-table-thead > tr > th {
             background-color: rgba(239, 244, 252, 1);
           }
-          // margin: 20px 38px 30px;
           th.h {
             background-color: #eff4fc !important;
           }
@@ -1233,7 +1236,7 @@ export default {
       height: 14px;
       background-image: url("../../assets/images/leveladd/z1.png");
       position: absolute;
-      left: -47px;
+      left: -40px;
     }
     .ch {
       margin-left: 10px;