index2 tabbar

pages/index2/index.vue

@@ -1,8 +1,12 @@
-<template>
+<template style="background-color: red">
   <div
     style="
-      background: url(https://file.rongcyl.cn/festatic/bkm/bg_i.png) no-repeat center center;
+      background-image: url(https://file.rongcyl.cn/festatic/bkm/bg_i.png);
+      background-repeat: no-repeat;
+      background-position: center center;
       background-size: contain;
+      background-color: #000;
+      padding-bottom: 80px;
     "
   >
     <img src="https://file.rongcyl.cn/festatic/bkm/banner.png" class="w-full" />
@@ -86,6 +90,27 @@
         <div class="absolute text-white bottom-2 fs11 text-center left-0 right-0">3333</div>
       </div>
     </div>
+    <div
+      class="fixed left-0 right-0 bottom-0 pb-1 bg-black flex justify-around items-center fs13"
+      style="color: #b4c9da; height: 80px"
+    >
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/home.png" class="w-7 h-7" />
+        <div style="color: #fc5b20">首页</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/shop.png" class="w-7 h-7" />
+        <div>商城</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/bag.png" class="w-7 h-7" />
+        <div>背包</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/mine.png" class="w-7 h-7" />
+        <div>我的</div>
+      </div>
+    </div>
   </div>
 </template>