2025-09-17

主页修改

pages.json

@@ -10,7 +10,8 @@
 		{
 			"path": "pages/home/index",
 			"style": {
-				"navigationBarTitleText": "主页"
+				"navigationBarTitleText": "主页",
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/home/index.vue

@@ -1,10 +1,165 @@
 <template>
-	<Tabbar></Tabbar>
+	<view class="message-container">
+		<!-- 固定背景的容器 -->
+		<view class="background-container"></view>
+
+		<!-- 可滚动的内容区域 -->
+		<view class="content-container" :style="'height:'+height+'px'">
+
+			<u-swiper :list="list" name="url" height="324"></u-swiper>
+
+			<view class="menu-list">
+				<swiper class="swiper">
+					<swiper-item>
+						<u-grid :col="4">
+							<u-grid-item>
+								<u-icon name="photo" :size="46"></u-icon>
+								<view class="grid-text">图片</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="lock" :size="46"></u-icon>
+								<view class="grid-text">锁头</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="hourglass" :size="46"></u-icon>
+								<view class="grid-text">沙漏</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="hourglass" :size="46"></u-icon>
+								<view class="grid-text">沙漏</view>
+							</u-grid-item>
+						</u-grid>
+					</swiper-item>
+					<swiper-item>
+						<u-grid :col="4">
+							<u-grid-item>
+								<u-icon name="photo" :size="46"></u-icon>
+								<view class="grid-text">图片</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="lock" :size="46"></u-icon>
+								<view class="grid-text">锁头</view>
+							</u-grid-item>
+							<u-grid-item>
+								<u-icon name="hourglass" :size="46"></u-icon>
+								<view class="grid-text">沙漏</view>
+							</u-grid-item>
+						</u-grid>
+					</swiper-item>
+				</swiper>
+
+				<view class="indicator-dots">
+					<view class="indicator-dots-item indicator-dots-active">
+					</view>
+					<view class="indicator-dots-item">
+					</view>
+					<view class="indicator-dots-item">
+					</view>
+				</view>
+			</view>
+
+		</view>
+
+		<Tabbar id="tabbarId"></Tabbar>
+	</view>
 </template>
 
-<script lang="ts" setup>
+<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()
+			}
+		})
+	}
+
+	const list = [
+		{ url: '/static/banner/1.png' },
+		{ url: '/static/banner/2.png' },
+		{ url: '/static/banner/3.png' },
+	]
+
+	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;
+
+			.menu-list {
+
+				.swiper {
+					height: 170rpx;
+
+					.grid-text {
+						font-size: 28rpx;
+						margin-top: 4rpx;
+						color: $u-type-info;
+					}
+				}
+
+
+				.indicator-dots {
+					// margin-top: 40rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+
+				.indicator-dots-item {
+					background-color: $u-tips-color;
+					height: 6px;
+					width: 6px;
+					border-radius: 10px;
+					margin: 0 3px;
+				}
+
+				.indicator-dots-active {
+					background-color: $u-type-primary;
+				}
+			}
+		}
+	}
 </style>