2025-09-16

pages/page_template/page_template.vue

@@ -0,0 +1,73 @@
+<template>
+	<view class="message-container">
+		<!-- 固定背景的容器 -->
+		<view class="background-container"></view>
+
+		<!-- 可滚动的内容区域 -->
+		<view class="content-container" :style="'height:'+height+'px'">
+		</view>
+
+		<Tabbar id="tabbarId"></Tabbar>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, computed, getCurrentInstance } from 'vue';
+	import {
+		onReady
+	} from '@dcloudio/uni-app';
+	import { onReady as onUniReady } from '@dcloudio/uni-app';
+	const instance = getCurrentInstance();
+
+	const height = ref(0)
+
+	const loadHeight = () => {
+		uni.getSystemInfo({
+			success(res) {
+				let screenHeight = res.screenHeight
+				uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
+					height.value = screenHeight - data.height
+				}).exec()
+			}
+		})
+	}
+
+	onUniReady(() => {
+		loadHeight()
+	})
+</script>
+
+<style lang="scss" scoped>
+	.message-container {
+		width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100%;
+		overflow: hidden;
+		/* 防止容器本身滚动 */
+
+		/* 固定背景 */
+		.background-container {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
+			z-index: 1;
+			/* 确保背景在内容下方 */
+		}
+
+		/* 内容滚动区域 */
+		.content-container {
+			position: relative;
+			z-index: 2;
+			/* 确保内容在背景上方 */
+			width: 100%;
+			overflow-y: scroll;
+			height: 100%;
+			padding: 32rpx;
+		}
+	}
+</style>