Sākums Izpētīt Palīdzība
Pierakstīties
qmx
/
jy
14
0
Atdalīts 0
Faili Problēmas 2 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

feat: 新增H5 年终报告

zhangyuhan 3 gadi atpakaļ
vecāks
af560e144c
revīzija
107dd7bf5c
77 mainītis faili ar 5154 papildinājumiem un 10 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 716 5
      src/jfw/modules/app/src/web/templates/active/yearEndReport/index.html
  2. 397 0
      src/jfw/modules/app/src/web/templates/active/yearEndReport/result.html
  3. 1834 0
      src/web/staticres/common-module/yearEndReport/css/index.css
  4. 56 0
      src/web/staticres/common-module/yearEndReport/css/music.css
  5. 286 0
      src/web/staticres/common-module/yearEndReport/css/result.css
  6. BIN
      src/web/staticres/common-module/yearEndReport/images/BG/bg.png
  7. BIN
      src/web/staticres/common-module/yearEndReport/images/P0/big-zero.png
  8. BIN
      src/web/staticres/common-module/yearEndReport/images/P0/fish-zero.png
  9. BIN
      src/web/staticres/common-module/yearEndReport/images/P0/sm-zero.png
  10. BIN
      src/web/staticres/common-module/yearEndReport/images/P0/xd-zero.png
  11. BIN
      src/web/staticres/common-module/yearEndReport/images/P1/bottom-bg.png
  12. BIN
      src/web/staticres/common-module/yearEndReport/images/P1/meteor-mini.png
  13. BIN
      src/web/staticres/common-module/yearEndReport/images/P1/meteor.png
  14. BIN
      src/web/staticres/common-module/yearEndReport/images/P10/big-ten.png
  15. BIN
      src/web/staticres/common-module/yearEndReport/images/P10/fish-ten.png
  16. BIN
      src/web/staticres/common-module/yearEndReport/images/P10/pao-ten.png
  17. BIN
      src/web/staticres/common-module/yearEndReport/images/P10/sm-ten.png
  18. BIN
      src/web/staticres/common-module/yearEndReport/images/P11/ball-eleven.png
  19. BIN
      src/web/staticres/common-module/yearEndReport/images/P11/fish-eleven.png
  20. BIN
      src/web/staticres/common-module/yearEndReport/images/P11/sm-star-eleven.png
  21. BIN
      src/web/staticres/common-module/yearEndReport/images/P12/big-star-twelve.png
  22. BIN
      src/web/staticres/common-module/yearEndReport/images/P12/sm-star-twelve.png
  23. BIN
      src/web/staticres/common-module/yearEndReport/images/P12/xd-twelve.png
  24. BIN
      src/web/staticres/common-module/yearEndReport/images/P2/ball-two.png
  25. BIN
      src/web/staticres/common-module/yearEndReport/images/P2/fish-two.png
  26. BIN
      src/web/staticres/common-module/yearEndReport/images/P2/star-two.png
  27. BIN
      src/web/staticres/common-module/yearEndReport/images/P2/tail-two.png
  28. BIN
      src/web/staticres/common-module/yearEndReport/images/P3/ball-three.png
  29. BIN
      src/web/staticres/common-module/yearEndReport/images/P3/star-three.png
  30. BIN
      src/web/staticres/common-module/yearEndReport/images/P3/yellow-three.png
  31. BIN
      src/web/staticres/common-module/yearEndReport/images/P4/big-four.png
  32. BIN
      src/web/staticres/common-module/yearEndReport/images/P4/fish-four.png
  33. BIN
      src/web/staticres/common-module/yearEndReport/images/P4/sm-four.png
  34. BIN
      src/web/staticres/common-module/yearEndReport/images/P5/aoyi-five.png
  35. BIN
      src/web/staticres/common-module/yearEndReport/images/P5/ball-five.png
  36. BIN
      src/web/staticres/common-module/yearEndReport/images/P5/fish-five.png
  37. BIN
      src/web/staticres/common-module/yearEndReport/images/P5/yun-five.png
  38. BIN
      src/web/staticres/common-module/yearEndReport/images/P6/ball-six.png
  39. BIN
      src/web/staticres/common-module/yearEndReport/images/P6/fish-six.png
  40. BIN
      src/web/staticres/common-module/yearEndReport/images/P6/group-six.png
  41. BIN
      src/web/staticres/common-module/yearEndReport/images/P6/xd-six.png
  42. BIN
      src/web/staticres/common-module/yearEndReport/images/P7/xd-seven.png
  43. BIN
      src/web/staticres/common-module/yearEndReport/images/P8/ball-eight.png
  44. BIN
      src/web/staticres/common-module/yearEndReport/images/P8/xd-eight.png
  45. BIN
      src/web/staticres/common-module/yearEndReport/images/P9/ball-nine.png
  46. BIN
      src/web/staticres/common-module/yearEndReport/images/music/music-off.png
  47. BIN
      src/web/staticres/common-module/yearEndReport/images/music/music.png
  48. BIN
      src/web/staticres/common-module/yearEndReport/images/next/next.png
  49. BIN
      src/web/staticres/common-module/yearEndReport/images/result/ball.png
  50. BIN
      src/web/staticres/common-module/yearEndReport/images/result/bg.png
  51. BIN
      src/web/staticres/common-module/yearEndReport/images/result/create-btn.png
  52. BIN
      src/web/staticres/common-module/yearEndReport/images/result/item-bg-1.png
  53. BIN
      src/web/staticres/common-module/yearEndReport/images/result/item-bg-2.png
  54. BIN
      src/web/staticres/common-module/yearEndReport/images/result/item-bg-3.png
  55. BIN
      src/web/staticres/common-module/yearEndReport/images/result/item-bg-4.png
  56. BIN
      src/web/staticres/common-module/yearEndReport/images/result/item-bg-5.png
  57. BIN
      src/web/staticres/common-module/yearEndReport/images/result/item-bg-6.png
  58. BIN
      src/web/staticres/common-module/yearEndReport/images/result/item-bg-7.png
  59. BIN
      src/web/staticres/common-module/yearEndReport/images/result/jy-logo.png
  60. BIN
      src/web/staticres/common-module/yearEndReport/images/result/jy-qcode.png
  61. BIN
      src/web/staticres/common-module/yearEndReport/images/result/label-1.png
  62. BIN
      src/web/staticres/common-module/yearEndReport/images/result/label-2.png
  63. BIN
      src/web/staticres/common-module/yearEndReport/images/result/label-3.png
  64. BIN
      src/web/staticres/common-module/yearEndReport/images/result/label-4.png
  65. BIN
      src/web/staticres/common-module/yearEndReport/images/result/label-5.png
  66. BIN
      src/web/staticres/common-module/yearEndReport/images/result/label-6.png
  67. BIN
      src/web/staticres/common-module/yearEndReport/images/result/label-7.png
  68. BIN
      src/web/staticres/common-module/yearEndReport/images/result/label-8.png
  69. BIN
      src/web/staticres/common-module/yearEndReport/images/result/label-9.png
  70. BIN
      src/web/staticres/common-module/yearEndReport/images/result/music.png
  71. BIN
      src/web/staticres/common-module/yearEndReport/images/result/share-btn.png
  72. BIN
      src/web/staticres/common-module/yearEndReport/images/result/star.png
  73. BIN
      src/web/staticres/common-module/yearEndReport/images/result/superman.png
  74. 723 0
      src/web/staticres/common-module/yearEndReport/js/common.js
  75. 29 0
      src/web/staticres/common-module/yearEndReport/js/rem.js
  76. 716 5
      src/web/templates/active/yearEndReport/index.html
  77. 397 0
      src/web/templates/active/yearEndReport/result.html

+ 716 - 5
src/jfw/modules/app/src/web/templates/active/yearEndReport/index.html
Parādīt failu 

@@ -1,10 +1,721 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="zh-CN" style="font-size: 50px;">
 
+
 
 <head>
 
-    <meta charset="UTF-8">
 
-    <title>this is year report</title>
 
+    <meta charset="utf-8">
 
+    <meta name="keywords" content="剑鱼标讯">
 
+    <meta name="description" content="剑鱼标讯">
 
+    <meta name="author" content="剑鱼标讯">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport"
 
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 
+    <meta name="x5-page-mode" content="app">
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <meta name="format-detection" content="telephone=no">
 
+    <meta name="referrer" content="no-referrer">
 
+    <link rel="icon" href="/favicon.ico">
 
+    <title>年度报告</title>
 
+    <link rel="preload" as="style" href="https://cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css"/>
 
+    <link rel="preload" as="style" href="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.css"/>
 
+    <l  ink rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css"/>
 
+    <link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/animate-css/4.1.1/animate.css"/>
 
+    <link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.css"/>
 
+    <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/css/music.css">
 
+    <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/css/index.css">
 
+    <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/rem.js"></script>
 
 </head>
 
+
 
 <body>
 
-app年报
 
+
 
+<div class="jy-report" v-cloak>
 
+    <!-- S--MUSIC -->
 
+    <audio id="audio" controls loop src='https://www.jianyu360.cn/big-member/video/music.mp3' autoplay></audio>
 
+    <div id="music-control-box">
 
+        <div class="music-icon-box">
 
+            <img class="icon-music-on" src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/music/music.png' />
 
+            <img class="icon-music-off" src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/music/music-off.png' />
 
+        </div>
 
+    </div>
 
+    <!-- E--MUSIC -->
 
+    <!-- S--Toast -->
 
+    <div class="jy-toast" style="z-index: 2003;" v-show="showToastText">
 
+        <div class="jy-toast__text">${showToastText}</div>
 
+    </div>
 
+    <!-- E--Toast -->
 
+    <!-- Swiper -->
 
+    <div class="swiper-container" ref="mySwiper">
 
+        <div class="swiper-wrapper">
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-1">
 
+                        <div class="user-info-group">
 
+                            <img animate-name="up" animate-delay="600" class="jy-user-img" :src="pageInfo.user_head" alt="">
 
+                            <p animate-name="up" animate-delay="600" class="jy-user-name">Hi~<span>${pageInfo.user_name}</span></p>
 
+                            <p animate-name="up" animate-delay="200" class="tip-info">
 
+                                <span class="text-hello">欢迎来到你的...</span>
 
+                                <span>2021剑鱼之旅</span>
 
+                            </p>
 
+                            <div class="read_pact" animate-name="up" animate-delay="800">
 
+                                <input @change="changeReadPact" v-model="readPact" type="checkbox" id="read" name="read_pact" value="read_pact">
 
+                                <label for="read">同意剑鱼统计我的使用数据，</label><a href="">查看授权协议</a>
 
+                            </div>
 
+                        </div>
 
+                        <div animate-name="up" animate-delay="500" class="go-report">
 
+                            <div class="go-button" @click="goStart">即刻启程</div>
 
+                        </div>
 
+                        <div class="add-layer-group">
 
+                            <img class="meteor-left" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P1/meteor.png">
 
+                            <img class="meteor-mini" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P1/meteor-mini.png">
 
+                            <img class="meteor-bg" src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P1/bottom-bg.png">
 
+                        </div>
 
+                        <img animate-name="up" animate-delay="900" class="jy-logo" src="https://www.jianyu360.cn/images/pc/logo.png" alt="">
 
+                        <div class="next-page"></div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+             <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-2">
 
+                        <div class="meet">
 
+                            <p animate-name="up" animate-delay="200" class="hello">醉纸鸢，你好呀！</p>
 
+                            <p animate-name="up" animate-delay="400" style="margin-top: 0.32rem; margin-left: 1.54rem;">
 
+                                <span class="text">还记得</span>
 
+                                <span class="time">2019年3月27日</span>
 
+                                <span class="text">吗？</span>
 
+                            </p>
 
+                            <div class="star-two">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P2/star-two.png" alt="">
 
+                            </div>
 
+                            <p animate-name="up" animate-delay="800" class="text-a" style="margin-top: 4.52rem;">很开心能遇见你</p>
 
+                            <div class="fish-two">
 
+                                <img class="swiper-lazy"  data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P2/fish-two.png" alt="">
 
+                            </div>
 
+                            <div class="tail-two">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P2/tail-two.png" alt="">
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                            <div>
 
+                                <img class="swiper-lazy ball-two" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P2/ball-two.png" alt="">
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-3">
 
+                        <div class="usage-days">
 
+                            <div class="today">今天</div>
 
+                            <div class="text">是我们一起同行的</div>
 
+                            <div class="days">第732天</div>
 
+                        </div>
 
+                        <div class="star-three">
 
+                            <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P3/star-three.png" alt="">
 
+                        </div>
 
+                        <div class="ball-three">
 
+                            <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P3/ball-three.png" alt="">
 
+                        </div>
 
+                        <div class="yellow-three">
 
+                            <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P3/yellow-three.png" alt="">
 
+                        </div>
 
+                        <p class="moqi">
 
+                            <span class="mf">“免费看,不遮挡”的承诺</span>
 
+                            <span class="mf" style="margin-top: 0.16rem;">是你我之间的永久的默契</span>
 
+                        </p>
 
+                        <div class="btn-next">
 
+                            <div class="next-page"></div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-4">
 
+                        <div class="year">
 
+                            <div class="text-1">
 
+                                <div class="jin">近一年</div>
 
+                                <div class="day">
 
+                                    <div class="ty">你登录了</div>
 
+                                    <div class="days">279天</div>
 
+                                    <div class="ty">剑鱼标讯</div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="sm-four">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P4/sm-four.png" alt="">
 
+                            </div>
 
+                            <div class="fish-four">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P4/fish-four.png" alt="">
 
+                            </div>
 
+                            <div class="big-four">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P4/big-four.png" alt="">
 
+                            </div>
 
+                            <div class="text-2">
 
+                                <div class="night">
 
+                                    <div class="big-day">有138天</div>
 
+                                    <div class="ty">的深夜</div>
 
+                                </div>
 
+                                <div class="ty" style="margin-left: 2.52rem;">仍在使用剑鱼标讯</div>
 
+                            </div>
 
+                            <div class="picture">
 
+                                <img class="swiper-lazy" data-src="" alt="">
 
+                            </div>
 
+                            <div class="text-bottom">
 
+                                <div class="text-3">不是投标人爱熬夜</div>
 
+                                <div class="text-3" style="margin-top: 0.16rem;">是黑夜需要投标人这颗璀璨的星</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-5">
 
+                        <div class="item">
 
+                            <div class="this">近一年</div>
 
+                            <div class="gongsi">郑州大学第一附属医院<br>LED显示屏系统</div>
 
+                            <div class="guanzhu">是你最关注的项目</div>
 
+                            <div class="yun-five">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P5/yun-five.png" alt="">
 
+                            </div>
 
+                            <div class="ball-five">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P5/ball-five.png" alt="">
 
+                            </div>
 
+                            <div class="fish-five">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P5/fish-five.png" alt="">
 
+                            </div>
 
+                            <div class="aoyi-five"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P5/aoyi-five.png" alt=""></div>
 
+                            <div class="text-bottom">
 
+                                <p>无论结果如何，我知道</p>
 
+                                <p style="margin-top: 0.16rem;">这些标讯对你来说一定有特别的意义</p>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-6">
 
+                        <div class="message">
 
+                            <div class="year">近一年</div>
 
+                            <div class="you">你一共浏览了</div>
 
+                            <div class="num">73699条</div>
 
+                            <div class="xiangmu">项目信息</div>
 
+                            <div class="ball-six"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P6/ball-six.png" alt=""></div>
 
+                            <div class="group-six"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P6/group-six.png" alt=""></div>
 
+                            <div class="fish-six"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P6/fish-six.png" alt=""></div>
 
+                            <div class="xd-six"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P6/xd-six.png" alt=""></div>
 
+                            <div class="text-one">
 
+                                <p>精准、及时的数据</p>
 
+                                <p style="margin-top: 0.16rem;">都源于剑鱼悄悄的努力</p>
 
+                            </div>
 
+                            <div class="text-two">
 
+                                <div class="box">
 
+                                    <p class="p-one">招标信息库</p>
 
+                                    <span class="s-one">9000万+</span>
 
+                                    <p class="p-one">项目库</p>
 
+                                    <span class="s-one">4800万+</span>
 
+                                </div>
 
+                                <div class="box">
 
+                                    <p class="p-one">企业库</p>
 
+                                    <span class="s-one">4500万+</span>
 
+                                    <p class="p-one">采购单位库</p>
 
+                                    <span class="s-one">200万+</span>
 
+                                </div>
 
+                            </div>
 
+                            <div class="text-bottom">让你不遗漏任何商机</div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-7">
 
+                        <div class="sum">
 
+                            <div class="year">近一年</div>
 
+                            <div class="you">你搜索了</div>
 
+                            <div class="num">3654次</div>
 
+                            <div class="xd-seven"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P7/xd-seven.png" alt=""></div>
 
+                            <div class="text-bottom">求索力让你的成功触手可及</div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-8">
 
+                        <div class="friend">
 
+                            <div class="year">近一年</div>
 
+                            <div class="num">765个</div>
 
+                            <div class="you">企业成为你的新朋友</div>
 
+                            <div class="ball-eight"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P8/ball-eight.png" alt=""></div>
 
+                            <div class="xd-eight"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P8/xd-eight.png" alt=""></div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">通过企业搜索、采购单位画像</div>
 
+                                <div class="text">了解甲方、找到合作</div>
 
+                                <div class="text">果断的执行力，让无数人为你痴迷</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-9">
 
+                        <div class="mouth">
 
+                            <div class="year">
 
+                                <p class="nian" style="display: contents">近一年，</p>
 
+                                <span class="yue" style="color: #70EEFF;">7月</span>
 
+                            </div>
 
+                            <div class="you">是你最繁忙的时候</div>
 
+                            <div><img class="swiper-lazy" data-src="" alt=""></div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">或许奔波在投标路上</div>
 
+                                <div class="text">或许驰骋在投标知识的海洋</div>
 
+                                <div class="text">追梦的你，满怀热忱</div>
 
+                            </div>
 
+                            <div class="banner-yue">
 
+                                <div class="banner-yue-one">7</div>
 
+                                <div class="banner-yue-two">月</div>
 
+                            </div>
 
+                            <div class="ball-nine"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P9/ball-nine.png" alt=""></div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-10">
 
+                        <div class="ten">
 
+                            <div class="pao-ten">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P10/pao-ten.png" alt="">
 
+                            </div>
 
+                            <div class="fish-ten">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P10/fish-ten.png" alt="">
 
+                            </div>
 
+                            <div class="big-ten">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P10/big-ten.png" alt="">
 
+                            </div>
 
+                            <div class="sm-ten">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P10/sm-ten.png" alt="">
 
+                            </div>
 
+                            <p class="year">近一年</p>
 
+                            <div class="you">你关注的行业累计发布了</div>
 
+                            <span class="num">3698条</span>
 
+                            <div class="gonggao">项目公告</div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">即使受到疫情的影响</div>
 
+                                <div class="text">投标人依旧稳步向前</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-11">
 
+                        <div class="eleven">
 
+                            <div class="ball-eleven">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P11/ball-eleven.png" alt="">
 
+                            </div>
 
+                            <div class="fish-eleven">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P11/fish-eleven.png" alt="">
 
+                            </div>
 
+                            <p class="year">近一年</p>
 
+                            <div class="you">慧眼识珠的你,体验了剑鱼</div>
 
+                            <div class="gn">
 
+                                <span class="num">17个</span>
 
+                                <p class="new">新功能</p>
 
+                            </div>
 
+                            <div class="list">
 
+                                <p>免费标讯搜索</p>
 
+                                <p>超级订阅</p>
 
+                                <p>大会员</p>
 
+                                <p>数据导出</p>
 
+                                <p>行业解决方案</p>
 
+                                <p>......</p>
 
+                            </div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">从未枯竭的好奇心</div>
 
+                                <div class="text">让你看到了更大的世界</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-12">
 
+                        <div class="twelve">
 
+                            <div class="text">
 
+                                <div class="sm-star-twelve">
 
+                                    <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P12/sm-star-twelve.png" alt="">
 
+                                </div>
 
+                                <p class="text-1">无论好的坏的</p>
 
+                                <div class="text-1" style="margin-top: 0.16rem;">跌宕且绮丽的2021已结束</div>
 
+                                <div class="text-3">凛冬散尽，星河长明</div>
 
+                                <div class="text-1" style="margin-top: 1.04rem;">为你生成2021年度角色报告</div>
 
+                                <div class="btn">
 
+                                    <div class="sc">生成报告</div>
 
+                                </div>
 
+                                <div class="xd-twelve">
 
+                                    <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P12/xd-twelve.png" alt="">
 
+                                </div>
 
