提交一下 只剩字典

1

package.json

@@ -38,6 +38,7 @@
     "numeral": "^2.0.6",
     "object-diff": "0.0.4",
     "path-to-regexp": "2.4.0",
+    "portal-vue": "^2.1.7",
     "qrcodejs2": "0.0.2",
     "qs": "^6.8.0",
     "screenfull": "^5.1.0",

src/layout/components/Navbar.vue

@@ -34,29 +34,31 @@
       </el-scrollbar>
     </div>
     <div class="right-menu">
-      <el-popover
-        v-if="isShowIns"
-        placement="bottom"
-        trigger="hover"
-        style="display: flex; height: 89px"
-      >
-        <div class="popover-container" style="text-align: center">操作手册</div>
-        <div
-          style="
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 89px;
-          "
-          class="msginfo ins"
 
-          @click="openIns"
-          slot="reference"
+        <el-popover
+          v-if="isShowIns"
+          placement="bottom"
+          trigger="hover"
+          style="display: flex; height: 89px"
         >
-          <img src="@/assets/images/base/instruction-icon.png" />
-          <!-- <div class="active"></div> -->
-        </div>
-      </el-popover>
+          <div class="popover-container" style="text-align: center">
+            操作手册
+          </div>
+          <div
+            style="
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 89px;
+            "
+            class="msginfo ins"
+            @click="openIns"
+            slot="reference"
+          >
+            <img src="@/assets/images/base/instruction-icon.png" />
+            <!-- <div class="active"></div> -->
+          </div>
+        </el-popover>
       <el-popover
         placement="bottom"
         trigger="hover"
@@ -103,7 +105,7 @@
               align-items: center;
               justify-content: center;
               height: 89px;
-              padding:0 5px;
+              padding: 0 5px;
             "
           >
             <!-- {{ organName.length > 10 ? organName.substr(0, 10) + "..." : organName }} -->
@@ -214,7 +216,10 @@
         <el-button type="primary" @click="submitResetPassWord">确 定</el-button>
       </div>
     </el-dialog>
-    <instructions  ref="instructions" @checkShow='checkShow'/>
+
+    <portal-target name="Layout" ref="target">
+      <instructions ref="instructions" @checkShow="checkShow" />
+    </portal-target>
   </div>
 </template>
 
@@ -245,7 +250,7 @@ export default {
       isDisable: false, // 是否允许发送验证码
       timerCount: 60,
       btnName: "获取验证码",
-      isShowIns:false
+      isShowIns: false,
     };
   },
 
@@ -340,12 +345,13 @@ export default {
           });
       }
     },
-    openIns(){
-      this.$refs.instructions.showInstructions()
+    openIns() {
+      console.log('点击',this.$refs.portal)
+      this.$refs.instructions.showInstructions();
+    },
+    checkShow(val) {
+      this.isShowIns = val;
     },
-    checkShow(val){
-      this.isShowIns = val
-    }
   },
   watch: {
     resetVisible(val) {
@@ -467,18 +473,18 @@ export default {
     &:focus {
       outline: none;
     }
-     .msginfo.ins{
-         img {
+    .msginfo.ins {
+      img {
         width: 18px;
         height: 23px;
       }
-     }
+    }
     .msginfo {
       display: flex;
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
-padding: 0 5px;
+      padding: 0 5px;
       position: relative;
       cursor: pointer;
       img {

src/layout/components/fullPageIns.vue

@@ -135,13 +135,14 @@ export default {
 </script>
 <style lang="scss" scoped>
 .contan {
+  z-index: 2000;
   position: relative;
 }
 .iframeDiv {
   width: 100%;
   height: 100%;
   position: absolute;
-  z-index: 1111;
+  z-index: 2000;
   filter: alpha(opacity=0);
   opacity: 0;
   background: transparent;

src/layout/components/insVideo.vue

@@ -41,7 +41,7 @@ export default {
   data() {
     return {
       videoX: 0,
-      videoY:50,
+      videoY:200,
       videoW: 640,
       videoH: 390,
       src: this.videoSrc,
@@ -112,10 +112,12 @@ export default {
   }
 }
 .videoWrap {
-  z-index: 3000 !important;
+
   background-color: #fff;
-  position: absolute;
 
+  position: fixed;
+  z-index: 20000;
   border: 1px solid #ccc;
 }
+
 </style>

src/layout/components/instructions.vue

@@ -372,10 +372,10 @@ export default {
 }
 </style>
 <style lang="scss">
-.instructionWrap{
-  position: absolute;
-  z-index: 2000;
-}
+// .instructionWrap{
+//   position: absolute;
+//   z-index: 2000;
+// }
 .instructionBtn {
   position: fixed;
   right: 30px;

src/layout/index.vue

@@ -16,7 +16,7 @@
     </div>
     <sidebar class="sidebar-container" @childStatus="childStatus" :class="[onlyStatus && isCollapse ? null : 'noSide']" />
     <div class="main-container" :class="[ onlyStatus && isCollapse ? null : 'noContainer' ]">
-      <div :class="{'fixed-header':fixedHeader, 'noTagView': !(onlyStatus && isCollapse)}" style="top: 90px;" >
+      <div :class="{'fixed-header':fixedHeader, 'noTagView': !(onlyStatus && isCollapse)}" style="top: 90px; z-index:999!important" >
         <!-- <navbar /> -->
         <tags-view></tags-view>
       </div>

src/main.js

@@ -8,6 +8,8 @@ import isBetween from 'dayjs/plugin/isBetween'
 import numeral from 'numeral'
 import lodash from 'lodash'
 import qs from 'qs'
+import PortalVue from 'portal-vue'
+Vue.use(PortalVue)
 import { permission } from "@/utils/directivePage";
 
 dayjs.extend(isSameOrBefore)