ow

uniapp/youjiala/src/components/float-add-btn/float-add-btn.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+/**
+ * 悬浮操作按钮：右下角圆形蓝色渐变「+」，固定在底部导航之上。
+ * 只做外观与点击上报；新建/上传等动作语义由页面处理。
+ */
+defineProps({
+  /** 额外底部偏移（rpx 数值），供不同页面避开各自的底部元素 */
+  bottomOffset: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "click"): void;
+}>();
+</script>
+
+<template>
+  <view class="float-add-btn" :style="{ bottom: `${180 + bottomOffset}rpx` }" @tap="emit('click')">
+    <u-icon name="plus" size="52" color="#ffffff" />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.float-add-btn {
+  position: fixed;
+  right: 40rpx;
+  z-index: 8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 112rpx;
+  height: 112rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6ec2ff 0%, #2b8fff 100%);
+  box-shadow: 0 12rpx 32rpx rgba(43, 143, 255, 0.4);
+}
+</style>