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; } } } }