Merge branch 'dev4.6.3.1' of ssh://192.168.3.207:10022/qmx/jy into dev4.6.3.1

config_formal/app_172.17.148.50/active_report.json

@@ -0,0 +1,7 @@
+{
+  "yearEndReportEnd": 1644854400,
+  "shareUrl": "https://www.jianyu360.cn/active/yearEndReport?from=share",
+  "replyTitle": "「我的剑鱼标讯2021」年度报告已经生成，请查收",
+  "replyHref": "https://www.jianyu360.cn/active/yearEndReport?from=reply",
+  "userSourceFlag": "21yearEndReport"
+}

config_formal/app_172.17.148.50/time.txt

@@ -1,2 +1,2 @@
 #上次修改时间,比当前修改时间小就行
-2021-12-30 16:15:12
+2022-1-18 9:00:00

config_formal/app_i2_172.17.145.180/active_report.json

@@ -0,0 +1,7 @@
+{
+  "yearEndReportEnd": 1644854400,
+  "shareUrl": "https://www.jianyu360.cn/active/yearEndReport?from=share",
+  "replyTitle": "「我的剑鱼标讯2021」年度报告已经生成，请查收",
+  "replyHref": "https://www.jianyu360.cn/active/yearEndReport?from=reply",
+  "userSourceFlag": "21yearEndReport"
+}

config_formal/app_i2_172.17.145.180/time.txt

@@ -1,2 +1,2 @@
 #上次修改时间,比当前修改时间小就行
-2021-12-30 16:15:12
+2022-1-18 9:00:00

config_formal/publicapply_172.17.148.50/active_report.json

@@ -0,0 +1,7 @@
+{
+  "yearEndReportEnd": 1644854400,
+  "shareUrl": "https://www.jianyu360.cn/active/yearEndReport?from=share",
+  "replyTitle": "「我的剑鱼标讯2021」年度报告已经生成，请查收",
+  "replyHref": "https://www.jianyu360.cn/active/yearEndReport?from=reply",
+  "userSourceFlag": "21yearEndReport"
+}

config_formal/publicapply_172.17.148.50/time.txt

@@ -1,2 +1,2 @@
 #上次修改时间,比当前修改时间小就行
-2022-1-14 9:00:00
+2022-1-18 9:00:00

config_formal/sword_172.17.145.167/active_report.json

@@ -0,0 +1,7 @@
+{
+  "yearEndReportEnd": 1644854400,
+  "shareUrl": "https://www.jianyu360.cn/active/yearEndReport?from=share",
+  "replyTitle": "「我的剑鱼标讯2021」年度报告已经生成，请查收",
+  "replyHref": "https://www.jianyu360.cn/active/yearEndReport?from=reply",
+  "userSourceFlag": "21yearEndReport"
+}

config_formal/sword_172.17.145.167/time.txt

@@ -1,2 +1,2 @@
 #上次修改时间,比当前修改时间小就行
-2021-12-30 16:15:12
+2022-1-18 9:00:00

config_formal/sword_172.17.148.50/active_report.json

@@ -0,0 +1,7 @@
+{
+  "yearEndReportEnd": 1644854400,
+  "shareUrl": "https://www.jianyu360.cn/active/yearEndReport?from=share",
+  "replyTitle": "「我的剑鱼标讯2021」年度报告已经生成，请查收",
+  "replyHref": "https://www.jianyu360.cn/active/yearEndReport?from=reply",
+  "userSourceFlag": "21yearEndReport"
+}

config_formal/sword_172.17.148.50/time.txt

@@ -1,2 +1,2 @@
 #上次修改时间,比当前修改时间小就行
-2021-12-30 16:15:12
+2022-1-18 9:00:00

project.config.json

@@ -0,0 +1,69 @@
+{
+  "description": "项目配置文件",
+  "packOptions": {
+    "ignore": []
+  },
+  "setting": {
+    "bundle": false,
+    "userConfirmedBundleSwitch": false,
+    "urlCheck": true,
+    "scopeDataCheck": false,
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "autoAudits": false,
+    "newFeature": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "useIsolateContext": false,
+    "nodeModules": false,
+    "enhance": true,
+    "useMultiFrameRuntime": true,
+    "useApiHook": true,
+    "useApiHostProcess": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmManually": false,
+    "enableEngineNative": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "showES6CompileOption": false,
+    "minifyWXML": true
+  },
+  "compileType": "miniprogram",
+  "libVersion": "2.17.0",
+  "appid": "wxf5bb80e0862aefb3",
+  "projectname": "miniprogram-1",
+  "debugOptions": {
+    "hidedInDevtools": []
+  },
+  "scripts": {},
+  "staticServerOptions": {
+    "baseURL": "",
+    "servePath": ""
+  },
+  "isGameTourist": false,
+  "condition": {
+    "search": {
+      "list": []
+    },
+    "conversation": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "plugin": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": []
+    }
+  }
+}

src/active_report.json

@@ -0,0 +1,7 @@
+{
+  "yearEndReportEnd": 1644854400,
+  "shareUrl": "https://web-wky.jydev.jianyu360.com/active/yearEndReport?from=share",
+  "replyTitle": "「我的剑鱼标讯2021」年度报告已经生成，请查收",
+  "replyHref": "https://web-wky.jydev.jianyu360.com/active/yearEndReport?from=reply",
+  "userSourceFlag": "21yearEndReport"
+}

src/jfw/active/21yearEndReport.go

@@ -0,0 +1,125 @@
+package active
+
+import (
+	"fmt"
+	"github.com/go-xweb/httpsession"
+	"github.com/go-xweb/xweb"
+	"go.mongodb.org/mongo-driver/bson"
+	"go.mongodb.org/mongo-driver/bson/primitive"
+	"jfw/config"
+	"jfw/jyutil"
+	"jfw/public"
+	"net/url"
+	qutil "qfw/util"
+	"qfw/util/redis"
+	"time"
+)
+
+const (
+	activeDefaultEndTimeStamp = 1644854400 //2022-02-15
+)
+
+type YearEndReportConfig struct {
+	YearEndReportEnd int64  `json:"yearEndReportEnd"`
+	ShareUrl         string `json:"shareUrl"`
+	ReplyTitle       string `json:"replyTitle"`
+	ReplyHref        string `json:"replyHref"`
+	UserSourceFlag   string `json:"userSourceFlag"`
+}
+
+var (
+	yearEndReportEndTimeStamp int64 = activeDefaultEndTimeStamp
+	yearEndReportConfig       YearEndReportConfig
+)
+
+func init() {
+	xweb.AddAction(&YearEndReport{})
+	qutil.ReadConfig("./active_report.json", &yearEndReportConfig)
+	if yearEndReportConfig.YearEndReportEnd > 0 {
+		yearEndReportEndTimeStamp = yearEndReportConfig.YearEndReportEnd
+	}
+}
+
+//YearEndReport 21年，年终报告
+type YearEndReport struct {
+	*xweb.Action
+	yearEndReportPage   xweb.Mapper `xweb:"/active/yearEndReport"`       //21年终报告wx页面
+	yearEndReportResult xweb.Mapper `xweb:"/active/yearEndReportResult"` //21年终报告wx结果页面
+}
+
+func (this *YearEndReport) YearEndReportResult() error {
+	return this.Render("/active/yearEndReport/result.html")
+}
+
+func (this *YearEndReport) YearEndReportPage() error {
+	openid := qutil.ObjToString(this.Session().Get("s_m_openid"))
+	if openid == "" || (openid != "" && !checkUserIsSubscribe(openid)) {
+		stateKey := this.GetString("state")
+		if stateKey == "" { //公众号回调
+			return this.Redirect(fmt.Sprintf(config.Wxoauth, url.QueryEscape(this.Site()+this.Url()), "report"), 302)
+		}
+		//获取用户openid
+		openid = jyutil.Getopenid(this.GetString("code"))
+	}
+	//没有用户session 或  有session但是没有关注（刚刚取关 session信息存留）
+	//判断是否关注
+	isSubscribe := checkUserIsSubscribe(openid)
+	if time.Now().Unix() > yearEndReportEndTimeStamp {
+		if isSubscribe {
+			return this.Redirect("/jylab/mainSearch")
+		} else {
+			return this.Redirect("/swordfish/about")
+		}
+	}
+	if isSubscribe { //关注跳转
+		if this.GetSession("userId") == nil {
+			loginCreateSess(openid, this.Session())
+		}
+	} else { //未关注,关注回复发送
+		redis.Put("other", fmt.Sprintf("SingleLogin_%s", openid), map[string]interface{}{
+			"href":       yearEndReportConfig.ReplyHref,
+			"title":      yearEndReportConfig.ReplyTitle,
+			"hrefsource": yearEndReportConfig.UserSourceFlag,
+		}, 60*30)
+	}
+	return this.Render("/active/yearEndReport/index.html")
+}
+
+func loginCreateSess(openid string, sess *httpsession.Session) bool {
+	_person, ok := public.MQFW.FindOne("user", bson.M{"s_m_openid": openid, "s_unionid": bson.M{"$ne": openid}, "i_ispush": 1})
+	if ok && *_person != nil && len(*_person) > 0 {
+		person := *_person
+		if person["i_shareknow"] != nil {
+			sess.Set("shareknow", person["i_shareknow"])
+		}
+		sess.Set("userId", (person["_id"].(primitive.ObjectID)).Hex())
+		sess.Set("s_m_openid", person["s_m_openid"])
+		sess.Set("openid", person["s_m_openid"])
+		sess.Set("s_nickname", person["s_nickname"])
+		if person["s_avatar"] == nil {
+			sess.Set("s_avatar", person["s_headimage"])
+		} else {
+			sess.Set("s_avatar", person["s_avatar"])
+		}
+		return true
+	} else {
+		return false
+	}
+}
+
+//checkUserIsSubscribe 检查用户是否关注
+func checkUserIsSubscribe(openid string) bool {
+	user, ok := public.MQFW.FindOneByField("user", map[string]interface{}{
+		"i_appid":    2,
+		"s_m_openid": openid,
+		"s_unionid":  map[string]interface{}{"$ne": openid},
+	}, `{"i_ispush":1}`)
+	if ok && user != nil {
+		if (*user)["_id"] == nil || qutil.IntAllDef((*user)["i_ispush"], 1) == 0 {
+			return false
+		} else {
+			return true
+		}
+	}
+	return false
+}

