page { background-color: #fafafa; } .report { background-color: #fff; border-radius: 10rpx; box-shadow: 0 2px 8px 0 rgba(35,24,21,.1); box-sizing: border-box; margin: 20rpx auto; padding: 20rpx 30rpx; width: 710rpx; } .title { color: #333; font-size: 36rpx; margin-bottom: 20rpx; } .title text { color: red; } .row { background-color: #f2f1f6; border-radius: 10rpx; display: flex; flex-wrap: wrap; font-size: 32rpx; justify-content: space-between; margin-bottom: 15rpx; padding: 15rpx; } .row:last-child { margin-bottom: 0; } .row-name { border-right: 1px solid #9b9a9f; flex-shrink: 0; height: 40rpx; width: 200rpx; } .row-name text { color: red; } .row-main { flex-shrink: 0; text-align: right; width: 410rpx; word-break: break-all; } .submit { background: #fff; bottom: 0; display: flex; justify-content: space-between; left: 0; padding: 20rpx; position: fixed; right: 0; } .submit-btn { background-color: #118aff; border-radius: 10rpx; color: #fff; flex-shrink: 0; font-size: 36rpx; height: 80rpx; line-height: 80rpx; text-align: center; width: 32%; } .btn2 { background-color: #56b6de; } .btn3 { background-color: #d70715; } .file { background-color: #fff; box-shadow: 0 2px 8px 0 rgba(35,24,21,.1); box-sizing: border-box; margin: 0 auto 20rpx; padding: 20rpx 30rpx; width: 710rpx; } .file,.file-box { border-radius: 10rpx; } .file-box { background-color: #f2f1f6; margin-bottom: 20rpx; padding: 15rpx; } .file-box:last-child { margin-bottom: 0; } .file-title { font-size: 30rpx; } .file-title text { color: red; } .file-content { font-size: 0; margin-top: 10rpx; } .img-box1 { display: inline-block; height: 155rpx; margin-bottom: 10rpx; margin-right: 2%; overflow: hidden; text-align: center; vertical-align: top; width: 32%; } .img-box1 image { height: 100%; } .file-content image:nth-child(3n) { margin-right: 0; } .file-content textarea { font-size: 30rpx; height: 150rpx; width: 100%; } .upload-btn { border: 2px solid #333; border-radius: 10rpx; display: inline-block; font-size: 60rpx; height: 100rpx; line-height: 100rpx; text-align: center; vertical-align: top; width: 100rpx; } .voice-box { display: flex; justify-content: space-between; padding: 0; } .voice-box image { margin-top: -7rpx; vertical-align: middle; width: 35rpx; } .voice-title { font-size: 30rpx; line-height: 80rpx; margin-left: 15rpx; } .record-btn { background-color: #118aff; color: #fff; line-height: 80rpx; padding: 0 15rpx; } .delay,.record-btn { border-radius: 10rpx; } .delay { background-color: #fff; box-shadow: 0 2px 8px 0 rgba(35,24,21,.1); box-sizing: border-box; margin: 0 auto 20rpx; padding: 20rpx 30rpx; width: 710rpx; } .delay-box { background-color: #f2f1f6; padding: 20rpx; } .delay-content { background-color: #fff; border-radius: 10rpx; margin-bottom: 20rpx; padding: 20rpx; } .delay-content:last-child { margin-bottom: 0; } .delay-top { border-bottom: 1px dashed #eee; padding-bottom: 15rpx; } .delay-reason { color: #333; display: flex; font-size: 32rpx; justify-content: space-between; } .reason { line-height: 60rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 65%; } .delay-status { border-radius: 30rpx; padding: 10rpx 15rpx; } .status1 { background-color: #fce8e1; color: #ec0400; } .status2 { background-color: #e9f2ff; color: #0fa6ff; } .delay-text { color: #333; font-size: 30rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .delay-bottom { color: #0e89ff; font-size: 30rpx; margin-top: 10rpx; } .delay-bottom image { margin-top: -7rpx; vertical-align: middle; width: 40rpx; } .handle { background-color: #fff; border-radius: 10rpx; box-shadow: 0 2px 8px 0 rgba(35,24,21,.1); box-sizing: border-box; margin: 0 auto 130rpx; padding: 20rpx 30rpx; width: 710rpx; } .handle-box { background-color: #f2f1f6; border-radius: 10rpx; margin-bottom: 20rpx; padding: 15rpx; } .handle-box textarea { height: 150rpx; width: 100%; } .handle-img .upload-btn { flex-shrink: 0; height: 100rpx; vertical-align: top; width: 100rpx; } .img-box { display: inline-block; height: 100rpx; margin-right: 2%; position: relative; text-align: center; width: 32%; } .delete { height: 35rpx!important; position: absolute; right: -18rpx; top: -18rpx; width: 35rpx!important; } .img-box:nth-child(3n) { margin-right: 0; } .img-box image { height: 100rpx; width: 100%; } .map { margin-top: 10rpx; } .map,.map map { width: 100%; } .handle-btn { display: flex; justify-content: space-between; } .handle-btn-box { background-color: #f55054; border-radius: 10rpx; color: #fff; flex-shrink: 0; line-height: 60rpx; margin-right: 2%; text-align: center; width: 49%; } .handle-btn-box:last-child { margin-right: 0; } .video-box { position: relative; } .video-box video { width: 100%; }