.container { position: relative; } .exam-bg { position: absolute; left: 0; top: 0; } .page-bg { position: absolute; left: 50%; top: 70rpx; transform: translate(-50%); } .top { position: absolute; left: 50%; top: 30rpx; transform: translate(-50%); width: 161rpx; height: 161rpx; background: #FFFFFF; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .logo { width: 124rpx; height: 124rpx; background: linear-gradient(0deg, #FF4330 0%, #FF7B60 100%); border-radius: 50%; border: 8rpx solid #FFCDC6; border-radius: 50%; display: flex; align-items: center; flex-direction: column; justify-content: center; } .score { line-height: 50rpx; font-size: 50rpx; color: #FFFFFF; } .unit { font-size: 21rpx; color: #FFFFFF; } .content { position: absolute; width: 580rpx; left: 50%; top: 150rpx; transform: translate(-50%); } .title { padding-left: 15rpx; } .card-container { height: 70vh; overflow: hidden; overflow-y: scroll; } .card-container::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } .card { margin-bottom: 20rpx; background: rgba(255, 173, 156, 0.1); border-radius: 7rpx; padding: 20rpx 40rpx 30rpx 15rpx; display: flex; } .no { line-height: 34rpx; width: 34rpx; height: 34rpx; border: 1rpx solid #999999; border-radius: 50%; display: flex; justify-content: center; align-items: centere; font-size: 21rpx; color: #666666; } .card-content { flex: 1; margin-left: 15rpx; display: flex; flex-direction: column; } .question { font-size: 25rpx; color: #333333; } .answer { margin-top: 20rpx; display: flex; } .answer-key { flex-shrink: 0; margin-right: 10rpx; font-size: 21rpx; color: #333333; } .answer-ok { font-size: 21rpx; color: #00B627; } .answer-my { font-size: 21rpx; color: #EB3F33; }