41 lines
831 B
Vue
41 lines
831 B
Vue
<script setup lang="ts">
|
|
const {menuMobileExpandStatus} = defineProps({
|
|
menuMobileExpandStatus: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mobileMenu" :class="menuMobileExpandStatus ? 'mobileMenuActive' : ''">
|
|
<div class="mobileMenuContent">
|
|
菜单
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.mobileMenu{
|
|
position: fixed;
|
|
overflow: hidden;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
|
|
z-index: 99;
|
|
.mobileMenuContent{
|
|
position: relative;
|
|
top: 2.5rem;
|
|
width: 100vw;
|
|
height: calc(100% - 2.5rem);
|
|
backdrop-filter: blur(10px);
|
|
background: #dddddd99;
|
|
}
|
|
}
|
|
.mobileMenuActive{
|
|
height: 100vh;
|
|
}
|
|
</style>
|