+                                <div class="big-star-twelve">
 
+                                    <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P12/big-star-twelve.png" alt="">
 
+                                </div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <!-- 新用户 -->
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-new-0">
 
+                        <div class="new-zero">
 
+                            <div class="text">
 
+                                <div class="year">2021</div>
 
+                                <div class="sm-zero"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P0/sm-zero.png" alt=""></div>
 
+                                <div class="text-1">
 
+                                    <p>遗憾没有和您相遇</p>
 
+                                    <p>但所有的遗憾</p>
 
+                                    <p>都是2022惊喜的铺垫</p>
 
+                                </div>
 
+                                <div class="text-2">
 
+                                    <div>招免费看，不遮挡服务初心不改</div>
 
+                                    <div>商机线索推荐、AI智能服务中标创新永不停歇</div>
 
+                                </div>
 
+                                <div class="fish-zero"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P0/fish-zero.png" alt=""></div>
 
+                                <div class="xd-zero"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P0/xd-zero.png" alt=""></div>
 
+                                <div class="year" style="margin-top: 3.56rem;">新的一年</div>
 
+                                <div class="text-3">
 
+                                    <div>期待能和你肩并肩</div>
 
+                                    <div>走的更远</div>
 
+                                </div>
 
+                                <div class="btn">即刻体验</div>
 
+                                <div class="big-zero"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P0/big-zero.png" alt=""></div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-5678-kong">
 
+                        <div class="sum">
 
+                            <div class="year">你可能是个慢热的人</div>
 
+                            <div class="you">这一年</div>
 
+                            <div class="num">还未有项目和企业成功引起你的关注</div>
 
+                            <div class="text">不急，未来会有的</div>
 
+                            <div class="xd-seven"><img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P7/xd-seven.png" alt=""></div>
 
+                            <div class="text-bottom">点击试用一下，会有惊喜</div>
 
+                            <div class="btn">试用一下</div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-10-kong">
 
+                        <div class="ten">
 
+                            <div class="pao-ten">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P10/pao-ten.png" alt="">
 
+                            </div>
 
+                            <div class="fish-ten">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P10/fish-ten.png" alt="">
 
+                            </div>
 
+                            <div class="big-ten">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P10/big-ten.png" alt="">
 
+                            </div>
 
+                            <div class="sm-ten">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P10/sm-ten.png" alt="">
 
+                            </div>
 
+                            <p class="year">近一年</p>
 
+                            <div class="you">你的忙碌都有了收获</div>
 
+                            <div class="text-zg">
 
+                                <div>通过及时的标讯信息</div>
 
+                                <div style="margin-top: 0.24rem;">找合作、找甲方、找商机</div>
 
+                            </div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">即使受到疫情影响</div>
 
+                                <div class="text">依旧稳步向前</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-11-kong">
 
+                        <div class="eleven">
 
+                            <div class="ball-eleven">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P11/ball-eleven.png" alt="">
 
+                            </div>
 
+                            <div class="fish-eleven">
 
+                                <img class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P11/fish-eleven.png" alt="">
 
+                            </div>
 
+                            <p class="year">近一年</p>
 
+                            <div class="you">剑鱼产品不断迭代</div>
 
+                            <div class="list">
 
+                                <p>超级订阅V4.0</p>
 
+                                <p>大会员V2.0</p>
 
+                                <p>数据流量包</p>
 
+                                <p>......</p>
 
+                            </div>
 
+                            <div class="text">期待您有更好的体验</div>
 
+                            <div class="btn">试用一下</div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
+
 
+
 
+<!--S-必定需要预加载的资源-->
 
+<link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"/>
 
+<link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js"/>
 
+<link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.js"/>
 
+<!--E-必定需要预加载的资源-->
 
+<!--S-当前页面的资源-->
 
+<script src="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.js"></script>
 
+<script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
 
+<script src="https://cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js"></script>
 
+
 
+<!--S-提前需要预加载的资源-->
 
+<link rel="prefetch" as="html" href="./result.html"/>
 
+<link rel="prefetch" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/html2canvas/1.1.2/dist/html2canvas.min.js"/>
 
+<!--E-提前需要预加载的资源-->
 
+<script>
 
+
 
+    function initSwiper() {
 
+        var interleaveOffset = 0.5; //视差比值
 
+
 
+        function playAnOfIndex(index, type = true, delay = 0) {
 
+            setTimeout(function () {
 
+                var tempNode = $('.swiper-container .slide-inner').eq(index).find('*[animate-name]')
 
+                $(tempNode).each(function () {
 
+                    var anName = $(this).attr('animate-name')
 
+                    var anDelay = $(this).attr('animate-delay') || '200'
 
+                    if (type) {
 
+                        $(this).addClass(anName)
 
+                        $(this).css('animation-delay', anDelay + 'ms')
 
+                    } else {
 
+                        tempNode.removeClass(anName)
 
+                    }
 
+                })
 
+            }, delay)
 
+        }
 
+
 
+        var swiperOptions = {
 
+            loop: false,
 
+            speed: 1000,
 
+            grabCursor: true,
 
+            watchSlidesProgress: true,
 
+            mousewheelControl: false,
 
+            direction: 'vertical',
 
+            mousewheel: true,
 
+            //设置宽度为全屏
 
+            width: window.innerWidth,
 
+            height: window.innerHeight,
 
+            allowSlideNext : false,
 
+            lazy: {
 
+                loadPrevNext: true,
 
+            },
 
+            on: {
 
+                init: function () {
 
+                    playAnOfIndex(0, true, 1000)
 
+                },
 
+                slideChangeTransitionStart: function () {
 
+                    var index = this.activeIndex
 
+                    playAnOfIndex(index, false)
 
+                },
 
+                slideChangeTransitionEnd: function () {
 
+                    var index = this.activeIndex
 
+                    playAnOfIndex(index)
 
+                },
 
+                slideChange: function () {
 
+                    var index = this.activeIndex
 
+                    playAnOfIndex(index)
 
+                },
 
+                progress: function () {
 
+                    for (var i = 0; i < this.slides.length; i++) {
 
+                        var slideProgress = this.slides[i].progress;
 
+                        var innerOffset = this.width * interleaveOffset;
 
+                        var innerTranslate = slideProgress * innerOffset;
 
+                        this.slides[i].querySelector(".slide-inner").style.transform =
 
+                            "translate3d(0," + innerTranslate + "px, 0)";
 
+                    }
 
+                },
 
+                touchStart: function () {
 
+                    for (var i = 0; i < this.slides.length; i++) {
 
+                        this.slides[i].style.transition = "";
 
+                    }
 
+                },
 
+                setTransition: function (speed) {
 
+                    for (var i = 0; i < this.slides.length; i++) {
 
+                        this.slides[i].style.transition = speed + "ms";
 
+                        this.slides[i].querySelector(".slide-inner").style.transition =
 
+                            speed + "ms";
 
+                    }
 
+                }
 
+            }
 
+        };
 
+
 
+        var swiper = new Swiper(this.$refs.mySwiper, swiperOptions);
 
+        this.$swiper = swiper
 
+    }
 
+
 
+    function initPlayMusic () {
 
+        var isAutoPlayMusic = false
 
+        var bgvid = document.getElementById("audio");
 
+        var b_music = document.getElementById('music-control-box')
 
+        var fullbox = document.querySelector('body');
 
+
 
+        fullbox.addEventListener('touchstart', function(){
 
+            if (isAutoPlayMusic) {
 
+                isAutoPlayMusic = false
 
+                bgvid.play()
 
+                b_music.classList.add('run-music')
 
+            }
 
+        }, false);
 
+
 
+        bgvid.addEventListener("playing", function(){
 
+            b_music.style.display = 'block'
 
+            b_music.classList.add('run-music')
 
+        });
 
+        bgvid.addEventListener("pause", function(){
 
+            b_music.classList.remove('run-music')
 
+        });
 
+        b_music.addEventListener('click', function (e) {
 
+            if (b_music.classList.contains('run-music')) {
 
+                bgvid.pause()
 
+                b_music.classList.remove('run-music')
 
+            } else {
 
+                bgvid.play()
 
+                b_music.classList.add('run-music')
 
+            }
 
+        })
 
+    }
 
+
 
+
 
+    const pageInfo = {
 
+        // 用户信息
 
+        user_name: '醉纸鸢',
 
+        user_head: 'https://www.jianyu360.cn/images/auto.png',
 
+        share_link: 'https://www.jianyu360.cn/images/auto.png',
 
+        // 是否新用户
 
+        is_new: false,
 
+        // 注册时间 秒
 
+        registration_time: 1644249599,
 
+        // 距离今天的天数
 
+        total_days: 100,
 
+        // 近一年登录天数
 
+        login_days: 50,
 
+        // 深夜登录天数
 
+        active_days: -1,
 
+        // 最关注的项目名称
 
+        focus_project: '最关注的项目名称',
 
+        // 浏览信息次数
 
+        view_total: 1000,
 
+        // 搜索次数
 
+        search_total: 999,
 
+        // 企业/项目关注数量
 
+        follow_total: -1,
 
+        // 繁忙月份
 
+        active_month: 7,
 
+        // 行业发布数据条数
 
+        industry_total: 99,
 
+        // 体验新功能列表
 
+        exp_list: ['大会员', '超级订阅', '数据导出', '行业解决方案'],
 
+        // 结果页type
 
+        result: 1
 
+    }
 
+
 
+    var vPage = new Vue({
 
+        el: '.jy-report',
 
+        delimiters: ['${', '}'],
 
+        data: function () {
 
+            return {
 
+                pageInfo: pageInfo,
 
+                showToastText: false,
 
+                readPact: false
 
+            }
 
+        },
 
+        created: function () {
 
+
 
+        },
 
+        mounted: function () {
 
+            initPlayMusic()
 
+            initSwiper.bind(this)()
 
+        },
 
+        methods: {
 
+            changeReadPact: function () {
 
+                if (this.$swiper.activeIndex === 0 && this.readPact) {
 
+                    return
 
+                }
 
+                this.$swiper.allowSlideNext = this.readPact
 
+            },
 
+            goStart: function () {
 
+              if (!this.readPact) {
 
+                  return this.showToast('请先阅读并同意授权协议')
 
+              }
 
+              this.$swiper.allowSlideNext = this.readPact
 
+              this.$swiper.slideNext()
 
+            },
 
+            showToast: function (str, delay = 1500) {
 
+                this.showToastText = str
 
+                setTimeout(() => {
 
+                    this.showToastText = false
 
+                }, delay)
 
+            }
 
+        }
 
+    })
 
+
 
+</script>
 
 </body>
 
-</html>
 
+
 
+</html>

+ 397 - 0
src/jfw/modules/app/src/web/templates/active/yearEndReport/result.html
Parādīt failu 

@@ -0,0 +1,397 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" style="font-size: 50px;">
 
+
 
+<head>
 
+  <meta charset="utf-8">
 
+  <meta name="keywords" content="剑鱼标讯">
 
+  <meta name="description" content="剑鱼标讯">
 
+  <meta name="author" content="剑鱼标讯">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport"
 
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 
+  <meta name="x5-page-mode" content="app">
 
+  <meta name="apple-mobile-web-app-capable" content="yes">
 
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+  <meta name="format-detection" content="telephone=no">
 
+  <meta name="referrer" content="no-referrer">
 
+  <link rel="icon" href="/favicon.ico">
 
+  <title>年度报告</title>
 
+  <link rel="preload" as="style" href="https://cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css" />
 
+  <link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css" />
 
+  <link rel="stylesheet" href="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css">
 
+  <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/css/music.css">
 
+  <link rel="stylesheet" href="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/css/result.css">
 
+</head>
 
+
 
+<body>
 
+  <div id="result" class="mask-report" v-cloak>
 
+    <!-- S--MUSIC -->
 
+    <audio id="audio" controls loop src='https://www.jianyu360.cn/big-member/video/music.mp3' autoplay></audio>
 
+    <div id="music-control-box" v-if="!picImgStatus">
 
+      <div class="music-icon-box">
 
+        <img class="icon-music-on" src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/music/music.png' />
 
+        <img class="icon-music-off" src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/music/music-off.png' />
 
+      </div>
 
+    </div>
 
+    <!-- E--MUSIC -->
 
+    <div class="jy-report result" ref="resultRefs">
 
+    <!-- 结果1、2背景的装饰 -->
 
+    <div class="ball" v-if="curRole._id == 1">
 
+      <img src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/ball.png" alt="">
 
+    </div>
 
+    <div class="star" v-if="curRole._id == 2">
 
+      <img src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/star.png" alt="">
 
+    </div>
 
+    <div class="r-content">
 
+      <div class="info">
 
+        <div class="user">
 
+          <div class="head-img">
 
+            <img src="https://cdn-ali.jianyu360.com/images/appext/fixed-sm.jpg" alt="">
 
+          </div>
 
+          <div class="nick-name">Wind</div>
 
+        </div>
 
+        <div class="role">
 
+          <div class="role-placeholder">您的年度角色是</div>
 
+          <div class="role-title">${curRole.title}</div>
 
+          <div class="role-main">
 
+            <p class="role-text">跨过遗憾 跨过不甘。2022年，你会</p>
 
+            <div class="role-label">
 
+              <img :src="curRole.label" alt="">
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- <div class="role-bg" :class="[{'role-bg-1': curRole._id == 1,'role-bg-2': curRole._id == 2, 'role-bg-other': curRole._id > 2}]">
 
+        <img :src='curRole.bg' alt="">
 
+      </div> -->
 
+      <div class="role-bg role-bg-other">
 
+        <img :src='curRole.bg' alt="">
 
+      </div>
 
+    </div>
 
+    <!-- 按钮 -->
 
+    <div class="r-btns" v-if="!picImgStatus" key="status">
 
+      <button v-show="!isWeiXinBrowser" type="button" class="share-btn" @click.prevent="shareFn">去分享</button>
 
+      <button type="button" class="create-btn" @click.prevent="createImgFn">生成海报</button>
 
+    </div>
 
+    <!-- 底部二维码 -->
 
+    <div class="r-bottom" v-else key="status">
 
+       <div class="jy-logo">
 
+        <img src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/jy-logo.png" alt="">
 
+       </div>
 
+       <div class="jy-qcode">
 
+         <div class="code-label">
 
+          <p>扫一扫</p>
 
+          <p style="line-height: .3rem;">看看你的年度角色</p>
 
+         </div>
 
+         <div class="code-img">
 
+           <img src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/jy-qcode.png" alt="">
 
+         </div>
 
+       </div>
 
+    </div>
 
+    <van-action-sheet
 
+      v-model="showAction"
 
+      :actions="actions"
 
+      cancel-text="取消"
 
+      close-on-click-action
 
+      @select="selectShare"
 
+    ></van-action-sheet>
 
+  </div>
 
+</div>
 
+  <!--S-必定需要预加载的资源-->
 
+  <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js" />
 
+  <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js" />
 
+  <!--E-必定需要预加载的资源-->
 
+  <!--S-当前页面的资源-->
 
+  <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/rem.js"></script>
 
+  <script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
 
+  <script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js></script>
 
+  <script src="https://cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js"></script>
 
+  <script src="https://cdn-common.jianyu360.com/cdn/lib/html2canvas/1.1.2/dist/html2canvas.min.js"></script>
 
+  <script src=//res2.wx.qq.com/open/js/jweixin-1.6.0.js></script>
 
+  <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/common.js"></script>
 
+  <!-- 使用html2canvas 生成图片dom层不能使用背景图 否则生成的图片会模糊 且无法修复 -->
 
+  <script>
 
+    function initPlayMusic () {
 
+      var isAutoPlayMusic = false
 
+      var bgvid = document.getElementById("audio");
 
+      var b_music = document.getElementById('music-control-box')
 
+      var fullbox = document.querySelector('body');
 
+
 
+      fullbox.addEventListener('touchstart', function(){
 
+        if (isAutoPlayMusic) {
 
+          isAutoPlayMusic = false
 
+          bgvid.play()
 
+          b_music.classList.add('run-music')
 
+        }
 
+      }, false);
 
+
 
+      bgvid.addEventListener("playing", function(){
 
+        b_music.style.display = 'block'
 
+        b_music.classList.add('run-music')
 
+      });
 
+      bgvid.addEventListener("pause", function(){
 
+        b_music.classList.remove('run-music')
 
+      });
 
+      b_music.addEventListener('click', function (e) {
 
+        if (b_music.classList.contains('run-music')) {
 
+          bgvid.pause()
 
+          b_music.classList.remove('run-music')
 
+        } else {
 
+          bgvid.play()
 
+          b_music.classList.add('run-music')
 
+        }
 
+      })
 
+    }
 
