这是微信小程序排课功能用来上传下载文件的页面你能帮我写一个好看的样式吗给出wxss文件view class=container view class=download wxif=index==0 bindtap=downloadExcel view class=tips请按实例文件格式填写排课所需信息包括空闲教室课程名称等view view下载示例文件view image

.container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 30rpx; }

.download { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20rpx; padding: 20rpx; border: 1rpx solid #ccc; border-radius: 10rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2); background-color: #f5f5f5; width: 80%; }

.tips { font-size: 26rpx; color: #666; margin-bottom: 20rpx; }

.download view { font-size: 30rpx; color: #007aff; margin-bottom: 10rpx; }

.download image { width: 80rpx; height: 80rpx; margin-top: 10rpx; }

.result { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20rpx; padding: 20rpx; border: 1rpx solid #ccc; border-radius: 10rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2); background-color: #f5f5f5; width: 80%; }

.result view { font-size: 30rpx; color: #666; margin-bottom: 10rpx; }

.result .download { margin-top: 20rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.upload { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 20rpx; padding: 20rpx; border: 1rpx solid #ccc; border-radius: 10rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2); background-color: #f5f5f5; width: 80%; }

.upload view { font-size: 30rpx; color: #007aff; margin-bottom: 10rpx; }

.upload image { width: 80rpx; height: 80rpx; margin-top: 10rpx; }

.schedule { margin-top: 30rpx; width: 80%; height: 100rpx; font-size: 36rpx; color: #fff; background-color: #007aff; border-radius: 10rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2); border: none; outline: none; cursor: pointer; }