kabao/scratch/index/index.wxss

@-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);}
}.an{ -webkit-transform: rotate(360deg); animation: rotation 2s linear infinite; }
.goods-qrcode-modal{ position: fixed; top:0; left: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0,0,0,.5); padding: 40rpx; transform: translateY(100%); opacity: .5; transition: opacity 250ms; visibility: hidden; }
.goods-qrcode-modal.active{ transform: translateY(0); opacity: 1; visibility: visible; }
.goods-qrcode-body{ background: #fff; height: 100%; border-radius: 10rpx; z-index: 99999; }
.goods-qrcode-modal .goods-qrcode-box{ height: 100%; position: relative; box-shadow: 0 0 15rpx rgba(0,0,0,.15); }
.goods-qrcode-modal .goods-qrcode-loading{ top:0; left: 0; position: absolute; width: 100%; height: 100%; }
.goods-qrcode-modal .goods-qrcode{ top:0; left: 0; position: absolute; width: 100%; height: 100%; background: #fff; display: none; }
.goods-qrcode-modal .goods-qrcode.active{ display: block; }
.goods-qrcode-modal .goods-qrcode-close{ position: absolute; top:40rpx; right: 40rpx; padding: 15rpx; }
.share-modal{ position: fixed; top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.0); z-index: 1000; transform: translateY(100%); transition: background 250ms; }
.share-modal .share-modal-body{ position: fixed; bottom: 0; left: 0; width: 100%; background: #f2f2f2; padding-top: 60rpx; transform: translateY(100%); transition: transform 250ms; }
.share-modal.active{ transform: translateY(0); background: rgba(0,0,0,.5); }
.share-modal.active .share-modal-body{ transform: translateY(0); }
.share-modal .share-bottom{ text-align: center; font-size: 9pt; margin: 0; padding: 0; margin-bottom: 60rpx; line-height: inherit; border: none; background: none; color: inherit; font-family: inherit; display: inline-block; }
.share-modal .share-bottom:after{ display: none; }
.share-modal .share-bottom wx-cover-image, .share-modal .share-bottom wx-image{ width: 120rpx; height: 120rpx; margin-bottom: 12rpx; border-radius: 999rpx; border: 1rpx solid #eee; }
.share-modal .share-bottom:active wx-cover-image, .share-modal .share-bottom:active wx-image{ opacity: .7; }
.share-modal .share-modal-close{ background: #fff; height: 100rpx; border-top: 1rpx solid #eee; }
page { background:#5e00b8; cursor: hand; overflow: auto; -webkit-overflow-scrolling: touch; }
.scratch-rule { background:#000000; background-color: rgba(0, 0, 0, 0.3); text-align:center; color:#ffffff; line-height:48rpx; width:92rpx; border-radius:24rpx 0 0 24rpx; position:absolute; right:0; top:40rpx; z-index:5; }
.scratch-cj{ display:inline-block; background-color: rgba(0, 0, 0, 0.3); border-radius:28rpx; line-height:56rpx; padding:0 30rpx; }
.scratch-text { color:#ffffff; }
.scratch-num { color:#ffb92a; }
.left { height:1rpx; width:120rpx; background:#bbbbbb; display:inline-block; position:absolute; top:50%; left:-45%; transform:translateY(-50%); }
.recommend { margin:10rpx 220rpx 0rpx 220rpx; text-align:center; position:relative; color:#ffffff; }
.right { height:1rpx; width:120rpx; background:#bbbbbb; display:inline-block; position:absolute; top:50%; right:-45%; transform:translateY(-50%); }
.index-hd { padding: 80rpx; text-align: center; padding: 20rpx 26rpx 40rpx; }
wx-button{ margin-top: 40rpx; }
.record { del_padding:0 50rpx; color:#ffffff; margin-top:10rpx; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; text-align:left; }
.act-modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2001; visibility: hidden; opacity: 0; transition: 200ms; }
.act-modal.show { visibility: visible; opacity: 1; }
.act-modal .act-modal-bg { background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.act-modal .act-modal-pic { background: rgba(0, 0, 0, 0.25); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.act-modal .act-modal-close wx-image { width: 50rpx; height: 50rpx; margin-top: 50rpx; }
.model-award { position:absolute; top:0; left:0; right:0; text-align:center; }
.act-modal-start { position:relative; height:730rpx; }
.act-modal-start wx-image { width:100%; height:730rpx; }
.gx { position:absolute; top:500rpx; left:50%; right:0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
.gx-a { height:210rpx; width:100%; }
.gx-b { color:#f05525; -webkit-line-clamp: 3; }
.act-modal-end { position:relative; border-bottom:10rpx solid #ffb947; border-radius:0 0 24rpx 24rpx; border-left:10rpx solid #ffb947; border-right:10rpx solid #ffb947; margin:0 131rpx; background:#ffffff; height:160rpx }
.act-modal-k { line-height:72rpx; border-radius:40rpx; background:#f05525; text-align:center; color:#ffffff; margin:0 80rpx 30rpx 80rpx; }
.act-zh { color:#999999; padding-bottom:0px; }
.scratch-center{ position:relative; padding-top:380rpx; }
.scratch-bg{ padding-top:30rpx; }
.scratch-bg-1 { width:640rpx; height:360rpx; }
.scratch-bg-2 { position:absolute; top:20rpx; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, 0); width:600rpx; height:320rpx; }
.scratch-bg-3 { position:absolute; top:150rpx; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, 0); line-height:80rpx; background:#f05525; border-radius:40rpx; padding:0 48rpx; color:#ffffff; }
.scratch-award { position:absolute; top:20rpx; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, 0); width:600rpx; height:320rpx; }
.scratch-canvas { z-index:999; width:600rpx; height:320rpx; }
.scratch-award-a { position:relative; top:0; left:0; width:600rpx; height:320rpx; }
.scratch-bg-text { position:absolute; top:60rpx; left:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, 0); }
.scratch-text-1 { font-size:18pt; color:#f05525; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical; width:410rpx; }
.scratch-bg-text-2 { width:400rpx; line-height:80rpx; color:#ffffff; margin-top:40rpx; border-radius:40rpx; background:#f05525; }
.scratch-bg-text-3{ width:400rpx; line-height:80rpx; color:#ffffff; margin-top:40rpx; border-radius:40rpx; background:#cdcdcd; }