这是一个微信小程序成绩录入的前端页面用来录入成绩你能帮我设计一个好看的样式吗给出wxss文件view class=container view class=picker-container picker mode=selector range=array bindchange=bindPickerChange view class=picker-text 成绩占比平

.container { display: flex; flex-direction: column; align-items: center; padding-top: 20rpx; }

.picker-container { width: 100%; padding: 20rpx; box-sizing: border-box; background-color: #fff; box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2); margin-bottom: 20rpx; }

.picker-text { font-size: 28rpx; color: #666; }

.info-container { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20rpx; box-sizing: border-box; background-color: #fff; box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2); margin-bottom: 20rpx; }

.info-container view { font-size: 28rpx; color: #666; }

.score-container { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20rpx; box-sizing: border-box; background-color: #fff; box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2); margin-bottom: 20rpx; }

.score-container view { font-size: 28rpx; color: #666; }

.score-input { width: 200rpx; height: 60rpx; font-size: 28rpx; color: #333; border: 1rpx solid #ccc; border-radius: 5rpx; padding: 10rpx; box-sizing: border-box; }

.btn-confirm { width: 120rpx; height: 60rpx; line-height: 60rpx; text-align: center; font-size: 28rpx; color: #fff; background-color: #4caf50; border-radius: 5rpx; margin-left: 20rpx; }

.btn-confirm:hover { background-color: #388e3c; }

.btn-confirm:active { background-color: #1b5e20; }