index.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
  6. <meta name="apple-mobile-web-app-capable" content="yes" />
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  8. </head>
  9. <body>
  10. <style>
  11. .dynamic_images ul {
  12. margin: 0;
  13. padding: 0;
  14. }
  15. .dynamic_images ul li {
  16. position: relative;
  17. display: inline-block;
  18. margin-top: 10px;
  19. margin-bottom: 10px;
  20. margin-right: 10px;
  21. float: left;
  22. list-style: none;
  23. }
  24. .dynamic_images ul li img {
  25. width: 50px;
  26. height: 50px;
  27. border-radius: 5px;
  28. }
  29. .del {
  30. display: inline-block;
  31. position: absolute;
  32. top:6px;
  33. right: 0px;
  34. width: 12px;
  35. height: 2px;
  36. background: #ED544D;
  37. line-height: 0;
  38. font-size: 0;
  39. vertical-align: middle;
  40. -webkit-transform: rotate(45deg);
  41. }
  42. .del:after {
  43. content: "/";
  44. display: block;
  45. width: 12px;
  46. height: 2px;
  47. background: #ED544D;
  48. -webkit-transform: rotate(-90deg);
  49. }
  50. </style>
  51. <header class="mui-bar mui-bar-nav" >
  52. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  53. <div class="mui-title">图片预览上传</div>
  54. </header>
  55. <div class="mui-content" >
  56. <form id='from1' enctype = "multipart/form-data">
  57. <div style="margin-top: 16px;margin-bottom: 10px;">
  58. <span class="title">添加照片(选填)</span>
  59. <span id="picnum" style="float: right;margin-right: 20px;font-size: 12px; color: #666666;">0/9</span>
  60. </div>
  61. <div class="dynamic_images" style="background-color: #ffffff;height: 70px;width: 100%;padding-left: 15px;padding-right: 15px;">
  62. <ul class="row mui-input-row">
  63. <li>
  64. <img src="img/iconfont-tianjia.png" id="addnew" onclick="showActionSheet();" />
  65. </li>
  66. </ul>
  67. </div>
  68. <div style="margin-top: 16px;width: 100%;text-align: center;">
  69. <button style="background-color: #169BD5;height: 40px;width: 266px;font-size: 14px;color: #FFFFFF;border-radius: 5px;border: 0px;" type="button" onclick="submits()">提交</button>
  70. </div>
  71. </form>
  72. </div>
  73. </body>
  74. <script src="js/mui.min.js"></script>
  75. <script src="js/jquery.min.js"></script>
  76. <script type="text/javascript">
  77. mui.init({
  78. swipeBack:true //启用右滑关闭功能
  79. });
  80. function submits(){
  81. var html = "./approve.html";
  82. $(location).attr('href', html);
  83. }
  84. </script>
  85. </html>