1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" 6 content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 7 <title>ð¥7*24æ¶è®¯ð¥</title> 8
8<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
8 9 <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css" /> 10 <style> 11 /*html,csså ¨é¨å è½½å®æåæ¾ç¤º*/ 12 13 body { 14 padding: 0px; 15 background-color: #E7DBBC; 16 box-sizing: border-box; 17 position: relative; 18 padding-top: 0; 19 margin: 0px; 20 } 21 22 #app { 23 width: 100vw; 24 height: 100vh; 25 box-sizing: border-box; 26 padding: 8px 20px; 27 } 28 29 .header { 30 position: fixed; 31 z-index: 999; 32 top: 0px; 33 left: 16px; 34 right: 16px; 35 padding-top: 16px; 36 padding-bottom: 16px; 37 background-color: #E7DBBC; 38 } 39 40 .header .box { 41 display: flex; 42 justify-content: space-between; 43 } 44 45 .item { 46 padding: 12px; 47 background-color: #FFFFFF; 48 margin-top: 12px; 49 border-radius: 4px; 50 padding-bottom: 8px; 51 position: relative; 52 } 53 54 .item .voice { 55 position: absolute; 56 content: ""; 57 left: 16px; 58 top: 14px; 59 } 60 61 .item .voice img { 62 width: 20px; 63 height: 20px; 64 } 65 66 .item .content { 67 font-size: 18px; 68 line-height: 24px; 69 font-weight: normal; 70 overflow-y: hidden; 71 text-indent: 24px; 72 } 73 74 .item .content.hidden { 75 display: -webkit-box; 76 -webkit-box-orient: vertical; 77 -webkit-line-clamp: 8; 78 overflow: hidden; 79 text-overflow: ellipsis; 80 } 81 82 .item .footer { 83 display: flex; 84 justify-content: space-between; 85 align-items: center; 86 margin-top: 4px; 87 width: 100%; 88 } 89 90 .item .footer .l { 91 font-size: 16px; 92 color: #999999; 93 } 94 95 .item .footer .r { 96 position: relative; 97 display: inline-block; 98 } 99 100 .item .footer .r img { 101 width: calc(140px * 1); 102 height: calc(33px * 1); 103 } 104 105 .item .footer .r .text { 106 position: absolute; 107 color: #333333; 108 left: 20px; 109 top: 5px; 110 font-size: 16px; 111 font-weight: 600; 112 } 113 114 .item .footer .c { 115 width: 60px; 116 height: 30px; 117 line-height: 30px; 118 margin-top: -4px; 119 margin-right: 20px; 120 border-radius: 4px; 121 text-align: center; 122 background-color: rgb(239, 232, 214); 123 font-size: 16px; 124 font-weight: 600; 125 display: inline-block; 126 } 127 128 .item .detail { 129 margin-top: 12px; 130 margin-bottom: 8px; 131 font-size: 16px; 132 line-height: 24px; 133 white-space: pre-wrap; 134 padding-left: 12px; 135 padding-right: 12px; 136 color: #545454; 137 } 138 139 .refresh { 140 text-align: center; 141 font-size: 14px; 142 padding: 20px 0; 143 } 144 145 .mask { 146 position: fixed; 147 z-index: 999; 148 left: 0; 149 right: 0; 150 top: 0; 151 bottom: 0; 152 background-color: rgba(0, 0, 0, 0.3); 153 } 154 155 .mask .close { 156 width: 48px; 157 height: 48px; 158 position: absolute; 159 left: calc(50% - 24px); 160 top: calc(56px - 24px); 161 background-color: #FFFFFF; 162 border-radius: 100px; 163 } 164 165 .container { 166 width: 100%; 167 margin-top: 108px; 168 height: calc(100% - 108px); 169 background-color: #FFFFFF; 170 box-sizing: border-box; 171 padding: 0 20px; 172 padding-bottom: 40px; 173 background-color: #E7DBBC; 174 } 175 176 .container .item { 177 box-sizing: border-box; 178 padding-bottom: 40px; 179 padding-top: 20px; 180 overflow-y: auto; 181 max-height: 100%; 182 } 183 184 .container .item.show-analyze { 185 height: 100%; 186 } 187 188 .noscroll { 189 position: fixed; 190 left: 0; 191 right: 0; 192 top: 0; 193 bottom: 0; 194 height: 100%; 195 } 196 197 .mask .share { 198 background-color: #FFFFFF; 199 height: 100px; 200 } 201 202 .mask .share img { 203 width: 40px; 204 height: 40px; 205 position: absolute; 206 right: 10px; 207 top: 20px 208 } 209 210 .mask .share label { 211 position: absolute; 212 left: 36px; 213 right: 36px; 214 top: 16px; 215 text-align: center; 216 font-size: 17px; 217 line-height: 30px; 218 } 219 220 .mask .close2 { 221 width: 48px; 222 height: 48px; 223 position: absolute; 224 left: calc(50% - 24px); 225 top: calc(160px - 24px); 226 background-color: #FFFFFF; 227 border-radius: 100px; 228 } 229 230 .disable { 231 color: #A2A2A2; 232 background-color: #C4C4C4; 233 border-radius: 4px; 234 } 235 </style> 236 </head> 237 238 <body> 239 <div id="app" v-cloak style="display: none;" :class="{ noscroll: (popItem != null || showShare) }"> 240 <div class="refresh" :style="{ height: distance + 'px', 'line-height': distance + 'px' }" v-if="showRefresh">{{ refreshText }}</div> 241 <el-row style="margin-top: 0px;"> 242 <el-col :span="24" :gutter="20" v-for="(item, index) in messages" 243 v-if="!checkMySteel(item.telegraph_text)"> 244 <div class="item"> 245 <div class="voice" v-if="checkVideo(item.telegraph_time)"> 246 <img v-if="!item.playing && item.first" src="./image/scfi/voice1.png" @click="audioClick(item, index)"/> 247 <img v-else-if="item.playing" src="./image/scfi/voice1_play.gif" @click="audioClick(item, index)"/> 248 <img v-else src="./image/scfi/voice1_stop.png" @click="audioClick(item, index)"/> 249 <audio :ref="'audio' + index" :src="item.telegraph_summary" style="display: none;" @ended="audioEnded(item, index)"></audio> 250 </div> 251 <div class="content" :class="{ hidden: item.hidden }" v-html="item.telegraph_text" 252 @click="wrapOrHide(item, index)"> 253 254 </div> 255 <div class="footer"> 256 <div class="l">{{ formatDate(item.telegraph_time) }}</div> 257 <div style="display: flex;align-items: center;"> 258 <div class="c" @click="share(item, index)"> 259 <div class="text" :class="{ disable: isiOS }"> 260 å享 261 </div> 262 </div> 263 <div class="r" @click="showOrHide(item, index)"> 264 <div class="text"> 265 æ¶è®¯åæ 266 </div> 267 <img v-if="!item.open" src="./image/scfi/close.png" /> 268 <img v-if="item.open" src="./image/scfi/open.png" /> 269 </div> 270 </div> 271 </div> 272 <div v-if="item.open" class="detail">{{item.telegraph_analyze}}</div> 273 </div> 274 </el-col> 275 </el-row> 276 277 <div class="mask" v-if="popItem"> 278 <img @click="closeMask" class="close" src="./image/close.png"/> 279 <el-col class="container" :span="24" :gutter="20" 280 v-if="!checkMySteel(popItem.telegraph_text)"> 281 <div class="item" :class="{ 'show-analyze': popItem.open }"> 282 <div class="voice" style="top: 22px;" v-if="checkVideo(popItem.telegraph_time)"> 283 <img v-if="!popItem.playing && popItem.first" src="./image/scfi/voice1.png" @click="audioClick(popItem, 'p')"/> 284 <img v-else-if="popItem.playing" src="./image/scfi/voice1_play.gif" @click="audioClick(popItem, 'p')"/> 285 <img v-else src="./image/scfi/voice1_stop.png" @click="audioClick(popItem, 'p')"/> 286 287 <audio ref="audiop" :src="popItem.telegraph_summary" style="display: none;" @ended="audioEnded(popItem, 'p')"></audio> 288 </div> 289 <div class="content" :class="{ hidden: popItem.hidden }" v-html="popItem.telegraph_text" 290 @click="wrapOrHidePop(popItem)"> 291 292 </div> 293 <div class="footer"> 294 <div class="l">{{ formatDate(popItem.telegraph_time) }}</div> 295 <div class="r" @click="showOrHidePop(popItem)"> 296 <div class="text"> 297 æ¶è®¯åæ 298 </div> 299 <img v-if="!popItem.open" src="./image/scfi/close.png" /> 300 <img v-if="popItem.open" src="./image/scfi/open.png" /> 301 </div> 302 </div> 303 <div v-if="popItem.open" class="detail">{{popItem.telegraph_analyze}}</div> 304 </div> 305 </el-col> 306 </div> 307 308 <div class="mask" v-if="showShare"> 309 <div class="share"> 310 <img src="./image/share.png"/> 311 <label>{{ shareTitle }}<br/>请ç¹å»å³ä¸è§æé®å享</label>
312 </div> 313 <img @click="closeMask2" class="close2" src="./image/close.png"/> 314 </div> 315 </div> 316
316<script type="text/javascript" src="./js/jquery.min.js"></script>
316 317
317<script type="text/javascript" src="./js/vue.js"></script>
317 318
318<script type="text/javascript" src="./element-ui/lib/index.js"></script>
318 319
319<script> 320 Date.prototype.format = function(fmt) { 321 var o = { 322 "M+": this.getMonth() + 1, //æä»½ 323 "d+": this.getDate(), //æ¥ 324 "h+": this.getHours(), //å°æ¶ 325 "m+": this.getMinutes(), //å 326 "s+": this.getSeconds(), //ç§ 327 "q+": Math.floor((this.getMonth() + 3) / 3), //å£åº¦ 328 "S": this.getMilliseconds() //æ¯«ç§ 329 }; 330 if (/(y+)/.test(fmt)) { 331 fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 332 } 333 for (var k in o) { 334 if (new RegExp("(" + k + ")").test(fmt)) { 335 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]) 336 .length))); 337 } 338 } 339 return fmt; 340 } 341 342 const getQueryString = function(variable) { 343 var query = window.location.search.substring(1); 344 var vars = query.split("&"); 345 for (var i = 0; i < vars.length; i++) { 346 var pair = vars[i].split("="); 347 if (pair[0] == variable) { 348 return pair[1]; 349 } 350 } 351 return (false); 352 } 353 354 const throttle = function(f, w) { 355 let t = null; 356 return function() { 357 if (t) { 358 return; 359 } 360 t = setTimeout(() => { 361 f.apply(this, arguments); 362 t = null; 363 }, w) 364 } 365 } 366 367 let beforeScrollTop = 0 368 369 const handleScroll = function(p) { 370 var scrollTop = 371 document.documentElement.scrollTop || document.body.scrollTop 372 var clientHeight = 373 document.documentElement.clientHeight || document.body.clientHeight 374 var scrollHeight = 375 document.documentElement.scrollHeight || document.body.scrollHeight 376 377 const offset = 20 378 if (scrollTop >= beforeScrollTop) { 379 if (scrollTop + clientHeight + offset >= scrollHeight) { 380 console.log("æ»å¨è§¦åº") 381 p() 382 } 383 } 384 beforeScrollTop = scrollTop 385 } 386 387 let now = new Date().format('yyyy-MM-dd hh:mm:ss') 388 389 setTimeout(function() { 390 $('#app').css('display', 'block') 391 }, 500) 392 393 var u = navigator.userAgent; 394 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 395 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) 396 397 var app = new Vue({ 398 el: "#app", 399 data: { 400 selectIndex: '1', 401 id: '', 402 messages: [], 403 from: 0, 404 size: 10, 405 406 showRefresh: false, 407 startY: 0, 408 scrollTop: 0, 409 distance: 0, 410 refreshText: 'å è½½ä¸...', 411 popItem: null, 412 shareIndex: 0, 413 showShare: false, 414 topPosi: 0, 415 shareTitle: '', 416 loading: false, 417 isiOS: isiOS, 418 }, 419 mounted: function() { 420 this.id = getQueryString('id') 421 this.initDay() 422 423 var that = this 424 425 // 䏿å è½½ 426 window.onscroll = function() { 427 throttle(handleScroll(that.loadMore), 10000) 428 } 429 430 // 䏿巿° 431 document.addEventListener('touchstart', function (e) { 432 that.startY = e.changedTouches[0].pageY 433 that.scrollTop = $(window).scrollTop() 434 }, { passive: false }) 435 436 document.addEventListener('touchmove', function (e) { 437 that.distance = e.changedTouches[0].pageY - that.startY 438 if(that.distance >= 20) { 439 that.distance = 20 440 } 441 442 if (that.distance > 0 && that.scrollTop == 0 && !that.popItem && !that.showShare) { 443 that.showRefresh = true 444 that.refreshText = "æ¾å¼å³å¯å·æ°" 445 e.preventDefault() 446 } 447 }, { passive: false }); 448 449 document.addEventListener('touchend', function (e) { 450 if (that.showRefresh) { 451 that.refreshText = "å è½½ä¸..." 452 now = new Date().format('yyyy-MM-dd hh:mm:ss') 453 that.from = 0 454 that.messages = [] 455 setTimeout(function() { 456 that.initDay() 457 }, 1000) 458 } 459 }, { passive: false }); 460 461 if(that.id) { 462 $.ajax({ 463 url: "https://service.chinatsi.net/api_v1/newskan/cls/telegraph/" + that.id, 464 contentType: "application/json", 465 dataType: "JSON", 466 type: "GET", 467 timeout: 6000, 468 success: function(data) { 469 data[0].hidden = true 470 data[0].open = false 471 data[0].playing = false 472 data[0].first = true 473 that.popItem = data[0] 474 that.popItem.telegraph_text = that.popItem.telegraph_text.replaceAll('ã', 475 '<label style="font-weight: bold;">ã').replaceAll('ã', 476 'ã</label>') 477 478 var title = that.popItem.telegraph_text.replaceAll('<label style="font-weight: bold;">ã' , 'ã').replaceAll('ã</label>', 'ã') 479 480 setTimeout(function(){ 481 that.regWXShare( 482 that.popItem._id, 483 title, 484 that.popItem.telegraph_analyze, 485 function(){}) 486 }, 2000) 487 } 488 }) 489 } 490 }, 491 computed: { 492 493 }, 494 watch: { 495 496 }, 497 methods: { 498 audioClick: function(iitem, iindex) { 499 var audio 500
501 this.messages.forEach((item, index) => { 502 if(iindex != index) { 503 audio = this.$refs['audio' + index].length ? this.$refs['audio' + index][0] : this.$refs['audio' + index] 504 if(item.playing) { 505 item.first = false 506 } 507 item.playing = false 508 audio.pause() 509 } 510 }) 511 512 audio = this.$refs['audio' + iindex].length ? this.$refs['audio' + iindex][0] : this.$refs['audio' + iindex] 513 if(iitem.playing) { 514 iitem.playing = !iitem.playing 515 iitem.first = false 516 audio.pause() 517 } else { 518 iitem.playing = !iitem.playing 519 audio.play() 520 } 521 }, 522 audioEnded: function(item, index) { 523 var audio = this.$refs['audio' + index].length ? this.$refs['audio' + index][0] : this.$refs['audio' + index] 524 item.playing = false 525 item.first = true 526 audio.pause() 527 }, 528 checkVideo: function(t) { 529 var t1 = new Date().valueOf() 530 var t2 = new Date(t).valueOf() 531 if(t1 - t2 > 1000 * 60 * 60 * 24 * 2) { 532 // è¶ è¿ä¸¤å¤©ä¸æ¾ç¤º 533 return false 534 } 535 return true 536 }, 537 showLoading: function(p) { 538 /* 539 this.loading = this.$loading({ 540 lock: true, 541 text: 'å è½½ä¸...', 542 spinner: 'el-icon-loading', 543 background: 'rgba(0, 0, 0, 0.7)' 544 }) 545 */ 546 }, 547 hideLoading: function(p) { 548 // this.loading.close() 549 }, 550 cloneDeep: function(p) { 551 return JSON.parse(JSON.stringify(p)) 552 }, 553 formatDate: function(p) { 554 var d = new Date(p) 555 var n = new Date() 556 557 if (d.getDate() == n.getDate()) { 558 return new Date(p).format('hh:mm:ss') 559 } else { 560 return new Date(p).format('yyyy-MM-dd hh:mm:ss') 561 } 562 }, 563 closeAll: function() { 564 for (var i = 0; i < this.messages.length; i++) { 565 this.messages[i].open = false 566 var item = this.cloneDeep(this.messages[i]) 567 this.$set(this.messages, i, item) 568 } 569 }, 570 loadMore: function(p) { 571 if(!this.loading) { 572 this.loading = true 573 this.from += 10 574 this.initDay() 575 } 576 }, 577 initShare: function(item, index, cb) { 578 var that = this 579 var url = location.href.split('#')[0] 580 $.ajax({ 581 url: "https://service.chinatsi.net/api_v1/wechat/data/message/jsapisign?url=" + 582 encodeURIComponent(url), 583 contentType: "application/json", 584 dataType: "JSON", 585 type: "GET", 586 timeout: 6000, 587 success: function(data) { 588 wx.config({ 589 beta: true, 590 debug: false, 591 appId: "wx4ad896a32d1a6c9a", 592 timestamp: data.result.timestamp, 593 nonceStr: data.result.noncestr, 594 signature: data.result.signature, 595 jsApiList: [ 596 'checkJsApi', 597 'updateAppMessageShareData', 598 'updateTimelineShareData' 599 ] 600 }); 601 that.firstConfig = false 602 603 that.regShareItem(item, cb) 604 } 605 }) 606 }, 607 regShareItem: function(item, cb) { 608 var that = this 609 var title = item.telegraph_text.replaceAll('<label style="font-weight: bold;">ã' , 'ã').replaceAll('ã</label>', 'ã') 610 var desc = item.telegraph_analyze 611 that.showLoading() 612 613 this.regWXShare(item._id, title, desc, cb) 614 }, 615 regWXShare: function(id, title, desc, cb) { 616 var that = this 617 wx.ready(function() {
618 that.hideLoading() 619 wx.updateAppMessageShareData({ 620 title: title, 621 link: 'https://vote.chinatsi.net/wsjcommon/newsletter.html?id=' + id, 622 desc: desc, 623 imgUrl: 'https://vote.chinatsi.net/wsjcommon/image/tsi.png', 624 success: function(res) { 625 if(cb) { 626 cb() 627 } 628 } 629 }); 630 631 wx.updateTimelineShareData({ 632 title: title, 633 link: 'https://vote.chinatsi.net/wsjcommon/newsletter.html?id=' + id, 634 desc: desc, 635 imgUrl: 'https://vote.chinatsi.net/wsjcommon/image/tsi.png', 636 success: function(res) { 637 if(cb) { 638 cb() 639 } 640 } 641 }); 642 }) 643 }, 644 initDay: function() { 645 var that = this 646 647 $.ajax({ 648 url: "https://service.chinatsi.net/api_v1/newskan/cls/telegraph", 649 contentType: "application/json;charset=utf-8", 650 dataType: "json", 651 type: "POST", 652 data: JSON.stringify({ 653 datetime_str: now, 654 from: that.from, 655 size: that.size 656 }), 657 success: function(data) { 658 if (data.length > 0) { 659 let title = '' 660 let desc = '' 661 for (var i = 0; i < data.length; i++) { 662 if (i == 0) { 663 title = data[i].telegraph_text 664 desc = data[i].telegraph_analyze 665 } 666 667 data[i].open = false 668 data[i].hidden = true 669 data[i].playing = false 670 data[i].first = true 671 data[i].telegraph_text = data[i].telegraph_text.replaceAll('ã', 672 '<label style="font-weight: bold;">ã').replaceAll('ã', 673 'ã</label>') 674 } 675 that.messages = that.messages.concat(data) 676 that.showRefresh = false 677 678 that.initShare(that.messages[0], 0) 679 that.loading = false 680 } else { 681 that.$message('ææ æ°æ®') 682 } 683 }, 684 error: function(err) { 685 that.$message(err.statusText) 686 } 687 }) 688 }, 689 showOrHide: function(item, index) { 690 var that = this 691 var newItem = this.cloneDeep(item) 692 newItem.open = !item.open 693 694 that.$set(that.messages, index, newItem) 695 }, 696 showOrHidePop: function(item) { 697 item.open = !item.open 698 }, 699 wrapOrHide: function(item, index) { 700 var that = this 701 var newItem = this.cloneDeep(item) 702 newItem.hidden = !item.hidden 703 704 that.$set(that.messages, index, newItem) 705 }, 706 wrapOrHidePop: function(item) { 707 item.hidden = !item.hidden 708 }, 709 share: function(item, index) { 710 if(this.isiOS) return 711 712 this.topPosi = this.scrollTop 713 this.shareIndex = index 714 this.showShare = true 715 716 var that = this 717 const title = item.telegraph_text.replaceAll('<label style="font-weight: bold;">ã' , 'ã').replaceAll('ã</label>', 'ã') 718 const desc = item.telegraph_analyze 719 720 let shareTitle = title.replaceAll('ã', '').replaceAll('ã', '') 721 this.shareTitle = 'ã' + shareTitle.substring(0, shareTitle.length > 10 ? 10 : shareTitle.length) + '...ã' 722 723 this.initShare(item, index, function() { 724 $([document.documentElement, document.body]).animate({ 725 scrollTop: that.topPosi 726 }, 1) 727 }) 728 }, 729 closeDialog: function() { 730 parent.top.postMessage(window.parent.postMessage({ 731 cmd: 'closeDialog' 732 }, '*')); 733 }, 734 checkMySteel: function(p) { 735 if (p.toLowerCase().indexOf('mysteel') > -1) { 736 return true 737 } else if (p.indexOf('æçé¢é') > -1) { 738 return true 739 } else if (p.indexOf('ææ¯ä¸åè¡ä¸æ°é»åæå¸') > -1) { 740 return true 741 } 742 return false 743 }, 744 closeMask: function() { 745 this.popItem = null 746 }, 747 closeMask2: function() { 748 this.showShare = false; 749 $([document.documentElement, document.body]).animate({ 750 scrollTop: this.topPosi 751 }, 1) 752 753 this.initShare(this.messages[0], 0) 754 } 755 } 756 }); 757 </script>
757 758 </body> 759</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.