bottom tab

src/components/Bottom.vue

@@ -1,12 +1,26 @@
 <template>
   <div class="bottom_container">
-    <div class="online">在线咨询</div>
-    <div class="phone">拨打电话</div>
-    <div class="online">添加微信</div>
+    <div class="online">
+      <img class="img1" :src="A1" alt="" />
+      <span class="text1">在线咨询</span>
+    </div>
+    <div class="phone">
+      <div class="box">
+        <img class="img3" :src="A2" alt="" />
+        <span class="text2">拨打电话</span>
+      </div>
+    </div>
+    <div class="online">
+      <img class="img2" :src="A3" alt="" /> <span class="text1">添加微信</span>
+    </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import A1 from '@/static/img/bottom/kefu.png'
+import A2 from '@/static/img/bottom/phone.png'
+import A3 from '@/static/img/bottom/wechat.png'
+</script>
 
 <style lang="scss" scoped>
 .bottom_container {
@@ -20,17 +34,55 @@
   display: flex;
   box-sizing: border-box;
   align-items: center;
+  justify-content: space-between;
+  padding: 0 35px;
   .online {
-    width: 132px;
-    height: 100%;
     display: flex;
     align-items: center;
-    padding: 9px 40px;
     white-space: nowrap;
     box-sizing: border-box;
+    .img1 {
+      width: 14px;
+      height: 14px;
+      margin-right: 6px;
+    }
+    .img2 {
+      width: 16px;
+      height: 13px;
+      margin-right: 6px;
+    }
+    .text1 {
+      font-size: 9px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #ffffff;
+    }
   }
   .phone {
     flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .box {
+      width: 110px;
+      height: $bottom-height;
+      background: linear-gradient(90deg, #f98222, #f94622);
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      .img3 {
+        width: 24px;
+        height: 24px;
+        margin-left: 4px;
+        margin-right: 11px;
+      }
+      .text2 {
+        font-size: 13px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
   }
 }
 </style>