logisticsDetails.jsp 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ include file="/WEB-INF/views/include/taglib.jsp"%>
  3. <html>
  4. <head>
  5. <title>订单列表</title>
  6. <meta name="decorator" content="default"/>
  7. <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
  8. <style type="text/css">
  9. *{margin: 0;padding: 0}
  10. a{list-style: none;text-decoration: none}
  11. i{font-style: normal}
  12. body{background-color: rgb(255,255,255);}
  13. h3{line-height: 20px;padding:20px 0 20px 15px; border-bottom: 1px solid #CCCCCC;font-weight: normal}
  14. .body-margin{margin:0 26px 30px;}
  15. .left-span{width: 3px;height: 20px;margin-right:10px;background-color: #00A6C7;display: inline-block;vertical-align: bottom}
  16. .bj{position: fixed;width: 100%;height: 100%;bottom: 0;top:0;left: 0;z-index: 99;}
  17. .shop-info{margin-top: 20px;box-shadow: 0 0 15px #ccc;padding: 20px;}
  18. .shop-title{ color: #000;border-bottom: 1px solid #ccc;padding: 20px;margin-bottom: 20px;}
  19. .table{width: 100%;border-collapse: collapse;}
  20. .table th{color: #000;font-weight: normal}
  21. .table th,.table td{width: 25%;height: 35px;padding: 5px 0;}
  22. .table td img{width: 60px;height: 60px;vertical-align: middle}
  23. input::-webkit-input-placeholder {text-align: center}
  24. .lg-company{margin-top: 20px;font-size: 14px;}
  25. .lg-company label{margin-right: 7px;}
  26. .lg-company span{}
  27. .detail-list{margin: 15px;position: relative}
  28. .detail-list h3{margin-bottom: 15px;}
  29. .detail-p{height: 90px;overflow: hidden}
  30. .detail-p p{margin-bottom: 10px;font-size: 14px;}
  31. .expand{position: absolute;right: 0;bottom: 0;font-size: 14px;padding: 15px;cursor: pointer}
  32. </style>
  33. <script type="text/javascript">
  34. window.onload = function () {
  35. var expand_ = document.getElementsByClassName('expand');
  36. var flag = true;
  37. for(var i=0;i<expand_.length;i++){
  38. expand_[i].onclick = function () {
  39. var deta_ = this.parentNode.getElementsByClassName('detail-p');
  40. if(flag){
  41. deta_[0].style.cssText = 'height:auto';
  42. this.innerHTML='收起';
  43. flag = false;
  44. }else {
  45. console.log(1111)
  46. deta_[0].style.cssText = 'height:90px';
  47. this.innerHTML='展开';
  48. flag = true
  49. }
  50. console.log(flag)
  51. }
  52. }
  53. }
  54. </script>
  55. </head>
  56. <body>
  57. <div class="bj" style="display: none"></div>
  58. <div class="body-margin">
  59. <h3><span class="left-span"></span>订单列表--物流详情</h3>
  60. <div class="shop-info">
  61. <table class="table">
  62. <tr>
  63. <td><img src="123.jpg"><span>12121asd</span></td>
  64. <td>购买数量:<span>2</span></td>
  65. <td>发货数量:<span>2</span></td>
  66. </tr>
  67. </table>
  68. <div class="more-order">
  69. <div class="lg-company">
  70. <label>物流公司:</label>
  71. <span>顺丰快递</span>
  72. </div>
  73. <div class="lg-company">
  74. <label>物流单号:</label>
  75. <span>121231255</span>
  76. </div>
  77. <div class="detail-list">
  78. <h3>物流详情</h3>
  79. <div class="detail-p">
  80. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  81. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  82. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  83. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  84. </div>
  85. <span class="expand">展开</span>
  86. </div>
  87. </div>
  88. <div class="more-order">
  89. <div class="lg-company">
  90. <label>物流公司:</label>
  91. <span>顺丰快递</span>
  92. </div>
  93. <div class="lg-company">
  94. <label>物流单号:</label>
  95. <span>121231255</span>
  96. </div>
  97. <div class="detail-list">
  98. <h3>物流详情</h3>
  99. <div class="detail-p">
  100. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  101. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  102. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  103. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  104. </div>
  105. <span class="expand">展开</span>
  106. </div>
  107. </div>
  108. </div>
  109. <div class="shop-info">
  110. <table class="table">
  111. <tr>
  112. <td><img src="123.jpg"><span>12121asd</span></td>
  113. <td>购买数量:<span>2</span></td>
  114. <td>发货数量:<span>2</span></td>
  115. </tr>
  116. </table>
  117. <div class="lg-company">
  118. <label>物流公司:</label>
  119. <span>顺丰快递</span>
  120. </div>
  121. <div class="detail-list">
  122. <h3>物流详情</h3>
  123. <div class="detail-p">
  124. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  125. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  126. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  127. <p>打开的金卡手机登录哭撒就觉得来客算</p>
  128. </div>
  129. <span class="expand">展开</span>
  130. </div>
  131. </div>
  132. </div>
  133. </body>
  134. </html>