1

public/static/theme/prize/award.js

@@ -0,0 +1,318 @@
+// JavaScript Document
+
+var turnplate={
+		restaraunts:[],				//大转盘奖品名称
+		colors:[],	                //大转盘奖品区块对应背景颜色
+		//fontcolors:[],				//大转盘奖品区块对应文字颜色
+		outsideRadius:222,			//大转盘外圆的半径
+		textRadius:165,				//大转盘奖品位置距离圆心的距离
+		insideRadius:65,			//大转盘内圆的半径
+		startAngle:0,				//开始角度
+		bRotate:false				//false:停止;ture:旋转
+};
+
+var Mar = document.getElementById("Marquee"); 
+var child_div=Mar.getElementsByTagName("div") 
+var picH = 35;//移动高度 
+var scrollstep=3;//移动步幅,越大越快 
+var scrolltime=50;//移动频度(毫秒)越大越慢 
+var stoptime=3000;//间断时间(毫秒) 
+var tmpH = 0; 
+Mar.innerHTML += Mar.innerHTML; 
+function start(){ 
+    if(tmpH < picH){ 
+        tmpH += scrollstep; 
+        if(tmpH > picH )tmpH = picH ; 
+        Mar.scrollTop = tmpH; 
+        setTimeout(start,scrolltime); 
+    }else{ 
+        tmpH = 0; 
+        Mar.appendChild(child_div[0]); 
+        Mar.scrollTop = 0; 
+        setTimeout(start,stoptime); 
+    } 
+}
+
+$(document).ready(function(){
+
+	setTimeout(start,stoptime);
+
+	//动态添加大转盘的奖品与奖品区域背景颜色
+	var num=location.hash;//根据接收过来的值判断概率。
+	//	alert(num.substr(1));
+	//turnplate.fontcolors = ["#CB0030", "#FFFFFF", "#CB0030", "#FFFFFF","#CB0030", "#FFFFFF"];
+	
+	var rotateTimeOut = function (){
+		$('#wheelcanvas').rotate({
+			angle:0,
+			animateTo:2160,
+			duration:6000,
+			callback:function (){
+				alert('网络超时，请检查您的网络设置！');
+			}
+		});
+	};
+	
+	
+	//旋转转盘 item:奖品位置; txt：提示语;
+	var rotateFn = function (item, txt,data){
+		var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
+		if(angles<270){
+			angles = 270 - angles; 
+		}else{
+			angles = 360 - angles + 270;
+		}
+		$('#wheelcanvas').stopRotate();
+		$('#wheelcanvas').rotate({
+			angle:0,
+			animateTo:angles+1800,
+			duration:6000,
+			callback:function (){
+				//中奖页面与谢谢参与页面弹窗
+				if(txt.indexOf("谢谢参与")>=0){
+					$(".xxcy_text").html(data);
+					$("#xxcy-main").fadeIn();
+					save();
+				}else{
+					$("#zj-main").fadeIn();
+					var resultTxt=txt.replace(/[\r\n]/g,"");//去掉回车换行
+					$("#jiangpin").text(data);
+					save();
+				}								
+				turnplate.bRotate = !turnplate.bRotate;
+			}
+		});
+	};
+	
+	/********弹窗页面控制**********/
+	
+	$('.close_zj').click(function(){
+		window.location.reload();
+		$('#zj-main').fadeOut();
+		$('#tx-main').fadeIn();//提醒框显示
+		//判断用户是否确认放弃
+		$(".do").click(function(){//点确认就默认放弃
+			$('#tx-main').fadeOut();
+			theEnd();
+			save();
+		});
+		$(".not_do").click(function(){//点取消就回到提交页面
+			$('#tx-main').fadeOut();
+			$('#zj-main').fadeIn();
+		});
+
+		$('#ml-main').fadeIn();
+		
+	});
+	
+	$('.close_xxcy').click(function(){
+		$('#xxcy-main').fadeOut();
+		window.location.reload();
+//		theEnd();
+//		save();
+	});
+	
+	/********抽奖开始**********/
+	$('#tupBtn').click(function (){
+		if(turnplate.bRotate)return;
+		turnplate.bRotate = !turnplate.bRotate;
+        var item = rnd(turnplate.randomRate);
+        // console.log(item);
+        if(item == 0){
+            item = 6;
+        }
+        // var data = turnplate.restaraunts[item-1];
+        // rotateFn(item, turnplate.restaraunts[item-1],data);
+		// return ;
+		$.ajax({
+			type:"POST",
+			url:"/index/index/prize_start",
+            data: {item:item},
+			dataType:"json",
+            success : function(result){
+				// console.log(result);
+				// return;
+                if(result['code'] == 1){
+                    //奖品数量等于6,指针落在对应奖品区域的中心角度
+                    rotateFn(item, turnplate.restaraunts[item-1], result['info']);
+                    // var html='      <div id="1">'+result['content']+' </div>';
+                    // $("#Marquee").prepend(html);
+                }
+                else if(result['code'] == 2){
+                    msg(result['info'],2,"/index/login");
+                }
+                else{
+                    msg(result['info'],1);
+                }
+            },
+            error:function(){
+                msg("网络繁忙，请刷新后再试！",1);
+            }
+			// success:function(data){
+             //    console.log(data);
+			// 	if(data.state){
+             //        //获取随机数(奖品个数范围内)
+             //        var item = data.index;
+             //        //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
+             //        rotateFn(item, turnplate.restaraunts[item-1],data);
+			// 	}else{
+			// 		if(data.msg == '请先登录'){
+			// 			location.href='/user-login';
+			// 		}
+             //        $(".xxcy_text").html(data.msg);
+             //        $("#xxcy-main").fadeIn();
+             //        return;
+			// 	}
+			// },
+			// error:function(data){
+			// 	console.log("error:"+data);
+			// 	return;
+			// }
+		});
+	})
+		
+});
+function rnd(rate){
+    var random = Math.floor(Math.random() * 100);
+    var myRandom = [];
+    var randomList = [];
+    var randomParent = [];
+    for(var i = 0; i < 100; i++){
+        myRandom.push(parseInt([i]) + 1);
+    }
+    for(var i = 0; i < rate.length; i++){
+        var temp = [];
+        var start = 0;
+        var end = 0;
+        randomList.push(parseInt(rate[i].split('%')[0]));
+        for(var j = 0; j < randomList.length; j++){
+            start += randomList[j-1] || 0
+            end += randomList[j]
+        }
+        temp = myRandom.slice(start, end);
+        randomParent.push(temp)
+    }
+    for(var i = 0; i < randomParent.length; i++){
+        if($.inArray(random, randomParent[i]) > 0){
+            return(i+1)
+        }
+    }
+
+}
+// function rnd(n, m){
+// 	var random = Math.floor(Math.random()*(m-n+1)+n);
+// 	return random;
+// }
+
+//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
+window.onload=function(){
+	drawRouletteWheel();
+};
+
+function drawRouletteWheel() {    
+  var canvas = document.getElementById("wheelcanvas");    
+  if (canvas.getContext) {
+	  //根据奖品个数计算圆周角度
+	  var arc = Math.PI / (turnplate.restaraunts.length/2);
+	  var ctx = canvas.getContext("2d");
+	  //在给定矩形内清空一个矩形
+	  ctx.clearRect(0,0,516,516);
+	  //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
+	  ctx.strokeStyle = "#FFBE04";
+	  //font 属性设置或返回画布上文本内容的当前字体属性
+	  ctx.font = 'bold 22px Microsoft YaHei';      
+	  for(var i = 0; i < turnplate.restaraunts.length; i++) {       
+		  var angle = turnplate.startAngle + i * arc;
+		  ctx.fillStyle = turnplate.colors[i];
+		  ctx.beginPath();
+		  //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
+		  ctx.arc(258, 258, turnplate.outsideRadius, angle, angle + arc, false);    
+		  ctx.arc(258, 258, turnplate.insideRadius, angle + arc, angle, true);
+		  ctx.stroke();  
+		  ctx.fill();
+		  //锁画布(为了保存之前的画布状态)
+		  ctx.save();   
+		  
+		  //----绘制奖品开始----
+		  ctx.fillStyle = "#E83800";
+		  //ctx.fillStyle = turnplate.fontcolors[i];
+		  var text = turnplate.restaraunts[i];
+		  var line_height = 30;
+		  //translate方法重新映射画布上的 (0,0) 位置
+		  ctx.translate(258 + Math.cos(angle + arc / 2) * turnplate.textRadius, 258 + Math.sin(angle + arc / 2) * turnplate.textRadius);
+		  
+		  //rotate方法旋转当前的绘图
+		  ctx.rotate(angle + arc / 2 + Math.PI / 2);
+		  
+		  /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
+		  if(text.indexOf("\n")>0){//换行
+			  var texts = text.split("\n");
+			  for(var j = 0; j<texts.length; j++){
+			  	if(j > 0){
+                    //ctx.font = j == 0?'20px Microsoft YaHei':'20px Microsoft YaHei';
+				}
+				  //ctx.fillStyle = j == 0?'#FFFFFF':'#FFFFFF';
+				  if(j == 0){
+					  //ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height);
+					  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
+				  }else{
+					  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
+				  }
+			  }
+		  }else if(text.indexOf("\n") == -1 && text.length>6){//奖品名称长度超过一定范围 
+			  text = text.substring(0,6)+"||"+text.substring(6);
+			  var texts = text.split("||");
+			  for(var j = 0; j<texts.length; j++){
+				  ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
+			  }
+		  }else{
+
+			  //在画布上绘制填色的文本。文本的默认颜色是黑色
+			  //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
+			  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
+		  }
+		  
+		  //把当前画布返回（调整）到上一个save()状态之前 
+		  ctx.restore();
+		  //----绘制奖品结束----
+	  }     
+  } 
+  
+
+    // 对浏览器的UserAgent进行正则匹配，不含有微信独有标识的则为其他浏览器
+    /*var useragent = navigator.userAgent;
+    if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
+        // 这里警告框会阻塞当前页面继续加载
+        alert('已禁止本次访问：您必须使用微信内置浏览器访问本页面！');
+        // 以下代码是用javascript强行关闭当前页面
+        var opened = window.open('about:blank', '_self');
+        opened.opener = null;
+        opened.close();
+    }*/
+
+
+}
+
+function showDialog(id) {
+    document.getElementById(id).style.display = "-webkit-box";
+}
+
+function showID(id) {    
+    document.getElementById(id).style.display = "block";  
+}
+function hideID(id) {
+    document.getElementById(id).style.display = "none";
+}
+
+//缓存函数
+function save() {
+	localStorage.end=theEnd();
+	localStorage.gifts=$(".cjjg").text();
+}
+
+//提示抽奖结束
+function theEnd() {
+	$('#tupBtn').unbind('click');//提交成功解除点击事件。   
+	return 2;
+}
+

