epmet-work-uni/components/Head/index.vue

<template>
    <view>
        <view class="header">
            <image class="header-bg" src="/static/images/statistics/nav_bg.jpg" />
            <view class="navigation" mode="widthFix" :style="'height: ' + navigationHeight + 'px; padding-top: ' + statusHeight + 'px;'">
                <image class="nav-bg" mode="widthFix" src="/static/images/statistics/nav_bg.jpg" />
                <view class="back-nav" v-if="isBack">
                    <view class="con" :style="'width: ' + leftWidth + 'px'">
                        <view :style="'width: ' + iconWidth + 'px'">
                            <image class="icon back" @tap="back" src="/static/images/back.png" mode="widthFix" />
                        </view>
                        <view class="text">
                            {{ text }}
                        </view>
                    </view>
                </view>
                <view class="con index-nav" v-else>
                    <image class="icon" src="/static/images/statistics/icon-home.png" mode="widthFix" />
                    {{ agencyName }}
                </view>
            </view>
        </view>
        <view :style="'height: ' + (navigationHeight + statusHeight) + 'px'"></view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            statusHeight: 0,
            navigationHeight: 0,
            agencyName: '',
            leftWidth: 0,
            iconWidth: 0
        };
    },
    props: {
        isBack: {
            type: Boolean,
            default: false
        },
        text: {
            type: String,
            default: ''
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready: function () {
            this.setData({
                statusHeight: app.globalData.deviceInfo.statusHeight,
                navigationHeight: app.globalData.deviceInfo.navigationHeight,
                agencyName: app.globalData.user.agencyName
            });
            // const menuButton = uni.getMenuButtonBoundingClientRect();
            console.log(menuButton);
            // this.setData({
            //     leftWidth: menuButton.left,
            //     iconWidth: menuButton.width
            // });
        },

        back() {
            uni.navigateBack({
                delta: 1
            });
        },

        getNavigationInfo: function () {
            var that = this;
            uni.getSystemInfo({
                success(res) {}
            });
        }
    },
    created: function () {}
};
</script>
<style>
.header {
}

.header .navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    padding-left: 20rpx;
    overflow: hidden;
    z-index: 999999;
}

.header .navigation .icon {
    width: 34rpx;
    height: 34rpx;
    margin-right: 17rpx;
}
.header .navigation .back {
    width: 48rpx;
    height: 48rpx;
}
.header .navigation .back-nav {
    width: 100%;
}
.header .navigation .back-nav .con {
    display: flex;
    align-items: center;
}

.header .navigation .back-nav .con view {
    height: 100%;
}
.header .navigation .back-nav .con view.text {
    text-align: center;
    width: 100%;
}
.header .navigation .con {
    position: relative;
    z-index: 2;
}
.header .navigation .nav-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: unset;
}
.header-bg {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.index-nav {
    display: flex;
    align-items: center;
}
</style>