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;
}
.top-nav {
	width: 100%;
	white-space: nowrap;
	padding: 0 20rpx;
	height: 80rpx;
	box-sizing: border-box;
}
.nav-tab {
	display: inline-block;
	padding: 0 30rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	color: #666;
	text-align: center;
	flex-shrink: 0;
	position: relative;
}
.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: 60rpx;
	height: 4rpx;
	background-color: $j-primary-border-green;
	border-radius: 2rpx;
}

.content-wrapper {
	padding-top: calc(var(--status-bar-height) + 80rpx);
}

/* 基本信息样式 */
	.nav{
	.nav-content{
		padding: 30rpx 0;
		background-color: $uni-bg-color;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.nav-item{
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
		    width: 20%;
			height: 120rpx;
			margin: 20rpx 0;
			span{
				//display: block;
				font-size: 60rpx;
				color:$j-primary-border-green ;
				padding-bottom: 15rpx;
			}
			label{
				//color:$uni-text-color-grey ;
				font-size: $uni-font-size-sm;
				width: 100%;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.badge {
				position: absolute;
				top: -8rpx;
				left: 100rpx;
				font-size: 24rpx;
				padding: 0rpx 10rpx;
				border-radius: 38rpx;
				background-color: #ff4949;
				color: #fff;
				font-style: normal;
			}
		}
	}
}