public/static/theme/prize/awardRotate.js

@@ -0,0 +1,302 @@
+(function($) {
+var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" ");
+for (var a=0;a<toCheck.length;a++) if (styles[toCheck[a]] !== undefined) supportedCSS = toCheck[a];
+// Bad eval to preven google closure to remove it from code o_O
+// After compresion replace it back to var IE = 'v' == '\v'
+var IE = eval('"v"=="\v"');
+
+jQuery.fn.extend({
+    rotate:function(parameters)
+    {
+        if (this.length===0||typeof parameters=="undefined") return;
+            if (typeof parameters=="number") parameters={angle:parameters};
+        var returned=[];
+        for (var i=0,i0=this.length;i<i0;i++)
+            {
+                var element=this.get(i);	
+                if (!element.Wilq32 || !element.Wilq32.PhotoEffect) {
+
+                    var paramClone = $.extend(true, {}, parameters); 
+                    var newRotObject = new Wilq32.PhotoEffect(element,paramClone)._rootObj;
+
+                    returned.push($(newRotObject));
+                }
+                else {
+                    element.Wilq32.PhotoEffect._handleRotation(parameters);
+                }
+            }
+            return returned;
+    },
+    getRotateAngle: function(){
+        var ret = [];
+        for (var i=0,i0=this.length;i<i0;i++)
+            {
+                var element=this.get(i);	
+                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
+                    ret[i] = element.Wilq32.PhotoEffect._angle;
+                }
+            }
+            return ret;
+    },
+    stopRotate: function(){
+        for (var i=0,i0=this.length;i<i0;i++)
+            {
+                var element=this.get(i);	
+                if (element.Wilq32 && element.Wilq32.PhotoEffect) {
+                    clearTimeout(element.Wilq32.PhotoEffect._timer);
+                }
+            }
+    }
+});
+
+// Library agnostic interface
+
+Wilq32=window.Wilq32||{};
+Wilq32.PhotoEffect=(function(){
+
+	if (supportedCSS) {
+		return function(img,parameters){
+			img.Wilq32 = {
+				PhotoEffect: this
+			};
+            
+            this._img = this._rootObj = this._eventObj = img;
+            this._handleRotation(parameters);
+		}
+	} else {
+		return function(img,parameters) {
+			// Make sure that class and id are also copied - just in case you would like to refeer to an newly created object
+            this._img = img;
+
+			this._rootObj=document.createElement('span');
+			this._rootObj.style.display="inline-block";
+			this._rootObj.Wilq32 = 
+				{
+					PhotoEffect: this
+				};
+			img.parentNode.insertBefore(this._rootObj,img);
+			
+			if (img.complete) {
+				this._Loader(parameters);
+			} else {
+				var self=this;
+				// TODO: Remove jQuery dependency
+				jQuery(this._img).bind("load", function()
+				{
+					self._Loader(parameters);
+				});
+			}
+		}
+	}
+})();
+
+Wilq32.PhotoEffect.prototype={
+    _setupParameters : function (parameters){
+		this._parameters = this._parameters || {};
+        if (typeof this._angle !== "number") this._angle = 0 ;
+        if (typeof parameters.angle==="number") this._angle = parameters.angle;
+        this._parameters.animateTo = (typeof parameters.animateTo==="number") ? (parameters.animateTo) : (this._angle); 
+
+        this._parameters.step = parameters.step || this._parameters.step || null;
+		this._parameters.easing = parameters.easing || this._parameters.easing || function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }
+		this._parameters.duration = parameters.duration || this._parameters.duration || 1000;
+        this._parameters.callback = parameters.callback || this._parameters.callback || function(){};
+        if (parameters.bind && parameters.bind != this._parameters.bind) this._BindEvents(parameters.bind); 
+	},
+	_handleRotation : function(parameters){
+          this._setupParameters(parameters);
+          if (this._angle==this._parameters.animateTo) {
+              this._rotate(this._angle);
+          }
+          else { 
+              this._animateStart();          
+          }
+	},
+
+	_BindEvents:function(events){
+		if (events && this._eventObj) 
+		{
+            // Unbinding previous Events
+            if (this._parameters.bind){
+                var oldEvents = this._parameters.bind;
+                for (var a in oldEvents) if (oldEvents.hasOwnProperty(a)) 
+                        // TODO: Remove jQuery dependency
+                        jQuery(this._eventObj).unbind(a,oldEvents[a]);
+            }
+
+            this._parameters.bind = events;
+			for (var a in events) if (events.hasOwnProperty(a)) 
+				// TODO: Remove jQuery dependency
+					jQuery(this._eventObj).bind(a,events[a]);
+		}
+	},
+
+	_Loader:(function()
+	{
+		if (IE)
+		return function(parameters)
+		{
+			var width=this._img.width;
+			var height=this._img.height;
+			this._img.parentNode.removeChild(this._img);
+							
+			this._vimage = this.createVMLNode('image');
+			this._vimage.src=this._img.src;
+			this._vimage.style.height=height+"px";
+			this._vimage.style.width=width+"px";
+			this._vimage.style.position="absolute"; // FIXES IE PROBLEM - its only rendered if its on absolute position!
+			this._vimage.style.top = "0px";
+			this._vimage.style.left = "0px";
+
+			/* Group minifying a small 1px precision problem when rotating object */
+			this._container =  this.createVMLNode('group');
+			this._container.style.width=width;
+			this._container.style.height=height;
+			this._container.style.position="absolute";
+			this._container.setAttribute('coordsize',width-1+','+(height-1)); // This -1, -1 trying to fix ugly problem with small displacement on IE
+			this._container.appendChild(this._vimage);
+			
+			this._rootObj.appendChild(this._container);
+			this._rootObj.style.position="relative"; // FIXES IE PROBLEM
+			this._rootObj.style.width=width+"px";
+			this._rootObj.style.height=height+"px";
+			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
+			this._rootObj.className=this._img.className;			
+		    this._eventObj = this._rootObj;	
+		    this._handleRotation(parameters);	
+		}
+		else
+		return function (parameters)
+		{
+			this._rootObj.setAttribute('id',this._img.getAttribute('id'));
+			this._rootObj.className=this._img.className;
+			
+			this._width=this._img.width;
+			this._height=this._img.height;
+			this._widthHalf=this._width/2; // used for optimisation
+			this._heightHalf=this._height/2;// used for optimisation
+			
+			var _widthMax=Math.sqrt((this._height)*(this._height) + (this._width) * (this._width));
+
+			this._widthAdd = _widthMax - this._width;
+			this._heightAdd = _widthMax - this._height;	// widthMax because maxWidth=maxHeight
+			this._widthAddHalf=this._widthAdd/2; // used for optimisation
+			this._heightAddHalf=this._heightAdd/2;// used for optimisation
+			
+			this._img.parentNode.removeChild(this._img);	
+			
+			this._aspectW = ((parseInt(this._img.style.width,10)) || this._width)/this._img.width;
+			this._aspectH = ((parseInt(this._img.style.height,10)) || this._height)/this._img.height;
+			
+			this._canvas=document.createElement('canvas');
+			this._canvas.setAttribute('width',this._width);
+			this._canvas.style.position="relative";
+			this._canvas.style.left = -this._widthAddHalf + "px";
+			this._canvas.style.top = -this._heightAddHalf + "px";
+			this._canvas.Wilq32 = this._rootObj.Wilq32;
+			
+			this._rootObj.appendChild(this._canvas);
+			this._rootObj.style.width=this._width+"px";
+			this._rootObj.style.height=this._height+"px";
+            this._eventObj = this._canvas;
+			
+			this._cnv=this._canvas.getContext('2d');
+            this._handleRotation(parameters);
+		}
+	})(),
+
+	_animateStart:function()
+	{	
+		if (this._timer) {
+			clearTimeout(this._timer);
+		}
+		this._animateStartTime = +new Date;
+		this._animateStartAngle = this._angle;
+		this._animate();
+	},
+    _animate:function()
+    {
+         var actualTime = +new Date;
+         var checkEnd = actualTime - this._animateStartTime > this._parameters.duration;
+
+         // TODO: Bug for animatedGif for static rotation ? (to test)
+         if (checkEnd && !this._parameters.animatedGif) 
+         {
+             clearTimeout(this._timer);
+         }
+         else 
+         {
+             if (this._canvas||this._vimage||this._img) {
+                 var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration);
+                 this._rotate((~~(angle*10))/10);
+             }
+             if (this._parameters.step) {
+                this._parameters.step(this._angle);
+             }
+             var self = this;
+             this._timer = setTimeout(function()
+                     {
+                     self._animate.call(self);
+                     }, 10);
+         }
+
+         // To fix Bug that prevents using recursive function in callback I moved this function to back
+         if (this._parameters.callback && checkEnd){
+             this._angle = this._parameters.animateTo;
+             this._rotate(this._angle);
+             this._parameters.callback.call(this._rootObj);
+         }
+     },
+
+	_rotate : (function()
+	{
+		var rad = Math.PI/180;
+		if (IE)
+		return function(angle)
+		{
+            this._angle = angle;
+			this._container.style.rotation=(angle%360)+"deg";
+		}
+		else if (supportedCSS)
+		return function(angle){
+            this._angle = angle;
+			this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)";
+		}
+		else 
+		return function(angle)
+		{
+            this._angle = angle;
+			angle=(angle%360)* rad;
+			// clear canvas	
+			this._canvas.width = this._width+this._widthAdd;
+			this._canvas.height = this._height+this._heightAdd;
+						
+			// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
+			this._cnv.translate(this._widthAddHalf,this._heightAddHalf);	// at least center image on screen
+			this._cnv.translate(this._widthHalf,this._heightHalf);			// we move image back to its orginal 
+			this._cnv.rotate(angle);										// rotate image
+			this._cnv.translate(-this._widthHalf,-this._heightHalf);		// move image to its center, so we can rotate around its center
+			this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;)
+			this._cnv.drawImage(this._img, 0, 0);							// First - we draw image
+		}
+
+	})()
+}
+
+if (IE)
+{
+Wilq32.PhotoEffect.prototype.createVMLNode=(function(){
+document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
+		try {
+			!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
+			return function (tagName) {
+				return document.createElement('<rvml:' + tagName + ' class="rvml">');
+			};
+		} catch (e) {
+			return function (tagName) {
+				return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
+			};
+		}		
+})();
+}
+})(jQuery);

