crm/resources/xqzqxg/share/pages/eggsactivity/eggsactivity.wxss

/* 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;
}