client-app/components/hc-tabbar/block.vue

<template>
    <view class="hc-tabbar-block-box" :style="{ 'height': heights }"></view>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
const props = defineProps({
    'height': {
        type: [String, Number],
        default: '70'
    }
});

//初始变量
const heights = ref('');

//加载完成
onMounted(() => {
    setStyleData(props.height);
});

//监听变化
watch(() => [
    props.height
], ([height]) => {
    setStyleData(height);
})

//设置样式
const setStyleData = (height) => {
    heights.value = (height * 2) + 'rpx';
}
</script>

<style scoped lang="scss">
.hc-tabbar-block-box {
    padding-bottom: calc(var(--window-bottom) + 34rpx);
}
</style>