存档

src/components/Toolbar.vue

@@ -17,11 +17,13 @@ import MobileToolbar from "@/components/Tools/MobileToolbar.vue";
           class="label_1"
           referrerpolicy="no-referrer"
           src="/topcode.png"/>
-      <img
-          id="wepmenubutton"
-          class="label_1"
-          referrerpolicy="no-referrer"
-          src="/waptoptoolbarbutton.png.png"/>
+      <a href="javascript:;" onclick="show_weptoolbar()">
+        <img
+            id="wepmenubutton"
+            class="label_1"
+            referrerpolicy="no-referrer"
+            src="/waptoptoolbarbutton.png"/>
+      </a>
       <span id="rightcontent">
         <span class="toptext" id="hyal">
           <a href="/Examples"
@@ -57,7 +59,6 @@ export default {
   name: "Toolbar",
   mounted() {
     this.$nextTick(function() {
-// 调用你想执行的方法
       this.contain_toolbar();
     });
   },
@@ -73,6 +74,9 @@ export default {
               .style.backgroundColor="black";
         }
       }
+    },
+    show_weptoolbar:function (){
+      document.getElementById('mobilebarroot').style.visibility="visible";
     }
   }
 }
@@ -178,9 +182,6 @@ export default {
   @include media-breakpoint-up(md){
     width: 23px;
     height: 23px;
-    //margin-top: 2px;
-    //margin: 3px 0 0 30px;
-    //top:3px;
     margin-right: 100px;
   }
 }
@@ -201,8 +202,8 @@ export default {
 #toproot
 {
   display: flex;
-  //position: -webkit-fixed;
   position: fixed;
+  flex-direction: column;
   top:0px;
   background-color: rgba(255,255,255,0);
   z-index: 7;
@@ -213,10 +214,7 @@ export default {
     height:70px;
   }
   @include media-breakpoint-up(md){
-    //height: 34px;
     height: 95.17px;
-    //margin-top: 2px;
-    //margin: 3px 0 0 30px;
   }
 }
 

src/components/Tools/MobileToolbar.vue

@@ -23,23 +23,27 @@ export default {
 @import "node_modules/bootstrap/scss/_mixins.scss";
 
 #mobilebarroot{
+  position: fixed;
+  z-index: 10;
   @include media-breakpoint-between(xs, md) {
     background-color: black;
     display: flex;
     //position: -webkit-fixed;
-    position: fixed;
-    z-index: 10;
     width: 100%;
     flex-direction: column;
     height: 100vh;
     visibility: collapse;
+    margin-top: 0px;
+    margin-left: 0px;
   }
   @include media-breakpoint-up(md) {
-    visibility: collapse;!important;
+    visibility: collapse!important;
+    height:0!important;
   }
 }
 
 #barcontent{
+  visibility: inherit;
   @include media-breakpoint-between(xs, md) {
     display: flex;
     position: relative;
@@ -48,16 +52,17 @@ export default {
     min-height: 100%;
   }
   @include media-breakpoint-up(md) {
-    visibility: collapse;!important;
+    //visibility: collapse!important;
   }
 }
 
 #barbottom{
+  visibility: inherit;
   @include media-breakpoint-between(xs, md) {
     width: 100%;
   }
   @include media-breakpoint-up(md) {
-    visibility: collapse;!important;
+    //visibility: collapse!important;
   }
 }
 </style>