u

code/container-ocr/ocr-uniapp/src/layouts/default.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+import { toast } from 'sard-uniapp'
+import { ref } from 'vue'
+
+const current = ref(0)
 </script>
 
 <template>
@@ -8,6 +12,105 @@
     <sar-dialog-agent />
     <sar-notify-agent />
 
-    <view>123</view>
+    <!-- <view class="custom-tabbar">
+      <view class="tabbar-container" @touchmove.stop.prevent>
+        <view style="height: 50px;">
+          <sar-tabbar v-model:current="current">
+            <sar-tabbar-item
+              :name="0"
+              icon="house-door-fill"
+              icon-family="demo-icons"
+              text="首页"
+            />
+            <sar-tabbar-item @click="toast('点击了添加按钮')">
+              <view class="bulge">
+                <view class="cover" />
+                <view class="button">
+                  <sar-icon name="plus" size="96rpx" />
+                </view>
+              </view>
+              <text class="text">
+                添加
+              </text>
+            </sar-tabbar-item>
+            <sar-tabbar-item
+              :name="3"
+              icon="person-fill"
+              icon-family="demo-icons"
+              text="我的"
+            />
+          </sar-tabbar>
+        </view>
+      </view>
+
+      <view class="tabbar-pb" />
+    </view> -->
   </view>
 </template>
+
+<style lang="scss" scoped>
+.custom-tabbar {
+  height: 50px;
+  padding-bottom: var(--safe-area-inset-bottom);
+}
+.tabbar-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  border-top: 1px solid #eee;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.tabbar-pb {
+  padding-bottom: var(--safe-area-inset-bottom);
+}
+
+.bulge {
+  position: absolute;
+  top: 0;
+  transform-origin: top center;
+  transform: scale(0.5) translateY(-33%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 192rpx;
+  height: 192rpx;
+  border-radius: 50%;
+  background-color: var(--sar-tabbar-bg);
+  box-shadow: inset 0 0 0 1px var(--sar-border-color);
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.cover {
+  position: absolute;
+  top: 33%;
+  width: 100%;
+  height: 70%;
+  transform: translateY(1px);
+  background-color: var(--sar-tabbar-bg);
+}
+
+.button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 152rpx;
+  height: 152rpx;
+  border-radius: 50%;
+  background-color: var(--sar-primary);
+  color: var(--sar-white);
+}
+
+.text {
+  position: relative;
+  margin-top: auto;
+  margin-bottom: 10rpx;
+}
+</style>