.

2025-09-23 22:27:41 +08:00
parent 232cea0f7e
commit aed85c92df
19 changed files with 238 additions and 374 deletions
@@ -0,0 +1,75 @@
+<template>
+  <cover-view class="cover-view-ctn">
+    <cover-view
+      class="cover-tabbar-item"
+      v-for="(item, index) in tabbar.items"
+      :key="item.text"
+      @tap="sheep.$router.go(item.url)"
+    >
+      <cover-view class="content-box">
+        <cover-image class="tabbar-icon" :src="sheep.$url.cdn(item.iconUrl)" />
+        <cover-view class="active-line" v-show="activeUrl === item.url" />
+      </cover-view>
+    </cover-view>
+  </cover-view>
+</template>
+
+<script setup>
+  import { computed, unref } from 'vue';
+  import sheep from '@/sheep';
+  import SuTabbar from '@/sheep/ui/su-tabbar/su-tabbar.vue';
+
+  const tabbar = computed(() => {
+    return sheep.$store('app').template.basic?.tabbar;
+  });
+
+  const props = defineProps({
+    activeUrl: {
+      type: String,
+      default: '',
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .cover-view-ctn {
+    width: 100%;
+    height: 50px;
+    position: fixed;
+    left: 0;
+    bottom: -1px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    box-shadow: 0px -2px 4px 0px rgba(51, 51, 51, 0.06);
+    z-index: 9999;
+    padding-bottom: env(safe-area-inset-bottom);
+    background: #fff;
+
+    .cover-tabbar-item {
+      flex: 1;
+
+      .content-box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        height: 32px;
+
+        .tabbar-icon {
+          width: 25px;
+          height: 25px;
+        }
+
+        .active-line {
+          width: 20rpx;
+          height: 1rpx;
+          background: #000;
+          position: absolute;
+          left: calc(50% - 10rpx);
+          bottom: 0rpx;
+        }
+      }
+    }
+  }
+</style>