|
@@ -1,9 +1,10 @@
|
|
<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">
|
|
|
|
+<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 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>
|
|
<script>
|
|
var signature = {{.T.signature}};
|
|
var signature = {{.T.signature}};
|
|
var shareTitle = "{{.T.nickName}}在2016年{{.T.words}}";
|
|
var shareTitle = "{{.T.nickName}}在2016年{{.T.words}}";
|
|
@@ -54,14 +55,18 @@ body{
|
|
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;
|
|
background-color: #B63845;
|
|
background-color: #B63845;
|
|
|
|
+ font-size: 100%;
|
|
|
|
+}
|
|
|
|
+.page{
|
|
|
|
+ margin: 0px auto;
|
|
|
|
+ max-width: 750px;
|
|
|
|
+ position: relative;
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ height: 100%;
|
|
}
|
|
}
|
|
img{
|
|
img{
|
|
vertical-align: sub;
|
|
vertical-align: sub;
|
|
}
|
|
}
|
|
-.body-bg{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
-}
|
|
|
|
.btn{
|
|
.btn{
|
|
width: 180px;
|
|
width: 180px;
|
|
height: 43px;
|
|
height: 43px;
|
|
@@ -76,7 +81,7 @@ img{
|
|
top: 0px;
|
|
top: 0px;
|
|
width: 97.5px;
|
|
width: 97.5px;
|
|
height: 53px;
|
|
height: 53px;
|
|
- display: none;
|
|
|
|
|
|
+ z-index: 1;
|
|
}
|
|
}
|
|
.cards{
|
|
.cards{
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -86,12 +91,12 @@ img{
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
.cards>img{
|
|
.cards>img{
|
|
- width: 250px;
|
|
|
|
- height: 282.4px;
|
|
|
|
|
|
+ width: 212.5px;
|
|
|
|
+ height: 240px;
|
|
}
|
|
}
|
|
.flop-tip{
|
|
.flop-tip{
|
|
color: #a52f2e;
|
|
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%;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
position: absolute;
|
|
width: 280px;
|
|
width: 280px;
|
|
@@ -99,7 +104,7 @@ img{
|
|
left: 50%;
|
|
left: 50%;
|
|
margin-left: -145px;
|
|
margin-left: -145px;
|
|
display: none;
|
|
display: none;
|
|
- font-size: 14px;
|
|
|
|
|
|
+ font-size:0.875em;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
text-align: center;
|
|
padding: 5px;
|
|
padding: 5px;
|
|
@@ -110,22 +115,22 @@ img{
|
|
margin-right: 3px;
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
.flop-tip>font{
|
|
.flop-tip>font{
|
|
- font-size: 12px;
|
|
|
|
|
|
+ font-size: 0.75em;
|
|
font-weight: normal;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.multiple{
|
|
.multiple{
|
|
- font-size: 22px;
|
|
|
|
|
|
+ font-size: 1.75em;
|
|
text-align: center;
|
|
text-align: center;
|
|
position: relative;
|
|
position: relative;
|
|
- width: 15px;
|
|
|
|
|
|
+ width: 20px;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
vertical-align: top;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
- height: 20px;
|
|
|
|
|
|
+ height: 25px;
|
|
}
|
|
}
|
|
.flop-notice{
|
|
.flop-notice{
|
|
color: #ffa461;
|
|
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%;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 30px;
|
|
top: 30px;
|
|
@@ -153,7 +158,7 @@ img{
|
|
height: 90px;
|
|
height: 90px;
|
|
background-color: #ffffff;
|
|
background-color: #ffffff;
|
|
}
|
|
}
|
|
-.flop-share>*{
|
|
|
|
|
|
+.flop-share>img{
|
|
display: inline-block;
|
|
display: inline-block;
|
|
width: 70px;
|
|
width: 70px;
|
|
height: 70px;
|
|
height: 70px;
|
|
@@ -162,10 +167,13 @@ img{
|
|
margin-top: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
.flop-share>div{
|
|
.flop-share>div{
|
|
|
|
+ display: inline-block;
|
|
width: 150px;
|
|
width: 150px;
|
|
- padding-top: 10px;
|
|
|
|
line-height: 25px;
|
|
line-height: 25px;
|
|
- font-size: 14px;
|
|
|
|
|
|
+ font-size: 0.875em;
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 50%;
|
|
|
|
+ margin-top: -25px;
|
|
}
|
|
}
|
|
ul{
|
|
ul{
|
|
list-style: none;
|
|
list-style: none;
|
|
@@ -177,47 +185,58 @@ ul{
|
|
left: 2px;
|
|
left: 2px;
|
|
height: 155px;
|
|
height: 155px;
|
|
}
|
|
}
|
|
|
|
+.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>
|
|
</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>
|
|
|
|
- 您也可以测福牌
|
|
|
|
|
|
+<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>
|
|
|
|
+ {{if eq .T.flag 1}}
|
|
|
|
+ <img src="{{Msg "seo" "cdn"}}/images/flop/btn.png" class="btn">
|
|
|
|
+ {{else if eq .T.flag 3}}
|
|
|
|
+ <div class="flop-share">
|
|
|
|
+ <img src="{{Msg "seo" "cdn"}}/front/weixinshare/{{.T.shareid}}">
|
|
|
|
+ <div>
|
|
|
|
+ 长按图片识别二维码<br>
|
|
|
|
+ 您也可以测福牌
|
|
|
|
+ </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}}
|
|
|
|
+ {{end}}
|
|
|
|
+ </span>倍!<br>
|
|
|
|
+ 您的积分已从{{.T.oldCredit}}分涨到{{.T.newCredit}}分。<br>
|
|
|
|
+ <font>积分明细请到企明星(www.qmx.top)查询!</font>
|
|
</div>
|
|
</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>
|
|
</div>
|
|
<script type="text/javascript">
|
|
<script type="text/javascript">
|
|
if({{.T.IsOver}}){
|
|
if({{.T.IsOver}}){
|
|
@@ -228,12 +247,12 @@ $(function(){
|
|
var windowHeight = $(window).height();
|
|
var windowHeight = $(window).height();
|
|
var defaultWidth = 320;
|
|
var defaultWidth = 320;
|
|
var defaultHeight = 416;
|
|
var defaultHeight = 416;
|
|
- var width = 250;
|
|
|
|
- var height = 282.4;
|
|
|
|
- var top = 120;
|
|
|
|
- var noticeTop = 80;
|
|
|
|
|
|
+ var width = 212.5;
|
|
|
|
+ var height = 240;
|
|
|
|
+ var cardTop = 110;
|
|
|
|
+ var noticeTop = 70;
|
|
if(windowHeight > defaultHeight){
|
|
if(windowHeight > defaultHeight){
|
|
- top = top / defaultHeight * windowHeight;
|
|
|
|
|
|
+ cardTop = cardTop / defaultHeight * windowHeight;
|
|
noticeTop = noticeTop / defaultHeight * windowHeight;
|
|
noticeTop = noticeTop / defaultHeight * windowHeight;
|
|
}
|
|
}
|
|
if(windowWidth > defaultWidth && windowHeight > defaultHeight){
|
|
if(windowWidth > defaultWidth && windowHeight > defaultHeight){
|
|
@@ -242,25 +261,33 @@ $(function(){
|
|
width = 350
|
|
width = 350
|
|
}
|
|
}
|
|
height = width / 625 * 706;
|
|
height = width / 625 * 706;
|
|
- $(".cards>img").css({width: width,height: height}).show();
|
|
|
|
|
|
+ $(".cards>img").css({width: width,height: height});
|
|
}
|
|
}
|
|
- $(".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});
|
|
|
|
|
|
+ $(".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{
|
|
}else{
|
|
- $(".flop-tip").css({"top": $(".cards").height()+top-30});
|
|
|
|
|
|
+ $(".flop-tip").css({top: $(".cards").height()+cardTop-20});
|
|
}
|
|
}
|
|
//
|
|
//
|
|
{{if eq .T.flag 1}}
|
|
{{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;
|
|
|
|
|
|
+ $(".btn").css({top: $(".cards").height()+cardTop}).show();
|
|
|
|
+ $(".btn").one("click",function(){
|
|
|
|
+ if({{.T.IsOver}}){
|
|
|
|
+ alert("活动已经结束!");
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ //
|
|
|
|
+ $.post("/active/flopAjax",null,null);
|
|
|
|
+ $(".page").addClass("page-after").removeClass("page-before");
|
|
|
|
+ $(".btn").hide();
|
|
|
|
+ $(".flop-tip,.flop-notice").show();
|
|
var randomInterval = setInterval(function(){
|
|
var randomInterval = setInterval(function(){
|
|
- $(".random").css({top : "-22px"});
|
|
|
|
|
|
+ $(".random").css({top : "-24px"});
|
|
$(".random").append($(".random li:first"));
|
|
$(".random").append($(".random li:first"));
|
|
},20);
|
|
},20);
|
|
setTimeout(function(){
|
|
setTimeout(function(){
|
|
@@ -270,9 +297,9 @@ $(function(){
|
|
setTimeout(function(){
|
|
setTimeout(function(){
|
|
$(".bubble").fadeIn();
|
|
$(".bubble").fadeIn();
|
|
},3000);
|
|
},3000);
|
|
- $('.cards').children('img:first').stop().animate({'width':0},100,function(){
|
|
|
|
|
|
+ $('.cards').children('img:first').stop().animate({'width':0},500,function(){
|
|
$(this).hide().next().show();
|
|
$(this).hide().next().show();
|
|
- $(this).next().animate({'width':width+'px'},500);
|
|
|
|
|
|
+ $(this).next().animate({'width':width+'px'},200);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
{{else}}
|
|
{{else}}
|
|
@@ -281,6 +308,14 @@ $(function(){
|
|
{{if eq .T.flag 2}}
|
|
{{if eq .T.flag 2}}
|
|
$(".flop-tip").show();
|
|
$(".flop-tip").show();
|
|
{{end}}
|
|
{{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>
|
|
</script>
|
|
</body>
|
|
</body>
|