aiot-app/pages/index/index.scss

page {
	background-color: $page-bg;
	color: $uni-text-color;
}

/* 顶部横向导航 */
.top-nav-wrapper {
	position: fixed;
	top: calc(var(--status-bar-height) + 44px);
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.top-nav {
	width: 100%;
	white-space: nowrap;
	padding: 0 10rpx;
	height: 88rpx;
	box-sizing: border-box;
}

.nav-tab {
	display: inline-block;
	padding: 0 28rpx;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 28rpx;
	color: #666;
	text-align: center;
	flex-shrink: 0;
	position: relative;
	transition: color 0.25s ease;
}

.nav-tab.active {
	color: $j-primary-border-green;
	font-weight: 600;
}

.nav-tab.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48rpx;
	height: 6rpx;
	background-color: $j-primary-border-green;
	border-radius: 3rpx;
}

/* 内容区域 - 减少顶部空白 */
.content-wrapper {
	padding-top: calc(var(--status-bar-height) + 80rpx);
	padding-bottom: env(safe-area-inset-bottom);
}

/* 模块卡片容器 */
.nav {
	margin: 0 24rpx 24rpx;
	background-color: $uni-bg-color;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
	overflow: hidden;

	.nav-content {
		padding: 24rpx 10rpx 10rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.nav-item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			width: 25%;
			padding: 16rpx 0 24rpx;
			box-sizing: border-box;

			&:active {
				opacity: 0.7;
			}

			span {
				font-size: 56rpx;
				color: $j-primary-border-green;
				margin-bottom: 12rpx;
				line-height: 1;
			}

			label {
				font-size: 24rpx;
				color: $uni-text-color;
				width: 90%;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				line-height: 1.4;
			}

			.badge {
				position: absolute;
				top: 6rpx;
				left: 55%;
				min-width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				font-size: 20rpx;
				padding: 0 8rpx;
				border-radius: 32rpx;
				background-color: #ff4949;
				color: #fff;
				font-style: normal;
				text-align: center;
				box-sizing: border-box;
				margin-left: 10rpx;
			}
		}
	}
}