generated from ccsens_fe/uni-vue3-template
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.1 KiB
52 lines
1.1 KiB
<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>
|
|
|