93 lines
1.8 KiB
Plaintext
93 lines
1.8 KiB
Plaintext
<template>
|
|
<view class="service-page-shell">
|
|
<view v-if="!hideHeader" class="service-page-fixed-header">
|
|
<ServicePageHeader :title="title" :fallback-url="fallbackUrl"></ServicePageHeader>
|
|
</view>
|
|
<view v-if="hideHeader" class="service-page-safe-top" :style="{ height: safeTopHeight + 'px' }"></view>
|
|
<view v-else class="service-page-header-placeholder" :style="{ height: headerHeight + 'px' }"></view>
|
|
<scroll-view class="service-page-scroll" scroll-y="true">
|
|
<view class="service-page-content">
|
|
<slot></slot>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
import ServicePageHeader from '@/components/homeService/ServicePageHeader.uvue'
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
fallbackUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
hideHeader: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const headerHeight = ref(116)
|
|
const safeTopHeight = ref(32)
|
|
|
|
try {
|
|
const windowInfo = uni.getWindowInfo()
|
|
const statusBar = windowInfo.statusBarHeight
|
|
const unit = windowInfo.windowWidth / 750
|
|
headerHeight.value = statusBar + Math.round(124 * unit)
|
|
safeTopHeight.value = statusBar + Math.round(24 * unit)
|
|
} catch (error) {
|
|
headerHeight.value = 116
|
|
safeTopHeight.value = 32
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.service-page-shell {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f3f7f9;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.service-page-fixed-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: #f3f7f9;
|
|
}
|
|
|
|
.service-page-header-placeholder {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.service-page-safe-top {
|
|
width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.service-page-scroll {
|
|
flex: 1;
|
|
min-height: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.service-page-content {
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|