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.
|
|
|
|
<template>
|
|
|
|
|
<view
|
|
|
|
|
class="base-container pos"
|
|
|
|
|
:class="{ flex, 'flex-column': flex, 'fixed-nav': fixedNav }"
|
|
|
|
|
:style="styleVariable"
|
|
|
|
|
>
|
|
|
|
|
<slot />
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
props: {
|
|
|
|
|
flex: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
fixedNav: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
const systemInfo = this.$util.getSystemInfo();
|
|
|
|
|
const { statusBarHeight, windowWidth, windowHeight, safeAreaInsets } = systemInfo;
|
|
|
|
|
const { bottom } = safeAreaInsets;
|
|
|
|
|
return {
|
|
|
|
|
statusBarHeight,
|
|
|
|
|
windowWidth,
|
|
|
|
|
windowHeight,
|
|
|
|
|
safeAreaInsets,
|
|
|
|
|
bottom,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
styleVariable() {
|
|
|
|
|
return this.$util.styleToStr({
|
|
|
|
|
"--safe-top": this.statusBarHeight + "px",
|
|
|
|
|
"--safe-bottom": this.bottom + "px",
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.base-container {
|
|
|
|
|
--tab-bar-height: calc(110rpx + var(--safe-bottom));
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
background: #f6f6f6;
|
|
|
|
|
&.fixed-nav {
|
|
|
|
|
/* #ifndef MP-TOUTIAO */
|
|
|
|
|
padding-top: calc(88rpx + var(--safe-top));
|
|
|
|
|
/* #endif */
|
|
|
|
|
/* #ifdef MP-WEIXIN */
|
|
|
|
|
padding-bottom: calc(88rpx + var(--safe-top));
|
|
|
|
|
/* #endif */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.flex {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
