<template> <view class="container" :style="{ height: height }"> <!-- <view class="fit-content"></view> --> <view class="operation" v-if="isCustom"> <slot></slot> </view> <view v-else> <view class="operation" v-if="isTab" :style="{ ...operatStyle }"> <u--image src="/static/images/tabbers/logo.png" width="48rpx" height="48rpx" mode="aspectFit" ></u--image> <text class="title">{{ title }}</text> </view> </view> </view> </template> <script> export default { name: 's-header', data() { return { operatStyle: {}, height: '0px' } }, props: { title: String, isTab: { type: Boolean, default: false }, isCustom: { type: Boolean, default: false } }, created() { this.getSetRect() }, mounted() {}, methods: { getSetRect() { const menuButtonInfo = uni.getMenuButtonBoundingClientRect() this.operatStyle = {} Object.keys(menuButtonInfo).forEach(i => { this.operatStyle[i] = `${menuButtonInfo[i] * 2}rpx` }) this.height = `${(menuButtonInfo.bottom + 7) * 2}rpx` delete this.operatStyle.left delete this.operatStyle.right delete this.operatStyle.bottom delete this.operatStyle.width }, goback() { this.$emit('goback') } } } </script> <style lang="scss" scoped> .container { background-color: #fff; z-index: 1; position: relative; .operation { position: absolute; bottom: 14rpx; padding: 8rpx 24rpx; display: flex; flex-flow: row nowrap; align-items: center; gap: 8rpx; position: absolute; .title { color: #071437; font-size: 32rpx; font-weight: bold; } .icon-box { padding: 10rpx; border-radius: 50%; } } } </style>