.page { padding: 24rpx; .detail-card { padding-bottom: 16rpx; position: relative; border-radius: 16rpx 16rpx 16rpx 16rpx; border: 2rpx solid #ffffff; background: linear-gradient(180deg, #f1feff 0%, #ffffff 35%, #ffffff 100%); .li-header { padding: 32rpx 32rpx 0 16rpx; display: flex; justify-content: space-between; &::before { flex-shrink: 0; content: ''; width: 10rpx; height: 40rpx; background: #00b4c5; border-radius: 0rpx 0rpx 0rpx 0rpx; } .wrap { flex: 1; padding-left: 22rpx; display: flex; flex-wrap: wrap; gap: 24rpx; .id { font-size: 28rpx; color: rgba(20, 21, 21, 1); } .status { font-size: 28rpx; &.status1 { color: rgba(0, 180, 197, 1); } &.status2 { color: rgba(247, 121, 0, 1); } &.status3 { color: rgba(153, 153, 153, 1); } } } .fold { flex-shrink: 0; display: flex; align-items: center; font-size: 28rpx; color: rgba(153, 153, 153, 1); .icon { width: 32rpx; height: 32rpx; } } } .li-row { padding: 16rpx 32rpx; display: flex; line-height: 32rpx; .label { flex-shrink: 0; font-size: 28rpx; color: rgba(153, 153, 153, 1); width: 5em; } .content { font-size: 28rpx; color: rgba(20, 21, 21, 1); .line { color: rgba(205, 205, 205, 1); } .new { margin-right: 12rpx; display: inline-block; padding: 0 8rpx; font-size: 24rpx; color: #fff; background: linear-gradient(177deg, #f77900 0%, #ed4f39 88%); border-radius: 0rpx 8rpx 0rpx 8rpx; } .reject { padding: 0 8rpx; display: inline-block; font-size: 24rpx; color: rgba(153, 153, 153, 1); line-height: 32rpx; border: 1px solid rgba(224, 224, 224, 1); border-radius: 4rpx; } } .tags { display: flex; gap: 12rpx; .tag { padding: 2rpx 8rpx; font-size: 22rpx; color: rgba(0, 180, 197, 1); line-height: 32rpx; border: 1rpx solid #bfeff4; border-radius: 4rpx; } } } .photos { padding: 16rpx 32rpx; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12rpx; .photo { width: 100%; height: 148rpx; border-radius: 8rpx; } } } }