123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- 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;
- }
|