<template>
|
<scroll-view
|
class="content-scroll-view-wrapper"
|
:class="{ hasPaddingTop, isNoWeb: !isWeb || showBgColor }"
|
:scroll-y="true"
|
>
|
<ContentView
|
:class="['content-scroll-view-wrapper-inner', props.allHeight ? 'all-height' : '']"
|
:paddingH="paddingH"
|
>
|
<slot />
|
</ContentView>
|
</scroll-view>
|
</template>
|
|
<script setup lang="ts">
|
import ContentView from './ContentView.vue';
|
import { isWeb } from '@/utils/env';
|
|
defineOptions({
|
name: 'ContentScrollView',
|
});
|
|
type Props = {
|
hasPaddingTop?: boolean;
|
allHeight?: boolean;
|
paddingH?: boolean;
|
showBgColor?: boolean;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
hasPaddingTop: false,
|
allHeight: false,
|
paddingH: true,
|
showBgColor: true,
|
});
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.content-scroll-view-wrapper {
|
@include listScrollViewWithNoPadding;
|
|
&.isNoWeb {
|
background-color: $body-background-color;
|
}
|
|
&.hasPaddingTop {
|
padding-top: 32px;
|
}
|
|
.content-scroll-view-wrapper-inner {
|
@include ScrollViewInner;
|
|
&.all-height {
|
height: 100%;
|
padding-bottom: 0;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
}
|
</style>
|
