准备做键值对

1

src/layout/components/instructions.vue

@@ -28,7 +28,7 @@
       <div class="wall"></div>
       <div class="showBtnList">
         <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
-        <i class="el-icon-minus minus" @click="showInstructions"></i>
+        <!-- <i class="el-icon-minus minus" @click="showInstructions"></i> -->
         <i
           class="iconfont icon-fullscreen fullscreen"
           @click="fullPageBook"
@@ -39,6 +39,7 @@
           @click="resetBook"
           v-else
         ></i>
+        <i class="el-icon-close" @click="showInstructions"></i>
         <!--  -->
         <!-- <i class="iconfont icon-tubiao-huanyuan"></i> -->
       </div>
@@ -57,31 +58,35 @@
       </iframe>
     </vue-drag-resize>
     <vue-drag-resize
-    :snapToGrid="false"
       v-if="showVideo"
       :w="videoW"
       :h="videoH"
       :y="videoY"
       :x="videoX"
-      @resizing="onResizing"
-      @dragging="onResizing"
+      :isActive="true"
+      :parentH="docY"
       :preventActiveBehavior="true"
       class="videoWrap"
+      @resizing="onResizing"
+      @dragging="onResizing"
+      @resizestop="resizeVideostop"
+      @dragstop="resizeVideostop"
     >
+      <!--        -->
       <div class="videowall"></div>
       <div class="showBtnList">
         <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
-        <i class="el-icon-close" @click="showVideo = false"></i>
-        <i
+        <!-- <i
           class="iconfont icon-fullscreen fullscreen"
           @click="fullPageVideo"
-          v-if="!fullscreen"
+          v-if="!fullscreenVideo"
         ></i>
         <i
           class="iconfont icon-tubiao-huanyuan huanyuan"
           @click="resetVideo"
           v-else
-        ></i>
+        ></i> -->
+        <i class="el-icon-close" @click="showVideo = false"></i>
       </div>
       <video
         id="video"
@@ -150,6 +155,15 @@ export default {
         this.isResizing = false;
       }, 500);
     },
+    resizeVideostop(e) {
+      if (!this.fullscreenVideo) {
+        this.videoH = Math.abs(e.height);
+        this.videoW = Math.abs(e.width);
+      }
+      setTimeout(() => {
+        this.isResizing = false;
+      }, 500);
+    },
     onResizing(e) {
       this.isResizing = true;
     },
@@ -179,7 +193,18 @@ export default {
         this.isShow = true;
       });
     },
-    fullPageVideo() {},
+    fullPageVideo() {
+      this.isShow = false;
+      this.$nextTick((res) => {
+        const bodyEle = document.querySelector(".app-main");
+        this.videoH = this.docY - this.y;
+        // document.querySelector('#instructions .content-container').style.width = this.w+'px'
+        this.videoW = bodyEle.clientWidth;
+        this.x = 210;
+        this.y = 130;
+        this.isShow = true;
+      });
+    },
     // onDragging(e){
 
     // },
@@ -218,6 +243,15 @@ export default {
         this.y == 130
       );
     },
+    fullscreenVideo() {
+      const bodyEle = document.querySelector(".app-main");
+      return (
+        this.videoH == this.docY - this.y &&
+        this.videoW == bodyEle.clientWidth &&
+        this.x == 210 &&
+        this.y == 130
+      );
+    },
   },
   watch: {
     $route(to, from) {
@@ -227,7 +261,6 @@ export default {
     isShow(val) {
       if (val) {
         this.$nextTick((res) => {
-          // console.log(this.$refs.iframe,this.$refs.iframe.contentWindow)
           let outFrame = this.$refs.iframe;
           let outFrameWindow = this.$refs.iframe.contentWindow;
           setTimeout((res) => {
@@ -272,23 +305,6 @@ export default {
   background: transparent;
   /*display: none;*/
 }
-</style>
-<style lang="scss">
-.instructionBtn {
-  position: fixed;
-  right: 30px;
-  top: 200px;
-  z-index: 2000;
-}
-.iframeId {
-  width: 100%;
-}
-#instructions {
-  background-color: #fff;
-  position: fixed;
-  z-index: 9998;
-  border: 1px solid #ccc;
-}
 .videoWrap {
   z-index: 10000 !important;
   background-color: #fff;
@@ -300,7 +316,7 @@ export default {
   .showBtnList {
     font-size: 20px;
     position: absolute;
-    right: 20px;
+    right: 5px;
     top: 5px;
     background-color: #ccc;
   }
@@ -323,3 +339,38 @@ export default {
   font-size: 22px;
 }
 </style>
+<style lang="scss">
+.instructionBtn {
+  position: fixed;
+  right: 30px;
+  top: 200px;
+  z-index: 2000;
+}
+.iframeId {
+  width: 100%;
+}
+#instructions {
+  background-color: #fff;
+  position: fixed;
+  z-index: 9998;
+  border: 1px solid #ccc;
+}
+.vdr-stick {
+  opacity: 0;
+}
+.vdr-stick-tm,
+.vdr-stick-bm {
+  width: 99% !important;
+  width: calc(100% - 8px)!important;
+  margin-left: 0!important;
+  left: 4px;
+  // margin-left: -50%!important;
+}
+.vdr-stick-mr,
+.vdr-stick-ml {
+  height: 99% !important;
+  height: calc(100% - 8px)!important;;
+  margin-top: 0!important;
+ top: 4px!important;
+}
+</style>