/* packageH/freeLottery/index/index.wxss */ page { padding-top: 10rpx; height: 100vh; background: linear-gradient(0deg, #ff6d61 0%, #ffaa37 100%); box-sizing: border-box; overflow: hidden; } /* 页面背景 */ .page-background { position: absolute; z-index: -1; top: 10rpx; left: 0; width: 100vw; height: 100vh; margin: auto; background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/freeLottery/lottery_bg_image.png") no-repeat top center; background-size: 100vw auto; } /* 免单标题图片 */ .lottery-title { display: block; margin: 47rpx auto 0; width: 483rpx; height: 179rpx; } /* 转盘部分 */ .lottery { position: relative; margin: 43rpx auto 0; width: 660rpx; height: 660rpx; border-radius: 50%; overflow: hidden; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/freeLottery/turntable_bg_image.png"); background-repeat: no-repeat; background-position: center; background-size: 658rpx; } /* 指针 */ .turntable-pointer { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; width: 165rpx; height: 234rpx; margin: auto; transform: translateY(-33rpx); } /* 指针 底下的圆白块 */ .turntable-pointer_white-block { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 180rpx; height: 180rpx; background-color: white; border-radius: 50%; } /* 转盘 */ .turntable { position: relative; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: inherit; height: inherit; transform: rotate(0deg); } /* 抽奖结果弹窗 */ .lottery-popup { position: fixed; z-index: 4; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 602rpx; height: 465rpx; } /* 首次抽奖 */ .lottery-popup_first { height: 565rpx; } /* 没抽中 */ .lottery-popup_lost { height: 386rpx; } .lottery-popup-decoration { position: absolute; z-index: -1; top: -166rpx; left: 0; width: 602rpx; height: 258rpx; background: url(https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/freeLottery/popup_bg_image.png) no-repeat center top; background-size: 602rpx auto; } .lottery-popup-container { padding: 20rpx; margin-left: 12rpx; width: 560rpx; height: inherit; color: white; text-align: center; background: linear-gradient(to bottom, transparent 19%, #e41c34 19%); border-radius: 25rpx; box-sizing: border-box; } .lottery-popup_first .lottery-popup-container { background: linear-gradient(to bottom, transparent 16%, #e41c34 16%); } .lottery-popup_lost .lottery-popup-container { background: linear-gradient(to bottom, transparent 23%, #e41c34 23%); } .lottery-popup_title { margin-top: 10rpx; line-height: 35.23rpx; text-align: center; font-size: 48rpx; } .lottery-popup_condition { margin-top: 35rpx; line-height: 35.23rpx; font-size: 24rpx; } .lottery-popup_condition-detail { margin-top: 14rpx; line-height: 35.23rpx; font-size: 36rpx; } .lottery-popup_condition-detail text { font-size: 48rpx; } .lottery-popup_goods { margin-top: 58rpx; color: white; } .lottery-popup_first .lottery-popup_goods { margin-top: 44rpx; } /* 免单商品列表 */ .lottery-popup_goods-list { padding: 15rpx; height: 260rpx; margin-top: 21rpx; overflow: scroll hidden; white-space: nowrap; background-color: white; border-radius: 10rpx; box-sizing: border-box; } .lottery-popup_goods-item { display: inline-block; margin-right: 26rpx; width: 160rpx; white-space: nowrap; text-align: left; text-overflow: ellipsis; overflow: hidden; font-size: 20rpx; color: #999; } .lottery-popup_goods-item:last-child { margin-right: 0rpx; } .lottery-popup_goods-item > view { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .lottery-popup_goods-title { line-height: 35.23rpx; font-size: 24rpx; color: #202020; } .lottery-popup_goods-cover { width: 160rpx; height: 160rpx; border-radius: 10rpx; } .lottery-popup_goods-count { line-height: 35.23rpx; } /* 谢谢参与 */ .lottery-lost { margin: 153rpx 0 74rpx; line-height: 35.23rpx; color: white; font-size: 40rpx; } /* 弹窗蒙版 */ .lottery-popup-mask { position: fixed; z-index: 3; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); } /* 底部 */ .lottery-popup_footer { display: flex; align-items: center; justify-content: center; margin: 20rpx 0 0 12rpx; width: 560rpx; } .lottery-popup_footer > button { display: inline-block; margin: 0 36rpx; width: 100px; height: 60rpx; line-height: 60rpx; font-size: 30rpx; color: white; background-color: #e41c34; border: none; box-sizing: border-box; } .lottery-popup_footer > button:active { filter: brightness(90%); } /* 弹窗关闭按钮 */ .lottery-popup-close { position: absolute; right: 0; top: -135rpx; display: inline-block; /* margin-top: 36rpx; */ text-align: center; font-size: 52rpx; color: white; } /* 幸运数字 */ .lucky-number { text-align: center; font-size: 24px; color: white; background-color: rgb(245, 88, 45); }