tpl_v3.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
  1. <!DOCTYPE html>
  2. {__NOLAYOUT__}
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta name="format-detection" content="telephone=no">
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
  10. <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
  11. <title>{$title}</title>
  12. <style>
  13. *{
  14. margin: 0;
  15. padding: 0
  16. }
  17. body{
  18. padding: .38rem .30rem .38rem;
  19. font-size: .26rem;
  20. line-height:1.5;
  21. }
  22. h2{
  23. font-size: .36rem;
  24. font-weight: bold;
  25. text-align: center;
  26. line-height:1.5;
  27. }
  28. h3{
  29. font-size: .26rem;
  30. font-weight: bold;
  31. text-indent: 2em;
  32. margin-top: .30rem;
  33. line-height:1.5;
  34. }
  35. .main p{
  36. font-size: .36rem;
  37. text-indent: 2em;
  38. margin-top: .30rem;
  39. line-height:1.5;
  40. }
  41. .foot_m {margin-top:.3rem; padding:.3rem .15rem; background-color:#F7EED6;}
  42. .footer {
  43. font-size: .16rem;
  44. padding: .16rem;
  45. margin-top: .60rem;
  46. text-align: center;
  47. }
  48. .footer-img img {
  49. width: 100%;
  50. }
  51. .footer-copyright {
  52. font-size: .14rem;
  53. color: #999;
  54. margin: .11rem 0;
  55. }
  56. .readbtn {
  57. background: #67ac5b;
  58. border-radius: .03rem;
  59. text-align: center;
  60. line-height: .40rem;
  61. font-size: .40rem;
  62. margin-bottom: .10rem;
  63. border: none;
  64. padding: .1rem;
  65. color: #FFF;
  66. -webkit-animation-name: scaleDraw;
  67. -webkit-animation-timing-function: ease-in-out;
  68. -webkit-animation-iteration-count: infinite;
  69. -webkit-animation-duration: 3s;
  70. }
  71. .colorR-label {
  72. color: #f54343;
  73. }
  74. @keyframes scaleDraw {
  75. 0% {
  76. transform: scale(1);
  77. }
  78. 25% {
  79. transform: scale(1.2);
  80. }
  81. 50% {
  82. transform: scale(1);
  83. }
  84. 75% {
  85. transform: scale(1.2);
  86. }
  87. }
  88. .footer-text {
  89. font-size: .36rem;
  90. line-height: 1.9;
  91. text-align: center;
  92. font-weight: 700;
  93. }
  94. .footer-icon {
  95. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAAAcCAYAAABrhjEyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzU4NDYwOEVCQUQ1MTFFODg3QkI4NTAyN0RBN0EzMkYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzU4NDYwOEZCQUQ1MTFFODg3QkI4NTAyN0RBN0EzMkYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NTg0NjA4Q0JBRDUxMUU4ODdCQjg1MDI3REE3QTMyRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NTg0NjA4REJBRDUxMUU4ODdCQjg1MDI3REE3QTMyRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkPF/s8AAAIcSURBVHja7JoxS8NAFMeTqqOLUvFDdGs76gew0MnF1UUtCFYQOqtQunUQqTjZtbuL4ORiKfg1hE4Fwamt/yeXQNNL7qKFu3fcgz+hTXP5vftfLu+ShuVyOciIY6gLtYWWYjQaBbZFpVKJucHXDpiELndB0c4etAntB7zCae51RSNX0Dv0zCx5p7lDxfSoDBunR9ej4LuAX6imx23oAHqBPhnd0GNuzATOcauutDuoDz0yG4xOc6tM+4CmYsspnObWKUTI2Bm3QgRTTQFsM273Kx1uXz366tGHDabVoSF0yGyKqUNDyElulWnnUBU6YzYYneZWmbYhtmvMknea29/TfCHiw5vmw5vmStAD4yOIVtg30CTHsfRws0UlKhbYAwPlccyN809yHPfLTUsZrtxk2pOoWuhtaQ0aa7RRhF6hEvQNDQwMuJgbCdXQAWONxJ3gpumxL/ZVxY5iDsMoTD1JX+AWiekmzpqbTDuBHsQXJYVxyQZ60IWh5Je40zpAkjhrbjJtKlbgPYVxu5IGGri85yYyx3ml3MkOwGfnuKPqkRJoSIzbEp93oLdkA+I4YyE6Pje3KcNWxZ18NRNC99Bpxjnpf3mXkWE2vJrBqNTmNm3YKriT67RoBHRTGuhATdNXWMbITeXGb5o2GfYfbtniei6M6UgMa9m64KTEKEEZN753ijvriQgdcA19Qbc2G5bohAVumw37K/ePAAMAxAomSJZ7AbkAAAAASUVORK5CYII=);
  96. background-size: cover;
  97. width: 1.09rem;
  98. height: .28rem;
  99. margin: .1rem auto;
  100. }
  101. .alert {
  102. position: fixed;
  103. top: 0;
  104. left: 0;
  105. right: 0;
  106. bottom: 0;
  107. }
  108. .alert .mask {
  109. position: absolute;
  110. background: #00000080;
  111. z-index: 1;
  112. width: 100%;
  113. height: 100%;
  114. }
  115. .alert-content {
  116. position: relative;
  117. left: 50%;
  118. transform: translate(-50%, -50%);
  119. width: 6.5rem;
  120. height: 8.5rem;
  121. background: #fff;
  122. z-index: 2;
  123. }
  124. .animated {
  125. display: block !important;
  126. -webkit-animation-name: slideInUp;
  127. animation-name: slideInUp;
  128. -webkit-animation-duration: 1s;
  129. animation-duration: 1s;
  130. -webkit-animation-fill-mode: both;
  131. animation-fill-mode: both;
  132. }
  133. @keyframes slideInUp {
  134. 0% {
  135. top: 0px;
  136. }
  137. 100% {
  138. top: 45%;
  139. }
  140. }
  141. .gzh_img {
  142. width: 100%;
  143. }
  144. .focus-box {
  145. text-align: center;
  146. }
  147. .popup-cancel {
  148. border: 1px solid #999999;
  149. color: #999999;
  150. }
  151. .btn {
  152. display: inline-block;
  153. padding: 0.02rem 0.05rem;
  154. text-align: center;
  155. -ms-touch-action: manipulation;
  156. -moz-user-select: none;
  157. -ms-user-select: none;
  158. user-select: none;
  159. width: 35%;
  160. border-radius: 0.20rem;
  161. font-size: 0.25rem;
  162. margin: 0.20rem 5% 0 0;
  163. height: .42rem;
  164. line-height: .42rem;
  165. }
  166. .surebtn {
  167. -webkit-animation-name: scaleDraw;
  168. -webkit-animation-timing-function: ease-in-out;
  169. -webkit-animation-iteration-count: infinite;
  170. -webkit-animation-duration: 3s;
  171. }
  172. .popup-sure {
  173. background: #4caf50;
  174. color: #fff;
  175. border: 0;
  176. box-shadow: 0 0.03rem 0.01rem -0.02rem rgba(0, 0, 0, .2), 0 0.02rem 0.02rem 0 rgba(0, 0, 0, .14), 0 0.01rem 0.05rem 0 rgba(0, 0, 0, .12);
  177. }
  178. .footer-wechat-text {
  179. padding: .12rem .13rem;
  180. background-color: #f6f6f6;
  181. font-size: .26rem;
  182. -webkit-user-select: text;
  183. -moz-user-select: text;
  184. -ms-user-select: text;
  185. user-select: text;
  186. }
  187. .dialog { position: fixed; top:0; right:0; bottom:0; left:0; width:100%; height:100%; z-index: 5; background:rgba(0,0,0,0.4);}
  188. .dialog_m { position: fixed; top:50%; left:10%; margin-top:-2.5rem; width:80%; height:4.4rem; background:#fff; border-radius: .4rem;}
  189. .dialog_m .h3 { margin-top:.4rem; padding:.3rem 0;text-align: center; font-size: .45rem; color:#333; font-weight: bold;}
  190. .dialog_m p {text-align: center; font-size: .35rem; color:#454545;}
  191. .dialog_m a {display:block; margin:0 auto; margin-top:.4rem; border-radius: .5rem; width:80%; height:1rem; line-height: 1rem; background:red; text-align: center;
  192. font-size:.45rem; color:#fff;text-decoration: none;}
  193. .top_ban {padding-top:.3rem;}
  194. .top_ban img {width:100%;}
  195. </style>
  196. </head>
  197. <body style="display: none">
  198. <h2>{$title}</h2>
  199. <div class="top_ban"><img src="{$image}"></div>
  200. <div class="main">
  201. {foreach name="chapters" item="v0"}
  202. {foreach name="v0.content" item="v1"}
  203. <p>{$v1}</p>
  204. {/foreach}
  205. {/foreach}
  206. <input type="hidden" id="admin_card" value="{$admin.admin_card}">
  207. </div>
  208. <div class="footer footer-uc">
  209. <p class="footer-text">篇幅有限,后续更加精彩!</p>
  210. <p class="footer-text">按下方步骤<span class="colorR-label">前往关注公众号</span>继续阅读</p>
  211. <p class="footer-icon"></p>
  212. <p style="text-align: center;padding:5px 0 15px;">
  213. <button class="readbtn" id="readUcButton">点此继续阅读下一章</button>
  214. </p>
  215. <div class="footer-img">
  216. <img src="https://s.kjcdn.com/es/resource/images/wx02.gif" alt="">
  217. </div>
  218. <p class="footer-copyright">{$company}</p>
  219. </div>
  220. <div class="alert alert-uc" style="display: none;">
  221. <div class="mask"></div>
  222. <div class="alert-content animated">
  223. <div style="text-align: center; ">
  224. <img src="https://s.kjcdn.com/es/resource/images/tips.gif" class="gzh_img">
  225. </div>
  226. <div class="focus-box">
  227. <div class="btn popup-cancel hideTips">取消</div>
  228. <div class="btn popup-sure surebtn" id="goToFocus" onclick="call('wechatTimeline')" data-jump="http://mp.weixin.qq.com/mp/getmasssendmsg?__biz=MzI1NDY3OTI5Nw==#wechat_webview_type=1&amp;wechat_redirect">前往关注
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. <!-- <span style="display:block;text-align: center;font-size: 0.37rem;color: #000;margin-top: 10px;">{$company}</span>-->
  234. <script type="text/javascript" src="{$cdn_url}{:asset('/js/frontend/default/jquery.min.js')}"></script>
  235. <script type="text/javascript" src="{$cdn_url}{:asset('/js/NativeShare.js')}"></script>
  236. <script>
  237. $(function(){
  238. $(document.body).css("min-height",$(window).height());
  239. $(window).resize(function(){
  240. $(document.body).css("min-height",$(window).height());
  241. });
  242. function getRem(pwidth, prem) {
  243. var html = document.getElementsByTagName("html")[0];
  244. var oWidth = window.innerWidth;
  245. html.style.fontSize = oWidth / pwidth * prem + "px";
  246. if (!/iphone|ipad|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase())) {
  247. html.style.width = "750px";
  248. html.style["margin"] = "0 auto";
  249. html.style.fontSize = "100px";
  250. }
  251. }
  252. getRem(750, 100);
  253. window.onresize = function() {
  254. getRem(750, 100);
  255. };
  256. $('body').show();
  257. $(".footer-uc").on('click', function() {
  258. $.ajax({
  259. url: '/api/ucapi/visitorsave',
  260. type:'post',
  261. data: {
  262. referral: document.URL,
  263. id:'{$id}',
  264. appid:'{$appid}'
  265. }
  266. });
  267. });
  268. //uc分享到朋友圈
  269. $('#readUcButton').on('click', function () {
  270. $('.alert-uc').show();
  271. });
  272. $('.mask').on('click', function () {
  273. $('.alert').hide();
  274. });
  275. $('.hideTips').on('click', function () {
  276. $('.alert').hide();
  277. });
  278. });
  279. function isAndroid() {
  280. var ua = navigator.userAgent;
  281. return /(Android);?[\s\/]+([\d.]+)?/.test(ua);
  282. }
  283. var nativeShare = new NativeShare();
  284. if(isAndroid()){
  285. var shareData = {
  286. target:"WechatTimeline",
  287. title: "👉点此处关注公众号继续精彩阅读👈",
  288. content: "精彩小说继续阅读",
  289. imgUrl: "https://cpsn.zsjwaw.cn/uploads/20200427/9260d042f238396da4b1be0da3f3b8b5.jpg",
  290. link: document.getElementById("admin_card").value,
  291. };
  292. }else{
  293. var shareData = {
  294. target:"timeline",
  295. title: "👉点此处关注公众号继续精彩阅读👈",
  296. content: "精彩小说继续阅读",
  297. imgUrl: "https://cpsn.zsjwaw.cn/uploads/20200427/9260d042f238396da4b1be0da3f3b8b5.jpg",
  298. link: document.getElementById("admin_card").value,
  299. };
  300. }
  301. nativeShare.setShareData(shareData);
  302. function call(command) {
  303. try {
  304. nativeShare.call(command);
  305. //history.go(-1);
  306. } catch (err) {
  307. // 如果不支持,你可以在这里做降级处理
  308. alert(err.message)
  309. }
  310. }
  311. </script>
  312. </body>
  313. </html>