tmsDetails.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7. <title>Hello APP</title>
  8. <link rel="stylesheet" type="text/css" href="../../../../../css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="../../../../../css/aui-win.css" />
  10. <link rel="stylesheet" type="text/css" href="../../../../../css/css/vant-ui.css" />
  11. <link rel="stylesheet" type="text/css" href="../../../../../css/css/iconfont.css">
  12. <script src="../../../../../script/js/vue.js"></script>
  13. <script src="../../../../../script/js/vant-ui.js"></script>
  14. <script src="../../../../../script/js/auto-size.js"></script>
  15. <style>
  16. .flex{
  17. display: flex;
  18. }
  19. #aui-header{
  20. background: linear-gradient(to right,#1474E4,#14A7E4);
  21. justify-content: space-between;
  22. align-items: center;
  23. }
  24. #scrollcontaier{
  25. overflow-y: auto;
  26. }
  27. .aui-btn-info{
  28. border: 0
  29. }
  30. .title{
  31. padding: 10px 12px;
  32. color: #ffffff;
  33. }
  34. .image-item{
  35. align-items: center;
  36. }
  37. .image-icon{
  38. width: .66rem;
  39. height: .66rem;
  40. margin-right: 19px;
  41. }
  42. .image-icon1{
  43. width: .44rem;
  44. height: .44rem;
  45. margin-right: 6px;
  46. vertical-align: middle;
  47. }
  48. img{
  49. width: 100%;
  50. height: 100%;
  51. }
  52. .nav{
  53. width: 10.1rem;
  54. height: 1.44rem;
  55. margin: .28rem auto 0;
  56. justify-content: space-between;
  57. align-items: center;
  58. background: url("../../../../../image/icon/hedui.png") no-repeat 0 0;
  59. background-size: 100% auto;
  60. }
  61. .details-container{
  62. margin-top: .4rem;
  63. }
  64. .details-btn{
  65. height: .96rem;
  66. line-height: .96rem;
  67. padding: 0 .38rem;
  68. border-radius: 0.08rem;
  69. background: #1474E4;
  70. color: #ffffff;
  71. margin-right: .24rem;
  72. }
  73. .details-wrap{
  74. box-sizing: border-box;
  75. width: 10.1rem;
  76. background: #ffffff;
  77. margin: 0.36rem auto 0;
  78. border-radius: 0.08rem;
  79. padding: .4rem;
  80. margin-bottom: .4rem;
  81. }
  82. .details-title{
  83. font-size: .42rem;
  84. font-weight: bold;
  85. color: #282828;
  86. }
  87. .details-item{
  88. background: #EEF2F7;
  89. padding: .32rem;
  90. margin-bottom: .32rem;
  91. border-radius: 8px;
  92. color: #595959;
  93. }
  94. .details-item-text{
  95. color: #282828;
  96. }
  97. .row-item{
  98. margin-bottom: .10rem;
  99. }
  100. .confirm-btn{
  101. background: linear-gradient(to right, #1474E4, #14BFE4);
  102. /*padding: 0 1.18rem;*/
  103. height: .96rem;
  104. width: 10.1rem;
  105. line-height: .96rem;
  106. border-radius: .48rem;
  107. color: #ffffff;
  108. font-size: .42rem;
  109. text-align: center;
  110. margin: .42rem auto;
  111. }
  112. footer{
  113. box-sizing: border-box;
  114. width: 100%;
  115. padding: .24rem;
  116. background: #ffffff;
  117. box-shadow: 5px 2px 18px 0px rgba(6, 0, 1, 0.24);
  118. }
  119. .count-container{
  120. justify-content: space-around;
  121. align-items: center;
  122. }
  123. .count-item{
  124. width: 50%;
  125. text-align: left;
  126. justify-content: flex-start;;
  127. align-items: center;
  128. }
  129. .count-item:nth-of-type(1){
  130. border-right: 1px solid #EEEEEE;
  131. }
  132. .count-item span{
  133. color: #282828;
  134. font-size: .5rem;
  135. font-weight: bold;
  136. }
  137. .count-item-image{
  138. width:.89rem;
  139. height: .89rem;
  140. margin-right: .3rem;
  141. margin-left: .3rem;
  142. }
  143. .count-item-image image{
  144. width: 100%;
  145. height: 100%;
  146. }
  147. </style>
  148. </head>
  149. <style>
  150. </style>
  151. <body>
  152. <div id="app">
  153. <header class="flex flex-between" id="aui-header">
  154. <a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span class="aui-iconfont aui-icon-left"></span> </a>
  155. <div class="title">签收</div>
  156. <div class="image-icon"><img src="../../../../../image/icon/zhiyinshuoming.png" alt=""></div>
  157. </header>
  158. <div id="scrollcontaier" ref="scrollcontaier">
  159. <div class="details-wrap">
  160. <div class="details-title">天津市天赐轮胎有限公司</div>
  161. <van-divider ></van-divider>
  162. <div class="details-container">
  163. <div class="details-item">
  164. <van-row>物料规格:<span class="details-item-text">195/50R15 82V SH16BGSL ZT</span></van-row>
  165. <van-row>
  166. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiaoshu.png" alt=""></span><span>200条</span></van-col>
  167. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/zhongliang.png" alt=""></span><span>200条</span></van-col>
  168. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiji.png" alt=""></span><span>200条</span></van-col>
  169. </van-row>
  170. </div>
  171. <div class="details-item">
  172. <van-row>物料规格:<span class="details-item-text">195/50R15 82V SH16BGSL ZT</span></van-row>
  173. <van-row>
  174. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiaoshu.png" alt=""></span><span>200条</span></van-col>
  175. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/zhongliang.png" alt=""></span><span>200条</span></van-col>
  176. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiji.png" alt=""></span><span>200条</span></van-col>
  177. </van-row>
  178. </div>
  179. </div>
  180. <van-row class="show-btn-container" type="flex" justify="center">
  181. <van-col class="image-item flex" span="8" offset="6"><span class="image-icon1"><img src="../../../../../image/icon/zhankai.png" style="transform: rotateX(180deg)" alt=""></span><span>收缩</span></van-col>
  182. <!-- <van-col class="image-item flex" span="8" offset="6"><span class="image-icon1"><img src="../../../../../image/icon/zhankai.png" alt=""></span><span>展开</span></van-col> -->
  183. </van-row>
  184. <van-divider ></van-divider>
  185. <div class="row-item">装运凭证:0800001209</div>
  186. <div class="row-item">装运凭证:0800001209</div>
  187. <van-divider ></van-divider>
  188. <van-row class="confirm-btn-container" type="flex" justify="center">
  189. <van-col class="image-item flex" span="8" offset="6"><span class="image-icon1"><img src="../../../../../image/icon/yiqueren.png" alt=""></span><span>已确认</span></van-col>
  190. <!-- <van-col class="image-item flex" span="8" offset="6"><span class="confirm-btn">确认</span></van-col> -->
  191. </van-row>
  192. </div>
  193. <div class="details-wrap">
  194. <div class="details-title">天津市天赐轮胎有限公司</div>
  195. <van-divider ></van-divider>
  196. <div class="details-container">
  197. <div class="details-item">
  198. <van-row>物料规格:<span class="details-item-text">195/50R15 82V SH16BGSL ZT</span></van-row>
  199. <van-row>
  200. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiaoshu.png" alt=""></span><span>200条</span></van-col>
  201. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/zhongliang.png" alt=""></span><span>200条</span></van-col>
  202. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiji.png" alt=""></span><span>200条</span></van-col>
  203. </van-row>
  204. </div>
  205. <div class="details-item">
  206. <van-row>物料规格:<span class="details-item-text">195/50R15 82V SH16BGSL ZT</span></van-row>
  207. <van-row>
  208. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiaoshu.png" alt=""></span><span>200条</span></van-col>
  209. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/zhongliang.png" alt=""></span><span>200条</span></van-col>
  210. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiji.png" alt=""></span><span>200条</span></van-col>
  211. </van-row>
  212. </div>
  213. </div>
  214. <van-row class="show-btn-container" type="flex" justify="center">
  215. <van-col class="image-item flex" span="8" offset="6"><span class="image-icon1"><img src="../../../../../image/icon/zhankai.png" style="transform: rotateX(180deg)" alt=""></span><span>收缩</span></van-col>
  216. <!-- <van-col class="image-item flex" span="8" offset="6"><span class="image-icon1"><img src="../../../../../image/icon/zhankai.png" alt=""></span><span>展开</span></van-col> -->
  217. </van-row>
  218. <van-divider ></van-divider>
  219. <div class="row-item">装运凭证:0800001209</div>
  220. <div class="row-item">装运凭证:0800001209</div>
  221. <van-divider ></van-divider>
  222. <van-row class="confirm-btn-container" type="flex" justify="center">
  223. <van-col class="image-item flex" span="8" offset="6"><span class="image-icon1"><img src="../../../../../image/icon/yiqueren.png" alt=""></span><span>已确认</span></van-col>
  224. <!-- <van-col class="image-item flex" span="8" offset="6"><span class="confirm-btn">确认</span></van-col> -->
  225. </van-row>
  226. </div>
  227. <div class="details-wrap">
  228. <div class="details-title">天津市天赐轮胎有限公司</div>
  229. <van-divider ></van-divider>
  230. <div class="details-container">
  231. <div class="details-item">
  232. <van-row>物料规格:<span class="details-item-text">195/50R15 82V SH16BGSL ZT</span></van-row>
  233. <van-row>
  234. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiaoshu.png" alt=""></span><span>200条</span></van-col>
  235. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/zhongliang.png" alt=""></span><span>200条</span></van-col>
  236. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiji.png" alt=""></span><span>200条</span></van-col>
  237. </van-row>
  238. </div>
  239. <div class="details-item">
  240. <van-row>物料规格:<span class="details-item-text">195/50R15 82V SH16BGSL ZT</span></van-row>
  241. <van-row>
  242. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiaoshu.png" alt=""></span><span>200条</span></van-col>
  243. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/zhongliang.png" alt=""></span><span>200条</span></van-col>
  244. <van-col span="8" class="image-item flex"><span class="image-icon1"><img src="../../../../../image/icon/tiji.png" alt=""></span><span>200条</span></van-col>
  245. </van-row>
  246. </div>
  247. </div>
  248. <van-row class="show-btn-container" type="flex" justify="center">
  249. <van-col class="image-item flex" span="8" offset="6"><span class="image-icon1"><img src="../../../../../image/icon/zhankai.png" style="transform: rotateX(180deg)" alt=""></span><span>收缩</span></van-col>
  250. <!-- <van-col class="image-item flex" span="8" offset="6"><span class="image-icon1"><img src="../../../../../image/icon/zhankai.png" alt=""></span><span>展开</span></van-col> -->
  251. </van-row>
  252. <van-divider ></van-divider>
  253. <div class="row-item">装运凭证:0800001209</div>
  254. <div class="row-item">装运凭证:0800001209</div>
  255. <van-divider ></van-divider>
  256. <van-row class="confirm-btn-container" type="flex" justify="center">
  257. <van-col class="image-item flex" span="8" offset="6"><span class="image-icon1"><img src="../../../../../image/icon/yiqueren.png" alt=""></span><span>已确认</span></van-col>
  258. <!-- <van-col class="image-item flex" span="8" offset="6"><span class="confirm-btn">确认</span></van-col> -->
  259. </van-row>
  260. </div>
  261. </div>
  262. <footer id="aui-footer">
  263. <div class="count-container flex">
  264. <div class="count-item flex">
  265. <div class="count-item-image"><img src="../../../../../image/icon/zongtiaoshu.png" alt=""></div>
  266. <div>
  267. <p><span>400</span>条</p>
  268. <p>总条数</p>
  269. </div>
  270. </div>
  271. <div class="count-item flex">
  272. <div class="count-item-image"><img src="../../../../../image/icon/zongzhongliang.png" alt=""></div>
  273. <div>
  274. <p><span>400</span>KG</p>
  275. <p>总重量</p>
  276. </div>
  277. </div>
  278. </div>
  279. </footer>
  280. </div>
  281. </body>
  282. <script type="text/javascript" src="../../../../../script/api.js"></script>
  283. <link rel="stylesheet" href="../../../../../script/mescroll/mescroll.min.css">
  284. <script type="text/javascript" src="../../../../../script/mescroll/mescroll.min.js"></script>
  285. <script type="text/javascript" src="../../../../../script/httpRequest.js"></script>
  286. <script type="text/javascript" src="../../../../../script/vue_plugins.js"></script>
  287. <script type="text/javascript">
  288. function closeWin() {
  289. api.closeWin({
  290. });
  291. }
  292. apiready = function() {
  293. api.parseTapmode();
  294. var header = $api.byId('aui-header');
  295. $api.fixStatusBar(header);
  296. var headerPos = $api.offset(header);
  297. var body_h = $api.offset($api.dom('body')).h;
  298. document.getElementById("scrollcontaier").style.height = $api.offset($api.dom('body')).h - headerPos.h -$api.offset($api.byId('aui-footer')).h + "px";
  299. console.log(headerPos.h);
  300. console.log($api.offset($api.byId('aui-footer')).h)
  301. new Vue({
  302. el: '#app',
  303. data: {
  304. },
  305. filters:{
  306. },
  307. mounted: function() {
  308. },
  309. methods: {
  310. }
  311. })
  312. };
  313. </script>
  314. </html>