.nav-bar { position: fixed; width: 100%; top: 0; z-index: 9999; color: #fff; background: #C7DDFF; .view { width: 100%; color: #2D2D2D; position: absolute; display: flex; align-items: center; justify-content: center; .selectGrade { position: absolute; left: 22rpx; width: 158rpx; height: 48rpx; line-height: 48rpx; border-radius: 25rpx; background-color: #ffffffa6; color: #333; font-size: 24rpx; text-align: center; } .title { text-align: center; } } } .headerBg { z-index: -1; position: absolute; left: 0px; width: 100%; height: 210rpx; background: url(https://reader-wx.ai160.com/images/reader/v3/navbarBg.png) no-repeat; background-size: 100% 100%; background-position: center; } .gradeContainer { width: 100%; height: 100%; background: rgba(0, 0, 0, .7); display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 9999; .gradeBox { width: 520rpx; padding: 33rpx 40rpx 50rpx; border-radius: 20rpx; background-color: white; .title { text-align: center; font-size: 40rpx; font-weight: bold; } .content { margin-top: 55rpx; display: flex; justify-content: space-between; align-items: center; .grade { padding: 12rpx 64rpx; border-radius: 50rpx; font-size: 36rpx; color: #333; background-color: #E4E4E4; } .oneRow { width: 100%; text-align: center; } .check { color: white; background-color: #1CCC69; } } .submitBox { text-align: center; .submit { width: 360rpx; margin-top: 60rpx; padding: 14rpx 0rpx; display: inline-block; background-color: #45B7FF; color: white; font-size: 42rpx; border-radius: 50rpx; } } } }