.discharge-settlement-detail { padding-bottom: 200rpx; background-color: #F5F5F5; position: relative; } .discharge-settlement-detail .header { width: 100%; } .discharge-settlement-detail .headertitle { display: flex; align-items: center; height: 84rpx; color: #ff6010; padding-left: 24rpx; font-size: 30rpx; background-color: #FFF9ED; } .discharge-settlement-detail .headertitle .logo { width: 40rpx; height: 40rpx; margin-right: 6rpx; } .discharge-settlement-detail .headertitle .overhiddenheadertitle { overflow: hidden; } .discharge-settlement-detail .headertitle .animation { white-space: nowrap; } .discharge-settlement-detail .detail-block { position: relative; margin: 16rpx 24rpx 24rpx; padding: 30rpx; background-color: #fff; border-radius: 16rpx; } .discharge-settlement-detail .detail-block .person-name { padding-bottom: 16px; border-bottom: 1px solid #eee; } .discharge-settlement-detail .detail-table-title { display: flex; margin-top: 32rpx; color: #999; } .discharge-settlement-detail .detail-table-data { display: flex; margin-top: 40rpx; color: #333; } .discharge-settlement-detail .detail-table { display: table; width: 100%; } .discharge-settlement-detail .detail-table-title-1 { width: 40%; text-align: left; } .discharge-settlement-detail .detail-table-title-2 { width: 20%; text-align: center; } .discharge-settlement-detail .detail-table-title-3 { width: 20%; text-align: center; } .discharge-settlement-detail .detail-table-title-4 { width: 20%; text-align: center; } .discharge-settlement-detail .settlement-total { margin: 24rpx; padding: 24rpx; background-color: #fff; display: flex; justify-content: center; flex-direction: column; align-items: center; border-radius: 16rpx; } .discharge-settlement-detail .settlement-total .title { margin: 24rpx 0; color: #333; font-weight: 400; font-size: 30rpx; } .discharge-settlement-detail .settlement-total .price { color: #FF6430; font-size: 64rpx; letter-spacing: 0.21px; font-weight: 900; } .discharge-settlement-detail .settlement-total .price .price-money { font-size: 48rpx; margin: 6rpx; } .discharge-settlement-detail .settlement-total .triangle { margin-top: 16rpx; width: 0; height: 0; border-left: 20rpx solid transparent; border-right: 20rpx solid transparent; border-bottom: 20rpx solid #f5f5f5; } .discharge-settlement-detail .settlement-total .reason { margin-top: 24rpx; color: #999; font-weight: 400; font-size: 24rpx; } .discharge-settlement-detail .settlement-total .detail { background-color: #F5F5F5; padding: 16rpx; border-radius: 8rpx; width: 100%; box-sizing: border-box; } .discharge-settlement-detail .settlement-total .detail .tips { margin-top: 24rpx; margin-right: 18rpx; margin-bottom: 10rpx; color: #FF6430; font-weight: 400; font-size: 24rpx; text-align: right; } .discharge-settlement-detail .settlement-total .detail .detail-price { display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; padding-top: 24rpx; } .discharge-settlement-detail .settlement-total .detail .detail-price .label { color: #666; font-weight: 400; font-size: 30rpx; } .discharge-settlement-detail .settlement-total .detail .detail-price .value { display: inline-block; height: 18rpx; color: #333; font-weight: 500; font-size: 30rpx; line-height: 18rpx; } .discharge-settlement-detail .settlement-total .detail .detail-price .value .items { padding-right: 6rpx; } .discharge-settlement-detail .settlement-total .detail .detail-price:nth-child(2) { padding-top: 24rpx; padding-bottom: 24rpx; border-bottom: 1px dashed #A6A6A6; } .discharge-settlement-detail .discharge-settlement-bottom { position: fixed; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 146rpx; padding-bottom: env(safe-area-inset-bottom); background: white; } .discharge-settlement-detail .discharge-settlement-bottom .settlement-button { display: flex; align-items: center; justify-content: center; width: 702rpx; height: 98rpx; color: white; font-size: 36rpx; background-color: #1677FF; }