.container{ height: 100vh; } .content{ flex: 1; overflow: auto; padding-bottom: 32rpx; } .card-box{ background-color: #fff; border-radius: 28rpx; margin: 40rpx 32rpx; } .first-card{ margin: 32rpx 32rpx 40rpx; } .card-top{ display: flex; position: relative; height: 176.78rpx; } .card-title-box{ padding: 30rpx 0 0 32rpx; } .card-title{ font-weight: 600; font-size: 32rpx; color: #000000; line-height: 44rpx; margin-bottom: 10rpx; } .card-time{ font-weight: 400; font-size: 24rpx; color: #B0B0B0; line-height: 34rpx; } .card-img{ width: 176.78rpx; height: 176.78rpx; position: absolute; top: 0; right: 0; } .cell-item{ position: relative; width: 154rpx; display: flex; flex-direction: column; align-items: flex-end; } .cell-bg{ margin-top: -20rpx; width: 154rpx; height: 30rpx; background: linear-gradient( 270deg, rgba(255,230,0,0) 0%, #FFC800 100%); opacity: 0.26; } .cell-img{ width: 112rpx; height: 40rpx; margin-right: 10rpx; } .cell-text{ margin: 20rpx 32rpx 34rpx; font-weight: 400; font-size: 28rpx; color: #000000; line-height: 40rpx; } .loading{ color: #969799; font-size:24rpx; text-align: center; padding-bottom: 32rpx; } .uploader{ padding: 18rpx 32rpx 124rpx; } .preview-wrap{ position: relative; display: flex; width: 160rpx; } .preview-wrap-pdf{ display: flex; } .preview-img{ width: 160rpx; height: 160rpx; } .delete-btn{ position: absolute; right: 0; top: 0; background: rgba(0,0,0,0.6); border-radius: 0 0 0 12px; width:28rpx; height: 28rpx; } .delete-btn-pdf{ margin-left: 20rpx; } .delete-btn-icon{ position: absolute; top: -2px; right: -2px; transform: scale(0.5); } .uploader-text{ width: 328rpx; height: 190rpx; background: #F3F3F3; border-radius: 16rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 400; font-size: 28rpx; color: #4A4A4A; line-height: 40rpx; } .uploader-img{ width: 48rpx; height: 42.85rpx; margin-bottom: 20rpx; }