方案一:购买方式.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>方案一:购买方式</title>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  7. <meta name="apple-mobile-web-app-capable" content="yes"/>
  8. <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
  9. <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
  10. <link href="data/styles.css" type="text/css" rel="stylesheet"/>
  11. <link href="files/方案一:购买方式/styles.css" type="text/css" rel="stylesheet"/>
  12. <script src="resources/scripts/jquery-1.7.1.min.js"></script>
  13. <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
  14. <script src="resources/scripts/prototypePre.js"></script>
  15. <script src="data/document.js"></script>
  16. <script src="resources/scripts/prototypePost.js"></script>
  17. <script src="files/方案一:购买方式/data.js"></script>
  18. <script type="text/javascript">
  19. $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
  20. $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
  21. $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
  22. </script>
  23. </head>
  24. <body>
  25. <div id="base" class="">
  26. <!-- Unnamed (图片) -->
  27. <div id="u0" class="ax_default _图片_">
  28. <img id="u0_img" class="img " src="images/方案一:购买方式/u0.jpg"/>
  29. </div>
  30. <!-- Unnamed (图片) -->
  31. <div id="u1" class="ax_default _图片_">
  32. <img id="u1_img" class="img " src="images/方案一:购买方式/u1.jpg"/>
  33. </div>
  34. <!-- Unnamed (图片) -->
  35. <div id="u2" class="ax_default _图片_">
  36. <img id="u2_img" class="img " src="images/方案一:购买方式/u2.png"/>
  37. </div>
  38. <!-- Unnamed (矩形) -->
  39. <div id="u3" class="ax_default box_3">
  40. <div id="u3_div" class=""></div>
  41. <div id="u3_text" class="text ">
  42. <p><span>复制成功</span></p>
  43. </div>
  44. </div>
  45. <!-- Unnamed (图片) -->
  46. <div id="u4" class="ax_default _图片_">
  47. <img id="u4_img" class="img " src="images/方案一:购买方式/u4.png"/>
  48. </div>
  49. <!-- Unnamed (图片) -->
  50. <div id="u5" class="ax_default _图片_">
  51. <img id="u5_img" class="img " src="images/方案一:购买方式/u5.png"/>
  52. </div>
  53. <!-- Unnamed (图片) -->
  54. <div id="u6" class="ax_default _图片_">
  55. <img id="u6_img" class="img " src="images/方案一:购买方式/u6.png"/>
  56. </div>
  57. <!-- Unnamed (矩形) -->
  58. <div id="u7" class="ax_default _标题_3">
  59. <div id="u7_div" class=""></div>
  60. <div id="u7_text" class="text ">
  61. <p><span>购买前</span></p>
  62. </div>
  63. </div>
  64. <!-- Unnamed (矩形) -->
  65. <div id="u8" class="ax_default _标题_3">
  66. <div id="u8_div" class=""></div>
  67. <div id="u8_text" class="text ">
  68. <p><span>购买后</span></p>
  69. </div>
  70. </div>
  71. <!-- Unnamed (矩形) -->
  72. <div id="u9" class="ax_default _标题_3">
  73. <div id="u9_div" class=""></div>
  74. <div id="u9_text" class="text ">
  75. <p><span>活动页</span></p>
  76. </div>
  77. </div>
  78. <!-- Unnamed (矩形) -->
  79. <div id="u10" class="ax_default label">
  80. <div id="u10_div" class=""></div>
  81. <div id="u10_text" class="text ">
  82. <p><span>打赏赚积分</span></p>
  83. </div>
  84. </div>
  85. <!-- Unnamed (矩形) -->
  86. <div id="u11" class="ax_default box_1">
  87. <div id="u11_div" class=""></div>
  88. <div id="u11_text" class="text ">
  89. <p><span>关注公众号</span></p>
  90. </div>
  91. </div>
  92. <!-- Unnamed (矩形) -->
  93. <div id="u12" class="ax_default _标题_3">
  94. <div id="u12_div" class=""></div>
  95. <div id="u12_text" class="text ">
  96. <p><span>弹层提示,引导用户在公众号上购买</span></p>
  97. </div>
  98. </div>
  99. <!-- Unnamed (矩形) -->
  100. <div id="u13" class="ax_default _标题_3">
  101. <div id="u13_div" class=""></div>
  102. <div id="u13_text" class="text ">
  103. <p><span>微信授权</span></p>
  104. </div>
  105. </div>
  106. <!-- Unnamed (矩形) -->
  107. <div id="u14" class="ax_default _标题_3">
  108. <div id="u14_div" class=""></div>
  109. <div id="u14_text" class="text ">
  110. <p><span>电子刊列表</span></p>
  111. </div>
  112. </div>
  113. <!-- Unnamed (图片) -->
  114. <div id="u15" class="ax_default _图片_">
  115. <img id="u15_img" class="img " src="images/方案一:购买方式/u15.png"/>
  116. </div>
  117. <!-- Unnamed (矩形) -->
  118. <div id="u16" class="ax_default _标题_3">
  119. <div id="u16_div" class=""></div>
  120. <div id="u16_text" class="text ">
  121. <p><span>购买电子刊</span></p>
  122. </div>
  123. </div>
  124. <!-- Unnamed (矩形) -->
  125. <div id="u17" class="ax_default _标题_3">
  126. <div id="u17_div" class=""></div>
  127. <div id="u17_text" class="text ">
  128. <p><span>购买成功</span></p>
  129. </div>
  130. </div>
  131. <!-- Unnamed (矩形) -->
  132. <div id="u18" class="ax_default box_1">
  133. <div id="u18_div" class=""></div>
  134. </div>
  135. <!-- Unnamed (矩形) -->
  136. <div id="u19" class="ax_default box_1">
  137. <div id="u19_div" class=""></div>
  138. </div>
  139. <!-- Unnamed (矩形) -->
  140. <div id="u20" class="ax_default box_1">
  141. <div id="u20_div" class=""></div>
  142. <div id="u20_text" class="text ">
  143. <p><span>查看</span></p>
  144. </div>
  145. </div>
  146. <!-- Unnamed (矩形) -->
  147. <div id="u21" class="ax_default box_1">
  148. <div id="u21_div" class=""></div>
  149. <div id="u21_text" class="text ">
  150. <p><span>购买成功,长按上方小程序码识别或微信搜索“</span><span style="color:#CC1619;">Jstyle精美</span><span>”进入小程序查看电子刊内容</span></p>
  151. </div>
  152. </div>
  153. <!-- Unnamed (矩形) -->
  154. <div id="u22" class="ax_default primary_button">
  155. <div id="u22_div" class=""></div>
  156. <div id="u22_text" class="text ">
  157. <p><span>继续购买</span></p>
  158. </div>
  159. </div>
  160. <!-- Unnamed (连接线) -->
  161. <div id="u23" class="ax_default _连接线">
  162. <img id="u23_seg0" class="img " src="images/方案一:购买方式/u23_seg0.png" alt="u23_seg0"/>
  163. <img id="u23_seg1" class="img " src="images/方案一:购买方式/u23_seg1.png" alt="u23_seg1"/>
  164. <img id="u23_seg2" class="img " src="images/方案一:购买方式/u23_seg2.png" alt="u23_seg2"/>
  165. <img id="u23_seg3" class="img " src="images/方案一:购买方式/u23_seg3.png" alt="u23_seg3"/>
  166. <img id="u23_seg4" class="img " src="images/方案一:购买方式/u23_seg4.png" alt="u23_seg4"/>
  167. <div id="u23_text" class="text " style="display:none; visibility: hidden">
  168. <p></p>
  169. </div>
  170. </div>
  171. <!-- Unnamed (连接线) -->
  172. <div id="u24" class="ax_default _连接线">
  173. <img id="u24_seg0" class="img " src="images/方案一:购买方式/u24_seg0.png" alt="u24_seg0"/>
  174. <img id="u24_seg1" class="img " src="images/方案一:购买方式/u24_seg1.png" alt="u24_seg1"/>
  175. <img id="u24_seg2" class="img " src="images/方案一:购买方式/u24_seg2.png" alt="u24_seg2"/>
  176. <img id="u24_seg3" class="img " src="images/方案一:购买方式/u24_seg3.png" alt="u24_seg3"/>
  177. <img id="u24_seg4" class="img " src="images/方案一:购买方式/u24_seg4.png" alt="u24_seg4"/>
  178. <div id="u24_text" class="text " style="display:none; visibility: hidden">
  179. <p></p>
  180. </div>
  181. </div>
  182. <!-- Unnamed (连接线) -->
  183. <div id="u25" class="ax_default _连接线">
  184. <img id="u25_seg0" class="img " src="images/方案一:购买方式/u25_seg0.png" alt="u25_seg0"/>
  185. <img id="u25_seg1" class="img " src="images/方案一:购买方式/u25_seg1.png" alt="u25_seg1"/>
  186. <img id="u25_seg2" class="img " src="images/方案一:购买方式/u25_seg2.png" alt="u25_seg2"/>
  187. <img id="u25_seg3" class="img " src="images/方案一:购买方式/u25_seg3.png" alt="u25_seg3"/>
  188. <img id="u25_seg4" class="img " src="images/方案一:购买方式/u25_seg4.png" alt="u25_seg4"/>
  189. <div id="u25_text" class="text " style="display:none; visibility: hidden">
  190. <p></p>
  191. </div>
  192. </div>
  193. <!-- Unnamed (连接线) -->
  194. <div id="u26" class="ax_default _连接线">
  195. <img id="u26_seg0" class="img " src="images/方案一:购买方式/u26_seg0.png" alt="u26_seg0"/>
  196. <img id="u26_seg1" class="img " src="images/方案一:购买方式/u26_seg1.png" alt="u26_seg1"/>
  197. <div id="u26_text" class="text " style="display:none; visibility: hidden">
  198. <p></p>
  199. </div>
  200. </div>
  201. <!-- Unnamed (连接线) -->
  202. <div id="u27" class="ax_default _连接线">
  203. <img id="u27_seg0" class="img " src="images/方案一:购买方式/u27_seg0.png" alt="u27_seg0"/>
  204. <img id="u27_seg1" class="img " src="images/方案一:购买方式/u27_seg1.png" alt="u27_seg1"/>
  205. <div id="u27_text" class="text " style="display:none; visibility: hidden">
  206. <p></p>
  207. </div>
  208. </div>
  209. <!-- Unnamed (连接线) -->
  210. <div id="u28" class="ax_default _连接线">
  211. <img id="u28_seg0" class="img " src="images/方案一:购买方式/u28_seg0.png" alt="u28_seg0"/>
  212. <img id="u28_seg1" class="img " src="images/方案一:购买方式/u28_seg1.png" alt="u28_seg1"/>
  213. <img id="u28_seg2" class="img " src="images/方案一:购买方式/u28_seg2.png" alt="u28_seg2"/>
  214. <img id="u28_seg3" class="img " src="images/方案一:购买方式/u28_seg3.png" alt="u28_seg3"/>
  215. <div id="u28_text" class="text " style="display:none; visibility: hidden">
  216. <p></p>
  217. </div>
  218. </div>
  219. <!-- Unnamed (连接线) -->
  220. <div id="u29" class="ax_default _连接线">
  221. <img id="u29_seg0" class="img " src="images/方案一:购买方式/u29_seg0.png" alt="u29_seg0"/>
  222. <img id="u29_seg1" class="img " src="images/方案一:购买方式/u26_seg1.png" alt="u29_seg1"/>
  223. <div id="u29_text" class="text " style="display:none; visibility: hidden">
  224. <p></p>
  225. </div>
  226. </div>
  227. <!-- Unnamed (连接线) -->
  228. <div id="u30" class="ax_default _连接线">
  229. <img id="u30_seg0" class="img " src="images/方案一:购买方式/u30_seg0.png" alt="u30_seg0"/>
  230. <img id="u30_seg1" class="img " src="images/方案一:购买方式/u26_seg1.png" alt="u30_seg1"/>
  231. <div id="u30_text" class="text " style="display:none; visibility: hidden">
  232. <p></p>
  233. </div>
  234. </div>
  235. <!-- Unnamed (连接线) -->
  236. <div id="u31" class="ax_default _连接线">
  237. <img id="u31_seg0" class="img " src="images/方案一:购买方式/u31_seg0.png" alt="u31_seg0"/>
  238. <img id="u31_seg1" class="img " src="images/方案一:购买方式/u31_seg1.png" alt="u31_seg1"/>
  239. <div id="u31_text" class="text " style="display:none; visibility: hidden">
  240. <p></p>
  241. </div>
  242. </div>
  243. <!-- Unnamed (连接线) -->
  244. <div id="u32" class="ax_default _连接线">
  245. <img id="u32_seg0" class="img " src="images/方案一:购买方式/u32_seg0.png" alt="u32_seg0"/>
  246. <img id="u32_seg1" class="img " src="images/方案一:购买方式/u32_seg1.png" alt="u32_seg1"/>
  247. <img id="u32_seg2" class="img " src="images/方案一:购买方式/u32_seg2.png" alt="u32_seg2"/>
  248. <img id="u32_seg3" class="img " src="images/方案一:购买方式/u32_seg3.png" alt="u32_seg3"/>
  249. <div id="u32_text" class="text " style="display:none; visibility: hidden">
  250. <p></p>
  251. </div>
  252. </div>
  253. <!-- Unnamed (图片) -->
  254. <div id="u33" class="ax_default _图片_">
  255. <img id="u33_img" class="img " src="images/方案一:购买方式/u33.jpg"/>
  256. </div>
  257. <!-- Unnamed (矩形) -->
  258. <div id="u34" class="ax_default box_2">
  259. <div id="u34_div" class=""></div>
  260. </div>
  261. <!-- Unnamed (矩形) -->
  262. <div id="u35" class="ax_default label">
  263. <div id="u35_div" class=""></div>
  264. <div id="u35_text" class="text ">
  265. <p><span>电子刊</span></p>
  266. </div>
  267. </div>
  268. <!-- Unnamed (矩形) -->
  269. <div id="u36" class="ax_default sticky_1">
  270. <div id="u36_div" class=""></div>
  271. <div id="u36_text" class="text ">
  272. <p><span>1、关注公众号后自动推送购买电子刊链接</span></p><p><span><br></span></p><p><span>2、公众号菜单中增加购买电子刊菜单</span></p><p><span><br></span></p><p><span>3、在公众号中回复“电子刊”三字,后向用户的推送购买电子刊链接</span></p>
  273. </div>
  274. </div>
  275. <!-- Unnamed (连接线) -->
  276. <div id="u37" class="ax_default _连接线">
  277. <img id="u37_seg0" class="img " src="images/方案一:购买方式/u37_seg0.png" alt="u37_seg0"/>
  278. <img id="u37_seg1" class="img " src="images/方案一:购买方式/u37_seg1.png" alt="u37_seg1"/>
  279. <img id="u37_seg2" class="img " src="images/方案一:购买方式/u37_seg2.png" alt="u37_seg2"/>
  280. <img id="u37_seg3" class="img " src="images/方案一:购买方式/u37_seg3.png" alt="u37_seg3"/>
  281. <div id="u37_text" class="text " style="display:none; visibility: hidden">
  282. <p></p>
  283. </div>
  284. </div>
  285. <!-- Unnamed (矩形) -->
  286. <div id="u38" class="ax_default _标题_3">
  287. <div id="u38_div" class=""></div>
  288. <div id="u38_text" class="text ">
  289. <p><span>微信公众号</span></p>
  290. </div>
  291. </div>
  292. <!-- Unnamed (矩形) -->
  293. <div id="u39" class="ax_default box_1">
  294. <div id="u39_div" class=""></div>
  295. </div>
  296. <!-- Unnamed (矩形) -->
  297. <div id="u40" class="ax_default label">
  298. <div id="u40_div" class=""></div>
  299. <div id="u40_text" class="text ">
  300. <p><span>我的时尚指南-杂志简介</span></p>
  301. </div>
  302. </div>
  303. <!-- Unnamed (矩形) -->
  304. <div id="u41" class="ax_default box_1">
  305. <div id="u41_div" class=""></div>
  306. </div>
  307. <!-- Unnamed (矩形) -->
  308. <div id="u42" class="ax_default box_1">
  309. <div id="u42_div" class=""></div>
  310. </div>
  311. <!-- Unnamed (组 合) -->
  312. <div id="u43" class="ax_default" data-left="1072" data-top="1047.5" data-width="147.5" data-height="26">
  313. <!-- Unnamed (气泡) -->
  314. <div id="u44" class="ax_default box_1">
  315. <img id="u44_img" class="img " src="images/方案一:购买方式/u44.png"/>
  316. </div>
  317. <!-- Unnamed (矩形) -->
  318. <div id="u45" class="ax_default label">
  319. <div id="u45_div" class=""></div>
  320. <div id="u45_text" class="text ">
  321. <p><span>&nbsp;&nbsp;&nbsp; 订阅 </span><span style="color:#3399FF;">Jstyle精美电子刊</span></p>
  322. </div>
  323. </div>
  324. <!-- Unnamed (图片) -->
  325. <div id="u46" class="ax_default _图片_">
  326. <img id="u46_img" class="img " src="images/方案一:购买方式/u46.png"/>
  327. </div>
  328. </div>
  329. <!-- Unnamed (图片) -->
  330. <div id="u47" class="ax_default _图片_">
  331. <img id="u47_img" class="img " src="images/方案一:购买方式/u0.jpg"/>
  332. </div>
  333. <!-- Unnamed (矩形) -->
  334. <div id="u48" class="ax_default box_1">
  335. <div id="u48_div" class=""></div>
  336. </div>
  337. <!-- Unnamed (矩形) -->
  338. <div id="u49" class="ax_default label">
  339. <div id="u49_div" class=""></div>
  340. <div id="u49_text" class="text ">
  341. <p><span>购买提示</span></p>
  342. </div>
  343. </div>
  344. <!-- Unnamed (矩形) -->
  345. <div id="u50" class="ax_default label">
  346. <div id="u50_div" class=""></div>
  347. <div id="u50_text" class="text ">
  348. <p><span>关注“</span><span style="color:#D1171A;">Jstyle精美</span><span>”公众号打赏阅读</span></p>
  349. </div>
  350. </div>
  351. <!-- Unnamed (图片) -->
  352. <div id="u51" class="ax_default _图片_">
  353. <img id="u51_img" class="img " src="images/方案一:购买方式/u51.png"/>
  354. </div>
  355. <!-- Unnamed (图片) -->
  356. <div id="u52" class="ax_default _图片_">
  357. <img id="u52_img" class="img " src="images/方案一:购买方式/u52.png"/>
  358. </div>
  359. <!-- Unnamed (矩形) -->
  360. <div id="u53" class="ax_default label">
  361. <div id="u53_div" class=""></div>
  362. <div id="u53_text" class="text ">
  363. <p><span>1.关注“</span><span style="color:#D1171A;">Jstyle精美</span><span>”公众号</span></p>
  364. </div>
  365. </div>
  366. <!-- Unnamed (矩形) -->
  367. <div id="u54" class="ax_default label">
  368. <div id="u54_div" class=""></div>
  369. <div id="u54_text" class="text ">
  370. <p><span>2.点击购买链接</span></p>
  371. </div>
  372. </div>
  373. <!-- Unnamed (图片) -->
  374. <div id="u55" class="ax_default _图片_">
  375. <img id="u55_img" class="img " src="images/方案一:购买方式/u55.png"/>
  376. </div>
  377. <!-- Unnamed (图片) -->
  378. <div id="u56" class="ax_default _图片_">
  379. <img id="u56_img" class="img " src="images/方案一:购买方式/u56.png"/>
  380. </div>
  381. <!-- Unnamed (矩形) -->
  382. <div id="u57" class="ax_default label">
  383. <div id="u57_div" class=""></div>
  384. <div id="u57_text" class="text ">
  385. <p><span>3.微信授权后购买电子刊</span></p>
  386. </div>
  387. </div>
  388. <!-- Unnamed (矩形) -->
  389. <div id="u58" class="ax_default label">
  390. <div id="u58_div" class=""></div>
  391. <div id="u58_text" class="text ">
  392. <p><span>4.购买成功,进入小程序查看电子刊内容</span></p>
  393. </div>
  394. </div>
  395. <!-- Unnamed (矩形) -->
  396. <div id="u59" class="ax_default primary_button">
  397. <div id="u59_div" class=""></div>
  398. <div id="u59_text" class="text ">
  399. <p><span>复制公众号名称</span></p>
  400. </div>
  401. </div>
  402. <!-- Unnamed (矩形) -->
  403. <div id="u60" class="ax_default box_1">
  404. <div id="u60_div" class=""></div>
  405. <div id="u60_text" class="text ">
  406. <p><span>&nbsp; &lt;&nbsp; 段宜恩电子刊</span></p>
  407. </div>
  408. </div>
  409. <!-- Unnamed (矩形) -->
  410. <div id="u61" class="ax_default sticky_1">
  411. <div id="u61_div" class=""></div>
  412. <div id="u61_text" class="text ">
  413. <p><span>【购买小刊】按钮名称修改为【打赏赚积分】</span></p><p><span><br></span></p><p><span><br></span></p>
  414. </div>
  415. </div>
  416. <!-- Unnamed (矩形) -->
  417. <div id="u62" class="ax_default _标题_2">
  418. <div id="u62_div" class=""></div>
  419. <div id="u62_text" class="text ">
  420. <p><span>两种方案都做,上线时优先提交方案一,如果审核不通过,则采用方案二</span></p>
  421. </div>
  422. </div>
  423. <!-- Unnamed (矩形) -->
  424. <div id="u63" class="ax_default sticky_1">
  425. <div id="u63_div" class=""></div>
  426. <div id="u63_text" class="text ">
  427. <p><span>使用兑换码兑换后获得的积分数量与直接购买小刊获得积分数量一致</span></p>
  428. </div>
  429. </div>
  430. </div>
  431. </body>
  432. </html>