src/jfw/front/singleLogin.go

@@ -28,6 +28,7 @@ func init() {
 	xweb.AddAction(&SingleLogin{})
 }
 
+//ShortUrl
 //短地址跳转
 func (this *SingleLogin) ShortUrl(key string) error {
 	var redirectUrl = "/swordfish/about"
@@ -37,6 +38,7 @@ func (this *SingleLogin) ShortUrl(key string) error {
 	return this.Redirect(redirectUrl)
 }
 
+//SingleLogin
 //toHref 已关注跳转页面
 //unHref 为关注跳转页面,若无此字段会跳至关注二维码页面
 //	*已有逻辑 1.线上课程推文，用户点击可登陆跳转;未关注扫码会回复课程链接
@@ -106,6 +108,7 @@ func (this *SingleLogin) SingleLogin() error {
 		for k, v := range hrefSourse {
 			if strings.Contains(this.GetString("toHref"), qutil.ObjToString(v)) {
 				hsource = k
+				break
 			}
 		}
 		redis.Put("other", fmt.Sprintf("SingleLogin_%s", openid), map[string]interface{}{

src/jfw/modules/app/src/app/active/21yearEndReport.go

@@ -0,0 +1,51 @@
+package active
+
+import (
+	"github.com/go-xweb/xweb"
+	qutil "qfw/util"
+	"time"
+)
+
+const (
+	activeDefaultEndTimeStamp = 1644854400 //2022-02-15
+)
+
+type YearEndReportConfig struct {
+	YearEndReportEnd int64  `json:"yearEndReportEnd"`
+	ShareUrl         string `json:"shareUrl"`
+	ReplyTitle       string `json:"replyTitle"`
+	ReplyHref        string `json:"replyHref"`
+	UserSourceFlag   string `json:"userSourceFlag"`
+}
+
+var (
+	yearEndReportEndTimeStamp int64 = activeDefaultEndTimeStamp
+	yearEndReportConfig       YearEndReportConfig
+)
+
+func init() {
+	xweb.AddAction(&YearEndReport{})
+	qutil.ReadConfig("./active_report.json", &yearEndReportConfig)
+	if yearEndReportConfig.YearEndReportEnd > 0 {
+		yearEndReportEndTimeStamp = yearEndReportConfig.YearEndReportEnd
+	}
+}
+
+//YearEndReport 21年，年终报告
+type YearEndReport struct {
+	*xweb.Action
+	yearEndReportPage   xweb.Mapper `xweb:"/jyapp/active/yearEndReport"`       //21年终报告app页面
+	yearEndReportResult xweb.Mapper `xweb:"/jyapp/active/yearEndReportResult"` //21年终报告app结果页面
+}
+
+func (this *YearEndReport) YearEndReportResult() error {
+	return this.Render("/active/yearEndReport/result.html")
+}
+
+func (this *YearEndReport) YearEndReportPage() error {
+	userId := this.GetSession("userId")
+	if userId == "" || time.Now().Unix() > yearEndReportEndTimeStamp {
+		return this.Redirect("/jyapp/free/swordfish/about")
+	}
+	return this.Render("/active/yearEndReport/index.html")
+}

src/jfw/modules/app/src/web/templates/active/yearEndReport/index.html

@@ -0,0 +1,564 @@
+<!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">
+    <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"/>
+    <link 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?v={{Msg "seo" "version"}}">
+    <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/rem.js"></script>
+</head>
+
+<body>
+
+<div class="jy-report" v-cloak>
+    <!-- S--MUSIC -->
+    <audio id="audio" controls loop src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/mp3/bg.mp3'></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 v-show="pageInfo.user_head" @error="pageInfo.user_head = '/common-module/public/image/auto.png'" animate-name="up" animate-delay="200" class="jy-user-img" :src="pageInfo.user_head" alt="">
+                            <p animate-name="up" animate-delay="200" class="jy-user-name">Hi~<span v-show="pageInfo.user_name">${pageInfo.user_name}</span></p>
+                            <p animate-name="up" animate-delay="800" class="tip-info">
+                                <span class="text-hello">欢迎来到你的...</span>
+                                <span>2021剑鱼之旅</span>
+                            </p>
+                            <div class="read_pact" animate-name="up" animate-delay="1600">
+                                <input @change="changeReadPact" v-model="readPact" type="checkbox" autocomplete="off" id="read">
+                                <label for="read">同意剑鱼统计我的使用数据，</label><a href="/jyapp/free/staticPage/privacy_rules.html">查看授权协议</a>
+                            </div>
+                        </div>
+                        <div animate-name="up" animate-delay="1900" 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 animate-name="show"  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" v-if="!isNewUser && pageInfo.registration_time">
+                <div class="slide-inner">
+                    <div class="report-page page-2">
+                        <div class="meet">
+                            <p animate-name="up" animate-delay="600" class="hello">${pageInfo.user_name}<span v-if="pageInfo.user_name">，</span>你好呀！</p>
+                            <p animate-name="up" animate-delay="1000" style="margin-top: 0.32rem; margin-left: 1.54rem;">
+                                <span class="text">还记得</span>
+                                <span class="time">${pageInfo.registration_time | dateFormat}</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="1400" 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" v-if="!isNewUser && pageInfo.total_days">
+                <div class="slide-inner">
+                    <div class="report-page page-3">
+                        <div class="usage-days">
+                            <div class="today" animate-name="up" animate-delay="400">今天</div>
+                            <div class="text" animate-name="up" animate-delay="800">是我们一起同行的</div>
+                            <div class="days" animate-name="up" animate-delay="1200">第${pageInfo.total_days}天</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" animate-name="up" animate-delay="1600" >
+                            <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" v-if="!isNewUser && pageInfo.login_days">
+                <div class="slide-inner">
+                    <div class="report-page page-4">
+                        <div class="year">
+                            <div class="text-1">
+                                <div class="jin" animate-name="up" animate-delay="400" >近一年</div>
+                                <div class="day">
+                                    <div class="ty" animate-name="up" animate-delay="800" >你登录了</div>
+                                    <div class="days" animate-name="up" animate-delay="1200" >${pageInfo.login_days}天</div>
+                                    <div class="ty" animate-name="up" animate-delay="1600" >剑鱼标讯</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 animate-name="up" animate-delay="1800" class="text-2" v-show="pageInfo.active_days">
+                                <div class="night">
+                                    <div class="big-day" animate-name="up" animate-delay="2000" >有${pageInfo.active_days}天</div>
+                                    <div class="ty" animate-name="up" animate-delay="2400" >的深夜</div>
+                                </div>
+                                <div class="ty" animate-name="up" animate-delay="2800"  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" animate-name="up" animate-delay="3200" >不是投标人爱熬夜</div>
+                                <div class="text-3" animate-name="up" animate-delay="3600" 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" v-if="!isNewUser && pageInfo.focus_project.length">
+                <div class="slide-inner">
+                    <div class="report-page page-5">
+                        <div class="item">
+                            <div class="this" animate-name="up" animate-delay="400" >近一年</div>
+                            <div class="gongsi" animate-name="up" animate-delay="800" >
+                                <div v-for="(item, index) in pageInfo.focus_project">${item}</div>
+                            </div>
+                            <div class="guanzhu" animate-name="up" animate-delay="1200" >是你最关注的项目</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 animate-name="up" animate-delay="1600" >无论结果如何，我知道</p>
+                                <p animate-name="up" animate-delay="2000"  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" v-if="!isNewUser && pageInfo.view_total">
+                <div class="slide-inner">
+                    <div class="report-page page-6">
+                        <div class="message">
+                            <div class="year" animate-name="up" animate-delay="200" >近一年</div>
+                            <div class="you" animate-name="up" animate-delay="600" >你一共浏览了</div>
+                            <div class="num" animate-name="up" animate-delay="800" >${pageInfo.view_total | numberFormat('条')}</div>
+                            <div class="xiangmu" animate-name="up" animate-delay="1200" >项目信息</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-kong">
+                                <div class="text-one">
+                                    <p animate-name="up" animate-delay="1600" >精准、及时的数据</p>
+                                    <p animate-name="up" animate-delay="2000"  style="margin-top: 0.16rem;">都源于剑鱼悄悄的努力</p>
+                                </div>
+                            </div>
+                            <div class="kong">
+                                <div class="text-two" animate-name="up" animate-delay="2400">
+                                    <div class="box" animate-name="up" animate-delay="2500" >
+                                        <p class="p-one">招标信息库</p>
+                                        <span class="s-one">9000万+&nbsp;&nbsp;</span>
+                                        <p class="p-one">项目库</p>
+                                        <span class="s-one">4800万+</span>
+                                    </div>
+                                    <div class="box" animate-name="up" animate-delay="2700"  style="margin-top: 0.24rem;">
+                                        <p class="p-one">企业库</p>
+                                        <span class="s-one">4500万+&nbsp;&nbsp;</span>
+                                        <p class="p-one">采购单位库</p>
+                                        <span class="s-one">200万+</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="text-bottom" animate-name="up" animate-delay="3000" >让你不遗漏任何商机</div>
+                            <div class="btn-next">
+                                <div class="next-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide" v-if="!isNewUser && pageInfo.search_total">
+                <div class="slide-inner">
+                    <div class="report-page page-7">
+                        <div class="sum">
+                            <div class="year" animate-name="up" animate-delay="400" >近一年</div>
+                            <div class="you" animate-name="up" animate-delay="800" >你搜索了</div>
+                            <div class="num" animate-name="up" animate-delay="1200" >${pageInfo.search_total | numberFormat('次')}</div>
+                            <div class="xd-seven"><img animate-name="show"  class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P7/xd-seven.png" alt=""></div>
+                            <div class="text-bottom" animate-name="up" animate-delay="1600" >求索力让你的成功触手可及</div>
+                            <div class="btn-next">
+                                <div class="next-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide" v-if="!isNewUser && pageInfo.follow_total">
+                <div class="slide-inner">
+                    <div class="report-page page-8">
+                        <div class="friend">
+                            <div class="year" animate-name="up" animate-delay="400" >近一年</div>
+                            <div class="num" animate-name="up" animate-delay="800" >${pageInfo.follow_total  | numberFormat('个')}</div>
+                            <div class="you" animate-name="up" animate-delay="1200" >企业成为你的新朋友</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" animate-name="up" animate-delay="1600" >通过企业搜索、采购单位画像</div>
+                                <div class="text" animate-name="up" animate-delay="1800" >了解甲方、找到合作</div>
+                                <div class="text" animate-name="up" animate-delay="2100" >果断的执行力，让无数人为你痴迷</div>
+                            </div>
+                            <div class="btn-next">
+                                <div class="next-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--5,6,7,8-->
+            <div class="swiper-slide" v-if="!isNewUser && isNullOf5678">
+                <div class="slide-inner">
+                    <div class="report-page page-5678-kong">
+                        <div class="sum">
+                            <div class="year" animate-name="up" animate-delay="400" >你可能是个慢热的人</div>
+                            <div class="you" animate-name="up" animate-delay="800" >这一年</div>
+                            <div class="num" animate-name="up" animate-delay="1200" >还未有项目和企业成功引起你的关注</div>
+                            <div class="text" animate-name="up" animate-delay="1600" >不急，未来会有的</div>
+                            <div class="xd-seven"><img animate-name="show" class="swiper-lazy" data-src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/P7/xd-seven.png" alt=""></div>
+                            <div class="text-bottom" animate-name="up" animate-delay="2000" >点击试用一下，会有惊喜</div>
+                            <div animate-name="up" animate-delay="2400" class="btn">
+                                <div class="go-button" @click="goExp('5678')">试用一下</div>
+                            </div>
+                            <div class="btn-next">
+                                <div class="next-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide" v-if="!isNewUser && pageInfo.active_month">
+                <div class="slide-inner">
+                    <div class="report-page page-9">
+                        <div class="mouth">
+                            <div class="year">
+                                <p class="nian" style="display: contents" animate-name="up" animate-delay="400" >近一年，</p>
+                                <div class="yue" style="color: #70EEFF;" animate-name="up" animate-delay="800" >${pageInfo.active_month}月</div>
+                            </div>
+                            <div class="you" animate-name="up" animate-delay="1200" >是你最繁忙的时候</div>
+                            <div class="text-bottom">
+                                <div class="text" animate-name="up" animate-delay="1600" >或许奔波在投标路上</div>
+                                <div class="text" animate-name="up" animate-delay="2000" >或许驰骋在投标知识的海洋</div>
+                                <div class="text" animate-name="up" animate-delay="2400" >追梦的你，满怀热忱</div>
+                            </div>
+                            <div class="picture-six">
+                                <div class="banner-text">2021年</div>
+                                <div class="yueyue">
+                                    <div class="banner-yue" animate-name="up" animate-delay="1600" >
+                                        <div class="banner-yue-one">${pageInfo.active_month}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="btn-next">
+                                <div class="next-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide" v-if="!isNewUser && pageInfo.industry_total">
+                <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" animate-name="up" animate-delay="400" >近一年</p>
+                            <div class="you" animate-name="up" animate-delay="800" >你关注的行业累计发布了</div>
+                            <span class="num" animate-name="up" animate-delay="600" >${pageInfo.industry_total | numberFormat('条')}</span>
+                            <div class="gonggao" animate-name="up" animate-delay="800" >项目公告</div>
+                            <div class="text-bottom">
+                                <div class="text" animate-name="up" animate-delay="1000" >即使受到疫情的影响</div>
+                                <div class="text" animate-name="up" animate-delay="1200" >投标人依旧稳步向前</div>
+                            </div>
+                            <div class="btn-next">
+                                <div class="next-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--9,10-->
+            <div class="swiper-slide" v-if="!isNewUser && isNullOf910">
+                <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" animate-name="up" animate-delay="200" >近一年</p>
+                            <div class="you" animate-name="up" animate-delay="400" >你的忙碌都有了收获</div>
+                            <div class="text-zg-kong">
+                                <div class="text-zg">
+                                    <div animate-name="up" animate-delay="600" >通过及时的标讯信息</div>
+                                    <div animate-name="up" animate-delay="800"  style="margin-top: 0.24rem;">找合作、找甲方、找商机</div>
+                                </div>
+                            </div>
+                            <div class="text-bottom">
+                                <div class="text" animate-name="up" animate-delay="1000" >即使受到疫情影响</div>
+                                <div class="text" animate-name="up" animate-delay="1200" >依旧稳步向前</div>
+                            </div>
+                            <div class="btn-next">
+                                <div class="next-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide" v-if="!isNewUser && pageInfo.exp_list.length">
+                <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" animate-name="up" animate-delay="200" >近一年</p>
+                            <div class="you" animate-name="up" animate-delay="400" >慧眼识珠的你,体验了剑鱼</div>
+                            <div class="gn" animate-name="up" animate-delay="600" >
+                                <span class="num">${pageInfo.exp_list.length}个</span>
+                                <p class="new">新功能</p>
+                            </div>
+                            <div class="list" animate-name="up" animate-delay="800" >
+                                <p v-for="item in pageInfo.exp_list.slice(0,5)">${item}</p>
+                                <p v-if="pageInfo.exp_list.length > 5">......</p>
+                            </div>
+                            <div class="text-bottom">
+                                <div class="text" animate-name="up" animate-delay="1000" >从未枯竭的好奇心</div>
+                                <div class="text" animate-name="up" animate-delay="1200" >让你看到了更大的世界</div>
+                            </div>
+                            <div class="btn-next">
+                                <div class="next-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide" v-if="!isNewUser && isNullOf11">
+                <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" animate-name="up" animate-delay="200" >近一年</p>
+                            <div class="you" animate-name="up" animate-delay="400" >剑鱼产品不断迭代</div>
+                            <div class="list" animate-name="up" animate-delay="600" >
+                                <p>超级订阅V4.0</p>
+                                <p>大会员V2.0</p>
+                                <p>数据流量包</p>
+                                <p>......</p>
+                            </div>
+                            <div class="text-kong">
+                                <div class="text" animate-name="up" animate-delay="800" >期待您有更好的体验</div>
+                            </div>
+                            <div animate-name="up" animate-delay="1100" class="btn">
+                                <div class="go-button" @click="goExp('11')">试用一下</div>
+                            </div>
+                            <div class="btn-next">
+                                <div class="next-page"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="swiper-slide" v-if="!isNewUser">
+                <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 animate-name="up" animate-delay="200"  class="text-1">无论好的坏的</p>
+                                <div animate-name="up" animate-delay="300" class="text-1" style="margin-top: 0.16rem;">跌宕且绮丽的2021已结束</div>
+                                <div animate-name="up" animate-delay="400" class="text-3">凛冬散尽，星河长明</div>
+                                <div animate-name="up" animate-delay="500" class="text-1" style="margin-top: 1.04rem;">为你生成2021年度角色报告</div>
+                                <div animate-name="up" animate-delay="800" class="btn">
+                                    <div class="go-button" @click="goResult">生成报告</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" v-if="isNewUser">
+                <div class="slide-inner">
+                    <div class="report-page page-new-0">
+                        <div class="new-zero">
+                            <div class="text">
+                                <div class="year" animate-name="up" animate-delay="200" >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 animate-name="up" animate-delay="300" >遗憾没有和您相遇</p>
+                                    <p animate-name="up" animate-delay="400" >但所有的遗憾</p>
+                                    <p animate-name="up" animate-delay="500" >都是2022惊喜的铺垫</p>
+                                </div>
+                                <div animate-name="up" animate-delay="600" class="text-2">
+                                    <div animate-name="up" animate-delay="700" >免费看，不遮挡服务初心不改</div>
+                                    <div animate-name="up" animate-delay="800" >商机线索推荐、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;" animate-name="up" animate-delay="200" >新的一年</div>
+                                <div class="text-3">
+                                    <div animate-name="up" animate-delay="1000" >期待能和你肩并肩</div>
+                                    <div animate-name="up" animate-delay="1200" >走的更远</div>
+                                </div>
+                                <div animate-name="up" animate-delay="1300" class="btn">
+                                    <div class="go-button" @click="goExp('new')">即刻体验</div>
+                                </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>
+    </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/jquery/3.6.0/jquery.min.js"/>
+<link rel="preload" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/swiper/5.4.2/swiper.min.js"/>
+<link rel="preload" as="script" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/common.js?v={{Msg "seo" "version"}}'/>
+<link rel="preload" as="script" href='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/index.js?v={{Msg "seo" "version"}}'/>
+<!--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>
+<script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/common.js?v={{Msg "seo" "version"}}"></script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/index.js?v={{Msg "seo" "version"}}'></script>
+
+<!--S-提前需要预加载的资源-->
+<link rel="prefetch" as="html" href="./yearEndReportResult"/>
+<link rel="prefetch" as="script" href="https://cdn-common.jianyu360.com/cdn/lib/html2canvas/1.1.2/dist/html2canvas.min.js"/>
+<!--E-提前需要预加载的资源-->
+<script>
+    if (typeof window._jyGlobal !== 'object') { window._jyGlobal = {} }
+    try { window._jyGlobal.baseURL = {{Msg "seo" "buryingPointUrl"}} } catch (e) { window._jyGlobal.baseURL = '' }
+    // 屏蔽console.log输出, 如需查看手动 localStorage.setItem('env', 'development') 刷新页面
+    if (localStorage.getItem('env') !== 'development') {
+        console.log = function () {}
+    }
+</script>
+<script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/track/j-track.min.js?v={{Msg "seo" "version"}}'></script>
+<!--百度统计-->
+{{include "/common/baiducc.html"}}
+</body>
+
+</html>

src/jfw/modules/app/src/web/templates/active/yearEndReport/result.html

@@ -0,0 +1,159 @@
+<!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">
+  <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?v={{Msg "seo" "version"}}'>
+</head>
+
+<body>
+    <!-- S--MUSIC -->
+    <audio id="audio" controls loop src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/mp3/bg.mp3'></audio>
+    <div id="music-control-box" v-show="showAudio">
+      <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 id="result" class="mask-report" v-cloak>
+    <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 v-show="pageInfo.user_head" @error="pageInfo.user_head = '/common-module/public/image/auto.png'"  :src="pageInfo.user_head" alt="">
+          </div>
+          <div class="nick-name">${pageInfo.user_name}</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 role-bg-other">
+        <img :src='curRole.bg' alt="">
+      </div>
+    </div>
+    <!-- 按钮 -->
+    <div class="r-btns" 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>
+    <van-action-sheet
+      v-model="showAction"
+      cancel-text="取消"
+      close-on-click-action
+    >
+      <button @click="selectShare(item)" class="van-action-sheet__item" v-for="item in actions">${item.name}</button>
+    </van-action-sheet>
+    <van-overlay :show="showScreen" @click="showScreen = false" z-index="1000">
+      <div class="wrapper" @click.stop>
+        <img class="canvas-img" :src="screenUrl" alt="">
+      </div>
+    </van-overlay>
+  </div>
+  <div id="create-img-box">
+    <div class="mask-report mask-report-active">
+      <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 v-show="pageInfo.user_head" @error="pageInfo.user_head = '/common-module/public/image/auto.png'"  :src="pageInfo.user_head" alt="">
+              </div>
+              <div class="nick-name">${pageInfo.user_name}</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 role-bg-other">
+            <img :src='curRole.bg' alt="">
+          </div>
+        </div>
+        <!-- 底部二维码 -->
+        <div class="r-bottom" 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" id="qrcode">
+<!--              <img src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/images/result/jy-qcode.png' alt="">-->
+            </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/jquery/3.6.0/jquery.min.js" />
+  <!--E-必定需要预加载的资源-->
+  <!--S-当前页面的资源-->
+  <script>
+    var domain = '{{Cdns .Host "seo" "cdn"|SafeUrl}}'
+  </script>
+  <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/jquery/3.6.0/jquery.min.js"></script>
+  <script crossorigin src="https://cdn-common.jianyu360.com/cdn/lib/html2canvas/1.1.2/dist/html2canvas.min.js"></script>
+  <script src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/common.js?v={{Msg "seo" "version"}}"></script>
+  <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/qrcode.js?v={{Msg "seo" "version"}}'></script>
+  <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/common.js?v={{Msg "seo" "version"}}'></script>
+  <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/yearEndReport/js/result.js?v={{Msg "seo" "version"}}'></script>
+  <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/track/j-track.min.js?v={{Msg "seo" "version"}}'></script>
+  <!-- 使用html2canvas 生成图片dom层不能使用背景图 否则生成的图片会模糊 且无法修复 -->
+  {{include "/common/baiducc.html"}}
+</body>
+
+</html>

src/jfw/modules/app/src/web/templates/big-member/page_main_root.html

@@ -77,7 +77,7 @@
                     <div class="header_infor">
                         <div class="userInfor">
                             <div class="head_img">
-                                <img :src="userinfor.headimage==''?'/jyapp/big-member/image/my_head.png':userinfor.headimage" alt="" class="head_image">
+                                <img :src="userinfor.headimage==''?'/common-module/public/image/auto.png':userinfor.headimage" alt="" class="head_image">
                             </div>
                             <div class="userdetail">
                                 <div class="username">${userinfor.name}</div>

src/jfw/modules/app/src/web/templates/frontRouter/share/sess/b-share.html

@@ -238,7 +238,7 @@
       })
       var headimg = {{.T.share_headImg}}
       if( headimg  == ""){
-        headimg="/images/auto.png";
+        headimg="/common-module/public/image/auto.png";
       }
       $(".share-head").attr("src",headimg);
     })
