|
@@ -1,75 +1,287 @@
|
|
<html>
|
|
<html>
|
|
<head>
|
|
<head>
|
|
-<title>企明星-剑鱼</title>
|
|
|
|
|
|
+<title>企明星-翻牌活动</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
-<link href="/wxswordfish/style.css" rel="stylesheet">
|
|
|
|
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
|
|
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
|
|
<script src="/js/jquery.js"></script>
|
|
<script src="/js/jquery.js"></script>
|
|
-<script src="/wxswordfish/share.js"></script>
|
|
|
|
<script>
|
|
<script>
|
|
- initShare({{.T.signature}},{{.T.shareid}});
|
|
|
|
|
|
+var signature = {{.T.signature}};
|
|
|
|
+var shareTitle = "{{.T.nickName}}在2016年{{.T.words}}";
|
|
|
|
+var shareLink = "http://www.qimingxing.info/active/flop/{{.T.openid}}";
|
|
|
|
+var shareIcon = "http://www.qimingxing.info/images/flop/blessing.png";
|
|
|
|
+if(typeof(signature) != "undefined" && signature != null && signature.length == 4){
|
|
|
|
+ wx.config({
|
|
|
|
+ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
|
|
|
|
+ appId: signature[0], // 必填,公众号的唯一标识
|
|
|
|
+ timestamp:signature[1], // 必填,生成签名的时间戳
|
|
|
|
+ nonceStr: signature[2], // 必填,生成签名的随机串
|
|
|
|
+ signature: signature[3],// 必填,签名,见附录1
|
|
|
|
+ jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
|
|
|
|
+ });
|
|
|
|
+ wx.ready(function () {
|
|
|
|
+ wx.onMenuShareTimeline({
|
|
|
|
+ title: shareTitle, // 分享标题
|
|
|
|
+ link: shareLink, // 分享链接
|
|
|
|
+ imgUrl: shareIcon, // 分享图标
|
|
|
|
+ success: function () {
|
|
|
|
+ //alert('分享成功');
|
|
|
|
+ },
|
|
|
|
+ cancel: function () {
|
|
|
|
+ //alert('分享失败,或用户取消了');
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ wx.onMenuShareAppMessage({
|
|
|
|
+ title: shareTitle, // 分享标题
|
|
|
|
+ desc: '企明星给您拜年!猴年翻福牌,翻来好运气!关注企明星,回复“福牌”得好运。', // 分享描述
|
|
|
|
+ link: shareLink,// 分享链接
|
|
|
|
+ imgUrl: shareIcon, // 分享图标
|
|
|
|
+ type: 'link', // 分享类型,music、video或link,不填默认为link'
|
|
|
|
+ dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
|
|
|
|
+ success: function () {
|
|
|
|
+ //alert('分享成功');
|
|
|
|
+ },
|
|
|
|
+ cancel: function () {
|
|
|
|
+ //alert('分享失败,或用户取消了');
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
<style type="text/css">
|
|
<style type="text/css">
|
|
body{
|
|
body{
|
|
margin: 0px;
|
|
margin: 0px;
|
|
font-family: tahoma, arial, 'Hiragino Sans GB', 'Microsoft YaHei', 宋体, sans-serif;
|
|
font-family: tahoma, arial, 'Hiragino Sans GB', 'Microsoft YaHei', 宋体, sans-serif;
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-tap-highlight-color: transparent;
|
|
-}
|
|
|
|
-ul{
|
|
|
|
- list-style: none;
|
|
|
|
- padding: 0px;
|
|
|
|
- margin: 0px;
|
|
|
|
|
|
+ background-color: #B63845;
|
|
}
|
|
}
|
|
img{
|
|
img{
|
|
vertical-align: sub;
|
|
vertical-align: sub;
|
|
}
|
|
}
|
|
-.brand a{
|
|
|
|
- display: block;
|
|
|
|
- float: left;
|
|
|
|
- margin: 20px;
|
|
|
|
|
|
+.body-bg{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+}
|
|
|
|
+.btn{
|
|
width: 180px;
|
|
width: 180px;
|
|
- height: 240px;
|
|
|
|
|
|
+ height: 43px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 50%;
|
|
|
|
+ margin-left: -90px;
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+.bubble{
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 20px;
|
|
|
|
+ top: 0px;
|
|
|
|
+ width: 97.5px;
|
|
|
|
+ height: 53px;
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+.cards{
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0px;
|
|
|
|
+ right: 0px;
|
|
text-align: center;
|
|
text-align: center;
|
|
- position: relative;
|
|
|
|
|
|
+ display: none;
|
|
}
|
|
}
|
|
-.brand img{
|
|
|
|
- width: 180px;
|
|
|
|
- height: 240px;
|
|
|
|
|
|
+.cards>img{
|
|
|
|
+ width: 250px;
|
|
|
|
+ height: 282.4px;
|
|
}
|
|
}
|
|
-.brand .info{
|
|
|
|
|
|
+.flop-tip{
|
|
|
|
+ color: #a52f2e;
|
|
|
|
+ background-image: url("/images/flop/tip-bg.png");
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 280px;
|
|
|
|
+ line-height: 22px;
|
|
|
|
+ left: 50%;
|
|
|
|
+ margin-left: -145px;
|
|
|
|
+ display: none;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 5px;
|
|
|
|
+ margin-bottom: 10px;
|
|
display: none;
|
|
display: none;
|
|
- background-color: #f0f0f0;
|
|
|
|
- color: #369242;
|
|
|
|
- line-height:240px;
|
|
|
|
}
|
|
}
|
|
-.vertical .info{
|
|
|
|
- width: 0;
|
|
|
|
- height: 240px;
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
|
+.flop-tip>span{
|
|
|
|
+ margin-right: 3px;
|
|
|
|
+}
|
|
|
|
+.flop-tip>font{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ font-weight: normal;
|
|
|
|
+}
|
|
|
|
+.multiple{
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 15px;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ height: 20px;
|
|
|
|
+}
|
|
|
|
+.flop-notice{
|
|
|
|
+ color: #ffa461;
|
|
|
|
+ background-image: url("/images/flop/flop-notice.png");
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 30px;
|
|
|
|
+ width: 280px;
|
|
|
|
+ left: 50%;
|
|
|
|
+ margin-left: -140px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding-top: 7px;
|
|
|
|
+ padding-bottom: 7px;
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+.flop-notice>span{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ max-width: 140px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+}
|
|
|
|
+.flop-share{
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0px;
|
|
|
|
+ right: 0px;
|
|
|
|
+ bottom: 0px;
|
|
|
|
+ height: 90px;
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
+}
|
|
|
|
+.flop-share>*{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 70px;
|
|
|
|
+ height: 70px;
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+}
|
|
|
|
+.flop-share>div{
|
|
|
|
+ width: 150px;
|
|
|
|
+ padding-top: 10px;
|
|
|
|
+ line-height: 25px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+}
|
|
|
|
+ul{
|
|
|
|
+ list-style: none;
|
|
|
|
+ padding: 0px;
|
|
|
|
+ margin: 0px;
|
|
|
|
+}
|
|
|
|
+.random{
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 2px;
|
|
|
|
+ height: 155px;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
</head>
|
|
</head>
|
|
<body>
|
|
<body>
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+<img src="/images/flop/bubble.png" class="bubble">
|
|
|
|
+{{if eq .T.flag 1}}
|
|
|
|
+<img src="/images/flop/bg-1.png" class="body-bg" id="flop-before">
|
|
|
|
+{{end}}
|
|
|
|
+<img src="/images/flop/bg-2.png" class="body-bg" id="flop-after"{{if eq .T.flag 1}} style="display: none;"{{end}}>
|
|
|
|
+<div class="flop-notice">
|
|
|
|
+ <span>{{.T.nickName}}</span>,您的猴年福牌是:
|
|
|
|
+</div>
|
|
|
|
+<div class="cards">
|
|
|
|
+ {{if eq .T.flag 1}}<img src="/images/flop/card.png">{{end}}
|
|
|
|
+ <img src="/images/flop/card-{{.T.cardType}}.png"{{if eq .T.flag 1}} style="display: none;"{{end}}>
|
|
|
|
+</div>
|
|
|
|
+{{if eq .T.flag 1}}
|
|
|
|
+<img src="/images/flop/btn.png" class="btn">
|
|
|
|
+{{else if eq .T.flag 3}}
|
|
|
|
+<div class="flop-share">
|
|
|
|
+ <img src="/front/weixinshare/{{.T.shareid}}">
|
|
|
|
+ <div>
|
|
|
|
+ 长按图片识别二维码<br>
|
|
|
|
+ 您也可以测福牌
|
|
|
|
+ </div>
|
|
|
|
+</div>
|
|
|
|
+{{end}}
|
|
|
|
+<div class="flop-tip">
|
|
|
|
+ 恭喜!你的企明星积分翻
|
|
|
|
+ <span class="multiple">
|
|
|
|
+ <ul class="random">
|
|
|
|
+ <li>7</li>
|
|
|
|
+ <li>3</li>
|
|
|
|
+ <li>6</li>
|
|
|
|
+ <li>8</li>
|
|
|
|
+ <li>5</li>
|
|
|
|
+ <li>9</li>
|
|
|
|
+ <li>2</li>
|
|
|
|
+ </ul>
|
|
|
|
+ </span>倍!<br>
|
|
|
|
+ 您的积分已从{{.T.oldCredit}}分涨到{{.T.newCredit}}分。<br>
|
|
|
|
+ <font>积分明细请到企明星(www.qmx.top)查询!</font>
|
|
|
|
+</div>
|
|
<script type="text/javascript">
|
|
<script type="text/javascript">
|
|
-var turn = function(target,time,opts){
|
|
|
|
- target.find('a').hover(function(){
|
|
|
|
- $(this).find('img').stop().animate(opts[0],time,function(){
|
|
|
|
- $(this).hide().next().show();
|
|
|
|
- $(this).next().animate(opts[1],time);
|
|
|
|
- });
|
|
|
|
- },function(){
|
|
|
|
- $(this).find('.info').animate(opts[0],time,function(){
|
|
|
|
- $(this).hide().prev().show();
|
|
|
|
- $(this).prev().animate(opts[1],time);
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
|
|
+if({{.T.IsOver}}){
|
|
|
|
+ alert("活动已经结束!");
|
|
}
|
|
}
|
|
-var verticalOpts = [{'width':0},{'width':'180px'}];
|
|
|
|
-turn($('#vertical'),100,verticalOpts);
|
|
|
|
|
|
+$(function(){
|
|
|
|
+ var windowWidth = $(window).width();
|
|
|
|
+ var windowHeight = $(window).height();
|
|
|
|
+ var defaultWidth = 320;
|
|
|
|
+ var defaultHeight = 416;
|
|
|
|
+ var width = 250;
|
|
|
|
+ var height = 282.4;
|
|
|
|
+ var top = 120;
|
|
|
|
+ var noticeTop = 80;
|
|
|
|
+ if(windowHeight > defaultHeight){
|
|
|
|
+ top = top / defaultHeight * windowHeight;
|
|
|
|
+ noticeTop = noticeTop / defaultHeight * windowHeight;
|
|
|
|
+ }
|
|
|
|
+ if(windowWidth > defaultWidth && windowHeight > defaultHeight){
|
|
|
|
+ width = width / defaultWidth * windowWidth;
|
|
|
|
+ if(width > 350){//最大宽度350
|
|
|
|
+ width = 350
|
|
|
|
+ }
|
|
|
|
+ height = width / 625 * 706;
|
|
|
|
+ $(".cards>img").css({width: width,height: height}).show();
|
|
|
|
+ }
|
|
|
|
+ $(".cards").css({"top": top}).show();
|
|
|
|
+ $(".flop-notice").css({"top": noticeTop});
|
|
|
|
+ if(windowHeight - $(".cards").height() - top - $(".flop-tip").height() > 40){
|
|
|
|
+ $(".flop-tip").css({"line-height": "30px",top: $(".cards").height()+top});
|
|
|
|
+ }else{
|
|
|
|
+ $(".flop-tip").css({"top": $(".cards").height()+top-30});
|
|
|
|
+ }
|
|
|
|
+ //
|
|
|
|
+ {{if eq .T.flag 1}}
|
|
|
|
+ $(".btn").css({"top": $(".cards").height()+top}).show();
|
|
|
|
+ $(".btn").click(function(){
|
|
|
|
+ $("#flop-before,.btn").hide();
|
|
|
|
+ $("#flop-after,.flop-tip,.flop-notice").show();
|
|
|
|
+ var marginTop = 0;
|
|
|
|
+ var plus = true;
|
|
|
|
+ var randomInterval = setInterval(function(){
|
|
|
|
+ $(".random").css({top : "-22px"});
|
|
|
|
+ $(".random").append($(".random li:first"));
|
|
|
|
+ },20);
|
|
|
|
+ setTimeout(function(){
|
|
|
|
+ clearInterval(randomInterval);
|
|
|
|
+ $(".multiple").html({{.T.multiple}});
|
|
|
|
+ },1000);
|
|
|
|
+ setTimeout(function(){
|
|
|
|
+ $(".bubble").fadeIn();
|
|
|
|
+ },3000);
|
|
|
|
+ $('.cards').children('img:first').stop().animate({'width':0},100,function(){
|
|
|
|
+ $(this).hide().next().show();
|
|
|
|
+ $(this).next().animate({'width':width+'px'},500);
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ {{else}}
|
|
|
|
+ $(".flop-notice").show();
|
|
|
|
+ {{end}}
|
|
|
|
+ {{if eq .T.flag 2}}
|
|
|
|
+ $(".flop-tip").show();
|
|
|
|
+ {{end}}
|
|
|
|
+});
|
|
</script>
|
|
</script>
|
|
</body>
|
|
</body>
|
|
</html>
|
|
</html>
|