/* share/pages/eggsactivity/eggsactivity.wxss */ .page { width: 100%; height: 100vh; position: relative; overflow: auto; box-sizing: border-box; } .color249DFA { color: #249DFA; } .g-page-goldenegg { width: 100%; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center; } .g-page-goldenegg-bg { width: 100%; height: 100%; position: absolute; z-index: -1; } .g-page-goldenegg-header { width: 100%; margin: 20rpx 0rpx; } .g-page-goldenegg-box { display: flex; flex-wrap: wrap; margin-top: 40rpx; } .goldenegg-box-item { width: 33.33%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .chuizi { width: 100rpx; position: absolute; top: -10rpx; right: 10rpx; z-index: 9999; } .caidai { width: 200rpx; position: absolute; top: -40rpx; animation-name: spread; animation-duration: 100ms; animation-timing-function: linear; animation-iteration-count: 1; } @keyframes spread { 0% { width: 120rpx; top: 100rpx; } 100% { width: 200rpx; top: -20rpx; } } .zakaijindan { width: 170rpx; margin-bottom: -20rpx; position: relative; z-index: 99; } .jindan { width: 150rpx; margin-bottom: -20rpx; position: relative; z-index: 99; } .dipan { width: 150rpx; } .remainingCount { color: #F5E5C6; font-size: 28rpx; line-height: 44px; } .myWinningBtn { width: 360rpx; height: 88rpx; border: 3px solid #FFF1D1; background: linear-gradient(0deg, #E85E4A 0%, #EE7892 100%); box-shadow: 0px 10px 20px 0px rgba(126, 21, 29, 0.5); border-radius: 44px; font-size: 36rpx; color: #F5E5C6; display: flex; align-items: center; justify-content: center; } .flex { display: flex; } .justify-center { justify-content: center; } .flex-column { display: flex; flex-direction: column; } .flex-sub { flex: 1; } .align-center { align-items: center; } .justify-start { justify-content: flex-start; } .mt10 { margin-top: 10rpx; } .companyMsg { width: 90%; background-color: #902027; margin: 40rpx auto; padding: 20rpx; color: #fff; font-size: 24rpx; border-radius: 4rpx; } .imgSize { width: 26rpx; height: 26rpx; margin-right: 20rpx; } .action { animation-name: fight; animation-duration: 150ms; animation-timing-function: linear; animation-iteration-count: 1; } @keyframes fight { 0% { transform: rotate(0deg); top: '-10rpx'; } 50% { transform: rotate(60deg); top: '-90rpx'; } 100% { transform: rotate(0deg); top: '-10rpx'; } } .mask { position: fixed; width: 100%; height: 100vh; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.4); z-index: 99999; display: flex; justify-content: center; align-items: center; } .dialog { width: 90%; height: 756rpx; background-color: #fff; border-radius: 24rpx; position: relative; } .dialogHeader { position: absolute; top: -25rpx; left: 50%; transform: translateX(-50%); z-index: 99; } .dialogHeader image { width: 450rpx; } .dialogHeader-tips { position: absolute; top: 0rpx; left: 0rpx; width: 100%; text-align: center; height: 80rpx; line-height: 80rpx; color: #F5E5C6; font-size: 32rpx; font-weight: 500; } .dialog-caidai { position: absolute; left: 50%; transform: translateX(-50%); z-index: 0; } .dialog-dizuo { width: 260rpx; } .dialog-kaijindan { width: 260rpx; margin-bottom: -25rpx; position: relative; z-index: 99; } .dialog-box { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 130rpx; position: relative; z-index: 9; } .prizes-btn { width: 140rpx; height: 46rpx; border: 2px solid #FFF1D1; background: linear-gradient(0deg, #E85E4A 0%, #EE7892 100%); box-shadow: 0px 10rpx 20rpx 0px rgba(126, 21, 29, 0.5); border-radius: 23rpx; font-size: 24rpx; color: #F5E5C6; text-align: center; position: absolute; bottom: 100rpx; z-index: 99; } .goldenegg-box-prizes { width: 100rpx; height: 36rpx; border: 2px solid #FFF1D1; background: linear-gradient(0deg, #E85E4A 0%, #EE7892 100%); box-shadow: 0px 10rpx 20rpx 0px rgba(126, 21, 29, 0.5); border-radius: 23rpx; font-size: 16rpx; color: #F5E5C6; text-align: center; position: absolute; bottom: 30rpx; z-index: 999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dialog-btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0rpx; width: 360rpx; height: 88rpx; border: 3rpx solid #FFF1D1; background: linear-gradient(0deg, #E85E4A 0%, #EE7892 100%); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(126, 21, 29, 0.5); border-radius: 44rpx; margin: 60rpx auto; text-align: center; line-height: 88rpx; color: #F5E5C6; font-size: 36rpx; } .dialog-text { color: #333333; font-size: 24rpx; } .dialog-tips { width: 80%; height: 100rpx; margin: 80rpx auto 20rpx; font-size: 28rpx; text-align: center; } .dialog-content-box { width: 95%; height: 208rpx; margin: 0rpx auto 20rpx; background-color: #FEF6F6; box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(250, 203, 201, 0.35); border-radius: 10rpx; display: flex; flex-direction: column; } .dialog-content-btn { display: flex; justify-content: space-around; padding: 20rpx; } .dialog-copy { width: 160rpx; height: 50rpx; border: 1rpx solid #B6353E; font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: #B6353E; } .dialog-cut { width: 160rpx; height: 50rpx; background: #B6353E; font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: #FFFFFF; } .dialog-content { flex: 1; overflow-y: scroll; font-size: 24rpx; color: #333333; padding: 20rpx 20rpx 0rpx; } .dialog-text { width: 100%; height: 50rpx; line-height: 50rpx; font-size: #333333; text-align: center; } .dialog-prizes-img { width: 100%; height: 400rpx; position: relative; z-index: 999; top: 160rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; } .dialog-prizes-img>image { width: 50%; margin-bottom: 20rpx; font-size: 24rpx; color: #333333; }