联系我们背景图片完全应用

src/components/ContactUs.vue

@@ -6,8 +6,10 @@ import FooterContent from './Tools/FooterContent.vue'
 <template>
   <div id="contactRoot">
     <div id="upbar"></div>
+    <div id="contactContent">
       <FooterContent></FooterContent>
     </div>
+  </div>
 </template>
 
 <script>
@@ -23,11 +25,29 @@ export default {
 #upbar{
   width: 100%;
   @include media-breakpoint-between(xs, md) {
-    height: 33px;
+    height: 70px;
   }
 
   @include media-breakpoint-up(md) {
-    height: 0px;
+    height: 95.17px;
+  }
+}
+
+#contactContent
+{
+  width: 100%;
+  height:100%;
+  align-items: center;
+  justify-content: left;
+  display: flex;
+  @include media-breakpoint-between(xs, md) {
+    background-image: url('/bottom/bg_wep.png');
+    padding-left: 32px;
+  }
+
+  @include media-breakpoint-up(md) {
+    background-image: url('/bottom/bg_pc.png');
+    padding-left: 100px;
   }
 }
 
@@ -41,5 +61,6 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
 }
 </style>

src/components/Footer.vue

@@ -25,17 +25,19 @@ export default {
   background-color: black;
   width:100%;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
 
   @include media-breakpoint-between(xs, md) {
     min-height:806px;
     background-image: url('/bottom/bg_wep.png');
+    padding-left: 32px;
   }
 
   @include media-breakpoint-up(md) {
     min-height: 759px;
     margin-top: 0px;
     background-image: url('/bottom/bg_pc.png');
+    padding-left: 100px;
   }
 }
 </style>

src/components/Toolbar.vue

@@ -154,7 +154,7 @@ export default {
   @include media-breakpoint-between(xs, md) {
     width:88px;
     height:16px;
-    margin-left: 3px;
+    margin-left: 32px;
   }
   @include media-breakpoint-up(md){
     margin-left: 100px;

src/components/Tools/MobileToolbar.vue

@@ -141,8 +141,6 @@ export default {
 #barlist{
   margin-top: 44px;
   width: 100%;
-  //padding-left: 32px;
-  //padding-right: 32px;
 }
 
 .baritem{