|
@@ -2,12 +2,13 @@
|
|
|
<head>
|
|
|
<title>猴年翻福牌,翻来好运气</title>
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
+<meta content="telephone=no" name="format-detection" />
|
|
|
<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="{{Msg "seo" "cdn"}}/js/jquery.js"></script>
|
|
|
<script>
|
|
|
var signature = {{.T.signature}};
|
|
|
var shareTitle = "{{.T.nickName}}在2016年{{.T.words}}";
|
|
|
-var shareLink = "http://www.qimingxing.info/active/flop/{{.T.openid}}";
|
|
|
+var shareLink = "http://www.qimingxing.info/active/flop/share/{{.T.openid}}";
|
|
|
var shareIcon = "http://www.qimingxing.info/images/flop/blessing.png";
|
|
|
if(typeof(signature) != "undefined" && signature != null && signature.length == 4){
|
|
|
wx.config({
|
|
@@ -55,15 +56,17 @@ body{
|
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
background-color: #B63845;
|
|
|
font-size: 100%;
|
|
|
- text-align: center;
|
|
|
+}
|
|
|
+.page{
|
|
|
+ margin: 0px auto;
|
|
|
+ max-width: 750px;
|
|
|
+ position: relative;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
img{
|
|
|
vertical-align: sub;
|
|
|
}
|
|
|
-.body-bg{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
.btn{
|
|
|
width: 180px;
|
|
|
height: 43px;
|
|
@@ -78,7 +81,7 @@ img{
|
|
|
top: 0px;
|
|
|
width: 97.5px;
|
|
|
height: 53px;
|
|
|
- display: none;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
.cards{
|
|
|
position: absolute;
|
|
@@ -88,12 +91,12 @@ img{
|
|
|
display: none;
|
|
|
}
|
|
|
.cards>img{
|
|
|
- width: 250px;
|
|
|
- height: 282.4px;
|
|
|
+ width: 212.5px;
|
|
|
+ height: 240px;
|
|
|
}
|
|
|
.flop-tip{
|
|
|
color: #a52f2e;
|
|
|
- background-image: url("/images/flop/tip-bg.png");
|
|
|
+ background-image: url("{{Msg "seo" "cdn"}}/images/flop/tip-bg.png");
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
width: 280px;
|
|
@@ -116,10 +119,10 @@ img{
|
|
|
font-weight: normal;
|
|
|
}
|
|
|
.multiple{
|
|
|
- font-size: 1.375em;
|
|
|
+ font-size: 1.75em;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
- width: 15px;
|
|
|
+ width: 20px;
|
|
|
display: inline-block;
|
|
|
vertical-align: top;
|
|
|
overflow: hidden;
|
|
@@ -127,7 +130,7 @@ img{
|
|
|
}
|
|
|
.flop-notice{
|
|
|
color: #ffa461;
|
|
|
- background-image: url("/images/flop/flop-notice.png");
|
|
|
+ background-image: url("{{Msg "seo" "cdn"}}/images/flop/flop-notice.png");
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 30px;
|
|
@@ -185,130 +188,135 @@ ul{
|
|
|
.random li{
|
|
|
height: 25px;
|
|
|
}
|
|
|
+.page-before{
|
|
|
+ background-image: url("{{Msg "seo" "cdn"}}/images/flop/bg-1.png");
|
|
|
+}
|
|
|
+.page-after{
|
|
|
+ background-image: url("{{Msg "seo" "cdn"}}/images/flop/bg-2.png");
|
|
|
+}
|
|
|
</style>
|
|
|
</head>
|
|
|
<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>
|
|
|
- 您也可以测福牌
|
|
|
+<img src="{{Msg "seo" "cdn"}}/images/flop/bubble.png" class="bubble"{{if eq .T.flag 1}} style="display: none;"{{end}}>
|
|
|
+<div class="page{{if eq .T.flag 1}} page-before{{else}} page-after{{end}}">
|
|
|
+ <div class="flop-notice">
|
|
|
+ <span>{{.T.nickName}}</span>,您的猴年福牌是:
|
|
|
+ </div>
|
|
|
+ <div class="cards">
|
|
|
+ {{if eq .T.flag 1}}<img src="{{Msg "seo" "cdn"}}/images/flop/card.png">{{end}}
|
|
|
+ <img src="{{Msg "seo" "cdn"}}/images/flop/card-{{.T.cardType}}.png"{{if eq .T.flag 1}} style="display: none;"{{end}}>
|
|
|
</div>
|
|
|
-</div>
|
|
|
-{{end}}
|
|
|
-<div class="flop-tip">
|
|
|
- 恭喜!你的企明星积分翻
|
|
|
- <span class="multiple">
|
|
|
{{if eq .T.flag 1}}
|
|
|
- <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>
|
|
|
- {{else if eq .T.flag 2}}
|
|
|
- {{.T.multiple}}
|
|
|
+ <img src="{{Msg "seo" "cdn"}}/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}}
|
|
|
- </span>倍!<br>
|
|
|
- 您的积分已从{{.T.oldCredit}}分涨到{{.T.newCredit}}分。<br>
|
|
|
- <font>积分明细请到企明星(www.qmx.top)查询!</font>
|
|
|
+ <div class="flop-tip">
|
|
|
+ 恭喜!你的企明星积分翻
|
|
|
+ <span class="multiple">
|
|
|
+ {{if eq .T.flag 1}}
|
|
|
+ <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>
|
|
|
+ {{else if eq .T.flag 2}}
|
|
|
+ {{.T.multiple}}
|
|
|
+ {{end}}
|
|
|
+ </span>倍!<br>
|
|
|
+ 您的积分已从{{.T.oldCredit}}分涨到{{.T.newCredit}}分。<br>
|
|
|
+ <font>积分明细请到企明星(www.qmx.top)查询!</font>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
if({{.T.IsOver}}){
|
|
|
alert("活动已经结束!");
|
|
|
-}else{
|
|
|
- $(function(){
|
|
|
- var windowWidth = $(window).width();
|
|
|
- var windowHeight = $(window).height();
|
|
|
- var defaultWidth = 320;
|
|
|
- var defaultHeight = 416;
|
|
|
- var width = 250;
|
|
|
- var height = 282.4;
|
|
|
- var cardTop = 120;
|
|
|
- var noticeTop = 80;
|
|
|
- if(windowWidth > 750){
|
|
|
- $(".body-bg").css({width: 750,height: windowHeight});
|
|
|
- }
|
|
|
- if(windowHeight > defaultHeight){
|
|
|
- cardTop = cardTop / defaultHeight * windowHeight;
|
|
|
- noticeTop = noticeTop / defaultHeight * windowHeight;
|
|
|
+}
|
|
|
+$(function(){
|
|
|
+ var windowWidth = $(window).width();
|
|
|
+ var windowHeight = $(window).height();
|
|
|
+ var defaultWidth = 320;
|
|
|
+ var defaultHeight = 416;
|
|
|
+ var width = 212.5;
|
|
|
+ var height = 240;
|
|
|
+ var cardTop = 110;
|
|
|
+ var noticeTop = 70;
|
|
|
+ if(windowHeight > defaultHeight){
|
|
|
+ cardTop = cardTop / defaultHeight * windowHeight;
|
|
|
+ noticeTop = noticeTop / defaultHeight * windowHeight;
|
|
|
+ }
|
|
|
+ if(windowWidth > defaultWidth && windowHeight > defaultHeight){
|
|
|
+ width = width / defaultWidth * windowWidth;
|
|
|
+ if(width > 350){//最大宽度350
|
|
|
+ width = 350
|
|
|
}
|
|
|
- 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});
|
|
|
+ }
|
|
|
+ $(".cards").css({top: cardTop}).show();
|
|
|
+ $(".flop-notice").css({top: noticeTop});
|
|
|
+ var flopTipTop = windowHeight - $(".cards").height() - cardTop - $(".flop-tip").height();
|
|
|
+ if(flopTipTop > 30 && flopTipTop < 40){
|
|
|
+ $(".flop-tip").css({"line-height": "30px",top: $(".cards").height() + cardTop - 20});
|
|
|
+ }else if(flopTipTop > 40){
|
|
|
+ $(".flop-tip").css({"line-height": "30px",top: $(".cards").height() + cardTop - 10});
|
|
|
+ }else{
|
|
|
+ $(".flop-tip").css({top: $(".cards").height()+cardTop-20});
|
|
|
+ }
|
|
|
+ //
|
|
|
+ {{if eq .T.flag 1}}
|
|
|
+ $(".btn").css({top: $(".cards").height()+cardTop}).show();
|
|
|
+ $(".btn").one("click",function(){
|
|
|
+ if({{.T.IsOver}}){
|
|
|
+ alert("活动已经结束!");
|
|
|
+ return;
|
|
|
}
|
|
|
- height = width / 625 * 706;
|
|
|
- $(".cards>img").css({width: width,height: height});
|
|
|
- }
|
|
|
- $(".cards").css({top: cardTop}).show();
|
|
|
- $(".flop-notice").css({top: noticeTop});
|
|
|
- var flopTipTop = windowHeight - $(".cards").height() - cardTop - $(".flop-tip").height();
|
|
|
- if(flopTipTop > 30 && flopTipTop < 40){
|
|
|
- $(".flop-tip").css({"line-height": "30px",top: $(".cards").height() + cardTop - 20});
|
|
|
- }else if(flopTipTop > 40){
|
|
|
- $(".flop-tip").css({"line-height": "30px",top: $(".cards").height() + cardTop - 10});
|
|
|
- }else{
|
|
|
- $(".flop-tip").css({top: $(".cards").height()+cardTop-30});
|
|
|
- }
|
|
|
- //
|
|
|
- {{if eq .T.flag 1}}
|
|
|
- $(".btn").css({top: $(".cards").height()+cardTop}).show();
|
|
|
- $(".btn").one("click",function(){
|
|
|
- //
|
|
|
- $.post("/active/flopAjax",null,null);
|
|
|
- $("#flop-before,.btn").hide();
|
|
|
- $("#flop-after,.flop-tip,.flop-notice").show();
|
|
|
- var randomInterval = setInterval(function(){
|
|
|
- $(".random").css({top : "-27px"});
|
|
|
- $(".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);
|
|
|
- });
|
|
|
+ //
|
|
|
+ $.post("/active/flopAjax",null,null);
|
|
|
+ $(".page").addClass("page-after").removeClass("page-before");
|
|
|
+ $(".btn").hide();
|
|
|
+ $(".flop-tip,.flop-notice").show();
|
|
|
+ var randomInterval = setInterval(function(){
|
|
|
+ $(".random").css({top : "-24px"});
|
|
|
+ $(".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},500,function(){
|
|
|
+ $(this).hide().next().show();
|
|
|
+ $(this).next().animate({'width':width+'px'},200);
|
|
|
});
|
|
|
- {{else}}
|
|
|
- $(".flop-notice").show();
|
|
|
- {{end}}
|
|
|
- {{if eq .T.flag 2}}
|
|
|
- $(".flop-tip").show();
|
|
|
- {{end}}
|
|
|
- {{if eq .T.flag 3}}
|
|
|
- var shareHeight = windowHeight - cardTop - height + 30;
|
|
|
- if(shareHeight > 110){
|
|
|
- shareHeight = 110;
|
|
|
- }
|
|
|
- $(".flop-share").css({height: shareHeight});
|
|
|
- $(".flop-share>img").css({width: shareHeight-20,height: shareHeight-20});
|
|
|
- {{end}}
|
|
|
- });
|
|
|
-}
|
|
|
+ });
|
|
|
+ {{else}}
|
|
|
+ $(".flop-notice").show();
|
|
|
+ {{end}}
|
|
|
+ {{if eq .T.flag 2}}
|
|
|
+ $(".flop-tip").show();
|
|
|
+ {{end}}
|
|
|
+ {{if eq .T.flag 3}}
|
|
|
+ var shareHeight = windowHeight - cardTop - height + 30;
|
|
|
+ if(shareHeight > 110){
|
|
|
+ shareHeight = 110;
|
|
|
+ }
|
|
|
+ $(".flop-share").css({height: shareHeight});
|
|
|
+ $(".flop-share>img").css({width: shareHeight-20,height: shareHeight-20});
|
|
|
+ {{end}}
|
|
|
+});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|