@@ -260,8 +260,8 @@
 
     // $(document).ready(function () {
     //   scrollDiv("box", 350);
-    // });   
+    // });
   </script>
 </body>
 
-</html>
+</html>

src/jfw/modules/app/src/web/templates/frontRouter/share/sess/index.html

@@ -202,7 +202,7 @@
           res.data.res.forEach(function (v) {
             var cloneNode = $('#clone-template').clone()
             cloneNode.removeAttr("id")
-            cloneNode.find('.list-left img').attr('src', v.headimg || '/jyapp/images/persional/my_head.png')
+            cloneNode.find('.list-left img').attr('src', v.headimg || '/common-module/public/image/auto.png')
             cloneNode.find('.mg p').text(v.name)
             cloneNode.find('.list-right').text(dateFormat(v.createtime * 1000, 'yyyy-mm-dd HH:MM:ss'))
             cloneNode.show()
@@ -234,12 +234,12 @@
         if (res) {
           $("#userName").text(res.nickName)
           if (!res.headImage) {
-            res.headImage = "/jyapp/images/persional/my_head.png"
+            res.headImage = "/common-module/public/image/auto.png"
           }
           $("img[name='userHead']").attr('src', res.headImage)
           $("img[name='userHead']").on('error', function () {
             if ($(this).attr('data-error') !== 'true') {
-              $(this).attr('src', '/jyapp/images/persional/my_head.png')
+              $(this).attr('src', '/common-module/public/image/auto.png')
               $(this).attr('data-error', 'true')
             }
           })
@@ -304,7 +304,7 @@
     $(function () {
       $('.list-left img').each(function () {
         if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
-          this.src = '/jyapp/images/persional/my_head.png';
+          this.src = '/common-module/public/image/auto.png';
         }
       });
       // 保存图片

src/jfw/modules/app/src/web/templates/me/mine.html

@@ -52,7 +52,7 @@
             <div class="user">
                 <div class="u_left">
                     <div class="user_img">
-                        <img id="head_img" class="avatar" src="" onerror="this.src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/images/persional/my_head.png?v={{Msg "seo" "version"}}'">
+                        <img id="head_img" class="avatar" src="" onerror="this.src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/common-module/public/image/auto.png?v={{Msg "seo" "version"}}'">
                     </div>
                     <div class="user_info">
                         <span class="username-container">

src/jfw/modules/publicapply/src/active/21yearEndReport.go

@@ -0,0 +1,140 @@
+package active
+
+import (
+	. "api"
+	"db"
+	"fmt"
+	"github.com/go-xweb/xweb"
+	"math"
+	qutil "qfw/util"
+	"strconv"
+	"strings"
+	"time"
+)
+
+type YearEndReport struct {
+	*xweb.Action
+	yearEndReportApi xweb.Mapper `xweb:"/active/yearEndReport"` //21年终报告接口
+}
+
+type YearEndReportConfig struct {
+	YearEndReportEnd int64  `json:"yearEndReportEnd"`
+	ShareUrl         string `json:"shareUrl"`
+	ReplyTitle       string `json:"replyTitle"`
+	ReplyHref        string `json:"replyHref"`
+	UserSourceFlag   string `json:"userSourceFlag"`
+}
+
+const (
+	year2022StartTimeStamp    = 1640966400 //2022-01-01
+	activeDefaultEndTimeStamp = 1644854400 //2022-02-15
+)
+
+var (
+	yearEndReportEndTimeStamp int64 = activeDefaultEndTimeStamp
+	yearEndReportConfig       YearEndReportConfig
+)
+
+func init() {
+	xweb.AddAction(&YearEndReport{})
+	qutil.ReadConfig("./active_report.json", &yearEndReportConfig)
+	if yearEndReportConfig.YearEndReportEnd > 0 {
+		yearEndReportEndTimeStamp = yearEndReportConfig.YearEndReportEnd
+	}
+}
+
+type YearEndReportData struct {
+	UserName         string   `json:"user_name"`         //昵称
+	UserHead         string   `json:"user_head"`         //头像地址
+	RegistrationTime int64    `json:"registration_time"` //注册时间 l_registedate
+	LoginDays        int32    `json:"login_days"`        //近一年登录天数 login_count
+	ActiveDays       int32    `json:"active_days"`       //深夜登录天数 login_night_count
+	ViewTotal        int32    `json:"view_total"`        //浏览信息次数 content_count
+	SearchTotal      int32    `json:"search_total"`      //搜索次数 search_count
+	FollowTotal      int32    `json:"follow_total"`      //企业/项目关注数量 ent_count
+	ActiveMonth      int32    `json:"active_month"`      //繁忙月份 month
+	IndustryTotal    int32    `json:"industry_total"`    //行业发布数据条数 bidding_count
+	ExpList          []string `json:"exp_list"`          //体验新功能列表 product_type
+	FocusProject     []string `json:"focus_project"`     //最关注的项目名称 vip_key
+	TotalDays        int32    `json:"total_days"`        //距离今天的天数 ~~
+	IsNew            bool     `json:"is_new"`            //是否新用户 ~~
+	Result           int32    `json:"result"`            //结果页type ~~
+	ShareLink        string   `json:"share_link"`        //报告二维码链接 ~~
+}
+
+func (this *YearEndReport) YearEndReportApi() {
+	userId, _ := this.GetSession("userId").(string)
+	rData, errMsg := func() (interface{}, error) {
+		if userId == "" {
+			return nil, fmt.Errorf("未登录")
+		}
+		if time.Now().Unix() > yearEndReportEndTimeStamp {
+			return nil, fmt.Errorf("不在活动期限内")
+		}
+		yerd := new(YearEndReportData)
+		if reportRes, _ := db.Mgo.FindOne("annual_report_new", map[string]interface{}{"userid": userId}); reportRes != nil && len(*reportRes) > 0 {
+			yerd.UserName, _ = (*reportRes)["s_name"].(string)
+			yerd.RegistrationTime, _ = (*reportRes)["l_registedate"].(int64)
+			yerd.LoginDays, _ = (*reportRes)["login_count"].(int32)
+			yerd.ActiveDays, _ = (*reportRes)["login_night_count"].(int32)
+			yerd.ViewTotal, _ = (*reportRes)["content_count"].(int32)
+			yerd.SearchTotal, _ = (*reportRes)["search_count"].(int32)
+			yerd.FollowTotal, _ = (*reportRes)["ent_count"].(int32)
+			yerd.ActiveMonth, _ = (*reportRes)["month"].(int32)
+			yerd.IndustryTotal, _ = (*reportRes)["bidding_count"].(int32)
+
+			if projectStr, _ := (*reportRes)["vip_key"].(string); projectStr != "" {
+				yerd.FocusProject = strings.Split(projectStr, ",")
+			}
+			expListStr, _ := (*reportRes)["product_type"].(string)
+			if expListStr != "" {
+				yerd.ExpList = strings.Split(expListStr, ",")
+			}
+		}
+		if baseRes, _ := db.Mgo.FindById("user", userId, `{"s_nickname":1,"s_headimage":1,"s_headimageurl":1,"l_registedate":1,"s_phone":1}`); baseRes != nil && len(*baseRes) > 0 {
+			if head, _ := (*baseRes)["s_headimage"].(string); head != "" {
+				yerd.UserHead = head
+			} else if head, _ := (*baseRes)["s_headimageurl"].(string); head != "" {
+				yerd.UserHead = head
+			}
+			if yerd.UserName == "" {
+				yerd.UserName, _ = (*baseRes)["s_nickname"].(string)
+				if yerd.UserName == "" {
+					if phoneStr, _ := (*baseRes)["s_phone"].(string); len(phoneStr) == 11 {
+						yerd.UserName = phoneStr[:3] + "***" + phoneStr[7:]
+					}
+				}
+			}
+
+			if yerd.RegistrationTime == 0 {
+				yerd.RegistrationTime, _ = (*baseRes)["l_registedate"].(int64)
+			}
+		}
+		//距离今天的天数
+		if yerd.RegistrationTime > 0 {
+			yerd.TotalDays = int32(math.Ceil(float64(time.Now().Sub(time.Unix(yerd.RegistrationTime, 0)).Hours()) / 24.0))
+		}
+		//是否新用户
+		if yerd.RegistrationTime > year2022StartTimeStamp || yerd.LoginDays == 0 {
+			yerd.IsNew = true
+		}
+		//结果页type
+		if !yerd.IsNew {
+			yerd.Result = getRandom(userId, yerd.RegistrationTime)
+		}
+		//报告二维码链接,及微信端地址
+		yerd.ShareLink = yearEndReportConfig.ShareUrl
+		return yerd, nil
+	}()
+	this.ServeJson(NewResult(rData, errMsg))
+}
+
+//getRandom 根据用户id和注册时间生成1-9随机数
+func getRandom(userId string, t int64) int32 {
+	defer qutil.Catch()
+	i, e := strconv.ParseInt(userId[len(userId)-5:len(userId)-1], 16, 32)
+	if e != nil {
+		i = t
+	}
+	return int32(i)%9 + 1
+}

src/jfw/modules/publicapply/src/active_report.json

@@ -0,0 +1,7 @@
+{
+  "yearEndReportEnd": 1644854400,
+  "shareUrl": "https://web-wky.jydev.jianyu360.com/active/yearEndReport?from=share",
+  "replyTitle": "「我的剑鱼标讯2021」年度报告已经生成，请查收",
+  "replyHref": "https://web-wky.jydev.jianyu360.com/active/yearEndReport?from=reply",
+  "userSourceFlag": "21yearEndReport"
+}

src/jfw/modules/publicapply/src/main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	_ "a"
+	_ "active"
 	_ "adLeague"
 	_ "applocation"
 	_ "attachmentdow"

src/jfw/modules/weixin/src/wx/wx.go

@@ -941,6 +941,12 @@ func Subscribe(w ResponseWriter, r *Request) {
 				})
 			}
 		}
+	} else {
+		if param, ok := redisValue.(map[string]interface{}); ok {
+			time.AfterFunc(time.Second, func() {
+				w.PostText(fmt.Sprintf("<a href='%s'>%s</a>", util.ObjToString(param["href"]), util.ObjToString(param["title"])))
+			})
+		}
 	}
 	if source == "69" { //数据报告-关注回复图文
 		datareportReply := util.ObjToMap(config.Sysconfig["datareportUserReply"])
@@ -963,7 +969,6 @@ func Subscribe(w ResponseWriter, r *Request) {
 				w.PostText(fmt.Sprintf((*structureDataReply)["content"].(string), config.Sysconfig["webdomain"].(string)+(*structureDataReply)["href"].(string)))
 			})
 		}
