导航栏彻底完备

src/components/Toolbar.vue

@@ -17,7 +17,7 @@ import MobileToolbar from "@/components/Tools/MobileToolbar.vue";
           class="label_1"
           referrerpolicy="no-referrer"
           src="/topcode.png"/>
-      <a href="javascript:;" onclick="show_weptoolbar()">
+      <a href="javascript:;" @click="show_weptoolbar">
         <img
             id="wepmenubutton"
             class="label_1"

src/components/Tools/MobileToolbar.vue

@@ -4,7 +4,43 @@ import FooterContent from './FooterContent.vue'
 
 <template>
   <div id="mobilebarroot">
-    <div id="barcontent"></div>
+    <div id="barcontent">
+      <div class="image-wrapper_2 flex-row justify-between">
+        <a href="/">
+          <img
+              id="image_1"
+              referrerpolicy="no-referrer"
+              src="/MobileToolbar/weptoolbarlogo.png"
+          />
+        </a>
+        <span style="width: 100%;"></span>
+        <a href="javascript:;" @click="hide_toolbar">
+          <img
+              id="thumbnail_1"
+              referrerpolicy="no-referrer"
+              src="/MobileToolbar/closeweptoolbar.png"
+          />
+        </a>
+      </div>
+      <div id="barlist">
+        <a href="/Examples"
+           style="text-decoration: none; color: inherit;">
+          <div class="baritem">行业案例</div>
+        </a>
+        <a href="/ServiceProcess"
+           style="text-decoration: none; color: inherit;">
+          <div class="baritem">服务流程</div>
+        </a>
+        <a href="/Aboutus"
+           style="text-decoration: none; color: inherit;">
+          <div class="baritem">关于我们</div>
+        </a>
+        <a href="/ContactUs"
+           style="text-decoration: none; color: inherit;">
+          <div class="baritem">联系我们</div>
+        </a>
+      </div>
+    </div>
     <div id="barbottom">
       <FooterContent></FooterContent>
     </div>
@@ -13,7 +49,12 @@ import FooterContent from './FooterContent.vue'
 
 <script>
 export default {
-  name: "MobileToolbar"
+  name: "MobileToolbar",
+  methods: {
+    hide_toolbar:function (){
+      document.getElementById('mobilebarroot').style.visibility="collapse";
+    }
+  }
 }
 </script>
 
@@ -24,7 +65,7 @@ export default {
 
 #mobilebarroot{
   position: fixed;
-  z-index: 10;
+  z-index: 100;
   @include media-breakpoint-between(xs, md) {
     background-color: black;
     display: flex;
@@ -35,6 +76,10 @@ export default {
     visibility: collapse;
     margin-top: 0px;
     margin-left: 0px;
+    margin-bottom: 0px;
+    top: 0;
+    left: 0;
+    overflow: auto; /* 关键点 */
   }
   @include media-breakpoint-up(md) {
     visibility: collapse!important;
@@ -46,10 +91,11 @@ export default {
   visibility: inherit;
   @include media-breakpoint-between(xs, md) {
     display: flex;
+    flex-direction: column;
     position: relative;
     flex:1;
     width: 100%;
-    min-height: 100%;
+    //min-height: 100%;
   }
   @include media-breakpoint-up(md) {
     //visibility: collapse!important;
@@ -57,12 +103,56 @@ export default {
 }
 
 #barbottom{
+  display: flex;
   visibility: inherit;
   @include media-breakpoint-between(xs, md) {
     width: 100%;
+    justify-content: left;
+    padding-left: 32px;
+    margin-top: 72px;
+    //padding-bottom: 72px;
   }
   @include media-breakpoint-up(md) {
     //visibility: collapse!important;
   }
 }
+
+.image-wrapper_2 {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding-left: 32px;
+  padding-top: 24px;
+  padding-right: 32px;
+}
+
+#image_1 {
+  width: 88px;
+  height: 16px;
+  margin: 3px 0 1px 0;
+}
+
+#thumbnail_1 {
+  width: 20px;
+  height: 20px;
+  float: right;
+}
+
+#barlist{
+  margin-top: 44px;
+  width: 100%;
+  padding-left: 32px;
+  //padding-top: 24px;
+  padding-right: 32px;
+}
+
+.baritem{
+  width: 100%;
+  height:72px;
+  color: rgba(255, 255, 255, 1);
+  font-size: 24px;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  text-align: left;
+}
 </style>