style:合并

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

@@ -2,12 +2,12 @@
   <div class="allCon">
     <div class="left clearfix">
       <div class="leftmain">
-        <div class="tit">关卡</div>
+        <div class="tit" style="margin-left: 18px">关卡</div>
-        <div class="btn btn3">
+        <div class="btn btn3" style="margin-left: 19px">
           <div class="search"></div>
           <div class="btnText">添加关卡</div>
         </div>
-        <div class="maincon">
+        <div class="maincon" style="background-color: #fff">
           <div class="item" v-for="item in level" :key="item.id">
             <div class="itemle">
               <div class="tit">{{ item.tit }}</div>
@@ -40,7 +40,7 @@
             <div class="select">
               <a-select
                 v-model:value="projectName"
-                style="width: 270px"
+                style="width: 200px"
                 placeholder="自由学习模式"
                 :options="projectNameList"
                 @change="selectProjectName"
@@ -85,15 +85,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">
@@ -247,18 +238,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"
@@ -279,7 +267,7 @@
           class="drawerStyle"
           title="关联项目"
           placement="right"
-          width="50%"
+          width="80%"
           @after-visible-change="afterVisibleChange"
         >
           <div class="drawerMain">
@@ -314,7 +302,7 @@
 </template>
 
 <script>
-import { reactive, toRefs } from "vue";
+import { reactive, toRefs, onMounted, onUnmounted } from "vue";
 const drawercolumns = [
   {
     title: "项目名称",
@@ -402,6 +390,46 @@ export default {
           tit: "关卡2",
           name: "中级产品经理",
         },
+        {
+          id: "2",
+          tit: "关卡2",
+          name: "中级产品经理",
+        },
+        {
+          id: "2",
+          tit: "关卡2",
+          name: "中级产品经理",
+        },
+        {
+          id: "2",
+          tit: "关卡2",
+          name: "中级产品经理",
+        },
+        {
+          id: "2",
+          tit: "关卡2",
+          name: "中级产品经理",
+        },
+        {
+          id: "2",
+          tit: "关卡2",
+          name: "中级产品经理",
+        },
+        {
+          id: "2",
+          tit: "关卡2",
+          name: "中级产品经理",
+        },
+        {
+          id: "2",
+          tit: "关卡2",
+          name: "中级产品经理",
+        },
+        {
+          id: "2",
+          tit: "关卡2",
+          name: "中级产品经理",
+        },
       ],
       tableData: [
         {
@@ -580,7 +608,7 @@ export default {
           dataIndex: "state",
           // width: "30%",
           key: "state",
-          width: 40,
+          width: 60,
           align: "left",
           className: "classify",
           scopedSlots: { customRender: "action" }, //引入的插槽
@@ -620,7 +648,7 @@ export default {
           title: "必修/选修",
           dataIndex: "pubtime",
           key: "pubtime",
-          width: 200,
+          // width: 100,
           align: "center",
           className: "h",
           scopedSlots: { customRender: "action" }, //引入的插槽
@@ -659,7 +687,7 @@ export default {
           title: "时长",
           dataIndex: "cretime",
           key: "cretime",
-          width: 100,
+          // width: 100,
           align: "center",
           className: "h",
         },
@@ -668,7 +696,7 @@ export default {
           className: "h",
           dataIndex: "opacation",
           key: "opacation",
-          width: 100,
+          // width: 100,
           align: "center",
           scopedSlots: { customRender: "action" }, //引入的插槽
           customRender: () => {
@@ -693,6 +721,25 @@ export default {
       state.selectedRowKeys = selectedRowKeys;
     };
 
+    // const getClientHeight = () => {
+    //   state.rightheight =
+    //     document.getElementsByClassName("addhead")[0].offsetHeight +
+    //     document.getElementsByClassName("mid")[0].offsetHeight +
+    //     document.getElementsByClassName("boom")[0].offsetHeight +
+    //     40 +
+    //     "px";
+    // };
+
+    onMounted(() => {
+      document.getElementsByTagName("main")[0].style.background =
+        "rgb(245, 247, 250,1)";
+      document.getElementsByTagName("main")[0].style.boxShadow = "none";
+    });
+    onUnmounted(() => {
+      document.getElementsByTagName("main")[0].style.background = "#ffffff";
+      document.getElementsByTagName("main")[0].style.boxShadow =
+        "0px 1px 35px 0px rgba(118, 136, 166, 0.07)";
+    });
     return {
       ...toRefs(state),
       selectProjectName,
@@ -793,27 +840,25 @@ export default {
 }
 .allCon {
   width: 100%;
-  height: 100%;
-  overflow: auto;
-  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;
     justify-content: center;
     .leftmain {
-      width: 86%;
+      // width: 86%;
       margin-top: 20px;
       .tit {
         font-size: 18px;
@@ -847,6 +892,7 @@ export default {
       }
 
       .btn3 {
+        width: 171px;
         margin-right: 0px;
         .search {
           width: 17px;
@@ -857,10 +903,12 @@ export default {
       }
       .maincon {
         margin-top: 17px;
-        width: 100%;
+        width: 208px;
-        // background-color: #bfa;
+        display: flex;
+        flex-direction: column;
+        align-items: center; // background-color: #bfa;
         .item {
-          width: 100%;
+          width: 171px;
           height: 83px;
           display: flex;
           background: rgba(255, 182, 78, 0.1);
@@ -904,8 +952,6 @@ export default {
   }
   .right {
     flex: 1;
-    height: 100%;
-    width: 100%;
     // background-color: #fff;
     display: flex;
     flex-direction: column;
@@ -971,12 +1017,12 @@ 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;
@@ -1074,8 +1120,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;
           }
@@ -1106,7 +1152,7 @@ export default {
       justify-content: center;
       .boomcen {
         width: 95%;
-        height: 100%;
+        // height: 100%;
         // background-color: #bfa;
         .select {
           margin-top: 30px;
@@ -1156,12 +1202,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;
           }
@@ -1249,7 +1294,7 @@ export default {
       height: 14px;
       background-image: url("../../assets/images/leveladd/z1.png");
       position: absolute;
-      left: -47px;
+      left: -40px;
     }
     .ch {
       margin-left: 10px;

src/views/research/ResearchManage.vue

@@ -83,36 +83,42 @@
         />
     </div>
     <!-- 表格 -->
-    <div :class="out ? 'out' : 'unout'">
+    <a-modal v-model:visible="out" :footer="null" :closable="false" style="margin-top: 250px">
-      <div class="top">
+      <div class="out">
-        <img class="topimg" src="../../assets/images/courseManage/add1.png" />
+        <div class="top">
-        <div class="topc">创建调研</div>
+          <img class="topimg" src="../../assets/images/courseManage/add1.png" />
-        <div @click="handleOut" style="margin-left: 440px; cursor: pointer">
+          <div class="topc">创建调研</div>
-          <img
+          <div @click="handleOut" style="margin-left: 500px; cursor: pointer">
-            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"
+              style="width: 20px; height: 20px"
-              src="../../assets/images/basicinfo/asterisk.png"
+              src="../../assets/images/basicinfo/close.png"
             />
           </div>
-          <div class="inname">调研名称</div>
+        </div>
-          <div class="in">
+        <div class="mid clearfix">
-            <a-input v-model:value="valueE" show-count :maxlength="15" style="border-radius: 8px"/>
+          <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="value"
+                show-count :maxlength="15"
+                style="border-radius: 8px"
+              />
+            </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>
@@ -350,6 +356,109 @@ export default {
   display: block;
   clear: both;
 }
+.out {
+    //display: flex;
+    display: block;
+    position: absolute;
+    top: 120px;
+    width: 680px;
+    // height: 525px;
+    background-color: #fff;
+
+    box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
+    left: 50%;
+    top: 20%;
+    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;
+      }
+      .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%;
+          .ant-input {
+            border-radius: 5px;
+            // height: 120%;
+            width: 100%;
+            height: 30px;
+          }
+          .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 #409EFF;
+          border-radius: 8px;
+          cursor: pointer;
+        }
+        .btn1 {
+          background-color: #fff;
+          color: #4ea6ff;
+        }
+        .btn2 {
+          margin-left: 10px;
+          background-color: #409EFF;
+          color: #fff;
+        }
+      }
+    }
+  }
 .researchmanage {
   width: 100%;
   height: 100%;
@@ -480,102 +589,7 @@ export default {
         margin-bottom: 20px;
       }
     }
-  .out {
+  
-    display: block;
-    position: absolute;
-    top: 120px;
-    width: 600px;
-    // 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;
-      }
-      .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%;
-          .ant-input {
-            border-radius: 5px;
-            // height: 120%;
-            width: 100%;
-            height: 30px;
-          }
-        }
-      }
-      .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 #409EFF;
-          border-radius: 8px;
-          cursor: pointer;
-        }
-        .btn1 {
-          background-color: #fff;
-          color: #4ea6ff;
-        }
-        .btn2 {
-          margin-left: 10px;
-          background-color: #409EFF;
-          color: #fff;
-        }
-      }
-    }
-  }
   .unout {
     display: none;
   }