|  | @@ -0,0 +1,673 @@
 | 
	
		
			
				|  |  | +<!DOCTYPE html>
 | 
	
		
			
				|  |  | +<html lang="en">
 | 
	
		
			
				|  |  | +<head>
 | 
	
		
			
				|  |  | +    <meta charset="UTF-8" />
 | 
	
		
			
				|  |  | +    <meta
 | 
	
		
			
				|  |  | +            name="viewport"
 | 
	
		
			
				|  |  | +            content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
 | 
	
		
			
				|  |  | +    />
 | 
	
		
			
				|  |  | +    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 | 
	
		
			
				|  |  | +    <title>抽大奖</title>
 | 
	
		
			
				|  |  | +    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 | 
	
		
			
				|  |  | +    <style>
 | 
	
		
			
				|  |  | +        html,
 | 
	
		
			
				|  |  | +        body {
 | 
	
		
			
				|  |  | +            height: 100%;
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +            font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue",
 | 
	
		
			
				|  |  | +            "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
 | 
	
		
			
				|  |  | +            Arial, sans-serif;
 | 
	
		
			
				|  |  | +            padding: 0;
 | 
	
		
			
				|  |  | +            margin: 0;
 | 
	
		
			
				|  |  | +            background-color: #ba3d26;
 | 
	
		
			
				|  |  | +            font-size: 100px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .main_box {
 | 
	
		
			
				|  |  | +            position: relative;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .bg {
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .slider #slider {
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +            height: 0.3rem;
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 16%;
 | 
	
		
			
				|  |  | +            left: 0;
 | 
	
		
			
				|  |  | +            right: 0;
 | 
	
		
			
				|  |  | +            overflow: hidden;
 | 
	
		
			
				|  |  | +            font-size: 0.14rem;
 | 
	
		
			
				|  |  | +            text-align: center;
 | 
	
		
			
				|  |  | +            line-height: 0.3rem;
 | 
	
		
			
				|  |  | +            color: #590700;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .slider #slider .slider-img {
 | 
	
		
			
				|  |  | +            background: #ffffff;
 | 
	
		
			
				|  |  | +            width: 3rem;
 | 
	
		
			
				|  |  | +            height: 100%;
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            -webkit-transform: translateX(-50%);
 | 
	
		
			
				|  |  | +            transform: translateX(-50%);
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            top: 0;
 | 
	
		
			
				|  |  | +            z-index: -1;
 | 
	
		
			
				|  |  | +            border-radius: 15px;
 | 
	
		
			
				|  |  | +            opacity: 0.72;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .slider #slider .slider-img.active {
 | 
	
		
			
				|  |  | +            z-index: auto;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .slider #slider .slider-nav-list {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            bottom: 5%;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            transform: translateX(-50%);
 | 
	
		
			
				|  |  | +            -webkit-transform: translateX(-50%);
 | 
	
		
			
				|  |  | +            list-style: none;
 | 
	
		
			
				|  |  | +            margin: 0;
 | 
	
		
			
				|  |  | +            padding: 0;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .slider #slider .slider-nav-list .nav-item {
 | 
	
		
			
				|  |  | +            width: 8px;
 | 
	
		
			
				|  |  | +            height: 8px;
 | 
	
		
			
				|  |  | +            border-radius: 50%;
 | 
	
		
			
				|  |  | +            background: #fff;
 | 
	
		
			
				|  |  | +            display: inline-block;
 | 
	
		
			
				|  |  | +            margin: 0 8px;
 | 
	
		
			
				|  |  | +            cursor: pointer;
 | 
	
		
			
				|  |  | +            -webkit-transition: all 0.5s linear;
 | 
	
		
			
				|  |  | +            transition: all 0.5s linear;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .slider #slider .slider-nav-list .nav-item.active {
 | 
	
		
			
				|  |  | +            margin-bottom: -1px;
 | 
	
		
			
				|  |  | +            width: 10px;
 | 
	
		
			
				|  |  | +            height: 10px;
 | 
	
		
			
				|  |  | +            background: #ff9800;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .time {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 22%;
 | 
	
		
			
				|  |  | +            width: 50%;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +            display: -webkit-box;
 | 
	
		
			
				|  |  | +            display: -ms-flexbox;
 | 
	
		
			
				|  |  | +            display: flex;
 | 
	
		
			
				|  |  | +            -webkit-box-pack: justify;
 | 
	
		
			
				|  |  | +            -ms-flex-pack: justify;
 | 
	
		
			
				|  |  | +            justify-content: space-between;
 | 
	
		
			
				|  |  | +            font-size: 0.12rem;
 | 
	
		
			
				|  |  | +            font-weight: bold;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .time div {
 | 
	
		
			
				|  |  | +            color: #ffffff;
 | 
	
		
			
				|  |  | +            padding: 0.05rem 0;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .time span {
 | 
	
		
			
				|  |  | +            background-color: #ffffff;
 | 
	
		
			
				|  |  | +            color: #c13b22;
 | 
	
		
			
				|  |  | +            padding: 0.05rem;
 | 
	
		
			
				|  |  | +            border-radius: 0.05rem;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .zp_out {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 28%;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +            width: 63.5%;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .zp_out .zp {
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +            -webkit-transition: -webkit-transform 5s ease;
 | 
	
		
			
				|  |  | +            transition: -webkit-transform 5s ease;
 | 
	
		
			
				|  |  | +            transition: transform 5s ease;
 | 
	
		
			
				|  |  | +            transition: transform 5s ease, -webkit-transform 5s ease;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .zz {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 35%;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +            font-size: 0.16rem;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .zz img {
 | 
	
		
			
				|  |  | +            width: 1rem;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .zz span {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 38%;
 | 
	
		
			
				|  |  | +            left: 55%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +            width: 0.4rem;
 | 
	
		
			
				|  |  | +            color: white;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        .index .zz .quantity {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 38%;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +            width: 45%;
 | 
	
		
			
				|  |  | +            color: white;
 | 
	
		
			
				|  |  | +            text-align: center;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        .index .button {
 | 
	
		
			
				|  |  | +            font-size: 0.25rem;
 | 
	
		
			
				|  |  | +            color: #9b1800;
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 61%;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        #lottery_button{
 | 
	
		
			
				|  |  | +            display: inline-block;
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +            text-align: center;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .button img {
 | 
	
		
			
				|  |  | +            width: 3rem;
 | 
	
		
			
				|  |  | +            height: 0.5rem;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .button div {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            text-align: center;
 | 
	
		
			
				|  |  | +            font-weight: bold;
 | 
	
		
			
				|  |  | +            line-height: 0.5rem;
 | 
	
		
			
				|  |  | +            width: 3rem;
 | 
	
		
			
				|  |  | +            top: 0;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .remaining {
 | 
	
		
			
				|  |  | +            display: -webkit-box;
 | 
	
		
			
				|  |  | +            display: -ms-flexbox;
 | 
	
		
			
				|  |  | +            display: flex;
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 69%;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +            font-size: 0.15rem;
 | 
	
		
			
				|  |  | +            color: #ffd264;
 | 
	
		
			
				|  |  | +            white-space: nowrap;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .remaining .rmb {
 | 
	
		
			
				|  |  | +            background-color: #ffd264;
 | 
	
		
			
				|  |  | +            padding: 0.03rem 0.05rem;
 | 
	
		
			
				|  |  | +            border-radius: 100px;
 | 
	
		
			
				|  |  | +            color: #ba3d26;
 | 
	
		
			
				|  |  | +            margin-right: 0.1rem;
 | 
	
		
			
				|  |  | +            font-weight: bold;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .remaining .remaining-rmb {
 | 
	
		
			
				|  |  | +            line-height: 0.25rem;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .rule {
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            top: 75%;
 | 
	
		
			
				|  |  | +            width: 100%;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .rule .rule_title {
 | 
	
		
			
				|  |  | +            display: -webkit-box;
 | 
	
		
			
				|  |  | +            display: -ms-flexbox;
 | 
	
		
			
				|  |  | +            display: flex;
 | 
	
		
			
				|  |  | +            -webkit-box-pack: justify;
 | 
	
		
			
				|  |  | +            -ms-flex-pack: justify;
 | 
	
		
			
				|  |  | +            justify-content: space-between;
 | 
	
		
			
				|  |  | +            padding: 0 0.77rem;
 | 
	
		
			
				|  |  | +            font-size: 0.15rem;
 | 
	
		
			
				|  |  | +            color: #fabbaf;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .rule .rule_title div {
 | 
	
		
			
				|  |  | +            padding: 0 0.1rem;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .rule .rule_title .rule_title_active {
 | 
	
		
			
				|  |  | +            padding-bottom: 0.1rem;
 | 
	
		
			
				|  |  | +            border-bottom: 0.02rem solid #fabbaf;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .index .rule .rule_content {
 | 
	
		
			
				|  |  | +            padding: 0 0.325rem;
 | 
	
		
			
				|  |  | +            font-size: 0.12rem;
 | 
	
		
			
				|  |  | +            color: #fabbaf;
 | 
	
		
			
				|  |  | +            overflow-y: scroll;
 | 
	
		
			
				|  |  | +            height: 1.25rem;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .dialog {
 | 
	
		
			
				|  |  | +            position: fixed;
 | 
	
		
			
				|  |  | +            top: 0;
 | 
	
		
			
				|  |  | +            bottom: 0;
 | 
	
		
			
				|  |  | +            left: 0;
 | 
	
		
			
				|  |  | +            right: 0;
 | 
	
		
			
				|  |  | +            background: rgba(0, 0, 0, 0.6);
 | 
	
		
			
				|  |  | +            z-index: 9999;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .dialog .content {
 | 
	
		
			
				|  |  | +            position: fixed;
 | 
	
		
			
				|  |  | +            width: 90%;
 | 
	
		
			
				|  |  | +            height: 3.5rem;
 | 
	
		
			
				|  |  | +            top: 45%;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%, -50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%, -50%);
 | 
	
		
			
				|  |  | +            background: top/cover url(https://cdn-novel.iycdm.com/h5/activity-2019-05-30/get.png) no-repeat;
 | 
	
		
			
				|  |  | +            font-size: 0;
 | 
	
		
			
				|  |  | +            border-radius: 6px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .dialog .content .winning-content {
 | 
	
		
			
				|  |  | +            top: 2rem;
 | 
	
		
			
				|  |  | +            font-size: 0.24rem;
 | 
	
		
			
				|  |  | +            font-weight: bold;
 | 
	
		
			
				|  |  | +            position: absolute;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%, -50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%, -50%);
 | 
	
		
			
				|  |  | +            white-space: nowrap;
 | 
	
		
			
				|  |  | +            color: white;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .dialog .content .winning-content span {
 | 
	
		
			
				|  |  | +            color: #ffdc80;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .dialog .content .dialog_button {
 | 
	
		
			
				|  |  | +            width: 3rem;
 | 
	
		
			
				|  |  | +            height: 0.5rem;
 | 
	
		
			
				|  |  | +            position: relative;
 | 
	
		
			
				|  |  | +            top: 2.6rem;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .dialog .content .dialog_close {
 | 
	
		
			
				|  |  | +            position: relative;
 | 
	
		
			
				|  |  | +            top: 3.3rem;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +            width: 0.3rem;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .wei-dialog {
 | 
	
		
			
				|  |  | +            position: fixed;
 | 
	
		
			
				|  |  | +            top: 0;
 | 
	
		
			
				|  |  | +            bottom: 0;
 | 
	
		
			
				|  |  | +            left: 0;
 | 
	
		
			
				|  |  | +            right: 0;
 | 
	
		
			
				|  |  | +            background: rgba(0, 0, 0, 0.6);
 | 
	
		
			
				|  |  | +            z-index: 9999;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .wei-dialog .content {
 | 
	
		
			
				|  |  | +            position: fixed;
 | 
	
		
			
				|  |  | +            width: 90%;
 | 
	
		
			
				|  |  | +            height: 2.4rem;
 | 
	
		
			
				|  |  | +            top: 50%;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%, -50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%, -50%);
 | 
	
		
			
				|  |  | +            background: top/cover url(https://cdn-novel.iycdm.com/h5/activity-2019-05-30/failure.png) no-repeat;
 | 
	
		
			
				|  |  | +            font-size: 0;
 | 
	
		
			
				|  |  | +            border-radius: 6px;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .wei-dialog .content .wei-dialog_button {
 | 
	
		
			
				|  |  | +            width: 3rem;
 | 
	
		
			
				|  |  | +            height: 0.5rem;
 | 
	
		
			
				|  |  | +            position: relative;
 | 
	
		
			
				|  |  | +            top: 1.55rem;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .wei-dialog .content .wei-dialog_close {
 | 
	
		
			
				|  |  | +            position: relative;
 | 
	
		
			
				|  |  | +            top: 2.5rem;
 | 
	
		
			
				|  |  | +            left: 50%;
 | 
	
		
			
				|  |  | +            -webkit-transform: translate(-50%);
 | 
	
		
			
				|  |  | +            transform: translate(-50%);
 | 
	
		
			
				|  |  | +            width: 0.3rem;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        .hide{
 | 
	
		
			
				|  |  | +            display: none;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    </style>
 | 
	
		
			
				|  |  | +</head>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<body>
 | 
	
		
			
				|  |  | +<main class="main_box">
 | 
	
		
			
				|  |  | +    <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/bg1.jpg" class="bg" />
 | 
	
		
			
				|  |  | +    <div class="index">
 | 
	
		
			
				|  |  | +        <div class="slider">
 | 
	
		
			
				|  |  | +            <div id="slider">
 | 
	
		
			
				|  |  | +                <div class="slider-img active">香草姑娘  6月13日   11:14 获得 1000书币</div>
 | 
	
		
			
				|  |  | +                <div class="slider-img">雨过天琴   6月13日   11: 01获得 年费vip会员</div>
 | 
	
		
			
				|  |  | +                {{--<div class="slider-img">培训师钮维娜 5月22日 10:05 获得 500元京东卡</div>
 | 
	
		
			
				|  |  | +                <div class="slider-img">香草姑娘 5月22日 6:11 获得1000书币</div>
 | 
	
		
			
				|  |  | +                <div class="slider-img">liwenwen 5月22日 14:48 获得1000书币</div>--}}
 | 
	
		
			
				|  |  | +                <!-- <ul class="slider-nav-list">
 | 
	
		
			
				|  |  | +                  <li class="nav-item active"></li>
 | 
	
		
			
				|  |  | +                  <li class="nav-item"></li>
 | 
	
		
			
				|  |  | +                  <li class="nav-item"></li>
 | 
	
		
			
				|  |  | +                </ul> -->
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <div class="time">
 | 
	
		
			
				|  |  | +            <span>活动倒计时</span>
 | 
	
		
			
				|  |  | +            <span id="hour">00</span>
 | 
	
		
			
				|  |  | +            <div>:</div>
 | 
	
		
			
				|  |  | +            <span id="minute">00</span>
 | 
	
		
			
				|  |  | +            <div>:</div>
 | 
	
		
			
				|  |  | +            <span id="second">00</span>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <div class="zp_out">
 | 
	
		
			
				|  |  | +            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/plate.png" class="zp" />
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <div class="zz">
 | 
	
		
			
				|  |  | +            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/point.png" />
 | 
	
		
			
				|  |  | +            <div class="quantity">
 | 
	
		
			
				|  |  | +                <div>剩余</div>
 | 
	
		
			
				|  |  | +                <div id="left_count">{{$count}}次</div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <div class="button">
 | 
	
		
			
				|  |  | +            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/button.png" />
 | 
	
		
			
				|  |  | +            @if($count >0)
 | 
	
		
			
				|  |  | +                <div id="lottery_button">立即抽奖</div>
 | 
	
		
			
				|  |  | +            @else
 | 
	
		
			
				|  |  | +                <div id="lottery_button">充值后才可抽奖</div>
 | 
	
		
			
				|  |  | +            @endif
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <div class="remaining">
 | 
	
		
			
				|  |  | +            <div class="rmb">¥</div>
 | 
	
		
			
				|  |  | +            <div class="remaining-rmb">奖金池剩余:{{$total}}书币</div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +        <div class="rule">
 | 
	
		
			
				|  |  | +            <div class="rule_title">
 | 
	
		
			
				|  |  | +                <div class="rule_title_bt rule_title_active" data-toggle="role">活动规则</div>
 | 
	
		
			
				|  |  | +                <div class="rule_title_bt" data-toggle="record">中奖记录</div>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            <div class="rule_content" >
 | 
	
		
			
				|  |  | +                <p>1、书币奖品实时到账;</p>
 | 
	
		
			
				|  |  | +                <p>
 | 
	
		
			
				|  |  | +                    2、抽到实物奖品用户需先填手机号和身份证信息,客服
 | 
	
		
			
				|  |  | +                    确认信息后将会在7个工作日寄出;
 | 
	
		
			
				|  |  | +                </p>
 | 
	
		
			
				|  |  | +                <p>
 | 
	
		
			
				|  |  | +                    3、抽奖机会必须在活动充值页面成功充值后获得,其余
 | 
	
		
			
				|  |  | +                    充值页面充值不会获得抽奖机会;
 | 
	
		
			
				|  |  | +                </p>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +    <div class="dialog" style="display:none">
 | 
	
		
			
				|  |  | +        <div class="content">
 | 
	
		
			
				|  |  | +            <div class="winning-content">恭喜您抽中<span id="price">0书币</span></div>
 | 
	
		
			
				|  |  | +            <div class="dialog_button"></div>
 | 
	
		
			
				|  |  | +            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/close.png" class="dialog_close" />
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +    <div class="wei-dialog" style="display:none">
 | 
	
		
			
				|  |  | +        <div class="content">
 | 
	
		
			
				|  |  | +            <div class="wei-dialog_button"></div>
 | 
	
		
			
				|  |  | +            <img src="https://cdn-novel.iycdm.com/h5/activity-2019-05-30/close.png" class="wei-dialog_close" />
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +</main>
 | 
	
		
			
				|  |  | +<div class="hide" id="record">
 | 
	
		
			
				|  |  | +    @foreach($list as $item)
 | 
	
		
			
				|  |  | +        <p>{{$item->created_at}}------------------ {{$item->price}}书币</p>
 | 
	
		
			
				|  |  | +    @endforeach
 | 
	
		
			
				|  |  | +</div>
 | 
	
		
			
				|  |  | +<div class="hide" id="role">
 | 
	
		
			
				|  |  | +    <p>1、书币奖品实时到账;</p>
 | 
	
		
			
				|  |  | +    <p>
 | 
	
		
			
				|  |  | +        2、抽到实物奖品用户需先填手机号和身份证信息,客服
 | 
	
		
			
				|  |  | +        确认信息后将会在7个工作日寄出;
 | 
	
		
			
				|  |  | +    </p>
 | 
	
		
			
				|  |  | +    <p>
 | 
	
		
			
				|  |  | +        3、抽奖机会必须在活动充值页面成功充值后获得,其余
 | 
	
		
			
				|  |  | +        充值页面充值不会获得抽奖机会;
 | 
	
		
			
				|  |  | +    </p>
 | 
	
		
			
				|  |  | +</div>
 | 
	
		
			
				|  |  | +</body>
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +    //轮播
 | 
	
		
			
				|  |  | +    function carousel() {
 | 
	
		
			
				|  |  | +        var interval = 3000; //间隔多久轮换一次
 | 
	
		
			
				|  |  | +        var duration = 3000; //轮换动画的持续时间
 | 
	
		
			
				|  |  | +        var cur = 0; //当前图片的下标
 | 
	
		
			
				|  |  | +        var next = 1; //下一个图片的下标
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        //   var li_list = $(".nav-item");
 | 
	
		
			
				|  |  | +        var img_list = $(".slider-img");
 | 
	
		
			
				|  |  | +        setInterval(function() {
 | 
	
		
			
				|  |  | +            sliderImg();
 | 
	
		
			
				|  |  | +        }, interval);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        function sliderImg() {
 | 
	
		
			
				|  |  | +            //轮换导航
 | 
	
		
			
				|  |  | +            // li_list
 | 
	
		
			
				|  |  | +            //   .eq(next)
 | 
	
		
			
				|  |  | +            //   .addClass("active")
 | 
	
		
			
				|  |  | +            //   .siblings()
 | 
	
		
			
				|  |  | +            //   .removeClass("active");
 | 
	
		
			
				|  |  | +            //轮换图片
 | 
	
		
			
				|  |  | +            img_list.eq(cur).animate(
 | 
	
		
			
				|  |  | +                    {
 | 
	
		
			
				|  |  | +                        left: "-150%"
 | 
	
		
			
				|  |  | +                    },
 | 
	
		
			
				|  |  | +                    duration,
 | 
	
		
			
				|  |  | +                    function() {
 | 
	
		
			
				|  |  | +                        $(this).removeClass("active");
 | 
	
		
			
				|  |  | +                    }
 | 
	
		
			
				|  |  | +            );
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            img_list
 | 
	
		
			
				|  |  | +                    .eq(next)
 | 
	
		
			
				|  |  | +                    .addClass("active")
 | 
	
		
			
				|  |  | +                    .css("left", "150%")
 | 
	
		
			
				|  |  | +                    .animate({ left: "50%" }, duration);
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +            cur = next;
 | 
	
		
			
				|  |  | +            next++;
 | 
	
		
			
				|  |  | +            if (next >= img_list.length) {
 | 
	
		
			
				|  |  | +                next = 0;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    carousel();
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    var time_diff = {{$time_diff}}
 | 
	
		
			
				|  |  | +    time_diff = parseInt(time_diff);
 | 
	
		
			
				|  |  | +    var oHour = document.querySelector('#hour');
 | 
	
		
			
				|  |  | +    var oMinute = document.querySelector('#minute');
 | 
	
		
			
				|  |  | +    var oSecond = document.querySelector('#second');
 | 
	
		
			
				|  |  | +    function times() {
 | 
	
		
			
				|  |  | +        time_diff--;
 | 
	
		
			
				|  |  | +        day = Math.floor(time_diff/86400);
 | 
	
		
			
				|  |  | +        hour = Math.floor((time_diff-day*86400)/3600)+day*24;
 | 
	
		
			
				|  |  | +        minute = Math.floor((time_diff - hour * 3600) / 60);
 | 
	
		
			
				|  |  | +        second = time_diff - hour * 3600 - minute * 60;
 | 
	
		
			
				|  |  | +        oHour.innerHTML = hour<10?hour:hour;
 | 
	
		
			
				|  |  | +        oMinute.innerHTML = minute<10?minute:minute;
 | 
	
		
			
				|  |  | +        oSecond.innerHTML = second<10?second:second;
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    times();
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    var timeInterval = setInterval(function () {
 | 
	
		
			
				|  |  | +        if(time_diff<=0){
 | 
	
		
			
				|  |  | +            clearInterval(timeInterval);
 | 
	
		
			
				|  |  | +        }else{
 | 
	
		
			
				|  |  | +            times()
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +    },1000)
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    //活动规则点击
 | 
	
		
			
				|  |  | +    $(function() {
 | 
	
		
			
				|  |  | +        $(".rule_title_bt").click(function(event) {
 | 
	
		
			
				|  |  | +            $(this)
 | 
	
		
			
				|  |  | +                    .addClass("rule_title_bt")
 | 
	
		
			
				|  |  | +                    .addClass("rule_title_active");
 | 
	
		
			
				|  |  | +            $(this)
 | 
	
		
			
				|  |  | +                    .siblings()
 | 
	
		
			
				|  |  | +                    .removeClass("rule_title_active");
 | 
	
		
			
				|  |  | +            if($(this).data('toggle') == 'role'){
 | 
	
		
			
				|  |  | +                $('.rule_content').html( $('#role').html() );
 | 
	
		
			
				|  |  | +            }else{
 | 
	
		
			
				|  |  | +                $('.rule_content').html( $('#record').html() );
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    var lasttime; //第一次点击时间
 | 
	
		
			
				|  |  | +    var rotatesize = 0; //旋转角度
 | 
	
		
			
				|  |  | +    var count = {{$count}}
 | 
	
		
			
				|  |  | +        count = parseInt(count);
 | 
	
		
			
				|  |  | +    //活动规则点击
 | 
	
		
			
				|  |  | +    var canClick = true;
 | 
	
		
			
				|  |  | +    $(function() {
 | 
	
		
			
				|  |  | +        $(".button").click(function(event) {
 | 
	
		
			
				|  |  | +            if(count <=0){
 | 
	
		
			
				|  |  | +                location.href='/activity/huaweiActivity';
 | 
	
		
			
				|  |  | +                return ;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            if(time_diff<=0){
 | 
	
		
			
				|  |  | +                console.log('time_diff<=0---');
 | 
	
		
			
				|  |  | +                return ;
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            if(!canClick) return ;
 | 
	
		
			
				|  |  | +            canClick = false;
 | 
	
		
			
				|  |  | +            $.ajax({
 | 
	
		
			
				|  |  | +                'url':'/api/activity/huaweiLottery',
 | 
	
		
			
				|  |  | +                'type':'post',
 | 
	
		
			
				|  |  | +                 'success':function(res){
 | 
	
		
			
				|  |  | +                     if (lasttime && Date.parse(new Date()) - lasttime <= 5000) {
 | 
	
		
			
				|  |  | +                         //旋转时间5S在样式中修改后再修改间隔时间
 | 
	
		
			
				|  |  | +                         console.log("还在旋转");
 | 
	
		
			
				|  |  | +                         return;
 | 
	
		
			
				|  |  | +                     } else {
 | 
	
		
			
				|  |  | +                         lasttime = Date.parse(new Date());
 | 
	
		
			
				|  |  | +                         //点击时间赋值
 | 
	
		
			
				|  |  | +                         var m = res.data.rotate;
 | 
	
		
			
				|  |  | +                         var price = res.data.price;
 | 
	
		
			
				|  |  | +                         price = parseInt(price);
 | 
	
		
			
				|  |  | +                         //获取旋转角度  逆时针旋转
 | 
	
		
			
				|  |  | +                         $(".zp").css({ transform: "rotate(" + m + "deg)" });
 | 
	
		
			
				|  |  | +                         //旋转
 | 
	
		
			
				|  |  | +                         setTimeout(() => {
 | 
	
		
			
				|  |  | +                             if(price >0){
 | 
	
		
			
				|  |  | +                               $('#price').html(price+'书币');
 | 
	
		
			
				|  |  | +                                document.querySelector(".dialog").style.display = "";
 | 
	
		
			
				|  |  | +                             }else{
 | 
	
		
			
				|  |  | +                                document.querySelector(".wei-dialog").style.display = "";
 | 
	
		
			
				|  |  | +                            }
 | 
	
		
			
				|  |  | +                            //旋转完毕后弹窗
 | 
	
		
			
				|  |  | +                            console.log('over');
 | 
	
		
			
				|  |  | +                            count--;
 | 
	
		
			
				|  |  | +                            $('#left_count').html(count+'次');
 | 
	
		
			
				|  |  | +                            if(count<=0){
 | 
	
		
			
				|  |  | +                                $('#lottery_button').html('充值后才可抽奖');
 | 
	
		
			
				|  |  | +                            }
 | 
	
		
			
				|  |  | +                         canClick = true;
 | 
	
		
			
				|  |  | +                     }, 5000);
 | 
	
		
			
				|  |  | +                     }
 | 
	
		
			
				|  |  | +                 }
 | 
	
		
			
				|  |  | +            })
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +    //获取旋转角度(随机数)
 | 
	
		
			
				|  |  | +    function getnub(x, y) {
 | 
	
		
			
				|  |  | +        /*//角度需大于x小于y
 | 
	
		
			
				|  |  | +        var m = Math.ceil(Math.random() * 10000);
 | 
	
		
			
				|  |  | +        var n = rotatesize + m;
 | 
	
		
			
				|  |  | +        var angle = n % 360;
 | 
	
		
			
				|  |  | +        if (m < 5000 || (angle < x + 10 || angle > y - 10)) {
 | 
	
		
			
				|  |  | +            return this.getnub(x, y);
 | 
	
		
			
				|  |  | +        } else {
 | 
	
		
			
				|  |  | +            rotatesize = n;
 | 
	
		
			
				|  |  | +            return n;
 | 
	
		
			
				|  |  | +        }*/
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    function resetPoint() {
 | 
	
		
			
				|  |  | +        $(".zp").css({transition:"none", transform: "rotate(0deg)" });
 | 
	
		
			
				|  |  | +        setTimeout(()=>{
 | 
	
		
			
				|  |  | +            $(".zp").css({transition:"transform 5s ease, -webkit-transform 5s ease"});
 | 
	
		
			
				|  |  | +        },200);
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +    //奖励弹窗点击关闭
 | 
	
		
			
				|  |  | +    $(function() {
 | 
	
		
			
				|  |  | +        $(".dialog_button").click(function(event) {
 | 
	
		
			
				|  |  | +            document.querySelector(".dialog").style.display = "none";
 | 
	
		
			
				|  |  | +            //transition: transform 5s ease, -webkit-transform 5s ease;
 | 
	
		
			
				|  |  | +            $('#price').html('0书币');
 | 
	
		
			
				|  |  | +            resetPoint()
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    $(function() {
 | 
	
		
			
				|  |  | +        $(".dialog_close").click(function(event) {
 | 
	
		
			
				|  |  | +            document.querySelector(".dialog").style.display = "none";
 | 
	
		
			
				|  |  | +            $('#price').html('0书币');
 | 
	
		
			
				|  |  | +            resetPoint()
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    $(function() {
 | 
	
		
			
				|  |  | +        $(".wei-dialog_button").click(function(event) {
 | 
	
		
			
				|  |  | +            document.querySelector(".wei-dialog").style.display = "none";
 | 
	
		
			
				|  |  | +            resetPoint()
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +    $(function() {
 | 
	
		
			
				|  |  | +        $(".wei-dialog_close").click(function(event) {
 | 
	
		
			
				|  |  | +            document.querySelector(".wei-dialog").style.display = "none";
 | 
	
		
			
				|  |  | +            resetPoint()
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    });
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +</html>
 |