secondCard.css 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. .tab{line-height: 100rpx;font-size: 30rpx;color: #999;text-align: center;}
  2. .tab .li{width: 50%;position: relative;}
  3. .tab .li.active{color: #222;font-weight: bold;}
  4. .tab .li.active::after{content: '';display: block;width: 38rpx;height: 7rpx;background:var(--mina);border-radius: 4rpx;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}
  5. .dflex{align-items: center;}
  6. .list{padding: 31rpx 24rpx 20rpx;}
  7. .list .li{background: #fff;box-shadow: 0 0 32rpx rgba(0, 0, 0, 0.04);border-radius: 15rpx;padding: 0 22rpx;color: #999;margin-bottom: 24rpx;position: relative;}
  8. .info{border-bottom: 1rpx dashed #E9E9E9;padding: 20rpx 22rpx 29rpx 9rpx;position: relative;}
  9. .info::before,.info::after{content: '';display: block;width: 20rpx;height: 20rpx;background: #f6f6f6;border-radius: 50%;position: absolute;bottom: -10rpx;}
  10. .info::before{left: -34rpx;}
  11. .info::after{right: -34rpx;}
  12. .info .left-pic{width:80rpx;height: 80rpx;margin-right: 15rpx;}
  13. .info .left-pic image{width:100%;height: 100%;}
  14. .title{font-size: 32rpx;color: #222;font-weight: bold;}
  15. .time{font-size: 22rpx;margin-top: 15rpx;}
  16. .info-r{text-align: right;margin-left: 20rpx;width: 200rpx;}
  17. .money{font-size: 60rpx;color: #EB0000;}
  18. .money text{font-size: 30rpx;}
  19. .man{font-size: 22rpx;}
  20. .li-bot{padding: 15rpx 15rpx 15rpx 7rpx;height: 50rpx;}
  21. .check{font-size: 24rpx;color: #666;}
  22. .check image{width: 17rpx;height: 11rpx;margin-left: 8rpx;}
  23. .ma{width: 38rpx;height: 38rpx;margin-right: 60rpx;}
  24. .yong{width: 130rpx;height: 50rpx;background: linear-gradient(90deg, var(--mina) 0%, var(--submain) 100%);border-radius: 28rpx;font-size: 24rpx;color: #fff;justify-content: center;}
  25. .yong::after{content: '';display: block;width: 0;height: 0;border: 10rpx solid transparent;border-right: none;border-left-color: #fff;border-radius: 5rpx;margin-left: 8rpx;}
  26. .infos{font-size: 20rpx;padding: 15rpx 0 30rpx;}
  27. .infos view{padding: 5rpx 0;}
  28. .list .li.tong{background: #FF243D;color: #fff;}
  29. .list .li.tong .info{border-bottom-color: rgba(255,255,255,.3);}
  30. .list .li.tong .title,.list .li.tong .check,.list .li.tong .money{color: #fff;}
  31. .list .li.tong .yong{background: linear-gradient(90deg, #FFECD9 0%, #FFB164 100%);color: #D88636;}
  32. .list .li.tong .yong::after{border-left-color: #D88636;}
  33. .yi{width: 130rpx;}
  34. .yipic{width: 144rpx;height: 103rpx;position: absolute;right: 20rpx;bottom: 0;z-index: 2;}
  35. .list .li.hui{opacity: .7;}
  36. .i-pro text{margin-right: 20rpx;color: #333;}
  37. .detail-info{background: #fff;box-shadow: 0 0 32rpx rgba(0, 0, 0, 0.04);border-radius: 15rpx;padding: 0 22rpx;color: #999;margin-bottom: 24rpx;position: relative;}
  38. .detail-info-left{border-right: 1rpx dashed #E9E9E9;padding: 20rpx 22rpx 29rpx 22rpx;position: relative;text-align: center;}
  39. .detail-info-left::before{content: '';display: block;width: 20rpx;height: 20rpx;background: #f6f6f6;border-radius: 50%;position: absolute;right: -10rpx;top: -10rpx;}
  40. .detail-info-left::after{content: '';display: block;width: 20rpx;height: 20rpx;background: #f6f6f6;border-radius: 50%;position: absolute;right: -10rpx;bottom: -10rpx;}
  41. .detail-info-content{margin-left: 30rpx;}
  42. .detail-info-btn{margin-left: auto;}
  43. .detail-info-content image{width: 17rpx;height: 11rpx;margin-left: 8rpx;display: inline-block;vertical-align: middle;}
  44. .detail-infos{background: #fff;}
  45. .nopadding{padding: 0;}
  46. .ceng{position: fixed;left: 0;top: 0;right: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: 99;}
  47. .qrcode{position: fixed;background: #fff;width: 560rpx;border-radius: 15rpx;padding: 30rpx;box-sizing: border-box;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 100;text-align: center;}
  48. .code{font-size: 30rpx;color: #333;font-weight: bold;padding: 30rpx 0 50rpx;justify-content: center;border-top: 1rpx dashed #e9e9e9;}
  49. .code text{color: var(--mina);}
  50. .copy{font-size: 24rpx;color: #999;border: 1rpx solid #e9e9e9;border-radius: 20rpx;height: 40rpx;line-height: 40rpx;width: 100rpx;margin-left: 15rpx;font-weight: normal;}
  51. .qr-code{justify-content: center;padding: 50rpx 0;}
  52. .close{position: absolute;left: 50%;transform: translateX(-50%);bottom: -90rpx;width: 60rpx;height: 60rpx;}