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