page { background: #fa1d48; } .wrapper{ background-image: url('http://e.eqbidding.com/web-cp-all/img_pm/img/1087633247090905088'); background-size: 100%; background-repeat: no-repeat; } .header{ padding: 1rem 0; text-align: center; } .header-title{ display: block; padding: .4rem 0; font-size: 2rem; color: #fff; font-weight: 600; } .header-subtitle{ color: #fff; font-size: 32rpx; } /* 转盘 */ .canvas-container ul, .canvas-container li{ margin: 0 ; padding: 0; list-style: none; } .canvas-container{ margin: 0 auto; position: relative; width: 300px; height: 300px; border-radius: 50%; border: 2px solid #E44025; box-shadow: 0 2px 3px #333, 0 0 2px #000; } .canvas-content{ position: absolute; left: 0; top: 0; z-index: 1; display: block; width: inherit; height: inherit; border-radius: inherit; background-clip: padding-box; background-color: #ffcb3f; background-image: url('http://e.eqbidding.com/web-cp-all/img_pm/img/1087631585571901440'); background-size: 100%; } .canvas-element{ width: inherit; height: inherit; border-radius: 50%; } .canvas-list{ position: absolute; left: 0; top: 0; width: inherit; height: inherit; z-index: 2; } .canvas-item{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #e4370e; font-weight: bold; text-shadow: 0 1px 1px rgba(255,255,255,.6); } .canvas-item-text{ position: relative; display: block; padding-top: 35px; /* width: 50px; */ margin: 0 auto; text-align: center; z-index: 999999; -webkit-transform-origin: 50% 150px; transform-origin: 50% 150px; } .canvas-btn{ position: absolute; left: 110px; top: 110px; z-index: 999999; width: 80px; height: 80px; border-radius: 50%; color: #F4E9CC; background-color: #E44025; line-height: 80px; text-align: center; font-size: 20px; text-shadow: 0 -1px 1px rgba(0,0,0,.6); box-shadow: 0 3px 5px rgba(0,0,0,.6); text-decoration: none; } .canvas-btn::after{ position: absolute; display: block; content: ' '; left: 10px; top: -46px; width: 0; height: 0; overflow: hidden; border-width: 30px; border-style: solid; border-color: transparent; border-bottom-color: #E44025; } .canvas-btn.disabled{ pointer-events: none; background: #B07A7B; color: #ccc; } .canvas-btn.disabled::after{ border-bottom-color: #B07A7B; } .gb-run{ -webkit-transition: all 6s ease; transition: all 6s ease; } /* 查看中奖 */ .main-container{ margin: 1rem 2rem; } .main-container-rule{ padding: 1rem 0; color: #fff; font-size: 30rpx; } .main-container-btn text { color: #fdf573; } .main-rule-title{ display: block; padding: 4px 0; font-size: 16px; font-weight: bold; } .main-rule-item{ display: block; padding: 2px 0; } .tip{ color: #fff; font-size: 32rpx; text-align: center; } .phone{ text-align: center; color: #fff; font-size: 30rpx; margin-bottom: 40rpx; }