feat(zm)手机 联系页面

src/App.vue

@@ -150,6 +150,41 @@
           </div>
         </div>
       </div>
+
+      <div class="contact-bg">
+        <img src="../src/assets/image/img/call.png" alt="" style="width: 100%">
+        <div class="contact-bottom flex-column" style="align-items: center">
+
+          <div class="name">北京醉面餐饮集团有限公司</div>
+
+          <div class="flex-row msg-img-list">
+            <div class="flex-column" >
+              <img src="../src/assets/image/img/address.png" alt="" class="msg-img">
+              <div class="msg-text">北京市朝阳区繁华大街3450拓基大厦1103室</div>
+            </div>
+            <div class="flex-column" >
+              <img src="../src/assets/image/img/mobile.png" alt="" class="msg-img">
+              <div class="msg-text">021-67675666</div>
+            </div>
+            <div class="flex-column"  >
+              <img src="../src/assets/image/img/ie.png" alt="" class="msg-img">
+              <div class="msg-text" style="cursor: pointer">www.shpocc.com</div>
+            </div>
+            <div class="flex-column"  >
+              <img src="../src/assets/image/img/email.png" alt="" class="msg-img">
+              <div class="msg-text">bj@pocc.co</div>
+            </div>
+
+          </div>
+
+          <div class="img-map-div">
+            <img src="../src/assets/image/img/contact_map.png" alt="" class="map">
+          </div>
+
+
+        </div>
+
+      </div>
     </div>
 
 
@@ -288,6 +323,7 @@ export default {
    }
 
   //food
+
    .c-top-left{
      width: 150px;
    }
@@ -298,7 +334,7 @@ export default {
     margin-bottom: 10px!important;
    }
    .food-bg{
-    height: 600px!important;
+    height: 500px!important;
      padding: 0px 0px!important;
    }
    .food-view-left{
@@ -328,5 +364,42 @@ export default {
    .food-title,.food-desc{
      font-size: 12px!important;
    }
+
+   //contact
+   .contact-bg{
+    height: 800px!important;
+   }
+   .contact-bottom{
+     height: 600px!important;
+     padding-bottom: 0px!important;
+   }
+   .name {
+     height: 20px!important;
+     font-size: 20px!important;
+     line-height: 20px!important;
+     margin-top: 50px!important;
+   }
+   .msg-img-list {
+     height: 300px!important;
+     margin-top: 40px!important;
+     padding: 0px 10px!important;
+     flex-flow:  column nowrap!important;
+     justify-content: space-between!important;
+     align-items: flex-start!important;
+   }
+   .img-map-div {
+     padding: 0px 16px!important;
+     margin-bottom: 50px!important;
+   }
+   .msg-img{
+     width: 40px!important;
+     height: 40px!important;
+   }
+   .msg-text{
+     font-size: 12px!important;
+     height: 20px!important;
+     margin-top: 5px!important;
+     text-align: left!important;
+   }
  }
 </style>