.container{ padding: 0; margin: 0; } .task-view{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 700rpx; margin: 0 auto; } .task-title{ font-size: 32rpx; font-weight: 600; width: 450rpx; height: 60rpx; line-height: 60rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .task-time{ width: 250rpx; height: 60rpx; line-height: 60rpx; font-size: 28rpx; text-align: right; } .task-class{ color: #999; line-height: 60rpx; height: 60rpx; } .my-task{ width: 700rpx; margin: 25rpx; } .my-task .title{ height: 60rpx; line-height: 60rpx; } .textarea{ margin-top: 20rpx; } .textarea textarea{ width: 650rpx; padding: 20rpx 25rpx; height: 260rpx; box-shadow: 0 10rpx 10rpx #ccc; } .wordNum{ font-size: 24rpx; color: #999; text-align: right; margin-right: 25rpx; height: 60rpx; line-height: 60rpx; } .uploadImg-task-view{ display: grid; justify-content: space-between; grid-template-columns: repeat(auto-fill, 140rpx); grid-gap: auto; width: 650rpx; margin: 0 auto; border-bottom: 1px dashed #ccc; padding-bottom: 40rpx; margin-bottom: 40rpx; } .new-task-img{ width: 139rpx; height: 139rpx; border: 1rpx dashed #ccc; } .my-img-view{ position: relative; margin: 20rpx 0 20rpx; } .del-btn{ position: absolute; width: 40rpx; height: 40rpx; line-height: 40rpx; z-index: 2; background: #cc6031; color: #FFF; text-align: center; font-weight: 600; border-radius: 50rpx; top: -20rpx; left: -20rpx; border: 8rpx solid #FFF; } .new-task-img image{ width: 100%; height: 100%; } .upload-btn image{ height: 40rpx; width: 40rpx; } .upload-btn{ width: 139rpx; height: 139rpx; border: 1rpx dashed #ccc; text-align: center; background: #f8f8f8; margin: 20rpx 0 20rpx; color: #999; font-size: 22rpx; line-height: 36rpx; } .audio-list { display: grid; justify-content: space-between; grid-template-columns: repeat(auto-fill, 130rpx); grid-gap: auto; height: 180rpx; width: 600rpx; margin: 0 auto 20rpx; } .audio-box{ position: relative; } .audio-box .del-btn{ width: 30rpx ; height: 30rpx ; line-height: 30rpx ; font-size: 24rpx; top: -2rpx ; } .audio-list image { height: 30rpx; width: 50rpx; border: 1px solid #eee; box-shadow: 0 0 20rpx #ccc; padding: 10rpx; margin-top: 20rpx; padding: 0 25rpx; border-radius: 10rpx; margin-bottom: 20rpx; } .record-img{ padding: 20rpx; border: 1px solid #CCC; height: 60rpx; width: 60rpx; border-radius: 50rpx; position: relative; left: 50%; margin-left: -50rpx; z-index: 2; } .record-view{ text-align: center; position: relative; } .record-img image{ height: 100%; width: 100%; } .close-talk{ height: 80rpx; line-height: 80rpx; margin-bottom: 40rpx; } .record-bg { width: 100rpx; height: 100rpx; border-radius: 50%; left: 50%; position: absolute; margin-left: -50rpx; top: 1rpx; animation: pulse 2s infinite; z-index: 1; } @keyframes pulse { 0% { box-shadow: 0 0 4px 3px #fff; } 50% { box-shadow: 0 0 4px 3px #cc6031; } 100% { box-shadow: 0 0 4px 3px #fff; } } .curTalkStyle{ border-color: #cc6031; }