.grid-celll { margin-left:auto; margin-right:auto; text-align: center; width:230rpx; display: flex; flex-direction: column; flex-wrap: wrap; } .grid-cell { padding: 30rpx 0; border-bottom: 1rpx solid #eee; position: relative; } .bla { color:black; } .reed { color: red; position: absolute; right: 3rpx; top: 50%; height: 40rpx; line-height: 40rpx; margin-top: -20rpx; } .gre { color: greenyellow; position: absolute; right: 3rpx; top: 50%; height: 40rpx; line-height: 40rpx; margin-top: -20rpx; } .index { font-family: 'PingFang SC'; } .sco { margin: 20rpx 50rpx; } .student-list{ display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; } .student{ flex: 0 0 auto; width: 23%; text-align: center; color: #797979; padding: 40rpx 0; font-size: 30rpx; } .present{ color: green; } .selectable:hover{ border-style: inset; border-color: green; opacity: .6; } .tappable{ color: #1aad19; padding: 0 12px; position: absolute; } .class-detail{ right: 0; } button{ margin: 10px 36px; } .footer { position: fixed; bottom: 0; height: 44px; width: 100%; line-height: 44px; color: #666; border-top: 1px solid #eee; font-size: 16px; text-align: center; } .white{ background: white; }