fix

src/components/TestPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="panel">
+  <div :class="['panel', {active: pannelVisible}]" id="panel">
     <el-container class="scrollbar" v-if="pannelVisible">
       <el-header>
         <div class="panel-header">
@@ -106,7 +106,7 @@
         <el-main>
           <el-tabs v-model="pannelTab" type="card">
             <el-tab-pane label="项目背景" name="first">
-              <div class="break-all des" v-html="experimentDescription"></div>
+              <div class="ql-editor" v-html="experimentDescription"></div>
             </el-tab-pane>
             <el-tab-pane label="实验要求" name="second">
               <el-collapse v-model="curReq">
@@ -115,12 +115,12 @@
                     <i class="el-icon-s-ticket"></i>
                     <div class="break-all des" v-html="item.name"></div>
                   </template>
-                  <div class="break-all des" v-html="item.experimentalRequirements"></div>
+                  <div class="ql-editor" v-html="item.experimentalRequirements"></div>
                 </el-collapse-item>
               </el-collapse>
             </el-tab-pane>
             <el-tab-pane label="实验提示" name="fifth" v-if="hintOpen">
-              <div class="break-all des" v-html="experimentHint"></div>
+              <div class="ql-editor" v-html="experimentHint"></div>
             </el-tab-pane>
           </el-tabs>
         </el-main>
@@ -141,6 +141,9 @@ import newmain from "../util/newMain";
 import util from '@/util'
 import Config from '@/config'
 import Cookie from 'js-cookie'
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
 export default {
   data() {
     return {
@@ -213,6 +216,7 @@ export default {
         }, 1000)
       }
     }
+    this.drag()
   },
   methods: {
     // 获取项目列表
@@ -648,6 +652,7 @@ export default {
     },
     // 实验面板显示隐藏
     togglePannel() {
+      document.querySelector('#panel').style.left = 0
       this.pannelVisible = !this.pannelVisible
     },
     // 倒计时
@@ -687,6 +692,40 @@ export default {
       this.counterTimer = setInterval(() => {
         this.counter(this.projectPermissions ? this.countVal-- : this.countVal++)
       }, 1000)
+    },
+    // 拖拽面板
+    drag() {
+      const el = document.querySelector('#panel')
+      let gap = 10 // 缝隙：小于缝隙时，则吸附
+      let parent = document.body
+      el.onmousedown = e => {
+        var x = e.clientX - el.offsetLeft
+        var y = e.clientY - el.offsetTop
+        var left = 0
+        var top = 0
+  
+        var boxer = document.querySelector(".boxer")
+        document.onmousemove = function(eve) {
+          left = eve.clientX - x
+          top = eve.clientY - y
+          // 左
+          if (left <= gap) {
+            left = 0
+          }
+
+          if (left >= parent.offsetWidth - el.offsetWidth - gap - 35) { //大于整个盒子的宽度-小盒子的宽度
+            left = parent.offsetWidth - el.offsetWidth - 35
+          }
+          // 上
+          if (top <= gap) top = 0
+          el.style.left = left + 'px'
+          el.style.top = top + 'px'
+        }
+        document.onmouseup = e => {
+          document.onmousemove = null
+          document.onmouseup = null
+        }
+      }
     }
   }
 };
@@ -703,16 +742,6 @@ export default {
   white-space: pre-wrap;
   overflow: hidden;
 }
-.toggle-panel {
-  position: fixed;
-  top: 50%;
-  &.active {
-    left: 85%;
-  }
-  img {
-    height: 150px;
-  }
-}
 .panel-header {
   display: flex;
   justify-content: space-between;
@@ -900,16 +929,35 @@ export default {
     white-space: nowrap;
   }
 }
-/deep/.el-container {
-  height: 80%;
-  &.is-vertical {
-    background-color: #f5f5f5;
-    width: 85%;
-    height: 70%;
-    position: fixed;
+.panel {
+  position: relative;
   top: 200px;
   bottom: 20px;
   left: 0;
+  width: 85%;
+  height: 0;
+  .toggle-panel {
+    position: absolute;
+    top: 60%;
+    &.active {
+      left: 100%;
+    }
+    img {
+      height: 150px;
+    }
+  }
+  &.active {
+    position: fixed;
+    height: 70%;
+    .toggle-panel {
+      top: 38%;
+    }
+  }
+}
+/deep/.el-container {
+  height: 100%;
+  &.is-vertical {
+    background-color: #f5f5f5;
   }
 }
 .right {

src/components/codemirror.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex">
+  <div class="code-wrap flex">
     <div class="left">
       <codemirror
         v-model="codeVal"
@@ -28,6 +28,7 @@
         >运行</el-button>
       </div>
     </div>
+    <div class="line"></div>
     <div class="code-right answer">
       <p :class="['text-wrapper', 'pic-num' + picSrcList.length]">{{ runResult }}</p>
       <div :class="['pic-wrap', {wrong: isError === 0}]" v-if="picSrcList.length">
@@ -198,6 +199,7 @@ export default {
     newmain.$on("isSubmit", isSubmit => {
       this.isSubmit = isSubmit
     })
+    this.dragSide()
   },
 
   methods: {
@@ -482,6 +484,7 @@ export default {
     downloadPic(i) {
       this.$refs['picLink' + i][0].click()
     },
+    // 导出运行结果
     exportResult() {
       var FileSaver = require('file-saver');
       var blob = new Blob([this.runResult], {type: "text/plain;charset=utf-8"});
@@ -495,12 +498,39 @@ export default {
       }).then(res => {
         this.answer = res.experimentCode
       }).catch(err => {})
+    },
+    // 中间拖拽
+    dragSide() {
+      const left = document.querySelector('.left')
+      const line = document.querySelector('.line')
+      const right = document.querySelector('.code-right')
+      // 移动区域鼠标移入事件
+      line.onmousedown = e => {
+        // 外面容器宽度
+        const width = document.querySelector('.code-wrap').clientWidth
+        document.onmousemove = e => {
+          let x = e.clientX
+          // 移动区间的范围
+          if(x >= width * .1 && x <= width * .9) {
+            line.style.left = x + 'px'
+            left.style.width = x +'px'
+            right.style.width = document.querySelector('.code-wrap').clientWidth - (x + 5) + 'px'
+          }
+        }
+        document.onmouseup = () => {
+          document.onmousemove = null
+          document.onmouseup = null
+        }
+      }
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.code-wrap {
+  position: relative;
+}
 .left{
   position: relative;
   width: 60%;
@@ -605,6 +635,15 @@ export default {
     margin-right: 10px;
   }
 }
+.line {
+  z-index: 2;
+  position: absolute;
+  left: 60%;
+  top: 0;
+  width: 5px;
+  height: 100%;
+  cursor: e-resize;
+}
 .code-right {
   width: 40%;
   color: #fff;