public/static/theme/prize/component.css

@@ -0,0 +1,302 @@
+@charset "utf-8";
+/*body { background:#eef0f1}*/
+.all_player { width:100%;}
+.ad_content { width:100%; position:fixed; left:0; top:0; z-index:10001;}
+.ad_content span { position:absolute; right:10px; top:10px; color:#FFF; font-size:20px; font-weight:bold;}
+
+/*index*/
+.index_body { background:#f5f3e8; position:relative; overflow:hidden;}
+.index_btnbox { width:100%; height:34px; position:absolute; left:0; bottom:50px;}
+.index_btnbox a { display:block; width:130px; height:32px; line-height:32px; text-align:center; font-size:16px; position:absolute; top:0;border-radius: 17px; -webkit-border-radius: 17px; border:#ff3c4d solid 1px;}
+.index_btnbox a.left { right:50%; margin-right:10px; background-color:#ff3c4d; color:#FFF}
+.index_btnbox a.right { left:50%; margin-left:10px; background-color:#f5f3e8; color:#ff3c4d}
+.index_rulebox { width:300px; position:absolute; left:50%; margin-left:-150px; bottom:0; z-index:9998;}
+.index_rulebox h3 { width:100%; height:32px; line-height:32px; text-indent:10px; font-size:14px; color:#ffffff; background:rgba(161,129,117,.9)}
+.index_rulebox h3 span { display:block; float:right; width:32px; height:32px; margin-right:5px; background:url(../images/uparrow_icon.png) no-repeat center; background-size:18px;}
+.index_rulebox h3 span.down { background:url(../images/downarrow_icon.png) no-repeat center; background-size:18px;}
+.index_rulebox h3 span.close { background:url(../images/close.png) no-repeat center; background-size:18px;}
+.index_rulebox .content { width:100%; height:0; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; background:rgba(255,255,255,.9);transition:.5s; -webkit-transition:.5s;}
+.index_rulebox .content p { font-size:10px; padding:3px 10px; color:#9a604b}
+.index_rulebox .content1 { /*height:340px;*/height:210px;}
+.index_rulebox1 { display:none; bottom:50%; margin-bottom:-160px; position:fixed}
+.index_rule_screen { display:none; width:100%; height:2000px; background-color:rgba(0,0,0,.8); position:fixed; left:0; top:0; z-index:9997;}
+
+/*payer*/
+.header{width:100%; height:40px; margin:0 auto; background:#ff3c4d;}
+.header a { display:inline-block; padding:0 10px 0 25px; height:40px; background-color:#ef3a4a; color:#fefefe; text-align:center; line-height:40px; font-size:12px;}
+.header a.on { background-color:#ff4b5b}
+.header a.new { background-image:url(../images/new_icon.png); background-repeat:no-repeat; background-position:10px 13px; background-size:13px;}
+.header a.hot { background-image:url(../images/hot_icon.png); background-repeat:no-repeat; background-position:10px 13px; background-size:12px;}
+.header a.back { background-image:url(../images/goback.png); background-repeat:no-repeat; background-position:10px 13px; background-size:12px;}
+.search_box { width:165px; height:26px; margin:8px 6px 0 0;border-radius: 15px; -webkit-border-radius: 15px;-webkit-box-shadow:1px 1px 1px rgba(16, 17, 17, .25) inset,1px 1px 1px rgba(255, 255, 255, .1); box-shadow:1px 1px 1px rgba(16, 17, 17, .3) inset,1px 1px 1px rgba(255, 255, 255, .1); background:#d4303f}
+.search_box span { display:block; width:32px; height:26px; float:right; background:url(../images/seach_icon.png) no-repeat center; background-size:15px; cursor:pointer}
+.search_box input { width:120px; height:26px; border:none; background:none; padding-left:10px; color:#ff5c6a;}
+.footer{width: 100%;height: 44px;margin:0 auto;background: #0a264a;color: #ffffff;text-align: center;font-size: 14px;line-height: 44px;}
+
+.player_listbox { width:100%;}
+.grid {max-width: 69em;list-style: none;margin: 0 auto;padding: 0;}
+.grid li { display:block; float: left;padding: 5px;width: 50%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;opacity:0;}
+.grid li .content {display:-moz-box; display:-webkit-box; display:box; width:100%; height:26px; line-height:26px; color:#3f3f3f; font-size:12px; background:#FFF; text-indent:5px;}
+.grid li .content span {-moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1.0; display:block; height:26px; padding-right:10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
+.grid li .content i { display:inline-block; padding:0 5px 0 8px; color:#898989; font-size:10px; font-style:normal; background:url(../images/heart_icon.png) left 8px no-repeat; background-size:10px;}
+
+.grid li.shown,.no-js .grid li,.no-cssanimations .grid li {opacity: 1;}
+.grid li a,.grid li img {outline: none;border: none;display: block;max-width: 100%;}
+
+/* Effect 2: Move Up */
+.grid.effect-2 li.animate {
+	-webkit-transform: translateY(200px);
+	transform: translateY(200px);
+	-webkit-animation: moveUp 0.35s ease forwards;
+	animation: moveUp 0.35s ease forwards;
+}
+
+@-webkit-keyframes moveUp {
+	0% { }
+	100% { -webkit-transform: translateY(0); opacity: 1; }
+}
+
+@keyframes moveUp {
+	0% { }
+	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
+}
+
+
+@media screen and (max-width: 900px) {
+	.grid li {width: 50%;}
+}
+
+@media screen and (max-width: 400px) {
+	.grid li {width: 50%;}
+}
+
+
+/*contestant*/
+.all_contestant { width:100%; background:#eef0f1;}
+.all_contestant .banner { width:100%; position:relative;}
+.share_btoom { width:100%; height:30px; position:absolute; left:0; bottom:5px; text-align:right; color:#FFF; font-size:12px; line-height:30px;}
+.share_btoom .shareLink { display:inline-block; margin-right:5px;}
+.share_img { width:24px; height:auto; vertical-align:-7px;}
+.pm_box { display:inline-block; position:absolute; left:0; bottom:8px; height:20px; line-height:20px; padding:0 15px 0 10px; color:#FFF; font-size:12px; background:url(../images/pm_icon.png) right top no-repeat; background-size:auto 20px;}
+
+.player_info { width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:10px; background:#dbdbdb; font-size:12px; color:#3a3a3a;}
+.player_info b { color:#ff3c4d}
+.psor_btnbox { width:100%; height:100px; margin-top:20px; position:relative}
+.psor_btnbox a { display:block; width:62px; height:65px; position:absolute; left:50%; top:0; margin-top:16px;}
+.psor_btnbox a.other { margin-left:-130px; background:url(../images/other_pic.png) no-repeat; background-size:contain;}
+.psor_btnbox a.want { margin-left:68px; background:url(../images/want_add.png) no-repeat; background-size:contain;}
+.psor_btnbox a.zan { width:95px; height:98px; margin-top:0; margin-left:-48px; background:url(../images/zan_foru.png) no-repeat; background-size:contain;}
+.psor_btnbox a.get { margin-left:68px; background:url(../images/get_lw.png) no-repeat; background-size:contain;}
+.psor_zannun { width:100%; height:34px; line-height:34px; text-align:center; color:#3a3a3a; font-size:12px;}
+.psor_zannun b { color:#ff3c4d; font-size:16px; vertical-align:-1px;}
+.psor_btnbox a.zan span.heart_scale { display:block; width:40px; height:36px; position:absolute; left:50%; top:21px; margin-left:-20px; background:url(../images/z_heart.png) no-repeat center; background-size:contain;-webkit-transform-origin: center center; transform-origin: center center;-webkit-animation:heart_scale 1s .2s infinite linear;animation:heart_scale 1s .2s infinite linear}
+@-webkit-keyframes heart_scale{
+0%,100%{-webkit-transform:scale(.9)}
+50%{-webkit-transform:scale(1)}
+}
+@keyframes heart_scale{
+0%,100%{transform:scale(.9)}
+50%{transform:scale(1)}
+}
+.psor_btnbox a.zan span.up_oneheart { opacity:0; width:50px; height:50px; position:absolute; left:50%; top:50%; margin:-35px 0 0 -25px; background:url(../images/up_one.png) no-repeat; background-size:contain;}
+.up_one {-webkit-transform-origin: center center; transform-origin: center center;-webkit-animation:up_one 1s .4s both linear;animation:up_one 1s .4s both linear}
+@-webkit-keyframes up_one{
+0%{-webkit-transform:scale(.9); opacity:1}
+100%{-webkit-transform:scale(3); opacity:0}
+}
+@keyframes up_one{
+0%{transform:scale(.9); opacity:1}
+100%{transform:scale(3); opacity:0}
+}
+
+.pl_box,.pl_addbox { width:100%; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:10px;}
+.pl_box h3 { width:100%; height:22px; border-bottom:#dddddd solid 1px;}
+.pl_box h3 span { display:inline-block; height:20px; line-height:20px; border-bottom:#ff3c4d solid 2px; color:#3a3a3a; font-size:14px;}
+.pl_box li { width:100%; border-bottom:#bdbdbd dashed 1px; padding:10px 0; font-size:12px; line-height:16px;}
+.pl_box li b { color:#ff3c4d;}
+.pl_box li p { color:#707070;}
+
+.pl_addbox h3 { width:100%; height:22px; color:#3a3a3a; font-size:12px; font-weight:bold}
+.pl_content { width:100%; height:110px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; border:#dbdbdb solid 1px; background:#FFF;}
+#pl_content { width:100%; height:108px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; padding:10px; border:none; background:none;}
+.pl_submit { display:block; margin:10px 0 20px; float:left; width:100px; height:32px; line-height:32px; text-align:center; font-size:16px; border-radius: 17px; -webkit-border-radius: 17px; border:#ff3c4d solid 1px; background-color:#ff3c4d; color:#FFF}
+
+.pyq_box { display:none; width:100%; height:2000px; position:fixed; left:0; top:0; background:url(../images/pqt.png) no-repeat right top rgba(0,0,0,.7); background-size:120px;}
+
+.get_screen { display:none; width:100%; height:2000px; position:fixed; left:0; top:0; background:rgba(0,0,0,.8); z-index:1000}
+.get_screen .info { display:none; width:280px; position:fixed; left:50%; top:50%; margin:-140px 0 0 -140px; background:#FFF; padding:10px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+.get_screen .info h3 { height:30px; line-height:30px; text-align:center; color:#ff3c4d; font-size:20px;}
+.get_screen .info h3.sorry { font-size:14px; color:#484848}
+.get_screen .info p { font-size:12px; color:#555555; padding-top:5px;}
+.get_screen .info span.get_close { display:block; width:40px; height:40px; position:absolute; right:-7px; top:-33px; background:url(../images/close.png) no-repeat center; background-size:25px;}
+
+/*updata*/
+.all_update { width:100%;}
+.update_content { min-width:320px; max-width:100%;margin: 0 auto; padding:20px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+.updata_top { width:100%; position:relative; background:url(../images/mylike_bg.jpg); background-size:contain; text-align:center;}
+.upload_img_btn { width:100%; height:100%; position:absolute; left:0; top:0; background:url(../images/canno_icon.png) no-repeat center; background-size:72px;}
+.upload_img_btn input { width:100%; height:100%; margin:0; padding:0; vertical-align:top; opacity:0;}
+.tk_ttts { color:#838383; font-size:12px; padding:4px 0; text-align:right;}
+.update_content b,.user_info_tr span b { color:#ff3c4d; font-size:24px; font-weight:normal; vertical-align:-9px;}
+
+.user_info_box { width:100%; position:relative;}
+.user_info_tr { display:-moz-box; display:-webkit-box; display:box; height:26px; margin-top:10px;}
+.user_info_tr2 { height:auto;}
+.user_info_tr span { display:block; width:75px; height:26px; text-align:right; line-height:26px; color:#666666; font-size:12px;}
+.user_info_tr .div_r {-moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1.0; border:#bababa solid 1px; background:#FFF;}
+.user_info_tr .div_r input { border:none; background:#FFF; padding-left:5px; width:100%; height:24px; line-height:24px; font-size:12px; color:#999; font-family:'微软雅黑'; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+.user_info_tr .div_r textarea { width:100%; padding:5px; height:65px; border:none; background:#FFF; font-size:12px; color:#999; line-height:18px; font-family:'微软雅黑'; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
+.user_info_tr1 { height:36px; margin-top:30px;}
+.user_submit_btn { display:block; width:130px; height:32px; line-height:32px; text-align:center; font-size:16px; border-radius: 17px; -webkit-border-radius: 17px; border:#ff3c4d solid 1px; background-color:#ff3c4d; color:#FFF; margin-left:75px;}
+.sex_l { float:left; width:50%; height:24px; line-height:24px; text-align:center; color:#999}
+.sex_l_on { background:#bababa; color:#FFF;}
+
+.floatright_box { width:45px; position:fixed; right:0; bottom:0;z-index:999;}
+.floatright_box a { display:block; width:45px; height:36px; padding-top:5px; color:#FFF; font-size:12px; font-weight:bold; text-align:center; line-height:14px;}
+.floatright_box a.bdyx,.floatright_box a.ljdj { background-color:rgba(255,75,91,.9);}
+.floatright_box a.bdgz { background-color:rgba(239,58,74,.9);}
+.floatright_box a.scroll_top { background-color:rgba(255,75,91,.9); background-image:url(../images/uparrow_icon.png); background-repeat:no-repeat; background-size:19px; background-position:center;}
+
+.upload_screen { display:none; width:100%; height:2000px; background:rgba(255,255,255,.8); position:fixed; left:0; top:0; z-index:10000;}
+.spinner {position:fixed;left:50%;top:50%;margin:-70px 0 0 -45px;width: 90px;height: 80px;text-align: center; font-size: 12px; color:#666;}
+.spinner p { line-height:18px;}
+.spinner > div {
+  background-color: #ff3c4d;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+  
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes stretchdelay {
+  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
+  20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes stretchdelay {
+  0%, 40%, 100% { 
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }  20% { 
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
+
+load_box { position:relative;transform-style: preserve-3d;}
+.load2 {
+  width: 60px;
+  height: 60px;
+  position:fixed;
+  left:50%;
+  top:50%;
+  margin:-30px 0 0 -30px;
+  z-index:101010101;
+  background:url(../images/loading.jpg) no-repeat;
+  -webkit-animation: rotateplane 2.4s infinite ease-in-out;
+  animation: rotateplane 2.4s infinite ease-in-out;
+}
+.loadtxt { width:100px; height:24px; line-height:24px; text-align:center; color:#5d5d5d; font-size:12px; position:fixed; left:50%; top:50%; margin:40px 0 0 -50px;}
+@-webkit-keyframes rotateplane {
+  0% { -webkit-transform: perspective(120px) }
+  25% { -webkit-transform: perspective(120px) rotateY(180deg) }
+  50% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+  75% { -webkit-transform: perspective(120px)  rotateX(180deg) }
+  100% { -webkit-transform: perspective(120px) }
+}
+@keyframes rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+  } 25% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+  } 50% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }75% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
+  }
+  100% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  }
+}
+
+.screen_tc { display:none; width:100%; height:2000px; position:fixed; left:0; top:0; background:rgba(0,0,0,.7); z-index:1000000}
+.screen_tc .dianz_tc{width:80%;height:auto;position:fixed;top:33%;left:10%;background: url(../images/zj_1.png) center ; background-size: 100% 100%;z-idnex:10000;}
+.dianz_tc h3{font-size:18px;font-weight:bold;width:100%;height:auto;margin:0 auto;color:#e32d2c;line-height:140%;text-align:center;margin-top:5%;}
+.dianz_tc .zixun{width:50%;height:auto;font-size:16px;line-height:140%;color:#ffffff;text-align:center;background:#ad0004;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;margin:5% auto 7% auto}
+.dianz_tc .zixun a{color:#ffffff;display:block;width:100%;height:auto;}
+.screen_tc .screen_tc_close{width:25px;height:25px;position:fixed;top:32%;right:8%;background:url(../images/close_1.png) no-repeat center; background-size:25px;z-idnex:10000;}
+
+.jd_alert { display:none; width:240px; padding:10px; position:fixed; left:50%; top:50%; margin:-70px 0 0 -130px; background:#FFF; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; box-shadow:0 3px 3px 0px rgba(0,0,0,.7);z-index:10000002}
+.jd_alert h3 { height:26px; line-height:26px; border-bottom:#CCC solid 1px; font-size:14px; font-weight:bold;}
+.jd_alert p { text-align:center; font-size:12px; color:#000; padding:15px 0;}
+.jd_alert span { display:block; width:100%; height:30px; line-height:30px; border-top:#CCC solid 1px; text-align:center; color:#09F; font-size:14px; font-weight:bold;}
+
+/* entire container, keeps perspective */
+.flip-container {
+	perspective: 1000;
+	position:fixed; left:0; top:0;
+}
+	/* flip the pane when hovered */
+	.flip-container:hover .flipper, .flip-container.hover .flipper {
+		transform: rotateY(180deg);
+	}
+
+.flip-container, .front, .back {
+	width: 320px;
+	height: 480px;
+	background:#09C
+}
+
+/* flip speed goes here */
+.flipper {
+	transition: 0.6s;
+	transform-style: preserve-3d;
+
+	position: relative;
+}
+
+/* hide back of pane during swap */
+.front, .back {
+	backface-visibility: hidden;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+/* front pane, placed above back */
+.front {
+	z-index: 2;
+}
+
+/* back, initially hidden pane */
+.back {
+	transform: rotateY(180deg);
+}