flat: 暂存

components/AppLayout/AppLayout.vue

@@ -0,0 +1,146 @@
+<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 {
+            color: #000000;
+            font-weight: bold;
+            .subtitle-text {
+                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>