movable-area{ height: 100%; width: 100%; } movable-view{ background: lightgrey; opacity: .6; width: 130px; height: 200px; font-size: 10px; } .close{ position: fixed; right: 0; top: 0; } .message-list{ height: 175px; width: 130px; } .message-footer{ position: fixed; bottom: 0; width: 100%; border-color: gray; border-top: 1rpx solid; } .message{ padding-left: 4px; } .send-message{ align-self: center; color: green; position: absolute; right:0; } .send-message:hover{ opacity: 0.6; } .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; } .class-setting{ left: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; } .no-student-view{ vertical-align: center; align-items: center; align-self: center; } text.no-student{ font-size: 16px; margin-top: 32rpx; } image.no-student{ margin-top: 120rpx; height: 160rpx; width: 180rpx; }