express.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <style>
  6. .package-status{padding:18px 0 0 0}
  7. .package-status .status-list{margin:0;padding:0;margin-top:-5px;padding-left:8px;list-style:none;}
  8. .package-status .status-list li{border-left:2px solid #d9d9d9;text-align:left;}
  9. .package-status .status-list li:before{ /* 流程点的样式 */
  10. content:'';
  11. border:3px solid #f3f3f3;
  12. background-color:#d9d9d9;
  13. display:inline-block;
  14. width:10px;
  15. height:10px;
  16. border-radius:10px;
  17. margin-left:-9px;
  18. margin-right:10px
  19. }
  20. .package-status .status-list .latest:before{background-color:#0dad12;border-color:#f8e9e4;}
  21. .package-status .status-box{overflow:hidden}
  22. .package-status .status-list li{height:auto;}
  23. .package-status .status-list{margin-top:-8px}
  24. .package-status .status-box{position:relative}
  25. .package-status .status-box:before{content:" ";background-color:#f3f3f3;display:block;position:absolute;top:-8px;left:20px;width:10px;height:4px}
  26. .package-status .status-list{margin-top:0px;}
  27. /* .package-status .status-list .latest{border:none} */
  28. /* .package-status .status-list li{margin-bottom:-2px} */
  29. .status-list li:not(:first-child){
  30. padding-top:10px;
  31. }
  32. .status-content-before{
  33. text-align:left;
  34. margin-left:25px;
  35. margin-top:-20px;
  36. }
  37. .status-content-latest{
  38. text-align:left;
  39. margin-left:25px;
  40. color:green;
  41. margin-top:-20px;
  42. }
  43. .status-time-before{
  44. text-align:left;
  45. margin-left:25px;
  46. font-size:10px;
  47. margin-top:5px;
  48. }
  49. .status-time-latest{
  50. text-align:left;
  51. margin-left:25px;
  52. color:green;
  53. font-size:10px;
  54. margin-top:5px;
  55. }
  56. .status-line{
  57. border-bottom:1px solid #ccc;
  58. margin-left:25px;
  59. margin-top:10px;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <div class="modal-dialog">
  65. <div class="modal-content">
  66. <div class="modal-header">
  67. <button data-dismiss="modal" class="close" type="button">×</button>
  68. <h4 class="modal-title">快递信息</h4>
  69. </div>
  70. <?php if($code == 2){ ?>
  71. <div style="padding-top: 10px;padding-left: 30px;font-size:16px;color:red;">{$reason}</div>
  72. <?php }?>
  73. <div class="package-status">
  74. </div>
  75. <div class="package-status">
  76. <div class="status-box" >
  77. <?php foreach( $list as $item ){ ?>
  78. <ul class="status-list">
  79. <li style="padding-top: 10px;">
  80. <div></div>
  81. <div class="status-content-before">{$item['AcceptStation']}</div>
  82. <div class="status-time-before">{$item['AcceptTime']}</div>
  83. <div class="status-line"></div>
  84. </li>
  85. </ul>
  86. <?php } ?>
  87. <li style="padding-top: 10px;"></li>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </body>
  93. </html>