客服布局

src/pages/contact/index.vue

 <template>
     <div class="contact">
-        <div class="contact-img"></div>
+        <div class="contact-img">
+            <img src="../../../static/images/contact_img.png" alt="">
+        </div>
         <div class="btn-wrap">
-            <button type="contact">
+            <button open-type="contact" show-message-card>
                 <div class="btn-main">
                     <div class="main-img">
-
+                        <img src="../../../static/images/wx.png" alt="">
                     </div>
                     <div class="main-text">官方微信客服</div>
                 </div>
-                <div class="btn-next">
-                    next
-                </div>
+                <img class="btn-next" src="../../../static/images/next.png" alt="">
             </button>
         </div>
     </div>
@@ -34,6 +34,10 @@ export default {
         background-color: #ccc;
         border-radius: 8px;
     }
+    .contact-img img{
+        width: 100%;
+        height: 100%;
+    }
     .btn-wrap{
         width: 100%;
         height: 80px;
@@ -58,12 +62,25 @@ export default {
         width: 54px;
         height: 40px;
         border-right: 1px solid #D7D4D4;
+        padding-top: 3px;
+    }
+    .main-img img{
+        width: 42px;
+        height: 34px;
     }
     .main-text{
         color: #1C1B1B;
         font-size:17px;
         margin-left: 10px;
     }
+    .btn-next{
+        width: 9px;
+        height: 14px;
+    }
+    .btn-next img{
+        width: 100%;
+        height: 100%;
+    }
     button::after{
         border: none;
     }