149 lines
4.0 KiB
Vue
149 lines
4.0 KiB
Vue
<template>
|
|
<view class="app-custom-root">
|
|
<view
|
|
class="app-container"
|
|
:style="{ backgroundColor: backGorundColor, backgroundImage: showBgImage && `url(${img})` }"
|
|
>
|
|
<!-- 顶部头部区域 -->
|
|
<view
|
|
class="container-header"
|
|
:style="border ? { borderBottom: `2rpx solid ${borderColor}` } : { borderBottom: 'none' }"
|
|
>
|
|
<view class="header-btnLf">
|
|
<slot name="headerleft"></slot>
|
|
</view>
|
|
<view class="header-title">
|
|
<view>{{ title }}</view>
|
|
<view v-show="subTitle" class="subtitle-text">{{ subTitle }}</view>
|
|
</view>
|
|
<view class="header-btnRi">
|
|
<slot name="headerright"></slot>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 主体不可滚动 headContent -->
|
|
<view class="container-headContent">
|
|
<slot name="headContent"></slot>
|
|
</view>
|
|
|
|
<!-- 主体内容区域 -->
|
|
<view class="container-main">
|
|
<scroll-view v-if="useScrollView" scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
|
|
<slot></slot>
|
|
</scroll-view>
|
|
<view class="main-scroll" v-else><slot></slot></view>
|
|
</view>
|
|
|
|
<!-- 底部 footer -->
|
|
<view class="container-footer">
|
|
<slot name="footer"></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import img from '@/static/icon/background2.png';
|
|
const emit = defineEmits(['onScrollBottom']);
|
|
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '标题',
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: '#F4F4F4',
|
|
},
|
|
subTitle: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
backGorundColor: {
|
|
type: String,
|
|
default: '#ffffff',
|
|
},
|
|
useScrollView: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showBgImage: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
|
|
const handleScrollToLower = () => {
|
|
emit('onScrollBottom');
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-custom-root {
|
|
position: fixed;
|
|
z-index: 10;
|
|
width: 100vw;
|
|
height: calc(100% - var(--window-bottom));
|
|
overflow: hidden;
|
|
}
|
|
.app-container {
|
|
// background-image: url('@/static/icon/background2.png');
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
background-size: 100% 728rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
.container-header {
|
|
min-height: calc(88rpx - 14rpx);
|
|
text-align: center;
|
|
line-height: calc(88rpx - 14rpx);
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 7rpx 3rpx;
|
|
.header-title {
|
|
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
|
color: #000000;
|
|
font-weight: bold;
|
|
.subtitle-text {
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 45rpx;
|
|
margin-top: -16rpx;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
}
|
|
.header-btnLf,
|
|
.header-btnRi {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
width: calc(60rpx * 3);
|
|
}
|
|
.header-btnRi {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
.container-main {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main-scroll {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|