-
 	}
 
 	//分销系统二维码分享微信扫码关注

src/web/staticres/common-module/yearEndReport/css/index.css

@@ -0,0 +1,1854 @@
+@charset "UTF-8";
+
+
+[v-cloak] {
+  opacity: 0;
+}
+html,body{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+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: cover;
+  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 {
+  0% {
+    transform: translate3d(0, 100%, 0)
+  }
+  20% {
+    transform: scale(4) translate3d(0, 80%, 0) rotate3d(1, 1, 1, 30deg);
+  }
+  100% {
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+}
+@keyframes MeteorRotate {
+  0% {
+    transform: unset;
+  }
+  100% {
+    transform: scale(3) rotate3d(1, 1, 1, -18deg);
+  }
+}
+@keyframes InLeft {
+  100% {
+    transform: translateX(0.3rem);
+  }
+}
+@keyframes RightIn {
+  0% {
+    transform: rotate(8deg) scale(1.5) translateX(90%);
+  }
+  80% {
+    transform: rotate(4deg) scale(1.2) translateX(5%);
+  }
+  100% {
+    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 Scale {
+  from {
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+  to {
+    transform: scale(1.5) translate3d(0, 0, 0);
+  }
+}
+@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.5rem;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  max-width: 90%;
+}
+
+.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);
+  border-radius: 50%;
+  overflow: hidden;
+  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.show {
+  animation: InitMeteorBgIn 4s ease-out 1 forwards, Scale 10s 5s ease infinite alternate;
+}
+.page-1 .meteor-bg {
+  position: absolute;
+  transform: translate3d(0, 100%, 0);
+  bottom: 0;
+  width: 100%;
+  z-index: -10;
+}
+
+.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-weight: bold;
+  color: #FFFFFF;
+  line-height: 0.56rem;
+  letter-spacing: 7px;
+  margin-left: 1.54rem;
+  max-width: 80%;
+  word-break: break-all;
+}
+.page-2 .text{
+  font-size: .32rem;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: .36rem;
+  letter-spacing: .08rem;
+}
+.page-2 .text-a{
+  font-size: 0.28rem;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 0.36rem;
+  letter-spacing: 4px;
+  margin-left: 1.54rem;
+}
+.page-2 .time{
+  font-size: .32rem;
+  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-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-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-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-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-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-weight: 400;
+color: #FFFFFF;
+line-height: 0.36rem;
+letter-spacing: 4px;
+}
+.page-4 .days{
+font-size: 0.32rem;
+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-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-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-weight: bold;
+color: #FFFFFF;
+line-height: 0.56rem;
+letter-spacing: 7px;
+margin-left: 1.54rem;
+}
+.page-5 .gongsi{
+font-size: 0.32rem;
+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-weight: 400;
+color: #FFFFFF;
+line-height: 0.36rem;
+letter-spacing: 4px;
+margin-left: 1.54rem;
+}
+.page-5 .text-bottom{
+  position: absolute;
+  bottom: 1.92rem;
+  left: 1.72rem;
+  text-align: center;
+}
+.page-5  p{
+font-size: 0.28rem;
+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.show {
+  animation: InLeft 7s infinite alternate linear;
+}
+.page-5 .yun-five{
+  position: absolute;
+  bottom: 4.88rem;
+  left: 0;
+  z-index: -1;
+}
+.page-5 .yun-five img{
+  transform: scale(1.1);
+  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-weight: bold;
+color: #FFFFFF;
+line-height: 0.56rem;
+letter-spacing: 7px;
+margin-left: 1.54rem;
+}
+.page-6 .you{
+font-size: 0.32rem;
+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-weight: bold;
+color: #70EEFF;
+line-height: 0.56rem;
+letter-spacing: 7px;
+margin-left: 4.1rem;
+}
+.page-6 .xiangmu{
+font-size: 0.32rem;
+font-weight: 400;
+color: #FFFFFF;
+line-height: 0.36rem;
+letter-spacing: 4px;
+margin-top: 0.16rem;
+margin-left: 3.5rem;
+}
+.page-6 .text-kong{
+  position: absolute;
+    bottom: 4.32rem;
+    width: 100%;
+    text-align: center;
+}
+.page-6 .text-one{
+font-size: 0.28rem;
+font-weight: 400;
+color: #FFFFFF;
+line-height: 0.36rem;
+letter-spacing: 4px;
+}
+.page-6 .kong{
+  width: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 2.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.page-6 .text-two{
+  background: rgba(23, 24, 38, 0.3);
+  border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0.24rem 0.36rem;
+}
+.page-6 .box{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.page-6 .p-one{
+  height: 0.34rem;
+font-size: 0.24rem;
+font-weight: 400;
+color: #FFFFFF;
+line-height: 0.28rem;
+letter-spacing: 1px;
+}
+.page-6 .s-one{
+  height: 0.4rem;
+font-size: 0.28rem;
+font-weight: bold;
+color: #70EEFF;
+line-height: 0.33rem;
+letter-spacing: 2px;
+}
+.page-6 .text-bottom{
+font-size: 0.28rem;
+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: 4.7rem;
+    width: 3.7rem;
+    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: 100%;
+}
+/* E第六页 */
+
+
+/* S第七页 */
+.page-7 .sum{
+  width: 100%;
+  height: 100%;
+  margin-top: 2.92rem;
+}
+.page-7 .year{
+font-size: 0.48rem;
+font-weight: bold;
+color: #FFFFFF;
+line-height: 0.56rem;
+letter-spacing: 7px;
+margin-left: 1.54rem;
+}
+.page-7 .you{
+font-size: 0.32rem;
+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-weight: bold;
+color: #70EEFF;
+line-height: 0.56rem;
+letter-spacing: 7px;
+margin-left: 4.1rem;
+}
+.page-7 .text-bottom{
+font-size: 0.28rem;
+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: 4.7rem;
+  z-index: -1;
+}
+.page-7 .xd-seven img.show {
+  animation: MeteorRotate 22s ease infinite alternate;
+}
+.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-weight: bold;
+  color: #FFFFFF;
+  line-height: 0.56rem;
+  letter-spacing: 7px;
+  margin-left: 1.54rem;
+  }
+.page-8 .num{
+font-size: 0.48rem;
+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-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-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-weight: bold;
+color: #FFFFFF;
+line-height: 0.56rem;
+letter-spacing: 7px;
+margin-left: 1.54rem;
+}
+.page-9 .you{
+font-size: 0.32rem;
+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-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 .yueyue{
+  width: 100%;
+  height: 2.82rem;
+  text-align: center;
+  position: absolute;
+  bottom: 5.78rem;
+}
+.page-9 .banner-yue-one{
+  font-size: 2.02rem;
+  font-weight: bold;
+  color: #171826;
+  line-height: 2.37rem;
+}
+.page-9 .banner-yue-one::after {
+  content: "月";
+  font-size: 0.48rem;
+  font-weight: bold;
+  color: #171826;
+  line-height: 0.56rem;
+  letter-spacing: 7px;
+}
+.page-9 .picture-six{
+  background: url(../images/P9/ball-nine.png) no-repeat center center;
+  height: 15.16rem;
+  z-index: -1;
+  background-size: cover;
+  position: relative;
+  bottom: 3.12rem;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.page-9 .banner-text{
+  margin-bottom: 4.7rem;
+  font-size: 0.48rem;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 0.56rem;
+  letter-spacing: 7px;
+}
+.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-weight: bold;
+color: #FFFFFF;
+line-height: 0.56rem;
+letter-spacing: 7px;
+margin-left: 1.54rem;
+}
+.page-10 .you{
+font-size: 0.32rem;
+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-weight: bold;
+color: #70EEFF;
+line-height: 0.56rem;
+letter-spacing: 7px;
+  padding-right: 1.6rem;
+  display: inline-block;
+  width: 100%;
+  text-align: right;
+  box-sizing: border-box;
+}
+.page-10 .gonggao{
+  font-size: 0.32rem;
+  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-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:100%;
+}
+.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-weight: bold;
+  color: #FFFFFF;
+  line-height: 0.56rem;
+  letter-spacing: 7px;
+  margin-left: 1.54rem;
+}
+.page-11 .new{
+  font-size: 0.32rem;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 0.36rem;
+  letter-spacing: 4px;
+}
+.page-11 .you{
+  font-size: 0.32rem;
+  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-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-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-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-weight: 400;
+color: #FFFFFF;
+line-height: 0.36rem;
+letter-spacing: 4px;
+}
+.page-12 .text-3{
+font-size: 0.48rem;
+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;
+  border-radius: 0.48rem;
+  margin-top: 0.2rem;
+}
+
+.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;
+  z-index: -1;
+}
+.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-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-weight: 400;
+color: #FFFFFF;
+line-height: 0.52rem;
+letter-spacing: 4px;
+margin: 0;
+}
+.page-new-0 .text-2{
+  height: 1.4rem;
+  background: rgba(23, 24, 38, 0.3);
+  border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
+  padding: 0.24rem;
+  text-align: center;
+  margin-top: 0.4rem;
+  padding: 0.24rem;
+}
+.page-new-0 .text-2 div{
+  font-size: 0.24rem;
+  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-weight: 400;
+  color: #FFFFFF;
+  line-height: 0.52rem;
+  letter-spacing: 4px;
+}
+.page-new-0 .btn{
+  width: 4.56rem;
+  height: 0.96rem;
+  font-size: 0.4rem;
+  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: 100%;
+
+  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-weight: 400;
+  color: #FFFFFF;
+  line-height: 0.36rem;
+  letter-spacing: 4px;
+}
+.page-5678-kong .you{
+  font-size: 0.48rem;
+  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-weight: 400;
+  color: #FFFFFF;
+  line-height: 0.36rem;
+  letter-spacing: 4px;
+  margin-top: 0.32rem;
+}
+.page-5678-kong .text{
+  font-size: 0.32rem;
+  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-weight: 400;
+  color: #FFFFFF;
+  line-height: 0.36rem;
+  letter-spacing: 4px;
+  position: absolute;
+    bottom: 3.56rem;
+    right: 2.3rem;
+}
+.page-5678-kong .btn{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 0.96rem;
+  font-size: 0.4rem;
+  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;
+}
+.page-5678-kong .btn-next{
+  display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.page-5678-kong .xd-seven{
+  position: absolute;
+  right: 0;
+  bottom: 4.7rem;
+  z-index: -1;
+}
+.page-5678-kong .xd-seven img.show {
+  animation: MeteorRotate 22s ease infinite alternate;
+}
+.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-weight: bold;
+color: #FFFFFF;
+line-height: 0.56rem;
+letter-spacing: 7px;
+margin-left: 1.54rem;
+}
+.page-10-kong .you{
+font-size: 0.32rem;
+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-kong{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.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-top: 0.72rem;
+}
+.page-10-kong .text-zg div{
+  font-size: 0.24rem;
+  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-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:100%;
+}
+.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-weight: bold;
+  color: #FFFFFF;
+  line-height: 0.56rem;
+  letter-spacing: 7px;
+  margin-left: 1.54rem;
+}
+.page-11-kong .you{
+  font-size: 0.32rem;
+  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-weight: 400;
+  color: #FFFFFF;
+  line-height: 0.52rem;
+  letter-spacing: 4px;
+  margin: 0;
+}
+.page-11-kong .text-kong{
+  width: 100%;
+  text-align: center;
+  }
+.page-11-kong .text{
+font-size: 0.28rem;
+font-weight: 400;
+color: #FFFFFF;
+line-height: 0.52rem;
+letter-spacing: 4px;
+margin-top: 2.56rem;
+}
+.page-11-kong .btn{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 0.96rem;
+  font-size: 0.4rem;
+  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;
+}
+.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第十一页 */
+.jy-report .report-page .text-bottom {
+  left: unset;
+  right: unset;
+  width: 100%;
+  text-align: center;
+}

src/web/staticres/common-module/yearEndReport/css/music.css

@@ -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;
+}

src/web/staticres/common-module/yearEndReport/css/result.css

@@ -0,0 +1,315 @@
+html,body{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+[v-cloak] {
+  opacity: 0;
+}
+.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: cover;
+  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;
+  flex-shrink: 0;
+}
+.r-content .head-img > img{
+  width: 100%;
+  height: 100%;
+}
+.r-content .nick-name{
+  display: inline-block;
+  font-size: 0.32rem;
+  color: #1DB5E5;
+  line-height: 0.44rem;
+}
+
+.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;
+  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;
+}
+.r-content .role-label > img{
+  display: block;
+  height: 100%;
+}
+.r-content .role-bg{
+  position: absolute;
+  left: 0;
+
+}
+.r-content .role-bg > img{
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.mask-report-active .r-content .role-bg-other{
+  bottom: 1.2rem;
+}
+.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%;
+}
+
+/* 装饰 */
+.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;
+  position: absolute;
+  bottom: 0.64rem;
+}
+.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;
+  text-align: right;
+}
+.r-bottom .code-img{
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.r-bottom .code-img > img,
+.r-bottom .code-img > canvas {
+  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;
+} */
+#create-img-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  opacity: 0;
+}
+.canvas-img{
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 7.5rem;
+  height: 14.48rem;
+  transform: translate(-50%, -50%);
+  z-index: 1001;
+  /* width: 100%;
+  height: 100%;
+  object-fit: scale-down; */
+}
+/* 重置vant */
+.van-action-sheet__cancel, .van-action-sheet__item{
+  font-size: 18px;
+  line-height: 28px;
+}
+
+/* 偏移的样式 */
+#create-img-box .mask-report-active{
+  width : 7.5rem;
+  height: 14.56rem;
+  background-color: transparent;
+  overflow: hidden;
+}
+.mask-report-active .ball{
+  top: 2.28rem;
+  right: 0.48rem;
+}
+.mask-report-active .star{
+  right: 0.88rem;
+}
+.mask-report-active .result{
+  padding: 0.64rem 0;
+  background-position: -0.8rem -0.8rem;
+  background-size: 110% 110%;
+}
+.mask-report-active .role-bg{
+  left: -0.82rem;
+  /* width: 8.48rem; */
+}
+/* .mask-report-active .info{
+  width: 6.88rem;
+}
+.mask-report-active .role-main{
+  padding: 0.48rem .54rem;
+}
+.mask-report-active .role-text{
+  font-size: 0.36rem;
+}
+.mask-report-active .r-bottom{
+  padding: 0 0.3rem;
+} */

