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.
65 lines
1.5 KiB
65 lines
1.5 KiB
<script setup>
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { ref } from "vue";
|
|
import { useHeight } from "@/libs/utils";
|
|
import useStore from "@/store";
|
|
|
|
const store = useStore();
|
|
|
|
const safeHeight = ref({
|
|
status: 0,
|
|
menu: 0,
|
|
screen: 0,
|
|
content: 0,
|
|
bottom: 0,
|
|
});
|
|
|
|
onLoad(() => {
|
|
store.fontScale = uni.getStorageSync("fontScale") || 1;
|
|
const height = useHeight();
|
|
// console.log(height);
|
|
|
|
safeHeight.value.status = height.status;
|
|
safeHeight.value.menu = height.menu;
|
|
safeHeight.value.screen = height.screen;
|
|
safeHeight.value.content = height.content;
|
|
safeHeight.value.bottom = height.bottom;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view
|
|
:style="{
|
|
'--font-scale': store.fontScale,
|
|
}"
|
|
>
|
|
<slot
|
|
:status="safeHeight.status"
|
|
:menu="safeHeight.menu"
|
|
:screen="safeHeight.screen"
|
|
:bottom="safeHeight.bottom"
|
|
:tabbar="safeHeight.tabbar"
|
|
:content="safeHeight.content"
|
|
:fix-style=" {
|
|
height: safeHeight.menu ? `${safeHeight.menu}px` : '45px',
|
|
paddingTop: `${safeHeight.status}px`,
|
|
backgroundColor: '#f8f8f8',
|
|
width: '100%',
|
|
position: 'fixed',
|
|
top: 0,
|
|
zIndex: 99,
|
|
left: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
} "
|
|
:pad-style="{
|
|
paddingTop: `${safeHeight.status + (safeHeight.menu || 45) + 5}px`,
|
|
height: `${safeHeight.menu || 45}px`,
|
|
}"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '../../uni.scss';
|
|
</style>
|