bottom

src/assets/scss/globalVar.scss

@@ -1,3 +1,3 @@
 $bg-color: #1989fa;
-$bottom-height: 38px;
+$bottom-height: 31px;
 $sub-header-height: 47px;

src/components/Bottom.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="bottom_container">bottom</div>
+  <div class="bottom_container">
+    <div class="online">在线咨询</div>
+    <div class="phone">拨打电话</div>
+    <div class="online">添加微信</div>
+  </div>
 </template>
 
 <script setup></script>
@@ -11,7 +15,21 @@
   left: 0;
   right: 0;
   height: $bottom-height;
-  background: #283fe7;
+  background: #ffa18e;
   z-index: 999;
+  display: flex;
+  align-items: center;
+  .online {
+    width: 132px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 9px 40px;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+  .phone {
+    flex: 1;
+  }
 }
 </style>