+    var result = new Vue({
 
+      el: '#result',
 
+      delimiters: ['${', '}'],
 
+      data: function() {
 
+        return {
 
+          resultList: [
 
+            {_id: '1', title: '逢标必中的投标达人', label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-1.png', bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-1.png'},
 
+            {_id: '2', title: '成功触手可及的追梦人', label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-2.png', bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-2.png'},
 
+            {_id: '3', title: '怀抱热振元气满满的打工人', label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-3.png', bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-3.png'},
 
+            {_id: '4', title: '日进斗金的大佬', label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-4.png', bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-4.png'},
 
+            {_id: '5', title: '有钱任性的大BOSS', label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-5.png', bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-5.png'},
 
+            {_id: '6', title: '开疆拓土的“顶梁柱”', label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-6.png', bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-6.png'},
 
+            {_id: '7', title: '炉火纯青的盖章无影手', label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-7.png', bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-7.png'},
 
+            {_id: '8', title: '有钱任性的大BOSS', label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-8.png', bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-5.png'},
 
+            {_id: '9', title: '有钱任性的大BOSS', label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-9.png', bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-5.png'},
 
+          ],
 
+          curRole: {
 
+            _id: '1',
 
+            title: '逢标必中的投标达人',
 
+            label: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/label-1.png',
 
+            bg: '{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/item-bg-1.png'
 
+          },
 
+          picImgStatus: false,
 
+          showAction: false,
 
+          actions: [{ name: '微信' }, { name: '朋友圈' }],
 
+          wxSDKSign: {
 
+            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
 
+            appId: '', // 必填，公众号的唯一标识
 
+            timestamp: '', // 必填，生成签名的时间戳
 
+            nonceStr: '', // 必填，生成签名的随机串
 
+            signature: '',// 必填，签名
 
+            jsApiList: [
 
+                // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
 
+                'updateAppMessageShareData',
 
+                // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
 
+                'updateTimelineShareData',
 
+                // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
 
+                'onMenuShareWeibo',
 
+                // 关闭当前网页窗口接口
 
+                'closeWindow',
 
+                // 批量隐藏功能按钮接口
 
+                // 'hideMenuItems',
 
+                // 批量显示功能按钮接口
 
+                // 'showMenuItems',
 
+                // 隐藏所有非基础按钮接口
 
+                // 'hideAllNonBaseMenuItem',
 
+                // 显示所有功能按钮接口
 
+                // 'showAllNonBaseMenuItem',
 
+                // 调起微信扫一扫接口
 
+                // 'scanQRCode'
 
+            ],
 
+            openTagList: ['wx-open-launch-app']
 
+          },
 
+          shareInfo: {
 
+            title: '剑鱼标讯',
 
+            desc: '我的剑鱼标讯2021」年度报告已经生成，请查收',
 
+            link: location.href.split('?')[0],
 
+            imgUrl: 'https://cdn-ali.jianyu360.com/images/appext/fixed-sm.jpg'
 
+          },
 
+        }
 
+      },
 
+      computed: {
 
+        isWeiXinBrowser: function () {
 
+          return utils.isWeiXinBrowser
 
+        }
 
+      },
 
+      mounted() {
 
+        initPlayMusic()
 
+        // 微信端注册sdk
 
+        if (utils.isWeiXinBrowser) {
 
+          this.getWxSdkSign()
 
+        }
 
+        var list = this.resultList
 
+        var _this = this
 
+        list.forEach(function(item){
 
+          if (item._id == utils.getParam('type')) {
 
+            _this.curRole._id = item._id
 
+            _this.curRole.title = item.title
 
+            _this.curRole.label = item.label
 
+            _this.curRole.bg = item.bg
 
+          }
 
+        })
 
+      },
 
+      methods: {
 
+        showLoading: function (msg) {
 
+          const loading = this.$toast.loading({
 
+            duration: 0,
 
+            forbidClick: true,
 
+            message: msg || '图片生成中...',
 
+          })
 
+          return loading
 
+        },
 
+        changeStyle: function () {
 
+          var rWidth = ($('.result').width())*2
 
+          var rHeight = ($('.result').height())*2
 
+          var padLeft = (rWidth - 750 ) / 2
 
+          var padTop = (rHeight - 1448 ) / 2
 
+          $('.mask-report').addClass('mask-report-active')
 
+          $('.result').css({
 
+            "padding": '0.64rem 0',
 
+            "background-position": '-40px -40px',
 
+            "background-size": "110% 110%"
 
+
 
+          })
 
+          $('.r-content').css({
 
+            "padding": '0 ' +  + padLeft/2 + 'px'
 
+          })
 
+          $('.role-bg').css({
 
+            "width": "8.48rem",
 
+            "left": "-41px"
 
+          })
 
+          $('.info').css({
 
+            "width": "6.88rem"
 
+          })
 
+          $('.role-main').css({
 
+            "padding": "0.48rem .54rem"
 
+          })
 
+          $(".role-text").css({
 
+            "font-size": '0.36rem'
 
+          })
 
+          $('.r-bottom').css({
 
+            padding: '0 0.3rem'
 
+          })
 
+        },
 
+        // html2canvas方法
 
+        covertToImage: function(container, options = {}) {
 
+          // 设置放大倍数
 
+          var scale = window.devicePixelRatio
 
+          // 传入节点原始宽高
 
+          var _width = container.offsetWidth
 
+          var _height = container.offsetHeight
 
+          let { width, height } = options
 
+          width = width || _width
 
+          height = height || _height
 
+          var ops = {
 
+            dpi: 300,
 
+            scale,
 
+            async: false,
 
+            useCORS: true,
 
+            // scrollX: 20,
 
+            // scrollY: 20,
 
+            allowTaint: false,
 
+            backgroundColor: null, // 避免图片有白色边框
 
+            ...options
 
+          };
 
+          return html2canvas(container, ops).then(function(canvas) {
 
+            // 返回图片的二进制数据
 
+            var url = canvas.toDataURL("image/png");
 
+            return url
 
+          })
 
+        },
 
+        // app端微信、朋友圈分享方法
 
+        selectShare: function(e) {
 
+          var shareTitle = '我的剑鱼标讯2021年度报告已经生成，请查收'
 
+          var content = ''
 
+          var link = window.location.href
 
+          if (e.name == '微信') {
 
+            try {
 
+              JyObj.share(1,shareTitle,content,link);
 
+            } catch (error) {}
 
+          } else if (e.name == '朋友圈') {
 
+            try {
 
+              JyObj.share(3,shareTitle,content,link);
 
+            } catch (error) {}
 
+          }
 
+        },
 
+        // 取用户appid、签名等
 
+        getWxSdkSign: function() {
 
+          var _this = this
 
+          $.ajax({
 
+            url: '/jypay/wx/getwxSdkSign',
 
+            type: 'POST',
 
+            data: {
 
+              url: location.href.split('#')[0]
 
+            },
 
+            success: function (res) {
 
+              if (res && res.wxsdk && $.isArray(res.wxsdk)) {
 
+                _this.wxSDKSign.appId = res.wxsdk[0]
 
+                _this.wxSDKSign.timestamp = res.wxsdk[1]
 
+                _this.wxSDKSign.nonceStr = res.wxsdk[2]
 
+                _this.wxSDKSign.signature = res.wxsdk[3]
 
+                _this.registerWxSDK()
 
+              }
 
+            },
 
+            complete: function () {},
 
+            error: function () {}
 
+          })
 
+        },
 
+        // 注册微信sdk方法
 
+        registerWxSDK: function () {
 
+          var _this = this
 
+          var extInfo = {
 
+            url: 'jianyu360.com'
 
+          }
 
+          // 微信sdk注册
 
+          wx.config(this.wxSDKSign)
 
+          wx.error(function(err){
 
+            console.log(err);
 
+          })
 
+          wx.ready(function (res) {
 
+            // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
 
+            wx.updateAppMessageShareData(_this.shareInfo)
 
+            // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
 
+            wx.updateTimelineShareData(_this.shareInfo)
 
+            // onMenuShareWeibo
 
+            wx.onMenuShareWeibo(_this.shareInfo)
 
+          })
 
+        },
 
+        // 点击去分享
 
+        shareFn: function () {
 
+          if (utils.isWeiXinBrowser) {
 
+            // 微信端使用自带分享
 
+          } else {
 
+            // app 使用客户端方法分享
 
+            this.showAction = true
 
+          }
 
+        },
 
+        // 点击生成海报
 
+        createImgFn: function () {
 
+          var loading = this.showLoading()
 
+          $(".canvas-img").remove()
 
+          this.picImgStatus = true
 
+          if (this.picImgStatus) {
 
+            var _this = this
 
+            _this.changeStyle() // 生成图片前 先改变页面样式
 
+            setTimeout(function() {
 
+              var data = _this.covertToImage(_this.$refs.resultRefs)
 
+              data.then(function(url) {
 
+                loading.clear()
 
+                $("body").append('<div class="canvas"><img class="canvas-img" src='+ url + '></div>')
 
+                if (utils.isWeiXinBrowser) {
 
+                  $("body").append('<img class="canvas-img" src='+ url + '>')
 
+                } else {
 
+                  // 调用客户端保存图片方法
 
+                  try {
 
+                    window.JyObj.savePic(url)
 
+                  } catch (err) {
 
+                    console.log(err);
 
+                  }
 
+                }
 
+              }).catch(function(err) {
 
+                console.log(err);
 
+                _this.$toast('图片生成失败')
 
+              })
 
+            }, 500)
 
+          }
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 1834 - 0
src/web/staticres/common-module/yearEndReport/css/index.css
Parādīt failu 

@@ -0,0 +1,1834 @@
 
+@charset "UTF-8";
 
+
 
+
 
+[v-cloak] {
 
+  opacity: 0;
 
+}
 
+
 
+body {
 
+  background: #eee;
 
+  font-family: PingFang SC-Medium, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
 
+  font-size: 0.28rem;
 
+  color: #000;
 
+  margin: 0;
 
+  padding: 0;
 
+}
 
+
 
+.swiper-slide {
 
+  overflow: hidden;
 
+}
 
+
 
+.swiper-container, .report-page {
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.jy-report {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: absolute;
 
+  top: 0;
 
+  left: 0;
 
+  background: url(../images/BG/bg.png) no-repeat center center;
 
+  background-size: 9.5rem 100%;
 
+  background-position: 0 0;
 
+}
 
+
 
+.slide-inner {
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 100%;
 
+  left: 0;
 
+  top: 0;
 
+  background-size: cover;
 
+  background-position: center;
 
+  display: -webkit-box;
 
+  display: -ms-flexbox;
 
+  display: -webkit-flex;
 
+  display: flex;
 
+  -webkit-box-pack: center;
 
+  -ms-flex-pack: center;
 
+  -webkit-justify-content: center;
 
+  justify-content: center;
 
+  -webkit-box-align: center;
 
+  -ms-flex-align: center;
 
+  -webkit-align-items: center;
 
+  align-items: center;
 
+  overflow: hidden;
 
+}
 
+
 
+.next-page {
 
+  position: absolute;
 
+  bottom: 0.72rem;
 
+  width: 0.64rem;
 
+  height: 0.52rem;
 
+  background: url(../images/next/next.png) no-repeat center center;
 
+  background-size: 0.64rem 0.52rem;
 
+  animation: LoopPlayback 2s infinite ease-in;
 
+}
 
+
 
+
 
+
 
+
 
+.go-button {
 
+  position: relative;
 
+  width: 4.56rem;
 
+  height: 0.96rem;
 
+  text-align: center;
 
+  background: linear-gradient(180deg, #57FFF5 0%, #FFFFFF 100%);
 
+  box-shadow: 0px 0.08rem 0.32rem 1px rgba(8, 31, 38, 0.08);
 
+  font-size: 0.4rem;
 
+  line-height: 0.96rem;
 
+  font-weight: bold;
 
+  color: #10616B;
 
+  letter-spacing: 0.06rem;
 
+  border-radius: 0.48rem;
 
+}
 
+.go-button::after {
 
+  content: "";
 
+  position: absolute;
 
+  top: 0.08rem;
 
+  left: 0;
 
+  z-index: -1;
 
+  display: inline-block;
 
+  width: 4.56rem;
 
+  height: 0.96rem;
 
+  border-radius: 0.48rem;
 
+  background: linear-gradient(180deg, #FFFFFF 0%, #57FFF5 100%);
 
+  box-shadow: 0rem 0.08rem 0.32rem 0.02rem rgba(8, 31, 38, 0.08);
 
+}
 
+.jy-toast {
 
+  position: fixed;
 
+  top: 50%;
 
+  left: 50%;
 
+  display: -webkit-box;
 
+  display: -webkit-flex;
 
+  display: flex;
 
+  -webkit-box-orient: vertical;
 
+  -webkit-box-direction: normal;
 
+  -webkit-flex-direction: column;
 
+  flex-direction: column;
 
+  -webkit-box-align: center;
 
+  -webkit-align-items: center;
 
+  align-items: center;
 
+  -webkit-box-pack: center;
 
+  -webkit-justify-content: center;
 
+  justify-content: center;
 
+  box-sizing: content-box;
 
+  max-width: 70%;
 
+  color: #fff;
 
+  font-size: 14px;
 
+  line-height: 20px;
 
+  white-space: pre-wrap;
 
+  text-align: center;
 
+  word-break: break-all;
 
+  background-color: rgba(0,0,0,.7);
 
+  border-radius: 8px;
 
+  -webkit-transform: translate3d(-50%,-50%,0);
 
+  transform: translate3d(-50%,-50%,0);
 
+  pointer-events: none;
 
+  min-width: 96px;
 
+  min-height: 0;
 
+  padding: 8px 12px;
 
+}
 
+
 
+/* S 动画 */
 
+@keyframes FadeIn {
 
+  0% {
 
+    opacity: 0;
 
+  }
 
+  100% {
 
+    opacity: 1;
 
+  }
 
+}
 
+@keyframes LoopPlayback {
 
+  0% {
 
+    opacity: 0;
 
+    transform: translateY(30%);
 
+  }
 
+  80% {
 
+    transform: translateY(0);
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    opacity: 0.2;
 
+    transform: translateY(-30%);
 
+  }
 
+}
 
+@keyframes InitMeteorBgIn {
 
+  from {
 
+    transform: scale(4) translate3d(0, -20%, 0) rotate3d(1, 1, 1, 20deg);
 
+  }
 
+  to {
 
+    transform: unset;
 
+  }
 
+}
 
+@keyframes Flicker {
 
+  0% {
 
+    opacity: 0;
 
+  }
 
+  15% {
 
+    opacity: 0.6;
 
+  }
 
+  40% {
 
+    opacity: 0.3;
 
+  }
 
+  70% {
 
+    opacity: 0.8;
 
+  }
 
+  90% {
 
+    opacity: 0.92;
 
+  }
 
+  100% {
 
+    opacity: 0.7;
 
+  }
 
+}
 
+@keyframes LeftMeteorIn {
 
+  0% {
 
+    transform-origin: 50% 500px;
 
+    transform: rotate(-30deg);
 
+    opacity: 0;
 
+  }
 
+  90% {
 
+    transform: unset;
 
+    opacity: 0.8;
 
+  }
 
+  100% {
 
+    transform: unset;
 
+    opacity: 1;
 
+  }
 
+}
 
+@keyframes MeteorIn {
 
+  from {
 
+    transform: rotate(-10deg) translateX(-50%);
 
+    opacity: 0;
 
+  }
 
+  to {
 
+    transform: unset;
 
+    opacity: 1;
 
+  }
 
+}
 
+@keyframes FadeBottomIn {
 
+  from {
 
+    transform: translateY(60%);
 
+    opacity: 0;
 
+  }
 
+  to {
 
+    transform: unset;
 
+    opacity: 1;
 
+  }
 
+}
 
+*[animate-name='up'] {
 
+  opacity: 0;
 
+}
 
+*[animate-name].up{
 
+  animation: FadeBottomIn 1s ease forwards;
 
+}
 
+
 
+/* E 动画 */
 
+
 
+/* S 第一页 */
 
+.page-1 {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+}
 
+.page-1 .jy-user-name {
 
+  font-size: 0.48rem;
 
+  font-weight: 500;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+}
 
+
 
+.page-1 .jy-user-name span + span {
 
+  margin-left: 0.16rem;
 
+}
 
+
 
+.page-1 .user-info-group {
 
+  margin-top: 2.72rem;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+}
 
+
 
+.page-1 .jy-user-img {
 
+  width: 1.44rem;
 
+  height: 1.44rem;
 
+  border: 1px solid rgba(0, 0, 0, 0.1);
 
+  margin-bottom: 0.32rem;
 
+}
 
+
 
+.page-1 .jy-logo {
 
+  position: absolute;
 
+  bottom: 2.28rem;
 
+  width: 2.28rem;
 
+  height: 0.6rem;
 
+}
 
+
 
+.page-1 .go-report {
 
+  position: absolute;
 
+  bottom: 4rem;
 
+}
 
+
 
+.page-1 .tip-info {
 
+  margin-top: 1.28rem;
 
+  font-size: 0.48rem;
 
+  font-weight: bold;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 0.14rem;
 
+}
 
+
 
+.page-1 .text-hello {
 
+  font-size: 0.32rem;
 
+  font-weight: 500;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 0.08rem;
 
+  margin-bottom: 0.32rem;
 
+  margin-left: 0.46rem;
 
+  display: block;
 
+}
 
+
 
+.page-1 .read_pact input:checked {
 
+  background-color: #2ABED1;
 
+}
 
+.page-1 .read_pact input {
 
+  width: 0.3rem;
 
+  height: 0.3rem;
 
+  background: transparent;
 
+  margin: 0;
 
+  margin-right: 0.2rem;
 
+  border-radius: 50%;
 
+  vertical-align: middle;
 
+  border: 1px solid #fff;
 
+  appearance: none;
 
+  -webkit-appearance: none;
 
+  outline: none;
 
+  cursor: pointer;
 
+}
 
+.page-1 .read_pact a {
 
+  color: #2ABED1;
 
+  text-decoration: none;
 
+}
 
+.page-1 .read_pact {
 
+  position: absolute;
 
+  bottom: 6.4rem;
 
+  font-size: 0.26rem;
 
+  font-weight: 500;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  display: flex;
 
+  flex-direction: row;
 
+  align-items: center;
 
+}
 
+
 
+.page-1 .add-layer-group {
 
+  position: absolute;
 
+  left: 0;
 
+  top: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  z-index: -99;
 
+}
 
+
 
+.page-1 .meteor-bg {
 
+  position: absolute;
 
+  bottom: 0;
 
+  width: 100%;
 
+  animation: InitMeteorBgIn 1.2s ease-in;
 
+}
 
+
 
+.page-1 .meteor-mini {
 
+  position: absolute;
 
+  top: 3.4rem;
 
+  left: 6.82rem;
 
+  width: 1.36rem;
 
+  height: 0.77rem;
 
+  animation: Flicker infinite 2s  ease;
 
+}
 
+
 
+.page-1 .meteor-left {
 
+  position: absolute;
 
+  top: 4.52rem;
 
+  width: 3.34rem;
 
+  height: 1.14rem;
 
+  animation: LeftMeteorIn 1.2s 0.8s ease-in-out;
 
+}
 
+
 
+/* E 第一页 */
 
+
 
+/* S 第二页 */
 
+.page-2 .meet{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-2 .hello{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 1.54rem;
 
+}
 
+.page-2 .text{
 
+  font-size: .32rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: .36rem;
 
+  letter-spacing: .08rem;
 
+}
 
+.page-2 .text-a{
 
+  font-size: 0.28rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 4px;
 
+  margin-left: 1.54rem;
 
+}
 
+.page-2 .time{
 
+  font-size: .32rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #70EEFF;
 
+  line-height: .36rem;
 
+  letter-spacing: .08rem;
 
+}
 
+.page-2 .star-two{
 
+  position: absolute;
 
+  top: 5rem;
 
+  right: 1.48rem;
 
+  width: 1.36rem;
 
+  height: 0.77rem;
 
+}
 
+.page-2 .star-two img{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.page-2 .fish-two{
 
+  position: absolute;
 
+  right: 2.28rem;
 
+  bottom: 6.98rem;
 
+  width: 2.39rem;
 
+  height: 1.66rem;
 
+}
 
+.page-2 .fish-two img{
 
+  width: 100%;
 
+}
 
+.page-2 .tail-two{
 
+  position: absolute;
 
+  bottom: 6.2rem;
 
+  right:2.2rem;
 
+  z-index: -8;
 
+}
 
+.page-2 .tail-two img{
 
+  width: 100%;
 
+
 
+}
 
+.page-2 .btn-next{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.page-2 .ball-two{
 
+  width: 100%;
 
+  position: absolute;
 
+  bottom: 0;
 
+  right: 0;
 
+  z-index: -9;
 
+}
 
+/* E第二页 */
 
+
 
+/* S第三页 */
 
+.page-3{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  flex-direction: column;
 
+}
 
+.page-3 .usage-days{
 
+  display: flex;
 
+  flex-direction: column;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-3 .today{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+position: absolute;
 
+top: 2.92rem;
 
+left: 1.5rem;
 
+}
 
+.page-3 .text{
 
+  font-size: .32rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: .36rem;
 
+  letter-spacing: .08rem;
 
+  position: absolute;
 
+  top: 3.92rem;
 
+  left: 1.5rem;
 
+}
 
+.page-3 .days{
 
+  font-size: .48rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #70EEFF;
 
+  line-height: .56rem;
 
+  letter-spacing: .14rem;
 
+  position: absolute;
 
+    top: 4.3rem;
 
+    right: 1.36rem;
 
+}
 
+.page-3 .star-three{
 
+  position: absolute;
 
+  top: 5rem;
 
+  left: 1.84rem;
 
+  width: 1.36rem;
 
+  height: 0.77rem;
 
+}
 
+.page-3 .star-three img{
 
+  width: 100%;
 
+}
 
+.page-3 .yellow-three{
 
+  position: absolute;
 
+  top: 6.7rem;
 
+  left: 1.8rem;
 
+  width: 2.48rem;
 
+  z-index: -9;
 
+}
 
+.page-3 .yellow-three img{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.page-3 .ball-three{
 
+  position: absolute;
 
+  bottom: 0;
 
+  left: 0;
 
+  z-index: -1;
 
+}
 
+.page-3 .ball-three img{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.page-3 .btn-next{
 
+  margin-top: 8.46rem;
 
+}
 
+.page-3 .moqi{
 
+  display: flex;
 
+  align-items: center;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  position: absolute;
 
+  bottom: 1.92rem;
 
+}
 
+.page-3 .mf{
 
+  font-size: .28rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: .36rem;
 
+  letter-spacing: .08rem;
 
+}
 
+.page-3 .btn-next{
 
+  display: flex;
 
+  align-items: center;
 
+  flex-direction: column;
 
+}
 
+/* E第三页 */
 
+
 
+/* S第四页 */
 
+.page-4{
 
+  display: flex;
 
+  justify-content: center;
 
+}
 
+.page-4 .year{
 
+  display: flex;
 
+  flex-direction: column;
 
+  width: 100%;
 
+    height: 100%;
 
+    margin-top: 2.92rem;
 
+}
 
+.page-4 .text-1{
 
+  margin-left: 1.54rem;
 
+}
 
+.page-4 .jin{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-bottom: 0.16rem;
 
+}
 
+.page-4 .day{
 
+  display: flex;
 
+}
 
+.page-4 .ty{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+}
 
+.page-4 .days{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #70EEFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+}
 
+.page-4 .text-2{
 
+  margin-top: 0.71rem
 
+}
 
+.page-4 .night{
 
+  display: flex;
 
+  align-items: center;
 
+  margin-left: 3.28rem;
 
+  margin-bottom : 0.24rem;
 
+}
 
+.page-4 .big-day{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #70EEFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+}
 
+.page-4 .text-bottom{
 
+  text-align: center;
 
+  position: absolute;
 
+    bottom: 1.92rem;
 
+    right: 2.06rem;
 
+}
 
+.page-4 .text-3{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+}
 
+.page-4 .btn-next{
 
+  display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+.page-4 .fish-four{
 
+  position: absolute;
 
+  bottom: 0;
 
+  left: 0;
 
+  z-index: -1;
 
+}
 
+.page-4 .fish-four img{
 
+  width: 100%;
 
+}
 
+.page-4 .sm-four{
 
+  position: absolute;
 
+  bottom: 7.16rem;
 
+  right: 1.78rem;
 
+  width: 1.36rem;
 
+  height: 0.77rem;
 
+}
 
+.page-4 .sm-four img{
 
+  width: 100%;
 
+}
 
+.page-4 .big-four{
 
+  position: absolute;
 
+  bottom: 3.78rem;
 
+  left: 0.14rem;
 
+  width: 3.5rem;
 
+
 
+}
 
+.page-4 .big-four img{
 
+  width: 100%;
 
+}
 
+/* E第四页 */
 
+
 
+/* S第五页 */
 
+.page-5 .item{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-5 .this{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 1.54rem;
 
+}
 
+.page-5 .gongsi{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #70EEFF;
 
+line-height: 0.38rem;
 
+letter-spacing: 4px;
 
+margin: 0.32rem auto;
 
+margin-left: 1.54rem;
 
+}
 
+.page-5 .guanzhu{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+margin-left: 1.54rem;
 
+}
 
+.page-5 .text-bottom{
 
+  position: absolute;
 
+  bottom: 1.92rem;
 
+  right: 1.68rem;
 
+  text-align: center;
 
+}
 
+.page-5  p{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+}
 
+.page-5 .btn-next{
 
+  display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+.page-5 .yun-five{
 
+  position: absolute;
 
+  bottom: 4.88rem;
 
+  left: 0;
 
+  z-index: -1;
 
+}
 
+.page-5 .yun-five img{
 
+  width: 100%;
 
+}
 
+.page-5 .ball-five{
 
+  position: absolute;
 
+    bottom: 5.3rem;
 
+    left: 0.7rem;
 
+    z-index: -9;
 
+}
 
+.page-5 .ball-five img{
 
+  width: 4.64rem;
 
+}
 
+.page-5 .fish-five{
 
+  position: absolute;
 
+  left: 1.5rem;
 
+  bottom: 5.12rem;
 
+  width: 4.22rem;
 
+  z-index: -2;
 
+}
 
+.page-5 .fish-five img{
 
+  width: 100%;
 
+}
 
+.page-5 .aoyi-five{
 
+  position: absolute;
 
+  right: 0;
 
+  top: 4.3rem;
 
+  width: 7.81rem;
 
+  z-index: -10;
 
+}
 
+.page-5 .aoyi-five img{
 
+  width: 100%;
 
+}
 
+/* E第五页 */
 
+
 
+/* S第六页 */
 
+.page-6 .message{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-6 .year{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 1.54rem;
 
+}
 
+.page-6 .you{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+margin-top: 0.32rem;
 
+margin-left: 1.54rem;
 
+}
 
+.page-6 .num{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #70EEFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 4.1rem;
 
+}
 
+.page-6 .xiangmu{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+margin-top: 0.16rem;
 
+margin-left: 3.5rem;
 
+}
 
+.page-6 .text-one{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+/* margin-left: 2.8rem; */
 
+text-align: center;
 
+position: absolute;
 
+bottom: 4.32rem;
 
+left: 2.8rem;
 
+}
 
+.page-6 .text-two{
 
+  width: 5.98rem;
 
+  height: 1.4rem;
 
+  background: #171826;
 
+  border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
 
+  opacity: 0.3;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  flex-direction: column;
 
+  position: absolute;
 
+    bottom: 2.6rem;
 
+    left: 1.58rem;
 
+    padding: 0.24rem 0.38rem;
 
+
 
+}
 
+.page-6 .box{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.page-6 .p-one{
 
+font-size: 0.24rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.28rem;
 
+letter-spacing: 1px;
 
+}
 
+.page-6 .s-one{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #70EEFF;
 
+line-height: 0.33rem;
 
+letter-spacing: 2px;
 
+}
 
+.page-6 .text-bottom{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+margin-top: 0.32rem;
 
+position: absolute;
 
+    bottom: 1.92rem;
 
+    left: 2.98rem;
 
+}
 
+.page-6 .btn-next{
 
+  display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+
 
+.page-6 .ball-six{
 
+  position: absolute;
 
+  right: 0;
 
+    top: 5.48rem;
 
+    width: 2.74rem;
 
+    z-index: -1;
 
+}
 
+.page-6 .ball-six img{
 
+  width: 100%;
 
+}
 
+.page-6 .group-six{
 
+  position: absolute;
 
+  left: 0.9rem;
 
+  bottom: 4.6rem;
 
+  z-index: -1;
 
+}
 
+.page-6 .group-six img{
 
+  width: 6.31rem;
 
+}
 
+.page-6 .fish-six{
 
+  z-index: -16;
 
+    position: absolute;
 
+    top: 8.4rem;
 
+    left: 1.6rem;
 
+    width: 1.98rem;
 
+}
 
+.page-6 .fish-six img{
 
+  width: 100%;
 
+}
 
+.page-6 .xd-six{
 
+  position: absolute;
 
+    top: 0.04rem;
 
+    left: 0;
 
+    z-index: -6;
 
+}
 
+.page-6 .xd-six img{
 
+  width: 9.14rem;
 
+}
 
+/* E第六页 */
 
+
 
+
 
+/* S第七页 */
 
+.page-7 .sum{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-7 .year{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 1.54rem;
 
+}
 
+.page-7 .you{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+margin-left: 1.54rem;
 
+margin-top: 0.32rem;
 
+}
 
+.page-7 .num{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #70EEFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 4.1rem;
 
+}
 
+.page-7 .text-bottom{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+position: absolute;
 
+    bottom: 1.92rem;
 
+    left: 2.42rem;
 
+}
 
+.page-7 .btn-next{
 
+  display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+.page-7 .xd-seven{
 
+  position: absolute;
 
+  right: 0;
 
+  bottom: 1.9rem;
 
+  z-index: -1;
 
+}
 
+.page-7 .xd-seven img{
 
+  width: 100%;
 
+}
 
+/* E第七页 */
 
+
 
+/* S第八页 */
 
+.page-8 .friend{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-8 .year{
 
+  font-size: 0.48rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #FFFFFF;
 
+  line-height: 0.56rem;
 
+  letter-spacing: 7px;
 
+  margin-left: 1.54rem;
 
+  }
 
+.page-8 .num{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #70EEFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 4.96rem;
 
+margin-top: 0.32rem;
 
+}
 
+.page-8 .you{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+margin-left: 2.44rem;
 
+margin-top: 0.16rem;
 
+}
 
+.page-8 .text-bottom{
 
+  text-align: center;
 
+  position: absolute;
 
+  left: 1.88rem;
 
+  bottom: 1.92rem;
 
+}
 
+.page-8 .text{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.52rem;
 
+letter-spacing: 4px;
 
+}
 
+
 
+.page-8 .btn-next{
 
+  display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+.page-8 .ball-eight{
 
+  position: absolute;
 
+  right: 0;
 
+  bottom: 3.02rem;
 
+  width: 7.88rem;
 
+  z-index: -1;
 
+}
 
+.page-8 .ball-eight img{
 
+  width: 100%;
 
+}
 
+.page-8 .xd-eight{
 
+  position: absolute;
 
+  left: 0;
 
+  bottom: 3.48rem;
 
+  z-index: -9;
 
+}
 
+.page-8 .xd-eight img{
 
+  width: 100%;
 
+}
 
+/* E第八页 */
 
+
 
+/* S第九页 */
 
+.page-9 .mouth{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-9 .year{
 
+  display: flex;
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 1.54rem;
 
+}
 
+.page-9 .you{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+margin-left: 1.54rem;
 
+margin-top: 0.32rem;
 
+}
 
+.page-9 .text-bottom{
 
+  text-align: center;
 
+  position: absolute;
 
+  left: 2.42rem;
 
+  bottom: 1.92rem;
 
+}
 
+.page-9 .text{
 
+  font-size: 0.28rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.52rem;
 
+  letter-spacing: 4px;
 
+  }
 
+.page-9 .btn-next{
 
+  display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+.page-9 .banner-yue{
 
+  position: absolute;
 
+  bottom: 5.78rem;
 
+  left: 3.76rem;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.page-9 .banner-yue-one{
 
+  font-size: 2.02rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #171826;
 
+  line-height: 2.37rem;
 
+  letter-spacing: 30px;
 
+}
 
+.page-9 .banner-yue-two{
 
+  font-size: 0.48rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #171826;
 
+  line-height: 0.56rem;
 
+  letter-spacing: 7px;
 
+  position: absolute;
 
+    bottom: 0.3rem;
 
+    left: 1.4rem;
 
+}
 
+.page-9 .ball-nine{
 
+  position: absolute;
 
+  bottom: 0;
 
+  left: 0;
 
+  z-index: -1;
 
+}
 
+.page-9 .ball-nine img{
 
+  width: 100%;
 
+}
 
+/* E第九页 */
 
+
 
+/* S第十页 */
 
+.page-10 .ten{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-10 .year{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 1.54rem;
 
+}
 
+.page-10 .you{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+margin-left: 1.54rem;
 
+margin-top: 0.32rem;
 
+}
 
+.page-10 .num{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #70EEFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 4.52rem;
 
+}
 
+.page-10 .gonggao{
 
+  font-size: 0.32rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 4px;
 
+  margin-left: 3.5rem;
 
+  margin-top: 0.16rem;
 
+}
 
+.page-10 .text-bottom{
 
+  text-align: center;
 
+  position: absolute;
 
+  bottom: 1.92rem;
 
+  left: 2.98rem;
 
+}
 
+.page-10 .text{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+}
 
+.page-10 .btn-next{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.page-10 .pao-ten{
 
+  position: absolute;
 
+  bottom: 1.7rem;
 
+  left: 0;
 
+  z-index: -9;
 
+}
 
+.page-10 .pao-ten img{
 
+  width:9.14rem;
 
+}
 
+.page-10 .fish-ten{
 
+  position: absolute;
 
+  bottom: 0;
 
+  left: 0;
 
+  z-index: -7;
 
+}
 
+.page-10 .fish-ten img{
 
+ width: 100%;
 
+}
 
+.page-10 .big-ten{
 
+  position: absolute;
 
+  bottom: 4.44rem;
 
+  left: 1.52rem;
 
+  width: 2.8rem;
 
+  z-index: -5;
 
+}
 
+.page-10 .big-ten img{
 
+ width: 100%;
 
+}
 
+.page-10 .sm-ten{
 
+  position: absolute;
 
+  top: 6.34rem;
 
+  right: 2.94rem;
 
+  width: 1.36rem;
 
+  height: 0.77rem;
 
+  z-index: -5;
 
+}
 
+.page-10 .sm-ten img{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+/* E第十页 */
 
+
 
+
 
+/* S第十一页 */
 
+.page-11 .eleven{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-11 .year{
 
+  font-size: 0.48rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #FFFFFF;
 
+  line-height: 0.56rem;
 
+  letter-spacing: 7px;
 
+  margin-left: 1.54rem;
 
+}
 
+.page-11 .new{
 
+  font-size: 0.32rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 4px;
 
+}
 
+.page-11 .you{
 
+  font-size: 0.32rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 4px;
 
+  margin-left: 1.54rem;
 
+  margin-top: 0.32rem;
 
+}
 
+.page-11 .gn{
 
+  margin-left: 1.54rem;
 
+  display: flex;
 
+  align-items: center;
 
+  margin-top: 0.48rem;
 
+}
 
+.page-11 .num{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #70EEFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+}
 
+.page-11 .list{
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  margin-left: 1.48rem;
 
+  margin-top: 3.1rem;
 
+}
 
+.page-11 .list p{
 
+  font-size: 0.28rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.52rem;
 
+  letter-spacing: 4px;
 
+  margin: 0;
 
+}
 
+.page-11 .text-bottom{
 
+  text-align: center;
 
+  position: absolute;
 
+  bottom: 1.92rem;
 
+  left: 2.8rem;
 
+}
 
+.page-11 .text{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.52rem;
 
+letter-spacing: 4px;
 
+}
 
+.page-11 .btn-next{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.page-11 .ball-eleven{
 
+  position: absolute;
 
+  bottom: 0;
 
+  left: 0.24rem;
 
+  z-index: -1;
 
+}
 
+.page-11 .ball-eleven img{
 
+  width: 100%;
 
+}
 
+.page-11 .fish-eleven{
 
+  position: absolute;
 
+  bottom: 2.7rem;
 
+  left: 1.84rem;
 
+}
 
+.page-11 .fish-eleven img{
 
+  width: 2.91rem;
 
+}
 
+
 
+/* E第十一页 */
 
+
 
+
 
+/* S第十二页 */
 
+.page-12 .twelve{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 5.44rem;
 
+}
 
+.page-12 .text{
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.page-12 .text-1{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+}
 
+.page-12 .text-3{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-top: 0.43rem;
 
+}
 
+.page-12 .btn{
 
+  text-align: center;
 
+  width: 4.56rem;
 
+  height: 0.96rem;
 
+  background: linear-gradient(180deg, #FFFFFF 0%, #57FFF5 100%);
 
+  box-shadow: 0rem 0.08rem 0.32rem 0.02rem rgba(8, 31, 38, 0.08);
 
+  opacity: 1;
 
+  border-radius: 0.48rem;
 
+  margin-top: 0.2rem;
 
+}
 
+.page-12 .sc{
 
+  background: linear-gradient(180deg, #57FFF5 0%, #FFFFFF 100%);
 
+  box-shadow: 0px 0.08rem 0.32rem 1px rgba(8, 31, 38, 0.08);
 
+  font-size: 0.4rem;
 
+  line-height: 0.96rem;
 
+  font-weight: bold;
 
+  color: #10616B;
 
+  letter-spacing: 0.06rem;
 
+  border-radius: 0.48rem;
 
+}
 
+.page-12 .sm-star-twelve{
 
+    position: absolute;
 
+    top: 4.06rem;
 
+    right: 1.78rem;
 
+    width: 1.36rem;
 
+    height: 0.77rem;
 
+}
 
+.page-12 .sm-star-twelve img{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.page-12 .xd-twelve{
 
+  position: absolute;
 
+  bottom: 0rem;
 
+  left: 0rem;
 
+}
 
+.page-12 .xd-twelve img{
 
+  width: 100%;
 
+
 
+}
 
+.page-12 .big-star-twelve{
 
+  position: absolute;
 
+  bottom: 3.78rem;
 
+  left: 0.34rem;
 
+  width: 3.5rem;
 
+}
 
+.page-12 .big-star-twelve img{
 
+  width: 100%;
 
+}
 
+.page-12 .btn-next{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+
 
+
 
+/* E第十二页 */
 
+
 
+/* 新用户 */
 
+/* S新用户0 */
 
+.page-new-0 .new-zero{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.94rem;
 
+}
 
+.page-new-0 .text{
 
+  display: flex;
 
+  align-items: center;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+}
 
+.page-new-0 .year{
 
+  height: 0.68rem;
 
+  font-size: 0.48rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #FFFFFF;
 
+  line-height: 0.56rem;
 
+  letter-spacing: 7px;
 
+}
 
+.page-new-0 .text-1{
 
+  display: flex;
 
+  align-items: center;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  margin-top: 0.32rem;
 
+}
 
+.page-new-0 .text-1 p{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.52rem;
 
+letter-spacing: 4px;
 
+margin: 0;
 
+}
 
+.page-new-0 .text-2{
 
+  height: 1.4rem;
 
+  background: #171826;
 
+  border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
 
+  opacity: 0.3;
 
+  padding: 0.24rem;
 
+  text-align: center;
 
+  margin-top: 0.4rem;
 
+  padding: 0.24rem;
 
+}
 
+.page-new-0 .text-2 div{
 
+  font-size: 0.24rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.62rem;
 
+  letter-spacing: 1px;
 
+}
 
+.page-new-0 .text-3{
 
+  text-align: center;
 
+  margin-top: 0.32rem;
 
+}
 
+.page-new-0 .text-3 div{
 
+  font-size: 0.28rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.52rem;
 
+  letter-spacing: 4px;
 
+}
 
+.page-new-0 .btn{
 
+  width: 4.56rem;
 
+  height: 0.96rem;
 
+  background: linear-gradient(180deg, #57FFF5 0%, #FFFFFF 100%);
 
+  opacity: 1;
 
+  font-size: 0.4rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #10616B;
 
+  line-height: 0.96rem;
 
+  letter-spacing: 3px;
 
+  text-align: center;
 
+  border-radius: 0.48rem;
 
+  margin-top: 0.32rem;
 
+}
 
+.page-new-0 .btn-next{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.page-new-0  .sm-zero{
 
+  position: absolute;
 
+  top: 4.06rem;
 
+  right: 1.78rem;
 
+  width: 1.36rem;
 
+}
 
+.page-new-0  .sm-zero img{
 
+  width: 100%;
 
+}
 
+.page-new-0  .fish-zero{
 
+  position: absolute;
 
+  top: 4.4rem;
 
+  width: 9.14rem;
 
+
 
+  z-index: -1;
 
+  
+}
 
+.page-new-0  .fish-zero img{
 
+  width: 100%;
 
+}
 
+.page-new-0  .xd-zero{
 
+  position: absolute;
 
+  top: 4rem;
 
+  left: 0;
 
+  z-index: -9;
 
+
 
+}
 
+.page-new-0  .xd-zero img{
 
+  width: 100%;
 
+}
 
+.page-new-0 .big-zero{
 
+  position: absolute;
 
+    bottom: 1.52rem;
 
+    left: 0.34rem;
 
+    width: 3.78rem;
 
+    z-index: -8;
 
+}
 
+.page-new-0 .big-zero img{
 
+  width: 100%;
 
+}
 
+/* E新用户0 */
 
+
 
+/* S5678空 */
 
+.page-5678-kong .sum{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+  text-align: center;
 
+}
 
+.page-5678-kong .year{
 
+  font-size: 0.32rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 4px;
 
+}
 
+.page-5678-kong .you{
 
+  font-size: 0.48rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #FFFFFF;
 
+  line-height: 0.56rem;
 
+  letter-spacing: 7px;
 
+  margin-top: 0.32rem;
 
+}
 
+.page-5678-kong .num{
 
+  font-size: 0.28rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 4px;
 
+  margin-top: 0.32rem;
 
+}
 
+.page-5678-kong .text{
 
+  font-size: 0.32rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 4px;
 
+  margin-top: 0.32rem;
 
+}
 
+.page-5678-kong .text-bottom{
 
+  font-size: 0.28rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 4px;
 
+  position: absolute;
 
+    bottom: 3.56rem;
 
+    right: 2.3rem;
 
+}
 
+.page-5678-kong .btn{
 
+  width: 4.56rem;
 
+  height: 0.96rem;
 
+  background: linear-gradient(180deg, #57FFF5 0%, #FFFFFF 100%);
 
+  opacity: 1;
 
+  font-size: 0.4rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #10616B;
 
+  line-height: 0.96rem;
 
+  letter-spacing: 3px;
 
+  text-align: center;
 
+  border-radius: 0.48rem;
 
+  margin-top: 0.26rem;
 
+  position: absolute;
 
+    bottom: 2.23rem;
 
+    left: 2.3rem;
 
+}
 
+.page-5678-kong .btn-next{
 
+  display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+.page-5678-kong .xd-seven{
 
+  position: absolute;
 
+  right: 0;
 
+  bottom: 1.9rem;
 
+  z-index: -1;
 
+}
 
+.page-5678-kong .xd-seven img{
 
+  width: 100%;
 
+}
 
+/* E5678空 */
 
+
 
+/* S第十页 空 */
 
+.page-10-kong .ten{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-10-kong .year{
 
+font-size: 0.48rem;
 
+font-family: PingFang SC-Bold, PingFang SC;
 
+font-weight: bold;
 
+color: #FFFFFF;
 
+line-height: 0.56rem;
 
+letter-spacing: 7px;
 
+margin-left: 1.54rem;
 
+}
 
+.page-10-kong .you{
 
+font-size: 0.32rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+margin-left: 1.54rem;
 
+margin-top: 0.32rem;
 
+}
 
+.page-10-kong .text-zg{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  flex-direction: column;
 
+  width: 5.98rem;
 
+  height: 1.4rem;
 
+  background: #171826;
 
+  border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
 
+  opacity: 0.3;  
+  margin-left: 1.58rem;
 
+  margin-top: 0.72rem;  
+}
 
+.page-10-kong .text-zg div{
 
+  font-size: 0.24rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.28rem;
 
+  letter-spacing: 1px;
 
+}
 
+.page-10-kong .text-bottom{
 
+  text-align: center;
 
+  position: absolute;
 
+  bottom: 1.92rem;
 
+  left: 2.98rem;
 
+}
 
+.page-10-kong .text{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.36rem;
 
+letter-spacing: 4px;
 
+}
 
+.page-10-kong .btn-next{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.page-10-kong .pao-ten{
 
+  position: absolute;
 
+  bottom: 1.7rem;
 
+  left: 0;
 
+  z-index: -9;
 
+}
 
+.page-10-kong .pao-ten img{
 
+  width:9.14rem;
 
+}
 
+.page-10-kong .fish-ten{
 
+  position: absolute;
 
+  bottom: 0;
 
+  left: 0;
 
+  z-index: -7;
 
+}
 
+.page-10-kong .fish-ten img{
 
+ width: 100%;
 
+}
 
+.page-10-kong .big-ten{
 
+  position: absolute;
 
+  bottom: 4.44rem;
 
+  left: 1.52rem;
 
+  width: 2.8rem;
 
+  z-index: -5;
 
+}
 
+.page-10-kong .big-ten img{
 
+ width: 100%;
 
+}
 
+.page-10-kong .sm-ten{
 
+  position: absolute;
 
+  top: 6.34rem;
 
+  right: 2.94rem;
 
+  width: 1.36rem;
 
+  height: 0.77rem;
 
+  z-index: -5;
 
+}
 
+.page-10-kong .sm-ten img{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+/* E第十页 空*
 
+
 
+/* S第十一页 空*/
 
+.page-11-kong .eleven{
 
+  width: 100%;
 
+  height: 100%;
 
+  margin-top: 2.92rem;
 
+}
 
+.page-11-kong .year{
 
+  font-size: 0.48rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #FFFFFF;
 
+  line-height: 0.56rem;
 
+  letter-spacing: 7px;
 
+  margin-left: 1.54rem;
 
+}
 
+.page-11-kong .you{
 
+  font-size: 0.32rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.36rem;
 
+  letter-spacing: 4px;
 
+  margin-left: 1.54rem;
 
+  margin-top: 0.32rem;
 
+}
 
+.page-11-kong .list{
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  margin-left: 1.48rem;
 
+  margin-top: 3.1rem;
 
+}
 
+.page-11-kong .list p{
 
+  font-size: 0.28rem;
 
+  font-family: PingFang SC-Regular, PingFang SC;
 
+  font-weight: 400;
 
+  color: #FFFFFF;
 
+  line-height: 0.52rem;
 
+  letter-spacing: 4px;
 
+  margin: 0;
 
+}
 
+.page-11-kong .text{
 
+font-size: 0.28rem;
 
+font-family: PingFang SC-Regular, PingFang SC;
 
+font-weight: 400;
 
+color: #FFFFFF;
 
+line-height: 0.52rem;
 
+letter-spacing: 4px;
 
+margin-top: 2.56rem;
 
+    margin-left: 2.8rem;
 
+}
 
+.page-11-kong .btn{
 
+  width: 4.56rem;
 
+  height: 0.96rem;
 
+  background: linear-gradient(180deg, #57FFF5 0%, #FFFFFF 100%);
 
+  opacity: 1; 
+  font-size: 0.4rem;
 
+  font-family: PingFang SC-Bold, PingFang SC;
 
+  font-weight: bold;
 
+  color: #10616B;
 
+  line-height: 0.96rem;
 
+  letter-spacing: 3px;
 
+  text-align: center;
 
+  border-radius: 0.48rem;
 
+  margin-top: 0.26rem;
 
+  position: absolute;
 
+    bottom: 2.23rem;
 
+    left: 2.3rem;
 
+}
 
+.page-11-kong .btn-next{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+.page-11-kong .ball-eleven{
 
+  position: absolute;
 
+  bottom: 0;
 
+  left: 0.24rem;
 
+}
 
+.page-11-kong .ball-eleven img{
 
+  width: 100%;
 
+}
 
+.page-11-kong .fish-eleven{
 
+  position: absolute;
 
+    bottom: 3.9rem;
 
+    left: 1.2rem;
 
+}
 
+.page-11-kong .fish-eleven img{
 
+  width: 2.91rem;
 
+}
 
+
 
+/* E第十一页 */

+ 56 - 0
src/web/staticres/common-module/yearEndReport/css/music.css
Parādīt failu 

@@ -0,0 +1,56 @@
 
+@keyframes rotate-music {
 
+  0% {
 
+    transform: rotate(0deg);
 
+  }
 
+  100% {
 
+    transform: rotate(1turn);
 
+  }
 
+}
 
+#music-control-box {
 
+  position: fixed;
 
+  overflow: hidden;
 
+  z-index: 999;
 
+  right: 1.14rem;
 
+  top: 2.18rem;
 
+  cursor: pointer;
 
+}
 
+#music-control-box.run-music .music-icon-box {
 
+  -webkit-animation-play-state: running;
 
+  animation-play-state: running;
 
+}
 
+#music-control-box .music-icon-box .icon-music-on {
 
+  opacity: 0;
 
+}
 
+#music-control-box .music-icon-box .icon-music-off {
 
+  opacity: 1;
 
+}
 
+#music-control-box.run-music .music-icon-box .icon-music-on {
 
+  opacity: 1;
 
+}
 
+#music-control-box.run-music .music-icon-box .icon-music-off {
 
+  opacity: 0;
 
+}
 
+#music-control-box .music-icon-box {
 
+  position: relative;
 
+  width: 0.64rem;
 
+  height: 0.64rem;
 
+  box-sizing: border-box;
 
+  overflow: hidden;
 
+  -webkit-animation: rotate-music 3s linear infinite;
 
+  animation: rotate-music 3s linear infinite;
 
+  -webkit-animation-play-state: paused;
 
+  animation-play-state: paused;
 
+}
 
+
 
+#music-control-box .music-icon-box img {
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 100%;
 
+  transition: opacity 0.25s;
 
+}
 
+#audio {
 
+  position: absolute;
 
+  top: -100%;
 
+  left: -100%;
 
+  z-index: -1;
 
+}

+ 286 - 0
src/web/staticres/common-module/yearEndReport/css/result.css
Parādīt failu 

@@ -0,0 +1,286 @@
 
+html,body{
 
+  width: 100%;
 
+  height: 100%;
 
+  overflow: hidden;
 
+  background-color: #000;
 
+}
 
+.mask-report{
 
+  width: 100%;
 
+  height: 100%;
 
+  overflow: hidden;
 
+}
 
+.result{
 
+  position: relative;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  width: 100%;
 
+  height: 100%;
 
+  padding: 1.28rem 0;
 
+  background: url(../images/result/bg.png) no-repeat center center;
 
+  background-size: 100% 100%;
 
+  overflow: hidden;
 
+  box-sizing: border-box;
 
+}
 
+.r-content{
 
+  position: relative;
 
+  flex: 1;
 
+  /* padding: 0 1.54rem; */
 
+  width: 100%;
 
+  box-sizing: border-box;
 
+}
 
+.info{
 
+  width: 6.08rem;
 
+  margin: 0 auto;
 
+}
 
+.r-content .user{
 
+  display: flex;
 
+  align-items: center;
 
+  margin-top: 0.8rem;
 
+}
 
+.r-content .head-img{
 
+  width: 1.44rem;
 
+  height: 1.44rem;
 
+  border-radius: 50%;
 
+  margin-right: .32rem;
 
+  background-color: #ccc;
 
+  overflow: hidden;
 
+}
 
+.r-content .head-img > img{
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.r-content .nick-name{
 
+  font-size: .32rem;
 
+  color: #1DB5E5;
 
+  line-height: .44rem;
 
+}
 
+
 
+.r-content .role{
 
+  /* position: relative; */
 
+}
 
+.r-content .role-placeholder{
 
+  margin-top: .6rem;
 
+  font-size: .28rem;
 
+  color: #fff;
 
+  line-height: .4rem;
 
+}
 
+.r-content .role-title{
 
+  margin-top: .24rem;
 
+  font-weight: bold;
 
+  color: #FF9F40;
 
+  font-size: .48rem;
 
+}
 
+.r-content .role-main{
 
+  display: flex;
 
+  flex-direction: column;
 
+  /* align-items: center; */
 
+  padding: .36rem .4rem;
 
+  margin-top: .52rem;
 
+  background: rgba(36, 181, 204, 0.2);
 
+  border: 1px solid rgba(42, 190, 209, 0.6);
 
+  box-sizing: border-box;
 
+  border-radius: 8px;
 
+}
 
+.r-content .role-text{
 
+  margin-bottom: .24rem;
 
+  font-size: .32rem;
 
+  color: #fff;
 
+  line-height: .48rem;
 
+}
 
+.r-content .role-label{
 
+  width: 100%;
 
+  height: .72rem;
 
+  /* background-position: left center;
 
+  background-repeat: no-repeat;
 
+  background-size: contain; */
 
+}
 
+.r-content .role-label > img{
 
+  display: block;
 
+  height: 100%;
 
+}
 
+.r-content .role-bg{
 
+  position: absolute;
 
+  left: 0;
 
+  /* background-position: center center;
 
+  background-repeat: no-repeat;
 
+  background-size: 100% 100%; */
 
+  
+}
 
+.r-content .role-bg > img{
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+/* .r-content .role-bg-1{
 
+  top: 1.68rem;
 
+  width: 8.54rem;
 
+  height: 10.46rem;
 
+}
 
+.r-content .role-bg-2{
 
+  top: -1.28rem;
 
+  width: 8.18rem;
 
+  height: 13.5rem;
 
+} */
 
+.r-content .role-bg-other{
 
+  bottom: 0;
 
+  width: 7.84rem;
 
+  height: auto;
 
+}
 
+.r-content .role-bg-other .ball{
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.role-bg-other .super-man{
 
+  position: absolute;
 
+  top: 1.54rem;
 
+  left: 3.18rem;
 
+  width: 2.34rem;
 
+  height: 2.31rem;
 
+}
 
+.r-content .role-bg-other .super-man > img {
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+/* 偏移的样式 */
 
+.mask-report-active{
 
+  position: relative;
 
+  top: 50%;
 
+  left: 50%;
 
+  width : 375px;
 
+  height: 728px;
 
+  overflow: hidden;
 
+  transform: translate(-50%, -50%);
 
+  background-color: #000;
 
+}
 
+
 
+/* 装饰 */
 
+.voice {
 
+  position: absolute;
 
+  top: 2.08rem;
 
+  right: 1.14rem;
 
+  width: .64rem;
 
+  height: .64rem;
 
+}
 
+
 
+.ball{
 
+  position: absolute;
 
+  top: 2.88rem;
 
+  right: .68rem;
 
+  width: 1.12rem;
 
+  height: .88rem;
 
+}
 
+.star{
 
+  position: absolute;
 
+  top: 0;
 
+  right: 1.48rem;
 
+  width: .78rem;
 
+  height: 3.82rem;
 
+}
 
+.voice > img,
 
+.ball > img,
 
+.star >img{
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+/* 按钮 */
 
+.r-btns{
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  margin-top: 0.44rem;
 
+}
 
+.r-btns button{
 
+  width: 2.96rem;
 
+  height: .92rem;
 
+  border: 0;
 
+  outline: 0;
 
+  background-repeat: no-repeat;
 
+  background-position: center center;
 
+  background-color: transparent;
 
+  font-size: .36rem;
 
+  font-weight: bold;
 
+}
 
+.r-btns .share-btn{
 
+  height: .9rem;
 
+  background-image: url(../images/result/share-btn.png);
 
+  background-size: contain;
 
+  margin-right: .56rem;
 
+  color: #10616B;
 
+}
 
+.r-btns .create-btn{
 
+  background-image: url(../images/result/create-btn.png);
 
+  background-size: contain;
 
+  color: #fff;
 
+}
 
+/* logo、qcode */
 
+.r-bottom{
 
+  width: 100%;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: flex-end;
 
+  padding: 0 .6rem;
 
+  box-sizing: border-box;
 
+}
 
+.r-bottom .jy-logo{
 
+  width: 1.84rem;
 
+  height: .48rem;
 
+}
 
+.r-bottom .jy-logo > img{
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+
 
+.r-bottom .jy-qcode{
 
+  display: flex;
 
+  align-items: flex-end;
 
+  font-size: .32rem;
 
+  color: #fff;
 
+  line-height: .49rem;
 
+}
 
+.r-bottom .code-label{
 
+  margin-right: .16rem;
 
+  font-size: .26rem;
 
+}
 
+.r-bottom .code-img{
 
+  width: 1.75rem;
 
+  height: 1.75rem;
 
+}
 
+.r-bottom .code-img > img{
 
+  display: block;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+/* 生成的canvas图片 */
 
+.canvas{
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  width: 100%;
 
+  height: 100%;
 
+  z-index: 99;
 
+  background-color: #000;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  font-size: 0;
 
+}
 
+.canvas-img{
 
+  display: block;
 
+  width: 100%; 
+  height: 100%;
 
+  object-fit: scale-down;
 
+}
 
+/* 重置vant */
 
+.van-action-sheet__cancel, .van-action-sheet__item{
 
+  font-size: 18px;
 
+  line-height: 28px;
 
+}

BIN
src/web/staticres/common-module/yearEndReport/images/BG/bg.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P0/big-zero.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P0/fish-zero.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P0/sm-zero.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P0/xd-zero.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P1/bottom-bg.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P1/meteor-mini.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P1/meteor.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P10/big-ten.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P10/fish-ten.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P10/pao-ten.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P10/sm-ten.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P11/ball-eleven.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P11/fish-eleven.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P11/sm-star-eleven.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P12/big-star-twelve.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P12/sm-star-twelve.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P12/xd-twelve.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P2/ball-two.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P2/fish-two.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P2/star-two.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P2/tail-two.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P3/ball-three.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P3/star-three.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P3/yellow-three.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P4/big-four.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P4/fish-four.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P4/sm-four.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P5/aoyi-five.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P5/ball-five.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P5/fish-five.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P5/yun-five.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P6/ball-six.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P6/fish-six.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P6/group-six.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P6/xd-six.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P7/xd-seven.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P8/ball-eight.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P8/xd-eight.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/P9/ball-nine.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/music/music-off.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/music/music.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/next/next.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/ball.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/bg.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/create-btn.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/item-bg-1.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/item-bg-2.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/item-bg-3.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/item-bg-4.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/item-bg-5.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/item-bg-6.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/item-bg-7.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/jy-logo.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/jy-qcode.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/label-1.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/label-2.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/label-3.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/label-4.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/label-5.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/label-6.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/label-7.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/label-8.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/label-9.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/music.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/share-btn.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/star.png
Parādīt failu


BIN
src/web/staticres/common-module/yearEndReport/images/result/superman.png
Parādīt failu


+ 723 - 0
src/web/staticres/common-module/yearEndReport/js/common.js
Parādīt failu 

@@ -0,0 +1,723 @@
 
+var utils = {
 
+  // utils版本号
 
+  version: '0.0.3',
 
+  isWeiXinBrowser: navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1,
 
+  isAndroid: navigator.userAgent.toLowerCase().indexOf('android') !== -1,
 
+  isIos: /iphone|ipod|ipad|ios/.test(navigator.userAgent.toLowerCase()),
 
+  // 传入你要获取的参数的名字
 
+  getParam: function (name) {
 
+    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
 
+    var r = window.location.search.substr(1).match(reg); //获取url中'?'符后的字符串并正则匹配
 
+
 
+    var context = '';
 
+    if (r != null) context = r[2];
 
+    // 释放变量
 
+    reg = null;
 
+    r = null;
 
+    return context == null || context == '' || context == 'undefined' ? '' : context;
 
+  },
 
+  // 取[m, n]随机数
 
+  getRandomNumber: function (min, max) {
 
+    return Math.floor(Math.random() * (max - min + 1) + min);
 
+  },
 
+  // 获取唯一的uuid
 
+  // https://www.kancloud.cn/ifeng/js100/622666
 
+  getRandomUuid: function () {
 
+    var s = [];
 
+    var hexDigits = "0123456789abcdef";
 
+    for (var i = 0; i < 36; i++) {
 
+      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
 
+    }
 
+    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
 
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
 
+    s[8] = s[13] = s[18] = s[23] = "-";
 
+
 
+    var uuid = s.join("");
 
+    return uuid;
 
+  },
 
+  // 获取随机字符串
 
+  // 不传参数则获取长度不固定的字符串
 
+  getRandomString: function (len) {
 
+    var randomString = '';
 
+    if (len) {
 
+      /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
 
+      var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
 
+      var maxPos = $chars.length;
 
+      for (i = 0; i < len; i++) {
 
+        randomString += $chars.charAt(Math.floor(Math.random() * maxPos));
 
+      }
 
+    } else {
 
+      // Math.random()  生成随机数字, eg: 0.123456
 
+      // .toString(36)  转化成36进制 : "0.4fzyo82mvyr"
 
+      // .substring(2)  去掉前面两位 : "yo82mvyr"
 
+      // .slice(-8)  截取最后八位 : "yo82mvyr"
 
+      randomString = Math.random().toString(36).substring(2)
 
+    }
 
+    return randomString;
 
+  },
 
+  // FROM: https://www.jianshu.com/p/90ed8b728975
 
+  // 比较两个对象是否相等
 
+  // 返回true为相等，返回false为不相等
 
+  deepCompare: function (x, y) {
 
+    var i, l, leftChain, rightChain;
 
+    function compare2Objects(x, y) {
 
+      var p;
 
+      // remember that NaN === NaN returns false
 
+      // and isNaN(undefined) returns true
 
+      if (isNaN(x) && isNaN(y) && typeof x === 'number' && typeof y === 'number') {
 
+        return true;
 
+      }
 
+
 
+      // Compare primitives and functions.
 
+      // Check if both arguments link to the same object.
 
+      // Especially useful on the step where we compare prototypes
 
+      if (x === y) {
 
+        return true;
 
+      }
 
+
 
+      // Works in case when functions are created in constructor.
 
+      // Comparing dates is a common scenario. Another built-ins?
 
+      // We can even handle functions passed across iframes
 
+      if ((typeof x === 'function' && typeof y === 'function') ||
 
+        (x instanceof Date && y instanceof Date) ||
 
+        (x instanceof RegExp && y instanceof RegExp) ||
 
+        (x instanceof String && y instanceof String) ||
 
+        (x instanceof Number && y instanceof Number)) {
 
+        return x.toString() === y.toString();
 
+      }
 
+
 
+      // At last checking prototypes as good as we can
 
+      if (!(x instanceof Object && y instanceof Object)) {
 
+        return false;
 
+      }
 
+
 
+      if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) {
 
+        return false;
 
+      }
 
+
 
+      if (x.constructor !== y.constructor) {
 
+        return false;
 
+      }
 
+
 
+      if (x.prototype !== y.prototype) {
 
+        return false;
 
+      }
 
+
 
+      // Check for infinitive linking loops
 
+      if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) {
 
+        return false;
 
+      }
 
+
 
+      // Quick checking of one object being a subset of another.
 
+      // todo: cache the structure of arguments[0] for performance
 
+      for (p in y) {
 
+        if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
 
+          return false;
 
+        } else if (typeof y[p] !== typeof x[p]) {
 
+          return false;
 
+        }
 
+      }
 
+
 
+      for (p in x) {
 
+        if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) {
 
+          return false;
 
+        } else if (typeof y[p] !== typeof x[p]) {
 
+          return false;
 
+        }
 
+
 
+        switch (typeof (x[p])) {
 
+          case 'object':
 
+          case 'function':
 
+
 
+            leftChain.push(x);
 
+            rightChain.push(y);
 
+
 
+            if (!compare2Objects(x[p], y[p])) {
 
+              return false;
 
+            }
 
+
 
+            leftChain.pop();
 
+            rightChain.pop();
 
+            break;
 
+
 
+          default:
 
+            if (x[p] !== y[p]) {
 
+              return false;
 
+            }
 
+            break;
 
+        }
 
+      }
 
+
 
+      return true;
 
+    }
 
+
 
+    if (arguments.length < 1) {
 
+      return true; //Die silently? Don't know how to handle such case, please help...
 
+      // throw "Need two or more arguments to compare";
 
+    }
 
+
 
+    for (i = 1, l = arguments.length; i < l; i++) {
 
+
 
+      leftChain = []; //Todo: this can be cached
 
+      rightChain = [];
 
+
 
+      if (!compare2Objects(arguments[0], arguments[i])) {
 
+        return false;
 
+      }
 
+    }
 
+
 
+    return true;
 
+  },
 
+  // 判断变量是否是数组
 
+  isArray: function (o) {
 
+    return Object.prototype.toString.call(o) == '[object Array]';
 
+  },
 
+  // 数组对象根据某一个值进行从小到大冒泡排序
 
+  // arr 数组
 
+  // value 字符串
 
+  bSort: function (arr, value) {
 
+    var len = arr.length;
 
+    for (var i = 0; i < len - 1; i++) {
 
+      for (var j = 0; j < len - 1 - i; j++) {
 
+        // 相邻元素两两对比，元素交换，大的元素交换到后面
 
+        if (arr[j][value] > arr[j + 1][value]) {
 
+          var temp = arr[j];
 
+          arr[j] = arr[j + 1];
 
+          arr[j + 1] = temp;
 
+        }
 
+      }
 
+    }
 
+    return arr;
 
+  },
 
+  // 数组去重
 
+  unique: function (arr) {
 
+    if (!this.isArray(arr)) {
 
+      console.log('type error!')
 
+      return
 
+    }
 
+    var array = [];
 
+    for (var i = 0; i < arr.length; i++) {
 
+      if (array.indexOf(arr[i]) === -1) {
 
+        array.push(arr[i])
 
+      }
 
+    }
 
+    return array
 
+  },
 
+  // 数组乱序
 
+  shuffle: function (arr) {
 
+    var targetArr = JSON.parse(JSON.stringify(arr || []))
 
+    var hitArr = []
 
+    var len = targetArr.length
 
+    for (var i = 0; i < len; i++) {
 
+      // 获取随机下标
 
+      var index = Math.floor(Math.random() * targetArr.length)
 
+      hitArr.push(targetArr[index])
 
+      targetArr.splice(index, 1)
 
+    }
 
+    return hitArr.concat(targetArr)
 
+  },
 
+  // 解决ios返回不刷新页面的问题
 
+  iosBackRefresh: function () {
 
+    var isPageHide = false;
 
+    let superSearch_iosNoRefresh = sessionStorage.getItem('superSearch_iosNoRefresh')
 
+    window.addEventListener('pageshow', function () {
 
+      if (isPageHide) {
 
+        // ios从三级页返回不刷新页面
 
+        if (!superSearch_iosNoRefresh) {
 
+          location.reload();
 
+        } else {
 
+          sessionStorage.removeItem('superSearch_iosNoRefresh')
 
+        }
 
+      } else {
 
+        if (superSearch_iosNoRefresh) {
 
+          sessionStorage.removeItem('superSearch_iosNoRefresh')
 
+        }
 
+      }
 
+    });
 
+    window.addEventListener('pagehide', function () {
 
+      isPageHide = true;
 
+    });
 
+  },
 
+  // ios返回调用函数
 
+  iosBackInvoke: function (callback) {
 
+    var isPageHide = false;
 
+    window.addEventListener('pageshow', function () {
 
+      if (isPageHide) {
 
+        callback && callback();
 
+      }
 
+    });
 
+    window.addEventListener('pagehide', function () {
 
+      isPageHide = true;
 
+    });
 
+  },
 
+  /**
 
+   * 格式化金钱的函数
 
+   * @param {number} s 金额必传
 
+   * @param {int:0-100} n 保留小数的位数(int:0-100)
 
+   * @param {Boolean} withoutComma 传true则表示不使用,分割返回值
 
+   */
 
+  formatMoney: function (s, n, withoutComma) {
 
+    // 如果不传s或者s为空，则直接返回0
 
+    if (!s) return 0
 
+
 
+    if (n === undefined || n === null) {
 
+      n = -1
 
+    } else {
 
+      n = n > 0 && n <= 20 ? n : 2;
 
+    }
 
+    var intS = parseInt(s)
 
+    var point = '.'
 
+    var left;
 
+    var right;
 
+    s = parseFloat((s + '').replace(/[^\d\.-]/g, ''))
 
+    // 没传n，默认(如果为整数，则不保留小数。如果为浮点数，则保留两位小数)
 
+    if (n === -1) {
 
+      if (s === intS) {
 
+        n = 0
 
+        right = ''
 
+        point = ''
 
+      } else {
 
+        n = 2
 
+        s = s.toFixed(n);
 
+        right = s.split('.')[1];
 
+      }
 
+      s = s + ''
 
+      left = s.split('.')[0].split('').reverse();
 
+    } else {
 
+      s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '';
 
+      left = s.split('.')[0].split('').reverse();
 
+      right = s.split('.')[1];
 
+    }
 
+
 
+    // 默认进行,拼接
 
+    if (!withoutComma) {
 
+      t = '';
 
+      for (i = 0; i < left.length; i++) {
 
+        t += left[i] + ((i + 1) % 3 == 0 && (i + 1) != left.length ? ',' : '');
 
+      }
 
+      return t.split('').reverse().join('') + point + right;
 
+    }
 
+
 
+    return left.reverse().join('') + point + right;;
 
+  },
 
+  // 金额大写，链接：https://juejin.im/post/5a2a7a5051882535cd4abfce
 
+  // upDigit(1682) result："人民币壹仟陆佰捌拾贰元整"
 
+  // upDigit(-1693) result："欠壹仟陆佰玖拾叁元整"
 
+  upPrice: function (n) {
 
+    var fraction = ['角', '分', '厘']
 
+    var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
 
+    var unit = [
 
+      ['元', '万', '亿'],
 
+      ['', '拾', '佰', '仟']
 
+    ]
 
+    // var head = n < 0 ? '欠人民币' : '人民币'
 
+    var head = ''
 
+    n = Math.abs(n)
 
+    var s = ''
 
+    for (var i = 0; i < fraction.length; i++) {
 
+      s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
 
+    }
 
+    s = s || '整'
 
+    n = Math.floor(n)
 
+    for (var i = 0; i < unit[0].length && n > 0; i++) {
 
+      var p = ''
 
+      for (var j = 0; j < unit[1].length && n > 0; j++) {
 
+        p = digit[n % 10] + unit[1][j] + p
 
+        n = Math.floor(n / 10)
 
+      }
 
+      s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
 
+      // s = p + unit[0][i] + s;
 
+    }
 
+    return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
 
+  },
 
+  // 手机号中间4位加*
 
+  addConfusionForTel: function (tel) {
 
+    var reg = /^(\d{3})\d{4}(\d{4})$/
 
+    return tel.replace(reg, '$1****$2')
 
+  },
 
+  // 手机号加空格
 
+  addSpaceForTel: function (tel) {
 
+    var regMap = {
 
+      isConfuse: /^(\d{3})\*{4}(\d{4})$/,
 
+      addSpace: /^(\d{3})(\d{4})(\d{4})$/
 
+    }
 
+    var confusion = regMap.isConfuse.test(tel)
 
+    if (confusion) {
 
+      return tel.replace(regMap.isConfuse, '$1 **** $2')
 
+    } else {
 
+      return tel.replace(regMap.addSpace, '$1 $2 $3')
 
+    }
 
+  },
 
+  /**
 
+   * 时间戳转换 多少秒、多少分、多少小时前  昨天以及昨天之前的显示年月日（今年的时间不显示年份）
 
+   * @param {Date} originTime 要转换的时间对象(或者时间戳)
 
+   */
 
+  dateFromNow: function (originTime, useOld) {
 
+    if (!originTime) return
 
+    // 原始时间 - 传入的时间戳
 
+    var originTimeStamp = +new Date(originTime)
 
+    // 当前时间戳
 
+    var nowTimeStamp = +new Date()
 
+    // 时间戳相差多少
 
+    var diffTimeStamp = nowTimeStamp - originTimeStamp
 
+
 
+    var postfix = diffTimeStamp > 0 ? '前' : '后'
 
+    // 求绝对值 ms(毫秒)
 
+    var diffTimeStampAbsMs = Math.abs(diffTimeStamp)
 
+    var diffTimeStampAbsS = Math.round(diffTimeStampAbsMs / 1000)
 
+
 
+    // 10天的秒数
 
+    var days11 = 11 * 24 * 60 * 60
 
+    // var dataMap = {
 
+    //     zh: ['年', '个月', '星期', '天', '小时', '分钟', '秒'],
 
+    //     number: [365*24*60*60, 30*24*60*60, 7*24*60*60, 24*60*60, 60*60, 60, 1]
 
+    // }
 
+    var dataMap = {
 
+      zh: ['天', '小时', '分钟', '秒'],
 
+      number: [24 * 60 * 60, 60 * 60, 60, 1]
 
+    }
 
+
 
+    var timeString = ''
 
+    // 10天前
 
+    var tenDaysAgo = diffTimeStampAbsS > days11
 
+    // 是否是当天
 
+    var isCurrentDay = new Date(originTimeStamp).pattern('yyyy.MM.dd') === new Date().pattern('yyyy.MM.dd')
 
+
 
+    var condition = !isCurrentDay
 
+    if (useOld) {
 
+      condition = tenDaysAgo
 
+    }
 
+
 
+    if (condition) {
 
+      // 不是当天，则使用正常日期显示
 
+      var originDate = new Date(originTimeStamp)
 
+      var nowDate = new Date()
 
+      // 是否同年
 
+      var sameYear = originDate.getFullYear() === nowDate.getFullYear()
 
+      // 如果是当年，则不显示年
 
+      var patternString = sameYear ? 'MM-dd' : 'yyyy-MM-dd'
 
+      timeString = originDate.pattern(patternString)
 
+    } else {
 
+      for (var i = 0; i < dataMap.number.length; i++) {
 
+        var inm = Math.floor(diffTimeStampAbsS / dataMap.number[i])
 
+        if (inm != 0) {
 
+          timeString = inm + dataMap.zh[i] + postfix
 
+          break
 
+        }
 
+      }
 
+    }
 
+    return timeString
 
+  },
 
+  /**
 
+   * 输入框获取焦点，隐藏底部固定按钮方法
 
+   * @param {Array} inputs 传入输入框的DOM对象
 
+   * @param {Object} footer 按键弹起要隐藏的footer的 DOM对象
 
+   */
 
+  inputFocusHideFooter: function (inputs, footer) {
 
+    var isShowBtn = function (f) {
 
+      if (f) {
 
+        footer.style.display = ''
 
+      } else {
 
+        footer.style.display = 'none'
 
+      }
 
+    }
 
+
 
+    // ios监听输入框的软键盘弹起和收起事件
 
+    if (this.isIos) {
 
+      inputs.forEach(function (item) {
 
+        item.addEventListener('focus', function () {
 
+          console.log('IOS 键盘弹出')
 
+          // IOS 键盘弹起后操作
 
+          isShowBtn(false)
 
+        }, false)
 
+
 
+        // IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
 
+        item.addEventListener('blur', function () {
 
+          console.log('IOS 键盘收起')
 
+          // IOS 键盘收起后操作
 
+          isShowBtn(true)
 
+        })
 
+      })
 
+    }
 
+
 
+    // Android 键盘收起：Android 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
 
+    if (this.isAndroid) {
 
+      var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
 
+      window.addEventListener('resize', function () {
 
+        var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight
 
+        if (clientHeight > nowClientHeight) {
 
+          // 键盘弹出的事件处理
 
+          console.log('Android 键盘弹出')
 
+          isShowBtn(false)
 
+        } else {
 
+          console.log('Android 键盘收起')
 
+          // 键盘收起的事件处理
 
+          isShowBtn(true)
 
+        }
 
+      }, false)
 
+    }
 
+  },
 
+  /**
 
+   * 通用关键字高亮替换
 
+   * @param {String} value 要高亮的字符串
 
+   * @param {String|Array} oldChar 要被替换的字符串(或数组)
 
+   * @param {String|Array} newChar 要替换成的字符串(或数组)
 
+   *
 
+   * 比如：要将 - `剑鱼标讯工具函数` 字符串中的 `工具` 高亮
 
+   * 则此时 value -> `剑鱼标讯工具函数`
 
+   *        oldChar -> `工具`
 
+   *        newChar -> `<span class="highlight-text">工具</span>`
 
+   *
 
+   * 批量高亮-----
 
+   * 比如：要将 - `剑鱼标讯工具函数` 字符串中的 `工具` `剑鱼` 高亮
 
+   * 则此时 value -> `剑鱼标讯工具函数批量高亮`
 
+   *        oldChar -> ['工具', '剑鱼']
 
+   *        newChar -> ['<span class="highlight-text">', '</span>']
 
+   *
 
+   *   注意：此时newChar为一个长度为2的数组，数组中为高亮标签的起始标签和结束标签
 
+   *
 
+   */
 
+  replaceKeyword: function (value, oldChar, newChar) {
 
+    var _this = this
 
+    if (!oldChar || !newChar) return value
 
+    // oldChar的字符串数组，用来循环替换
 
+    var oldCharArr = []
 
+
 
+    if (this.isArray(oldChar)) {
 
+      oldCharArr = oldChar.concat()
 
+    } else {
 
+      oldCharArr.push(oldChar)
 
+    }
 
+
 
+    // 数组去重
 
+    oldCharArr = this.unique(oldCharArr)
 
+
 
+    try {
 
+      oldCharArr.forEach(function (item) {
 
+        // 去空格之后为空字符串，则直接跳过当前替换
 
+        if (item.replace(/\s+/g, '')) {
 
+          var oc = item
 
+          oc = oc.replace(/\$/g, '\\$')
 
+            .replace(/\(/g, '\\(')
 
+            .replace(/\)/g, '\\)')
 
+            .replace(/\*/g, '\\*')
 
+            .replace(/\+/g, '\\+')
 
+            .replace(/\./g, '\\.')
 
+            .replace(/\[/g, '\\[')
 
+            .replace(/\]/g, '\\]')
 
+            .replace(/\?/g, '\\?')
 
+            .replace(/\\/g, '\\')
 
+            .replace(/\//g, '\\/')
 
+            .replace(/\^/g, '\\^')
 
+            .replace(/\{/g, '\\{')
 
+            .replace(/\}/g, '\\}')
 
+            .replace(/\|/g, '\\|')
 
+
 
+          if (_this.isArray(newChar)) {
 
+            // 批量高亮
 
+            var tempV = value
 
+            value = value.replace(new RegExp('(' + oc + ')', 'gmi'), newChar[0] + oc + newChar[1])
 
+            if (value === tempV && oc.indexOf('+') !== -1) {
 
+              var splitReg = oc.split('\\+')
 
+              splitReg.map(function (v) {
 
+                value = value.replace(new RegExp('(' + v + ')', 'gmi'), newChar[0] + v + newChar[1])
 
+              })
 
+            }
 
+          } else {
 
+            // 普通单个高亮
 
+            value = value.replace(new RegExp('(' + oc + ')', 'gmi'), newChar)
 
+          }
 
+        }
 
+      })
 
+    } catch (e) {
 
+      console.log(e)
 
+      return value
 
+    }
 
+    return value
 
+  },
 
+  /**
 
+   * 批量删除sessionStorage中的数据
 
+   * @param {RegExp} reg 传入一个要匹配的正则表达式
 
+   */
 
+  clearBatchSessionStorage: function (reg) {
 
+    if (sessionStorage) {
 
+      var sessKeys = Object.keys(sessionStorage)
 
+      sessKeys.forEach(function (item) {
 
+        if (reg.test(item)) {
 
+          sessionStorage.removeItem(item)
 
+        }
 
+      })
 
+    }
 
+  },
 
+  /**
 
+   * 获取图片原始宽高
 
+   * @param {Image/Object} img
 
+   * @param {Function} callback
 
+   */
 
+  getImgNaturalDimensions: function (img, callback) {
 
+    var naturalSize = {}
 
+    if (img.naturalWidth && img.naturalHeight) { // 现代浏览器
 
+      naturalSize.with = img.naturalWidth
 
+      naturalSize.height = img.naturalHeight
 
+    } else { // IE6/7/8
 
+      var image = new Image()
 
+      image.src = img.src
 
+      image.onload = function () {
 
+        naturalSize.with = image.width
 
+        naturalSize.height = image.height
 
+        callback && callback(naturalSize)
 
+      }
 
+    }
 
+    return naturalSize
 
+  },
 
+  moneyUnit: function (num, type, lv) {
 
+    if (num === '' || num == null || num == undefined || isNaN(num)) return ''
 
+    var levelArr = ['元', '万元', '亿元', '万亿元']
 
+    if (type === void 0) {
 
+      type = 'string';
 
+    }
 
+
 
+    if (lv === void 0) {
 
+      lv = 0;
 
+    }
 
+
 
+    if (num === 0) {
 
+      if (type === 'string') {
 
+        return '0';
 
+      }
 
+
 
+      if (type === 'lv') {
 
+        return levelArr[lv];
 
+      }
 
+
 
+      if (type === 'number') {
 
+        return 0;
 
+      }
 
+
 
+      if (type === 'index') {
 
+        return lv;
 
+      }
 
+    }
 
+
 
+    // 需要传入固定的lv（此时lv为 levelArr 中的一个）
 
+    function transfer(num, lvString) {
 
+      var index = levelArr.indexOf(lvString)
 
+      if (index === -1 || index === 0) {
 
+        return num
 
+      } else {
 
+        return (num / Math.pow(10000, index)).toFixed(2) + lvString
 
+      }
 
+    }
 
+
 
+    if (type === 'transfer') {
 
+      return transfer(num, lv)
 
+    }
 
+
 
+    var result = num / Math.pow(10000, lv);
 
+
 
+    if (result > 10000 && lv < 2) {
 
+      return this.moneyUnit(num, type, lv + 1)
 
+    } else {
 
+      if (type === 'string') {
 
+        return String(Math.floor(result * 100) / 100).replace('.00', '') + levelArr[lv];
 
+      }
 
+
 
+      if (type === 'lv') {
 
+        return levelArr[lv];
 
+      }
 
+
 
+      if (type === 'index') {
 
+        return lv;
 
+      }
 
+
 
+      if (type === 'number') {
 
+        return String(Math.floor(result * 100) / 100).replace('.00', '');
 
+      }
 
+    }
 
+  },
 
+  /**
 
+   * 防抖
 
+   * @param {Function} func 函数
 
+   * @param {Number} delay 延时间隔 默认 200ms
 
+   * @param {Boolean} immediate 是否首次执行
 
+   */
 
+  debounce: function (func, delay, immediate) {
 
+    var timer = null;
 
+    delay = delay || 200
 
+    return function () {
 
+      var context = this;
 
+      var args = arguments;
 
+      if (timer) clearTimeout(timer);
 
+      if (immediate) {
 
+        var doNow = !timer;
 
+        timer = setTimeout(function () {
 
+          timer = null;
 
+        }, delay);
 
+        if (doNow) {
 
+          func.apply(context, args);
 
+        }
 
+      } else {
 
+        timer = setTimeout(function () {
 
+          func.apply(context, args);
 
+        }, delay);
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+$(function () {
 
+  if (utils.isIos) {
 
+    window.JyObj = {
 
+      //获取经纬度
 
+      getLLitude: function () {
 
+        return JyObj.IosCall("getLLitude")
 
+      },
 
+      savePic: function (imgbase64) {
 
+        JyObjMessage.imgbase64 = imgbase64
 
+        window.webkit.messageHandlers.savePic.postMessage(JyObjMessage)
 
+        JyObj.clearMessage()
 
+      },
 
+      //抖音or快手其他应用appName：应用名称；appLink：应用链接
 
+      openOtherAppLinks: function (appName, appLink) {
 
+        JyObjMessage["appName"] = appName;
 
+        JyObjMessage["appLink"] = appLink;
 
+        window.webkit.messageHandlers.openOtherAppLinks.postMessage(JyObjMessage);
 
+        JyObj.clearMessage();
 
+      },
 
+      //隐藏显示底部菜单栏 0：隐藏；1：显示
 
+      hiddenBottom: function (val) {
 
+        JyObjMessage["hidden"] = val;
 
+        window.webkit.messageHandlers.hiddenBottom.postMessage(JyObjMessage);
 
+        JyObj.clearMessage();
 
+      },
 
+      //分享功能
 
+      share: function (type, title, content, link) {
 
+        JyObjMessage["type"] = type
 
+        JyObjMessage["title"] = title
 
+        JyObjMessage["content"] = content
 
+        JyObjMessage["link"] = link
 
+        window.webkit.messageHandlers.share.postMessage(JyObjMessage);
 
+        JyObj.clearMessage();
 
+      },
 
+      //跳转外部链接
 
+      openExternalLink: function (url, title) {
 
+        JyObjMessage["url"] = url
 
+        JyObjMessage["title"] = title
 
+        window.webkit.messageHandlers.openExternalLink.postMessage(JyObjMessage);
 
+        JyObj.clearMessage();
 
+      },
 
+      //是否安装了微信
 
+      isInstallWeixin: function () {
 
+        return JyObj.IosCall("isInstallWeixin")
 
+      },
 
+      //获取定位
 
+      getLocation: function () {
 
+        return JyObj.IosCall("getLocation")
 
+      },
 
+      //查看定位开关状态 是否开启
 
+      checkLocationPermission: function () {
 
+        return JyObj.IosCall("checkLocationPermission")
 
+      }
 
+    }
 
+  }
 
+})

+ 29 - 0
src/web/staticres/common-module/yearEndReport/js/rem.js
Parādīt failu 

@@ -0,0 +1,29 @@
 
+(function(doc, win) {
 
+	var docEl = doc.documentElement,
 
+		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 
+		recalc = function() {
 
+			var fontSize = RootNodeFontSize();
 
+			if(fontSize == 0) return;
 
+			docEl.style.fontSize = fontSize + 'px';
 
+		};
 
+	if(!doc.addEventListener) return;
 
+	win.addEventListener(resizeEvt, recalc, false);
 
+	doc.addEventListener('DOMContentLoaded', recalc, false);
 
+})(document, window);
 
+//获取根节点的font-size
 
+function RootNodeFontSize(){
 
+	var clientWidth = document.documentElement.clientWidth;
 
+  var clientHeight = document.documentElement.clientHeight
 
+	if(!clientWidth) return 0;
 
+	if(clientWidth > 914) clientWidth = 914;
 
+
 
+  var originwCh = 914 / 1624
 
+  var wCh = clientWidth / clientHeight
 
+  var maxDiff = 0.04
 
+  if (Math.abs(wCh - originwCh) > maxDiff) {
 
+    return (clientHeight * originwCh) / 9.14
 
+  }
 
+
 
+
 
+	return clientWidth / 9.14;
 
+}

+ 716 - 5
src/web/templates/active/yearEndReport/index.html
Parādīt failu 

@@ -1,10 +1,721 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="zh-CN" style="font-size: 50px;">
 
+
 
 <head>
 
-    <meta charset="UTF-8">
 
-    <title>this is year report</title>
 
+    <meta charset="utf-8">
 
+    <meta name="keywords" content="剑鱼标讯">
 
+    <meta name="description" content="剑鱼标讯">
 
+    <meta name="author" content="剑鱼标讯">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport"
 
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 
+    <meta name="x5-page-mode" content="app">
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <meta name="format-detection" content="telephone=no">
 
+    <meta name="referrer" content="no-referrer">
 
+    <link rel="icon" href="/favicon.ico">
 
+    <title>年度报告</title>
 
+    <link rel="preload" as="style" href="https://cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css"/>
 
+    <link rel="preload" as="style" href="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.css"/>
 
+    <l  ink rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css"/>
 
+    <link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/animate-css/4.1.1/animate.css"/>
 
+    <link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.css"/>
 
+    <link rel="stylesheet" href="{{Msg "seo" "cdn"}}/common-module/yearEndReport/css/music.css">
 
+    <link rel="stylesheet" href="{{Msg "seo" "cdn"}}/common-module/yearEndReport/css/index.css">
 
+    <script src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/js/rem.js"></script>
 
 </head>
 
+
 
 <body>
 
-年报
 
+
 
+<div class="jy-report" v-cloak>
 
+    <!-- S--MUSIC -->
 
+    <audio id="audio" controls loop src='https://www.jianyu360.cn/big-member/video/music.mp3' autoplay></audio>
 
+    <div id="music-control-box">
 
+        <div class="music-icon-box">
 
+            <img class="icon-music-on" src='{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/music/music.png' />
 
+            <img class="icon-music-off" src='{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/music/music-off.png' />
 
+        </div>
 
+    </div>
 
+    <!-- E--MUSIC -->
 
+    <!-- S--Toast -->
 
+    <div class="jy-toast" style="z-index: 2003;" v-show="showToastText">
 
+        <div class="jy-toast__text">${showToastText}</div>
 
+    </div>
 
+    <!-- E--Toast -->
 
+    <!-- Swiper -->
 
+    <div class="swiper-container" ref="mySwiper">
 
+        <div class="swiper-wrapper">
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-1">
 
+                        <div class="user-info-group">
 
+                            <img animate-name="up" animate-delay="600" class="jy-user-img" :src="pageInfo.user_head" alt="">
 
+                            <p animate-name="up" animate-delay="600" class="jy-user-name">Hi~<span>${pageInfo.user_name}</span></p>
 
+                            <p animate-name="up" animate-delay="200" class="tip-info">
 
+                                <span class="text-hello">欢迎来到你的...</span>
 
+                                <span>2021剑鱼之旅</span>
 
+                            </p>
 
+                            <div class="read_pact" animate-name="up" animate-delay="800">
 
+                                <input @change="changeReadPact" v-model="readPact" type="checkbox" id="read" name="read_pact" value="read_pact">
 
+                                <label for="read">同意剑鱼统计我的使用数据，</label><a href="">查看授权协议</a>
 
+                            </div>
 
+                        </div>
 
+                        <div animate-name="up" animate-delay="500" class="go-report">
 
+                            <div class="go-button" @click="goStart">即刻启程</div>
 
+                        </div>
 
+                        <div class="add-layer-group">
 
+                            <img class="meteor-left" src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P1/meteor.png">
 
+                            <img class="meteor-mini" src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P1/meteor-mini.png">
 
+                            <img class="meteor-bg" src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P1/bottom-bg.png">
 
+                        </div>
 
+                        <img animate-name="up" animate-delay="900" class="jy-logo" src="https://www.jianyu360.cn/images/pc/logo.png" alt="">
 
+                        <div class="next-page"></div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+             <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-2">
 
+                        <div class="meet">
 
+                            <p animate-name="up" animate-delay="200" class="hello">醉纸鸢，你好呀！</p>
 
+                            <p animate-name="up" animate-delay="400" style="margin-top: 0.32rem; margin-left: 1.54rem;">
 
+                                <span class="text">还记得</span>
 
+                                <span class="time">2019年3月27日</span>
 
+                                <span class="text">吗？</span>
 
+                            </p>
 
+                            <div class="star-two">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P2/star-two.png" alt="">
 
+                            </div>
 
+                            <p animate-name="up" animate-delay="800" class="text-a" style="margin-top: 4.52rem;">很开心能遇见你</p>
 
+                            <div class="fish-two">
 
+                                <img class="swiper-lazy"  data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P2/fish-two.png" alt="">
 
+                            </div>
 
+                            <div class="tail-two">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P2/tail-two.png" alt="">
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                            <div>
 
+                                <img class="swiper-lazy ball-two" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P2/ball-two.png" alt="">
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-3">
 
+                        <div class="usage-days">
 
+                            <div class="today">今天</div>
 
+                            <div class="text">是我们一起同行的</div>
 
+                            <div class="days">第732天</div>
 
+                        </div>
 
+                        <div class="star-three">
 
+                            <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P3/star-three.png" alt="">
 
+                        </div>
 
+                        <div class="ball-three">
 
+                            <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P3/ball-three.png" alt="">
 
+                        </div>
 
+                        <div class="yellow-three">
 
+                            <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P3/yellow-three.png" alt="">
 
+                        </div>
 
+                        <p class="moqi">
 
+                            <span class="mf">“免费看,不遮挡”的承诺</span>
 
+                            <span class="mf" style="margin-top: 0.16rem;">是你我之间的永久的默契</span>
 
+                        </p>
 
+                        <div class="btn-next">
 
+                            <div class="next-page"></div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-4">
 
+                        <div class="year">
 
+                            <div class="text-1">
 
+                                <div class="jin">近一年</div>
 
+                                <div class="day">
 
+                                    <div class="ty">你登录了</div>
 
+                                    <div class="days">279天</div>
 
+                                    <div class="ty">剑鱼标讯</div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="sm-four">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P4/sm-four.png" alt="">
 
+                            </div>
 
+                            <div class="fish-four">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P4/fish-four.png" alt="">
 
+                            </div>
 
+                            <div class="big-four">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P4/big-four.png" alt="">
 
+                            </div>
 
+                            <div class="text-2">
 
+                                <div class="night">
 
+                                    <div class="big-day">有138天</div>
 
+                                    <div class="ty">的深夜</div>
 
+                                </div>
 
+                                <div class="ty" style="margin-left: 2.52rem;">仍在使用剑鱼标讯</div>
 
+                            </div>
 
+                            <div class="picture">
 
+                                <img class="swiper-lazy" data-src="" alt="">
 
+                            </div>
 
+                            <div class="text-bottom">
 
+                                <div class="text-3">不是投标人爱熬夜</div>
 
+                                <div class="text-3" style="margin-top: 0.16rem;">是黑夜需要投标人这颗璀璨的星</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-5">
 
+                        <div class="item">
 
+                            <div class="this">近一年</div>
 
+                            <div class="gongsi">郑州大学第一附属医院<br>LED显示屏系统</div>
 
+                            <div class="guanzhu">是你最关注的项目</div>
 
+                            <div class="yun-five">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P5/yun-five.png" alt="">
 
+                            </div>
 
+                            <div class="ball-five">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P5/ball-five.png" alt="">
 
+                            </div>
 
+                            <div class="fish-five">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P5/fish-five.png" alt="">
 
+                            </div>
 
+                            <div class="aoyi-five"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P5/aoyi-five.png" alt=""></div>
 
+                            <div class="text-bottom">
 
+                                <p>无论结果如何，我知道</p>
 
+                                <p style="margin-top: 0.16rem;">这些标讯对你来说一定有特别的意义</p>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-6">
 
+                        <div class="message">
 
+                            <div class="year">近一年</div>
 
+                            <div class="you">你一共浏览了</div>
 
+                            <div class="num">73699条</div>
 
+                            <div class="xiangmu">项目信息</div>
 
+                            <div class="ball-six"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P6/ball-six.png" alt=""></div>
 
+                            <div class="group-six"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P6/group-six.png" alt=""></div>
 
+                            <div class="fish-six"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P6/fish-six.png" alt=""></div>
 
+                            <div class="xd-six"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P6/xd-six.png" alt=""></div>
 
+                            <div class="text-one">
 
+                                <p>精准、及时的数据</p>
 
+                                <p style="margin-top: 0.16rem;">都源于剑鱼悄悄的努力</p>
 
+                            </div>
 
+                            <div class="text-two">
 
+                                <div class="box">
 
+                                    <p class="p-one">招标信息库</p>
 
+                                    <span class="s-one">9000万+</span>
 
+                                    <p class="p-one">项目库</p>
 
+                                    <span class="s-one">4800万+</span>
 
+                                </div>
 
+                                <div class="box">
 
+                                    <p class="p-one">企业库</p>
 
+                                    <span class="s-one">4500万+</span>
 
+                                    <p class="p-one">采购单位库</p>
 
+                                    <span class="s-one">200万+</span>
 
+                                </div>
 
+                            </div>
 
+                            <div class="text-bottom">让你不遗漏任何商机</div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-7">
 
+                        <div class="sum">
 
+                            <div class="year">近一年</div>
 
+                            <div class="you">你搜索了</div>
 
+                            <div class="num">3654次</div>
 
+                            <div class="xd-seven"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P7/xd-seven.png" alt=""></div>
 
+                            <div class="text-bottom">求索力让你的成功触手可及</div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-8">
 
+                        <div class="friend">
 
+                            <div class="year">近一年</div>
 
+                            <div class="num">765个</div>
 
+                            <div class="you">企业成为你的新朋友</div>
 
+                            <div class="ball-eight"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P8/ball-eight.png" alt=""></div>
 
+                            <div class="xd-eight"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P8/xd-eight.png" alt=""></div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">通过企业搜索、采购单位画像</div>
 
+                                <div class="text">了解甲方、找到合作</div>
 
+                                <div class="text">果断的执行力，让无数人为你痴迷</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-9">
 
+                        <div class="mouth">
 
+                            <div class="year">
 
+                                <p class="nian" style="display: contents">近一年，</p>
 
+                                <span class="yue" style="color: #70EEFF;">7月</span>
 
+                            </div>
 
+                            <div class="you">是你最繁忙的时候</div>
 
+                            <div><img class="swiper-lazy" data-src="" alt=""></div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">或许奔波在投标路上</div>
 
+                                <div class="text">或许驰骋在投标知识的海洋</div>
 
+                                <div class="text">追梦的你，满怀热忱</div>
 
+                            </div>
 
+                            <div class="banner-yue">
 
+                                <div class="banner-yue-one">7</div>
 
+                                <div class="banner-yue-two">月</div>
 
+                            </div>
 
+                            <div class="ball-nine"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P9/ball-nine.png" alt=""></div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-10">
 
+                        <div class="ten">
 
+                            <div class="pao-ten">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P10/pao-ten.png" alt="">
 
+                            </div>
 
+                            <div class="fish-ten">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P10/fish-ten.png" alt="">
 
+                            </div>
 
+                            <div class="big-ten">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P10/big-ten.png" alt="">
 
+                            </div>
 
+                            <div class="sm-ten">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P10/sm-ten.png" alt="">
 
+                            </div>
 
+                            <p class="year">近一年</p>
 
+                            <div class="you">你关注的行业累计发布了</div>
 
+                            <span class="num">3698条</span>
 
+                            <div class="gonggao">项目公告</div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">即使受到疫情的影响</div>
 
+                                <div class="text">投标人依旧稳步向前</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-11">
 
+                        <div class="eleven">
 
+                            <div class="ball-eleven">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P11/ball-eleven.png" alt="">
 
+                            </div>
 
+                            <div class="fish-eleven">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P11/fish-eleven.png" alt="">
 
+                            </div>
 
+                            <p class="year">近一年</p>
 
+                            <div class="you">慧眼识珠的你,体验了剑鱼</div>
 
+                            <div class="gn">
 
+                                <span class="num">17个</span>
 
+                                <p class="new">新功能</p>
 
+                            </div>
 
+                            <div class="list">
 
+                                <p>免费标讯搜索</p>
 
+                                <p>超级订阅</p>
 
+                                <p>大会员</p>
 
+                                <p>数据导出</p>
 
+                                <p>行业解决方案</p>
 
+                                <p>......</p>
 
+                            </div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">从未枯竭的好奇心</div>
 
+                                <div class="text">让你看到了更大的世界</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-12">
 
+                        <div class="twelve">
 
+                            <div class="text">
 
+                                <div class="sm-star-twelve">
 
+                                    <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P12/sm-star-twelve.png" alt="">
 
+                                </div>
 
+                                <p class="text-1">无论好的坏的</p>
 
+                                <div class="text-1" style="margin-top: 0.16rem;">跌宕且绮丽的2021已结束</div>
 
+                                <div class="text-3">凛冬散尽，星河长明</div>
 
+                                <div class="text-1" style="margin-top: 1.04rem;">为你生成2021年度角色报告</div>
 
+                                <div class="btn">
 
+                                    <div class="sc">生成报告</div>
 
+                                </div>
 
+                                <div class="xd-twelve">
 
+                                    <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P12/xd-twelve.png" alt="">
 
+                                </div>
 
+                                <div class="big-star-twelve">
 
+                                    <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P12/big-star-twelve.png" alt="">
 
+                                </div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <!-- 新用户 -->
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-new-0">
 
+                        <div class="new-zero">
 
+                            <div class="text">
 
+                                <div class="year">2021</div>
 
+                                <div class="sm-zero"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P0/sm-zero.png" alt=""></div>
 
+                                <div class="text-1">
 
+                                    <p>遗憾没有和您相遇</p>
 
+                                    <p>但所有的遗憾</p>
 
+                                    <p>都是2022惊喜的铺垫</p>
 
+                                </div>
 
+                                <div class="text-2">
 
+                                    <div>招免费看，不遮挡服务初心不改</div>
 
+                                    <div>商机线索推荐、AI智能服务中标创新永不停歇</div>
 
+                                </div>
 
+                                <div class="fish-zero"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P0/fish-zero.png" alt=""></div>
 
+                                <div class="xd-zero"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P0/xd-zero.png" alt=""></div>
 
+                                <div class="year" style="margin-top: 3.56rem;">新的一年</div>
 
+                                <div class="text-3">
 
+                                    <div>期待能和你肩并肩</div>
 
+                                    <div>走的更远</div>
 
+                                </div>
 
+                                <div class="btn">即刻体验</div>
 
+                                <div class="big-zero"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P0/big-zero.png" alt=""></div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-5678-kong">
 
+                        <div class="sum">
 
+                            <div class="year">你可能是个慢热的人</div>
 
+                            <div class="you">这一年</div>
 
+                            <div class="num">还未有项目和企业成功引起你的关注</div>
 
+                            <div class="text">不急，未来会有的</div>
 
+                            <div class="xd-seven"><img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P7/xd-seven.png" alt=""></div>
 
+                            <div class="text-bottom">点击试用一下，会有惊喜</div>
 
+                            <div class="btn">试用一下</div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-10-kong">
 
+                        <div class="ten">
 
+                            <div class="pao-ten">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P10/pao-ten.png" alt="">
 
+                            </div>
 
+                            <div class="fish-ten">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P10/fish-ten.png" alt="">
 
+                            </div>
 
+                            <div class="big-ten">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P10/big-ten.png" alt="">
 
+                            </div>
 
+                            <div class="sm-ten">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P10/sm-ten.png" alt="">
 
+                            </div>
 
+                            <p class="year">近一年</p>
 
+                            <div class="you">你的忙碌都有了收获</div>
 
+                            <div class="text-zg">
 
+                                <div>通过及时的标讯信息</div>
 
+                                <div style="margin-top: 0.24rem;">找合作、找甲方、找商机</div>
 
+                            </div>
 
+                            <div class="text-bottom">
 
+                                <div class="text">即使受到疫情影响</div>
 
+                                <div class="text">依旧稳步向前</div>
 
+                            </div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="swiper-slide">
 
+                <div class="slide-inner">
 
+                    <div class="report-page page-11-kong">
 
+                        <div class="eleven">
 
+                            <div class="ball-eleven">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P11/ball-eleven.png" alt="">
 
+                            </div>
 
+                            <div class="fish-eleven">
 
+                                <img class="swiper-lazy" data-src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/P11/fish-eleven.png" alt="">
 
+                            </div>
 
+                            <p class="year">近一年</p>
 
+                            <div class="you">剑鱼产品不断迭代</div>
 
+                            <div class="list">
 
+                                <p>超级订阅V4.0</p>
 
+                                <p>大会员V2.0</p>
 
+                                <p>数据流量包</p>
 
+                                <p>......</p>
 
+                            </div>
 
+                            <div class="text">期待您有更好的体验</div>
 
+                            <div class="btn">试用一下</div>
 
+                            <div class="btn-next">
 
+                                <div class="next-page"></div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
+
 
+
 
+<!--S-必定需要预加载的资源-->
 
+<link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"/>
 
+<link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js"/>
 
+<link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.js"/>
 
+<!--E-必定需要预加载的资源-->
 
+<!--S-当前页面的资源-->
 
+<script src="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.js"></script>
 
+<script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
 
+<script src="https://cdn-common.jianyu360.com/cdn/lib/jquery/3.6.0/jquery.min.js"></script>
 
+
 
+<!--S-提前需要预加载的资源-->
 
+<link rel="prefetch" as="html" href="./result.html"/>
 
+<link rel="prefetch" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/html2canvas/1.1.2/dist/html2canvas.min.js"/>
 
+<!--E-提前需要预加载的资源-->
 
+<script>
 
+
 
+    function initSwiper() {
 
+        var interleaveOffset = 0.5; //视差比值
 
+
 
+        function playAnOfIndex(index, type = true, delay = 0) {
 
+            setTimeout(function () {
 
+                var tempNode = $('.swiper-container .slide-inner').eq(index).find('*[animate-name]')
 
+                $(tempNode).each(function () {
 
+                    var anName = $(this).attr('animate-name')
 
+                    var anDelay = $(this).attr('animate-delay') || '200'
 
+                    if (type) {
 
+                        $(this).addClass(anName)
 
+                        $(this).css('animation-delay', anDelay + 'ms')
 
+                    } else {
 
+                        tempNode.removeClass(anName)
 
+                    }
 
+                })
 
+            }, delay)
 
+        }
 
+
 
+        var swiperOptions = {
 
+            loop: false,
 
+            speed: 1000,
 
+            grabCursor: true,
 
+            watchSlidesProgress: true,
 
+            mousewheelControl: false,
 
+            direction: 'vertical',
 
+            mousewheel: true,
 
+            //设置宽度为全屏
 
+            width: window.innerWidth,
 
+            height: window.innerHeight,
 
+            allowSlideNext : false,
 
+            lazy: {
 
+                loadPrevNext: true,
 
+            },
 
+            on: {
 
+                init: function () {
 
+                    playAnOfIndex(0, true, 1000)
 
+                },
 
+                slideChangeTransitionStart: function () {
 
+                    var index = this.activeIndex
 
+                    playAnOfIndex(index, false)
 
+                },
 
+                slideChangeTransitionEnd: function () {
 
+                    var index = this.activeIndex
 
+                    playAnOfIndex(index)
 
+                },
 
+                slideChange: function () {
 
+                    var index = this.activeIndex
 
+                    playAnOfIndex(index)
 
+                },
 
+                progress: function () {
 
+                    for (var i = 0; i < this.slides.length; i++) {
 
+                        var slideProgress = this.slides[i].progress;
 
+                        var innerOffset = this.width * interleaveOffset;
 
+                        var innerTranslate = slideProgress * innerOffset;
 
+                        this.slides[i].querySelector(".slide-inner").style.transform =
 
+                            "translate3d(0," + innerTranslate + "px, 0)";
 
+                    }
 
+                },
 
+                touchStart: function () {
 
+                    for (var i = 0; i < this.slides.length; i++) {
 
+                        this.slides[i].style.transition = "";
 
+                    }
 
+                },
 
+                setTransition: function (speed) {
 
+                    for (var i = 0; i < this.slides.length; i++) {
 
+                        this.slides[i].style.transition = speed + "ms";
 
+                        this.slides[i].querySelector(".slide-inner").style.transition =
 
+                            speed + "ms";
 
+                    }
 
+                }
 
+            }
 
+        };
 
+
 
+        var swiper = new Swiper(this.$refs.mySwiper, swiperOptions);
 
+        this.$swiper = swiper
 
+    }
 
+
 
+    function initPlayMusic () {
 
+        var isAutoPlayMusic = false
 
+        var bgvid = document.getElementById("audio");
 
+        var b_music = document.getElementById('music-control-box')
 
+        var fullbox = document.querySelector('body');
 
+
 
+        fullbox.addEventListener('touchstart', function(){
 
+            if (isAutoPlayMusic) {
 
+                isAutoPlayMusic = false
 
+                bgvid.play()
 
+                b_music.classList.add('run-music')
 
+            }
 
+        }, false);
 
+
 
+        bgvid.addEventListener("playing", function(){
 
+            b_music.style.display = 'block'
 
+            b_music.classList.add('run-music')
 
+        });
 
+        bgvid.addEventListener("pause", function(){
 
+            b_music.classList.remove('run-music')
 
+        });
 
+        b_music.addEventListener('click', function (e) {
 
+            if (b_music.classList.contains('run-music')) {
 
+                bgvid.pause()
 
+                b_music.classList.remove('run-music')
 
+            } else {
 
+                bgvid.play()
 
+                b_music.classList.add('run-music')
 
+            }
 
+        })
 
+    }
 
+
 
+
 
+    const pageInfo = {
 
+        // 用户信息
 
+        user_name: '醉纸鸢',
 
+        user_head: 'https://www.jianyu360.cn/images/auto.png',
 
+        share_link: 'https://www.jianyu360.cn/images/auto.png',
 
+        // 是否新用户
 
+        is_new: false,
 
+        // 注册时间 秒
 
+        registration_time: 1644249599,
 
+        // 距离今天的天数
 
+        total_days: 100,
 
+        // 近一年登录天数
 
+        login_days: 50,
 
+        // 深夜登录天数
 
+        active_days: -1,
 
+        // 最关注的项目名称
 
+        focus_project: '最关注的项目名称',
 
+        // 浏览信息次数
 
+        view_total: 1000,
 
+        // 搜索次数
 
+        search_total: 999,
 
+        // 企业/项目关注数量
 
+        follow_total: -1,
 
+        // 繁忙月份
 
+        active_month: 7,
 
+        // 行业发布数据条数
 
+        industry_total: 99,
 
+        // 体验新功能列表
 
+        exp_list: ['大会员', '超级订阅', '数据导出', '行业解决方案'],
 
+        // 结果页type
 
+        result: 1
 
+    }
 
+
 
+    var vPage = new Vue({
 
+        el: '.jy-report',
 
+        delimiters: ['${', '}'],
 
+        data: function () {
 
+            return {
 
+                pageInfo: pageInfo,
 
+                showToastText: false,
 
+                readPact: false
 
+            }
 
+        },
 
+        created: function () {
 
+
 
+        },
 
+        mounted: function () {
 
+            initPlayMusic()
 
+            initSwiper.bind(this)()
 
+        },
 
+        methods: {
 
+            changeReadPact: function () {
 
+                if (this.$swiper.activeIndex === 0 && this.readPact) {
 
+                    return
 
+                }
 
+                this.$swiper.allowSlideNext = this.readPact
 
+            },
 
+            goStart: function () {
 
+              if (!this.readPact) {
 
+                  return this.showToast('请先阅读并同意授权协议')
 
+              }
 
+              this.$swiper.allowSlideNext = this.readPact
 
+              this.$swiper.slideNext()
 
+            },
 
+            showToast: function (str, delay = 1500) {
 
+                this.showToastText = str
 
+                setTimeout(() => {
 
+                    this.showToastText = false
 
+                }, delay)
 
+            }
 
+        }
 
+    })
 
+
 
+</script>
 
 </body>
 
-</html>
 
+
 
+</html>

+ 397 - 0
src/web/templates/active/yearEndReport/result.html
Parādīt failu 

@@ -0,0 +1,397 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN" style="font-size: 50px;">
 
+
 
+<head>
 
+  <meta charset="utf-8">
 
+  <meta name="keywords" content="剑鱼标讯">
 
+  <meta name="description" content="剑鱼标讯">
 
+  <meta name="author" content="剑鱼标讯">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport"
 
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 
+  <meta name="x5-page-mode" content="app">
 
+  <meta name="apple-mobile-web-app-capable" content="yes">
 
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+  <meta name="format-detection" content="telephone=no">
 
+  <meta name="referrer" content="no-referrer">
 
+  <link rel="icon" href="/favicon.ico">
 
+  <title>年度报告</title>
 
+  <link rel="preload" as="style" href="https://cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css" />
 
+  <link rel="stylesheet" href="https://cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css" />
 
+  <link rel="stylesheet" href="//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css">
 
+  <link rel="stylesheet" href="{{Msg "seo" "cdn"}}/common-module/yearEndReport/css/music.css">
 
+  <link rel="stylesheet" href="{{Msg "seo" "cdn"}}/common-module/yearEndReport/css/result.css">
 
+</head>
 
+
 
+<body>
 
+  <div id="result" class="mask-report" v-cloak>
 
+    <!-- S--MUSIC -->
 
+    <audio id="audio" controls loop src='https://www.jianyu360.cn/big-member/video/music.mp3' autoplay></audio>
 
+    <div id="music-control-box" v-if="!picImgStatus">
 
+      <div class="music-icon-box">
 
+        <img class="icon-music-on" src='{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/music/music.png' />
 
+        <img class="icon-music-off" src='{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/music/music-off.png' />
 
+      </div>
 
+    </div>
 
+    <!-- E--MUSIC -->
 
+    <div class="jy-report result" ref="resultRefs">
 
+    <!-- 结果1、2背景的装饰 -->
 
+    <div class="ball" v-if="curRole._id == 1">
 
+      <img src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/ball.png" alt="">
 
+    </div>
 
+    <div class="star" v-if="curRole._id == 2">
 
+      <img src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/star.png" alt="">
 
+    </div>
 
+    <div class="r-content">
 
+      <div class="info">
 
+        <div class="user">
 
+          <div class="head-img">
 
+            <img src="https://cdn-ali.jianyu360.com/images/appext/fixed-sm.jpg" alt="">
 
+          </div>
 
+          <div class="nick-name">Wind</div>
 
+        </div>
 
+        <div class="role">
 
+          <div class="role-placeholder">您的年度角色是</div>
 
+          <div class="role-title">${curRole.title}</div>
 
+          <div class="role-main">
 
+            <p class="role-text">跨过遗憾 跨过不甘。2022年，你会</p>
 
+            <div class="role-label">
 
+              <img :src="curRole.label" alt="">
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- <div class="role-bg" :class="[{'role-bg-1': curRole._id == 1,'role-bg-2': curRole._id == 2, 'role-bg-other': curRole._id > 2}]">
 
+        <img :src='curRole.bg' alt="">
 
+      </div> -->
 
+      <div class="role-bg role-bg-other">
 
+        <img :src='curRole.bg' alt="">
 
+      </div>
 
+    </div>
 
+    <!-- 按钮 -->
 
+    <div class="r-btns" v-if="!picImgStatus" key="status">
 
+      <button v-show="!isWeiXinBrowser" type="button" class="share-btn" @click.prevent="shareFn">去分享</button>
 
+      <button type="button" class="create-btn" @click.prevent="createImgFn">生成海报</button>
 
+    </div>
 
+    <!-- 底部二维码 -->
 
+    <div class="r-bottom" v-else key="status">
 
+       <div class="jy-logo">
 
+        <img src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/jy-logo.png" alt="">
 
+       </div>
 
+       <div class="jy-qcode">
 
+         <div class="code-label">
 
+          <p>扫一扫</p>
 
+          <p style="line-height: .3rem;">看看你的年度角色</p>
 
+         </div>
 
+         <div class="code-img">
 
+           <img src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/jy-qcode.png" alt="">
 
+         </div>
 
+       </div>
 
+    </div>
 
+    <van-action-sheet
 
+      v-model="showAction"
 
+      :actions="actions"
 
+      cancel-text="取消"
 
+      close-on-click-action
 
+      @select="selectShare"
 
+    ></van-action-sheet>
 
+  </div>
 
+</div>
 
+  <!--S-必定需要预加载的资源-->
 
+  <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js" />
 
+  <link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js" />
 
+  <!--E-必定需要预加载的资源-->
 
+  <!--S-当前页面的资源-->
 
+  <script src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/js/rem.js"></script>
 
+  <script src="https://cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js"></script>
 
+  <script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js></script>
 
+  <script src="https://cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js"></script>
 
+  <script src="https://cdn-common.jianyu360.com/cdn/lib/html2canvas/1.1.2/dist/html2canvas.min.js"></script>
 
+  <script src=//res2.wx.qq.com/open/js/jweixin-1.6.0.js></script>
 
+  <script src="{{Msg "seo" "cdn"}}/common-module/yearEndReport/js/common.js"></script>
 
+  <!-- 使用html2canvas 生成图片dom层不能使用背景图 否则生成的图片会模糊 且无法修复 -->
 
+  <script>
 
+    function initPlayMusic () {
 
+      var isAutoPlayMusic = false
 
+      var bgvid = document.getElementById("audio");
 
+      var b_music = document.getElementById('music-control-box')
 
+      var fullbox = document.querySelector('body');
 
+
 
+      fullbox.addEventListener('touchstart', function(){
 
+        if (isAutoPlayMusic) {
 
+          isAutoPlayMusic = false
 
+          bgvid.play()
 
+          b_music.classList.add('run-music')
 
+        }
 
+      }, false);
 
+
 
+      bgvid.addEventListener("playing", function(){
 
+        b_music.style.display = 'block'
 
+        b_music.classList.add('run-music')
 
+      });
 
+      bgvid.addEventListener("pause", function(){
 
+        b_music.classList.remove('run-music')
 
+      });
 
+      b_music.addEventListener('click', function (e) {
 
+        if (b_music.classList.contains('run-music')) {
 
+          bgvid.pause()
 
+          b_music.classList.remove('run-music')
 
+        } else {
 
+          bgvid.play()
 
+          b_music.classList.add('run-music')
 
+        }
 
+      })
 
+    }
 
+    var result = new Vue({
 
+      el: '#result',
 
+      delimiters: ['${', '}'],
 
+      data: function() {
 
+        return {
 
+          resultList: [
 
+            {_id: '1', title: '逢标必中的投标达人', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-1.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-1.png'},
 
+            {_id: '2', title: '成功触手可及的追梦人', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-2.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-2.png'},
 
+            {_id: '3', title: '怀抱热振元气满满的打工人', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-3.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-3.png'},
 
+            {_id: '4', title: '日进斗金的大佬', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-4.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-4.png'},
 
+            {_id: '5', title: '有钱任性的大BOSS', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-5.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-5.png'},
 
+            {_id: '6', title: '开疆拓土的“顶梁柱”', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-6.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-6.png'},
 
+            {_id: '7', title: '炉火纯青的盖章无影手', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-7.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-7.png'},
 
+            {_id: '8', title: '有钱任性的大BOSS', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-8.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-5.png'},
 
+            {_id: '9', title: '有钱任性的大BOSS', label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-9.png', bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-5.png'},
 
+          ],
 
+          curRole: {
 
+            _id: '1',
 
+            title: '逢标必中的投标达人',
 
+            label: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/label-1.png',
 
+            bg: '{{Msg "seo" "cdn"}}/common-module/yearEndReport/images/result/item-bg-1.png'
 
+          },
 
+          picImgStatus: false,
 
+          showAction: false,
 
+          actions: [{ name: '微信' }, { name: '朋友圈' }],
 
+          wxSDKSign: {
 
+            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
 
+            appId: '', // 必填，公众号的唯一标识
 
+            timestamp: '', // 必填，生成签名的时间戳
 
+            nonceStr: '', // 必填，生成签名的随机串
 
+            signature: '',// 必填，签名
 
+            jsApiList: [
 
+                // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
 
+                'updateAppMessageShareData',
 
+                // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
 
+                'updateTimelineShareData',
 
+                // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
 
+                'onMenuShareWeibo',
 
+                // 关闭当前网页窗口接口
 
+                'closeWindow',
 
+                // 批量隐藏功能按钮接口
 
+                // 'hideMenuItems',
 
+                // 批量显示功能按钮接口
 
+                // 'showMenuItems',
 
+                // 隐藏所有非基础按钮接口
 
+                // 'hideAllNonBaseMenuItem',
 
+                // 显示所有功能按钮接口
 
+                // 'showAllNonBaseMenuItem',
 
+                // 调起微信扫一扫接口
 
+                // 'scanQRCode'
 
+            ],
 
+            openTagList: ['wx-open-launch-app']
 
+          },
 
+          shareInfo: {
 
+            title: '剑鱼标讯',
 
+            desc: '我的剑鱼标讯2021」年度报告已经生成，请查收',
 
+            link: location.href.split('?')[0],
 
+            imgUrl: 'https://cdn-ali.jianyu360.com/images/appext/fixed-sm.jpg'
 
+          },
 
+        }
 
+      },
 
+      computed: {
 
+        isWeiXinBrowser: function () {
 
+          return utils.isWeiXinBrowser
 
+        }
 
+      },
 
+      mounted() {
 
+        initPlayMusic()
 
+        // 微信端注册sdk
 
+        if (utils.isWeiXinBrowser) {
 
+          this.getWxSdkSign()
 
+        }
 
+        var list = this.resultList
 
+        var _this = this
 
+        list.forEach(function(item){
 
+          if (item._id == utils.getParam('type')) {
 
+            _this.curRole._id = item._id
 
+            _this.curRole.title = item.title
 
+            _this.curRole.label = item.label
 
+            _this.curRole.bg = item.bg
 
+          }
 
+        })
 
+      },
 
+      methods: {
 
+        showLoading: function (msg) {
 
+          const loading = this.$toast.loading({
 
+            duration: 0,
 
+            forbidClick: true,
 
+            message: msg || '图片生成中...',
 
+          })
 
+          return loading
 
+        },
 
+        changeStyle: function () {
 
+          var rWidth = ($('.result').width())*2
 
+          var rHeight = ($('.result').height())*2
 
+          var padLeft = (rWidth - 750 ) / 2
 
+          var padTop = (rHeight - 1448 ) / 2
 
+          $('.mask-report').addClass('mask-report-active')
 
+          $('.result').css({
 
+            "padding": '0.64rem 0',
 
+            "background-position": '-40px -40px',
 
+            "background-size": "110% 110%"
 
+
 
+          })
 
+          $('.r-content').css({
 
+            "padding": '0 ' +  + padLeft/2 + 'px'
 
+          })
 
+          $('.role-bg').css({
 
+            "width": "8.48rem",
 
+            "left": "-41px"
 
+          })
 
+          $('.info').css({
 
+            "width": "6.88rem"
 
+          })
 
+          $('.role-main').css({
 
+            "padding": "0.48rem .54rem"
 
+          })
 
+          $(".role-text").css({
 
+            "font-size": '0.36rem'
 
+          })
 
+          $('.r-bottom').css({
 
+            padding: '0 0.3rem'
 
+          })
 
+        },
 
+        // html2canvas方法
 
+        covertToImage: function(container, options = {}) {
 
+          // 设置放大倍数
 
+          var scale = window.devicePixelRatio
 
+          // 传入节点原始宽高
 
+          var _width = container.offsetWidth
 
+          var _height = container.offsetHeight
 
+          let { width, height } = options
 
+          width = width || _width
 
+          height = height || _height
 
+          var ops = {
 
+            dpi: 300,
 
+            scale,
 
+            async: false,
 
+            useCORS: true,
 
+            // scrollX: 20,
 
+            // scrollY: 20,
 
+            allowTaint: false,
 
+            backgroundColor: null, // 避免图片有白色边框
 
+            ...options
 
+          };
 
+          return html2canvas(container, ops).then(function(canvas) {
 
+            // 返回图片的二进制数据
 
+            var url = canvas.toDataURL("image/png");
 
+            return url
 
+          })
 
+        },
 
+        // app端微信、朋友圈分享方法
 
+        selectShare: function(e) {
 
+          var shareTitle = '我的剑鱼标讯2021年度报告已经生成，请查收'
 
+          var content = ''
 
+          var link = window.location.href
 
+          if (e.name == '微信') {
 
+            try {
 
+              JyObj.share(1,shareTitle,content,link);
 
+            } catch (error) {}
 
+          } else if (e.name == '朋友圈') {
 
+            try {
 
+              JyObj.share(3,shareTitle,content,link);
 
+            } catch (error) {}
 
+          }
 
+        },
 
+        // 取用户appid、签名等
 
+        getWxSdkSign: function() {
 
+          var _this = this
 
+          $.ajax({
 
+            url: '/jypay/wx/getwxSdkSign',
 
+            type: 'POST',
 
+            data: {
 
+              url: location.href.split('#')[0]
 
+            },
 
+            success: function (res) {
 
+              if (res && res.wxsdk && $.isArray(res.wxsdk)) {
 
+                _this.wxSDKSign.appId = res.wxsdk[0]
 
+                _this.wxSDKSign.timestamp = res.wxsdk[1]
 
+                _this.wxSDKSign.nonceStr = res.wxsdk[2]
 
+                _this.wxSDKSign.signature = res.wxsdk[3]
 
+                _this.registerWxSDK()
 
+              }
 
+            },
 
+            complete: function () {},
 
+            error: function () {}
 
+          })
 
+        },
 
+        // 注册微信sdk方法
 
+        registerWxSDK: function () {
 
+          var _this = this
 
+          var extInfo = {
 
+            url: 'jianyu360.com'
 
+          }
 
+          // 微信sdk注册
 
+          wx.config(this.wxSDKSign)
 
+          wx.error(function(err){
 
+            console.log(err);
 
+          })
 
+          wx.ready(function (res) {
 
+            // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
 
+            wx.updateAppMessageShareData(_this.shareInfo)
 
+            // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
 
+            wx.updateTimelineShareData(_this.shareInfo)
 
+            // onMenuShareWeibo
 
+            wx.onMenuShareWeibo(_this.shareInfo)
 
+          })
 
+        },
 
+        // 点击去分享
 
+        shareFn: function () {
 
+          if (utils.isWeiXinBrowser) {
 
+            // 微信端使用自带分享
 
+          } else {
 
+            // app 使用客户端方法分享
 
+            this.showAction = true
 
+          }
 
+        },
 
+        // 点击生成海报
 
+        createImgFn: function () {
 
+          var loading = this.showLoading()
 
+          $(".canvas-img").remove()
 
+          this.picImgStatus = true
 
+          if (this.picImgStatus) {
 
+            var _this = this
 
+            _this.changeStyle() // 生成图片前 先改变页面样式
 
+            setTimeout(function() {
 
+              var data = _this.covertToImage(_this.$refs.resultRefs)
 
+              data.then(function(url) {
 
+                loading.clear()
 
+                $("body").append('<div class="canvas"><img class="canvas-img" src='+ url + '></div>')
 
+                if (utils.isWeiXinBrowser) {
 
+                  $("body").append('<img class="canvas-img" src='+ url + '>')
 
+                } else {
 
+                  // 调用客户端保存图片方法
 
+                  try {
 
+                    window.JyObj.savePic(url)
 
+                  } catch (err) {
 
+                    console.log(err);
 
+                  }
 
+                }
 
+              }).catch(function(err) {
 
+                console.log(err);
 
+                _this.$toast('图片生成失败')
 
+              })
 
+            }, 500)
 
+          }
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+
 
+</html>