<template>
  <view class="float-btn">
    <u-image @click="toggle" class="icon-btn icon-menu" src="@/static/images/menu.png" mode="aspectFill"></u-image>

    <u-image v-show="showChild" class="icon-btn icon-user" src="@/static/images/user.png" mode="aspectFill"></u-image>
    <u-image v-show="showChild" class=" icon-btn icon-heart" src="@/static/images/heart.png" mode="aspectFill"></u-image>
    <u-image v-show="showChild" class="icon-btn icon-bed" src="@/static/images/bed.png" mode="aspectFill"></u-image>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const showChild = ref(false)

function toggle() {
  showChild.value = !showChild.value
}
</script>

<style lang="scss" scoped>
.float-btn {
  width: 140rpx;
  height: 140rpx;
  position: fixed;
  right: 20px;
  bottom: 250rpx;

  .icon-btn {
    width: 140rpx !important;
    height: 140rpx !important;
  }

  .icon-user {
    position: absolute;
    right: 10%;
    top: -100%;
  }

  .icon-heart {
    position: absolute;
    right: 100%;
    top: 0;
  }

  .icon-bed {
    position: absolute;
    right: 10%;
    top: 100%;
  }
}
</style>
