dz-app/pages/ie/components/large-header.vue

<template>
    <view :class="`large-header large-header-${mode}`" :style="{height: safeFullHeight}">
        <view class="fx-col justify-center" :style="{height: titleHeight+'px', ...titleStyle}">
            <mx-nav-bar :title="title" v-bind="navBinding"/>
        </view>
        <slot>
            <view class="fx-row justify-between px-40" :class="contentCustomClass">
                <view class="fx-col">
                    <text class="text-3xl font-bold keep-all" :class="textColor">{{ subTitle }}</text>
                    <text class="mt-10 text-sm keep-all" :class="textColor">{{ description }}</text>
                </view>
                <uv-image :src="bgIcon" width="auto" :height="bgIconHeight" mode="heightFix"/>
            </view>
        </slot>
    </view>
</template>

<script>
export default {
    name: "large-header",
    props: {
        mode: {
            type: String,
            default: "dark",
            validator: (val) => ['dark', 'light'].includes(val)
        },
        title: {
            type: String,
            default: ""
        },
        bgIcon: {
            type: String,
            default: "/static/ie/entry/bg-large-header.png"
        },
        bgIconHeight: {
            // height fix mode make image display smooth.
            type: [String, Number],
            default: 130
        },
        titleStyle: {
            type: Object,
            default: () => ({})
        },
        subTitle: {
            type: String,
            default: ""
        },
        description: {
            type: String,
            default: ""
        },
        scrollTop: {
            type: Number,
            default: 0
        },
        navHeight: {
            type: Number,
            default: 44
        },
        titleHeight: {
            type: Number,
            default: 80
        },
        fullHeight: {
            type: [Number, String],
            default: 250
        },
        contentCustomClass: {
            type: String,
            default: 'items-center'
        }
    },
    computed: {
        safeFullHeight() {
            return isNaN(this.fullHeight) ? this.fullHeight : this.fullHeight + 'px'
        },
        space() {
            return (this.titleHeight - this.navHeight) / 2
        },
        darkMode() {
            return this.mode == "dark"
        },
        textColor() {
            return this.darkMode ? 'text-white' : 'text-primary'
        },
        navFixed() {
            return this.scrollTop > this.space
        },
        navOpacity() {
            if (!this.navFixed) return 0
            return Math.min(1, (this.scrollTop - this.space) / this.navHeight)
        },
        navBinding() {
            return {
                'mode': this.mode,
                'height': this.navHeight,
                'fixed': this.navFixed,
                'opacity': this.navOpacity,
                'border': this.navOpacity == 1 && !this.darkMode,
                ...this.$attrs // other props consider as nav bindings.
            }
        }
    }
}
</script>

<style scoped lang="scss">
.large-header {
    overflow: hidden;

    &-dark {
        background: linear-gradient(to bottom, var(--primary-light-color), var(--primary-deep-color));
    }
}
</style>