diy.htm 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>橘力定制</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  7. <meta name="format-detection" content="telephone=no">
  8. <link rel="stylesheet" href="/wap/css/mui.min.css">
  9. <link href="/wap/css/wDiy.css" rel="stylesheet"/>
  10. <link rel="stylesheet" href="/www/css/font.css">
  11. </head>
  12. <body>
  13. <input value="${id!}" type="hidden" id="diyId"/>
  14. <input value="${type!}" type="hidden" id="diytype"/>
  15. <input value="${bottle.img_url!}" type="hidden" id="bottle_img_url"/>
  16. <input value="${bottle.id!}" type="hidden" id="bottle_id"/>
  17. <img src="/www/image/xz.png" id="djsy_rotate"/>
  18. <div class="wap_content">
  19. <div class="diy_canvas_wrap">
  20. <canvas id="diy"></canvas>
  21. </div>
  22. </div>
  23. <!--调整层级-->
  24. <div class="djys-align-wrap djys-align-ani clearfix" id="view_ward">
  25. <div class="djys-align-item" data-key="2">顶层</div>
  26. <div class="djys-align-item" data-key="0">上一层</div>
  27. <div class="djys-align-item" data-key="1">下一层</div>
  28. <div class="djys-align-item" data-key="3">底层</div>
  29. </div>
  30. <!-- 字体 -->
  31. <div class="djsy-text-edit-wrap">
  32. <div class="djsy-text-edit">
  33. <div class="djsy-text-edit-nav">
  34. <div class="djsy-text-edit-nav-left">颜色</div>
  35. <div class="djsy-text-edit-nav-right">
  36. <div class="djsy-text-edit-fontFamily">
  37. <a href="#djsy_text_edit_popover" id="showFont">微软雅黑</a>
  38. </div>
  39. </div>
  40. </div>
  41. <div class="djsy-color-content clearfix">
  42. <div class="djsy-color-default clearfix" id="djsy_color_default">
  43. <span data-color="#60b329" style="background:#60b329"></span>
  44. <span data-color="#29b3a1" style="background:#29b3a1"></span>
  45. <span data-color="#2987b3" style="background:#2987b3"></span>
  46. <span data-color="#a8b329" style="background:#a8b329"></span>
  47. <span data-color="#7429b3" style="background:#7429b3"></span>
  48. <span data-color="#b35a29" style="background:#b35a29"></span>
  49. <span data-color="#ae29b3" style="background:#ae29b3"></span>
  50. <span data-color="#29b3a1" style="background:#29b3a1"></span>
  51. <span data-color="#b32977" style="background:#b32977"></span>
  52. <span data-color="#29b38a" style="background:#29b38a"></span>
  53. </div>
  54. <a href="#djsy_text_color_panel" class="djsy-color-panel">
  55. <i class="iconfont">&#xe63d;</i>
  56. </a>
  57. </div>
  58. </div>
  59. </div>
  60. <!-- 颜色框下拉 -->
  61. <div id="djsy_text_color_panel" class="mui-popover djsy-mui-popover">
  62. <div class="mui-scroll-wrapper">
  63. <div id="djsy_text_color_panel_content"></div>
  64. </div>
  65. <div class="mui-popover-arrow"></div>
  66. </div>
  67. <div id="djsy_text_edit_popover" class="mui-popover djsy-mui-popover">
  68. <div class="mui-scroll-wrapper">
  69. <div class="mui-scroll">
  70. <ul class="mui-table-view" id="changeFont">
  71. <li class="mui-table-view-cell" data-val="微软雅黑">
  72. <div class="wrya">微软雅黑</div>
  73. </li>
  74. <li class="mui-table-view-cell" data-val="宋体">
  75. <div class="songti">宋体</div>
  76. </li>
  77. <li class="mui-table-view-cell" data-val="黑体 ">
  78. <div class="heiti">黑体</div>
  79. </li>
  80. <li class="mui-table-view-cell" data-val="方正黑体简体" class="">
  81. <div class="fz-hj">方正黑体简体</div>
  82. </li>
  83. <li class="mui-table-view-cell" data-val="Aa夜茴体" class="">
  84. <div class="yht">Aa夜茴体</div>
  85. </li>
  86. <li class="mui-table-view-cell" data-val="思源黑体 CN ExtraLight">
  87. <div class="sy-ht">思源黑体 CN ExtraLight</div>
  88. </li>
  89. <li class="mui-table-view-cell" data-val="思源黑体超粗" class="active">
  90. <div class="sy-ht-cu">思源黑体超粗</div>
  91. </li>
  92. </ul>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="diy_wap_footer" style="padding-right: 200px;">
  97. <div class="diy_wap_footer_content">
  98. <a href="javascript:void(0);" id="diy_del_object">
  99. <i class="iconfont">&#xe600;</i>
  100. <span>删除</span>
  101. </a>
  102. <a href="javascript:void(0);" id="diy_preview">
  103. <i class="iconfont">&#xe852;</i>
  104. <span>预览</span>
  105. </a>
  106. </div>
  107. <a href="javascript:void(0);" id="diy_cart_diy_btn" class="footer_nav_right footer_nav_cart">加入购物车</a>
  108. <a href="javascript:void(0);" id="diy_save_diy_btn" class="footer_nav_right">保存</a>
  109. </div>
  110. <!-- 预览 -->
  111. <div class="previewCanvas" id="previewCanvas">
  112. <span class="close_preview">
  113. <i class="iconfont">&#xe726;</i>
  114. </span>
  115. <div class="previewImgWrap" id="previewImgWrap"></div>
  116. </div>
  117. <div class="func_add clearfix">
  118. <span class="iconfont add_icon">&#xe673;</span>
  119. <div class="func_add_contant">
  120. <a href="javascript:void(0);" id="djsy_showmy_source_btn" class="iconfont" style="color:#43bdb3">
  121. <span>&#xe62a;</span>
  122. <form id="diy_bg_img_form" enctype="multipart/form-data" method="post"><input id="diy_bg_img_file" name="image" type="file" /></form>
  123. </a>
  124. <a href="javascript:void(0);" id="djsy_add_text_btn" class="iconfont" style="color:#4374bd">&#xe6fe;</a>
  125. <a href="javascript:void(0);" id="djsy_add_source_btn" class="iconfont" style="color:#43bd6e;">&#xe638;</a>
  126. </div>
  127. </div>
  128. <!-- 分类图片 -->
  129. <div class="djsy-pop-wrap djsy-add-image">
  130. <div class="diy_wap_pop_title">
  131. <span>选择素材</span>
  132. <span class="close_pop" id="close_pop">
  133. <i class="iconfont">&#xe726;</i>
  134. </span>
  135. </div>
  136. <div class="djsy-pop-wrap_content clearfix">
  137. <div class="c">
  138. <div class="djsy-source-list-left">
  139. <div class="mui-scroll-wrapper">
  140. <div class="mui-scroll" id="djsy-source-list-left"></div>
  141. </div>
  142. </div>
  143. <div class="djsy-source-list-right">
  144. <div class="mui-scroll-wrapper">
  145. <div class="mui-scroll">
  146. <ul class="djsy-source-contant-ul clearfix" id="djsy_source_contant_ul"></ul>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. <script type="text/javascript" src="/wap/js/jquery.min.js"></script>
  154. <script type="text/javascript" src="/wap/js/mui/mui.min.js"></script>
  155. <script type="text/javascript" src="/www/js/fabric/dist/fabric.js"></script>
  156. <script type="text/javascript" src="/wap/js/build.js"></script>
  157. <script>
  158. mui('.mui-scroll-wrapper').scroll({
  159. deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
  160. });
  161. </script>
  162. </body>
  163. </html>