<template>
  <div class="floating-bubble" :style="style">
    <van-icon
      v-if="showtype == 'close'"
      name="close"
      color="#3c86f3"
      size="26px"
    />
  </div>
</template>

<script>
export default {
  name: "FloatingBubble",
  props: {
    position: Object,
    showtype: String,
  },
  computed: {
    style() {
      return {
        position: "fixed",
        // position: "absolute",
        // transform: translate3d(
        //   this.position.left + "px",
        //   this.position.top + "px"
        // ),
        top: this.position.top + "px",
        left: this.position.left + "px",
        // 其他样式，如圆角、定位等
      };
    },
  },
};
</script>

<style scoped>
.floating-bubble {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* 圆形 */
  z-index: 99;
  /* 其他样式，如阴影等 */
}
</style>
