page{ background: #f2f1f6; } .case{ width: 710rpx; margin: 20rpx auto; padding: 20rpx; box-sizing: border-box; background: #fff; border-radius: 10rpx; } .case-info{ margin-bottom: 15rpx; } .title-status{ display: flex; justify-content: space-between; margin-bottom: 10rpx; } .title{ font-size: 36rpx; line-height: 60rpx; display: inline-block; max-width: 65%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #06a3f6; } .status{ line-height: 60rpx; display: inline-block; padding: 0 30rpx; background: #fff7ec; color: #fdc36e; border-radius: 30rpx; } .status.green{ color: #2dfe2e; background: rgba(45,254,46,0.1) } .status.red{ color: red; background: rgba(255,0,0,0.1) } .row{ border-bottom: 1px dashed #EEE; font-size: 32rpx; color: #888; line-height: 60rpx; } .photo{ margin: 50rpx 0; } .photo image{ width: 140rpx; height: 140rpx; margin-right: 10rpx; margin-bottom: 10rpx; } .position{ font-size: 36rpx; color: #06a3f6; margin-bottom: 10rpx; } .map-box map{ width: 100%; height: 400rpx; } .process{ width: 100%; height: 80rpx; display: flex; justify-content: center; align-items: center; border-radius: 10rpx; background: #06a3f6; color: #fff; font-size: 30rpx; margin-top: 15rpx; }