src/web/staticres/common-module/yearEndReport/js/common.js

@@ -0,0 +1,666 @@
+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);
+      }
+    }
+  }
+}

src/web/staticres/common-module/yearEndReport/js/index.js

@@ -0,0 +1,329 @@
+function initSwiper() {
+    if (this.$swiper) {
+        this.$swiper.destroy()
+        this.$swiper = null
+    }
+    var interleaveOffset = 0.5; //视差比值
+
+    function playAnOfIndex(index, type = true, delay) {
+        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')
+                if (type) {
+                    $(this).addClass(anName)
+                    if (anDelay) {
+                        $(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).width(),
+        height: $(window).height(),
+        allowSlideNext: false,
+        lazy: {
+            loadPrevNext: true,
+            loadPrevNextAmount: 2,
+        },
+        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 () {
+                this.update()
+                this.lazy.loadInSlide(this.activeIndex)
+                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')
+        }
+    })
+}
+
+function dateTime(date, fmt) {
+    if (fmt === void 0) {
+        fmt = 'yyyy年MM月dd日 hh:mm';
+    }
+
+    // 时间戳转换
+    if (!date) return '';
+    var d = new Date(date);
+    var o = {
+        "M+": d.getMonth() + 1,
+        //月份
+        "d+": d.getDate(),
+        //日
+        "h+": d.getHours(),
+        //小时
+        "m+": d.getMinutes(),
+        //分
+        "s+": d.getSeconds() //秒
+
+    }; // 根据y的长度来截取年
+
+    if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
+    }
+
+    for (var k in o) {
+        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
+    }
+
+    return fmt;
+}
+
+
+function numberUnit (list) {
+    var levelArr = list ||  ['元', '万元', '亿元', '万亿元']
+    function test (num, type, lv) {
+        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;
+            }
+        }
+
+        var result = num / Math.pow(10000, lv);
+        if (result > 10000 && lv < 2) {
+            return test(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', '');
+            }
+        }
+    }
+    return test
+}
+
+var tempUtils = {
+    '个': numberUnit(['个', '万个', '亿个', '万亿个']),
+    '次': numberUnit(['次', '万次', '亿次', '万亿次']),
+    '条': numberUnit(['条', '万条', '亿条', '万亿条']),
+}
+
+
+$(function () {
+    try {
+        JyObj.hiddenBottom(0)
+    } catch (e) {
+        console.log(e)
+    }
+})
+
+var vPage = new Vue({
+    el: '.jy-report',
+    delimiters: ['${', '}'],
+    data: function () {
+        return {
+            pageInfo: {},
+            showToastText: false,
+            readPact: false
+        }
+    },
+    created: function () {
+        this.getPageInfo()
+    },
+    filters: {
+        dateFormat: function (value) {
+            return dateTime(value * 1000, 'yyyy年MM月dd日')
+        },
+        numberFormat: function (value, type) {
+            return tempUtils[type](value)
+        }
+    },
+    computed: {
+        isNewUser: function () {
+            return this.pageInfo.is_new
+        },
+        isNullOf5678: function () {
+            return this.pageInfo.focus_project.length === 0 && this.pageInfo.view_total <=0 && this.pageInfo.search_total <= 0 && this.pageInfo.follow_total <= 0
+        },
+        isNullOf910: function () {
+            return this.pageInfo.active_month <= 0 && this.pageInfo.industry_total <= 0
+        },
+        isNullOf11: function () {
+            return this.pageInfo.exp_list.length === 0
+        }
+    },
+    mounted: function () {
+        initPlayMusic()
+    },
+    methods: {
+        goExp: function (type) {
+            var isWeiXinBrowser = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
+            var platform = isWeiXinBrowser ? '/front' : '/jyapp'
+            switch (type) {
+                case '5678': {
+                    location.href = platform + '/vipsubscribe/toSubVipSetPage?vSwitch=v'
+                    break
+                }
+                case '11': {
+                    location.href = platform + '/vipsubscribe/introducePage'
+                    break
+                }
+                case 'new': {
+                    location.href = platform + '/vipsubscribe/introducePage'
+                    break
+                }
+            }
+        },
+        goResult: function () {
+            sessionStorage.setItem('yearEndReportResult', JSON.stringify(this.pageInfo))
+            location.href = './yearEndReportResult'
+        },
+        getPageInfo: function () {
+            var _this = this
+            $.ajax({
+                url: '/publicapply/active/yearEndReport',
+                type: 'GET',
+                success: function (res) {
+                    if (res && res.error_msg === '' && res.data) {
+                        if (res.data.share_link) {
+                            sessionStorage.setItem('shareReportLink', res.data.share_link)
+                        }
+                        if (!res.data.focus_project) {
+                            res.data.focus_project = []
+                        }
+                        if (!res.data.exp_list) {
+                            res.data.exp_list = []
+                        }
+                        _this.pageInfo = res.data
+                        _this.$nextTick(function () {
+                            initSwiper.bind(_this)()
+                        })
+                    } else {
+                        location.replace('/swordfish/about')
+                    }
+                },
+                error: function () {
+                    location.replace('/swordfish/about')
+                }
+            })
+        },
+        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)
+        }
+    }
+})