order-detail.wxss 3.2 KB

12345678910111213141516171819202122232425262728293031
  1. .order-modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; transform: translateY(100%); overflow-x: hidden; overflow-y: auto; }
  2. .order-modal .modal-bg { background: rgba(0, 0, 0, .5); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: 350ms; }
  3. .order-modal .modal-dialog{ background: #fff; width: 75vw; border-radius: 16rpx; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .1); opacity: .25; transform: translateY(50%); transition: 250ms; overflow: hidden; }
  4. .order-modal .modal-header{ text-align: center; padding: 40rpx 0; font-weight: 400; }
  5. .order-modal .modal-body{ }
  6. .order-modal .modal-footer{ border-top: 1rpx solid #eee; }
  7. .order-modal .modal-cancel, .order-modal .modal-confirm { background: #fff; font-weight: 11pt; font-family: inherit; height: 88rpx; line-height: 88rpx; padding: 0 0; text-align: center; border: none; border-radius: 0; color: #555; position: relative; }
  8. .order-modal .modal-confirm{ color: #ff4544; }
  9. .order-modal .modal-cancel:after, .order-modal .modal-confirm:after{ display: none; }
  10. .order-modal .modal-split { position: absolute; right: 0; top: 22rpx; height: 44rpx; width: 1rpx; background: #e3e3e3; }
  11. .order-modal .modal-footer .button-hover{ opacity: .75; background: #e3e3e3; }
  12. .order-modal.show{ transform: translateY(0%); }
  13. .order-modal.show .modal-bg{ opacity: 1; }
  14. .order-modal.show .modal-dialog{ transform: translateY(0%); opacity: 1; }
  15. .order-item-btn { display: inline-block; font-size: 9pt; height: 60rpx; line-height: 60rpx; padding: 0 24rpx; margin-left: 24rpx; border: 1rpx solid #ccc; color: #555; border-radius: 8rpx; background: #fff; margin-bottom: -10rpx; }
  16. .order-item-btn.button-hover{ opacity: .75; }
  17. .order-item-btn:after { display: none; }
  18. .order-tab{ }
  19. .order-tab .order-tab-item{ text-align: center; height: 88rpx; line-height: 88rpx; border-bottom: 1rpx solid #eee; }
  20. .order-tab .order-tab-item.active{ background: #ff4544; color: #fff; border-bottom-color: #ff4544; }
  21. .order-modal-btn{ height: 80rpx; line-height: 80rpx; padding: 0 32rpx; border: 1rpx solid #e2e2e2; border-radius: 16rpx; font-size: 11pt; margin: 0 0; }
  22. .order-modal-btn.active{ background: #ff4544; color: #fff; border-color: #ff4544; }
  23. .order-input{ height: 88rpx; line-height: 88rpx; padding: 0; border: none; border-bottom: 1rpx solid #e3e3e3; }
  24. .goods-name{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 32rpx; line-height: 36rpx; height: 72rpx; word-break: break-all; color: #888; margin-bottom: 12rpx; }
  25. .express-detail-list{}
  26. .express-detail-item{ position: relative; padding-left: 24rpx; font-size: 9pt; margin-bottom: 32rpx; }
  27. .express-detail-item::before{ position: absolute; left: -9rpx; top: 16rpx; content: " "; display: inline-block; width: 20rpx; height: 20rpx; border-radius: 999rpx; background: #ccc; z-index: 1; }
  28. .express-detail-item::after{ position: absolute; left: 0; top: 30rpx; bottom: -50rpx; content: " "; display: inline-block; width: 2rpx; background: #ccc; z-index: 0; }
  29. .express-detail-item:first-child::before{ background: #25ae5f; width: 20rpx; height: 20rpx; left: -13rpx; border: 5rpx solid #a5e2ad; }
  30. .express-detail-item:first-child{ color: #25ae5f; }
  31. .express-detail-item:last-child::after{ display: none; }