77 lines
1.3 KiB
Vue
77 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<view
|
||
|
|
:style="{
|
||
|
|
paddingBottom: navbarRect.bottom + 50 + 'px',
|
||
|
|
}"
|
||
|
|
class="layout"
|
||
|
|
>
|
||
|
|
<slot></slot>
|
||
|
|
</view>
|
||
|
|
<!-- background: '#ddd', -->
|
||
|
|
<view
|
||
|
|
:style="{
|
||
|
|
paddingBottom: navbarRect.bottom + 'px',
|
||
|
|
|
||
|
|
height: '50px',
|
||
|
|
}"
|
||
|
|
class="bottom"
|
||
|
|
>
|
||
|
|
<Tabbar :select="select"/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import Tabbar from "@/components/TabBar/index.vue";
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
select: string;
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
select: "首页",
|
||
|
|
}
|
||
|
|
);
|
||
|
|
const navbarRect = reactive({
|
||
|
|
bottom: 95,
|
||
|
|
height: 30,
|
||
|
|
top: 65,
|
||
|
|
layoutHeight: 0,
|
||
|
|
});
|
||
|
|
|
||
|
|
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||
|
|
navbarRect.height = menuButtonInfo.height;
|
||
|
|
navbarRect.top = menuButtonInfo.top;
|
||
|
|
navbarRect.bottom =
|
||
|
|
uni.getSystemInfoSync().safeAreaInsets?.bottom || menuButtonInfo.bottom;
|
||
|
|
uni.getSystemInfo({
|
||
|
|
success: (res) => {
|
||
|
|
console.log(res);
|
||
|
|
navbarRect.layoutHeight =
|
||
|
|
res.windowHeight -
|
||
|
|
navbarRect.top -
|
||
|
|
navbarRect.height -
|
||
|
|
navbarRect.bottom -
|
||
|
|
50;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.top {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
background-color: bisque;
|
||
|
|
}
|
||
|
|
.layout {
|
||
|
|
background-color: #FFF;
|
||
|
|
}
|
||
|
|
.bottom {
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
bottom: 0px;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
</style>
|