chat/_src/components/popup/packetGet/style.scss

.packet-bg {
    position: relative;
    display: inline-block;
    width: 281px;
    height: 387px;
    border-radius: 6px;
    background-color: #d35849;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    padding-top: 40px;
    .bg{
        position: absolute;
        height: 100%;
        overflow: hidden;
        &:before{
            content: "";
            position: absolute;
            top: -168px;
            left: 50%;
            transform: translateX(-50%);
            width: 450px;
            height: 450px;
            background: #e16654;
            border-radius: 50%;
        }
    }
    .el-icon-close {
        position: absolute;
        top: 6px;
        right: 6px;
        color: #ffffff;
        font-size: 20px;
        cursor: pointer;
    }
}

.nav-bar {
    display: none;
}

.user-info {
    position: relative;
    text-align: center;
}

.avatar {
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    &.no-avatar {
        line-height: 60px;
        text-align: center;
        font-size: 16px;
        color: #ffffff;
    }
}

.name {
    position: relative;
    color: #f9efc5;
    font-size: 14px;
    display: inline-block;
    margin: 10px 0 12px 0;
}

.text {
    position: relative;
    color: #f9efc5;
    font-size: 16px;
    padding: 0 14px;
    line-height: 1.4;
}

.open-btn {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 34px;
    bottom: 70px;
    width: 82px;
    height: 82px;
    line-height: 82px;
    text-align: center;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #e8cca0;
    color: #553a1b;
    font-family: KaiTi, STKaiti, Microsoft Yahei, PingFang SC;
    cursor: pointer;
    &:hover {
        background-color: #dbbd8b;
    }
}

.detail {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 14px;
    color: #f9efc5;
    cursor: pointer;
}

.detail-bg {
    position: relative;
    display: inline-block;
    width: 281px;
    border-radius: 6px;
    box-sizing: border-box;
    background-size: 100%;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    padding-top: 30px;
    background-color: #ffffff;
    &:before{
        content: "";
        position: absolute;
        top: -785px;
        left: 50%;
        transform: translateX(-50%);
        width: 850px;
        height: 850px;
        background: #e16654;
        border-radius: 50%;
    }
    .el-icon-close {
        position: absolute;
        top: 6px;
        right: 6px;
        color: #ffffff;
        font-size: 20px;
        cursor: pointer;
    }
    .name {
        color: #333333;
        margin-bottom: 6px;
    }
    .text {
        color: #333333;
        font-size: 12px;
    }
}

.money {
    position: relative;
    text-align: center;
    font-size: 24px;
    color: #333333;
    margin: 14px 0;
    em {
        font-size: 12px;
        color: #999999;
    }
}

.state {
    position: relative;
    font-size: 12px;
    color: #5a93eb;
    margin-bottom: 12px;
}

.state-num {
    position: relative;
    font-size: 12px;
    margin: 4px 0;
    color: #999999;
}

.packet-list {
    margin: 14px 12px 0 12px;
    height: 148px;
    overflow: auto;
    li {
        display: flex;
        padding: 6px 0;
        border-top: 1px solid #eee;
        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 2px;
        }
        .no-avatar {
            line-height: 36px;
        }
    }
    .content {
        flex: 1;
        margin-left: 10px;
        font-size: 12px;
        text-align: left;
        .top {
            color: #333333;
            line-height: 1.4;
            margin-bottom: 8px;
        }
        .amount {
            float: right;
        }
        .best{
            display: inline-block;
            vertical-align: middle;
            width: 14px;
            height: 16px;
            margin-left: 10px;
            background: url(../../../assets/crown-icon.png) no-repeat;
        }
    }
    .time {
        color: #999999;
    }
}

.tips {
    color: #999999;
    text-align: center;
    font-size: 12px;
    margin: 12px 0;
}

.redpack-tips {
    color: #f9efc5;
    font-size: 16px;
    line-height: 1.4;
    margin-top: 30px;
    padding: 0 12px;
}

.small {
    margin-top: 40px;
    .avatar {
        display: inline-block;
        vertical-align: middle;
        line-height: 30px;
        width: 30px;
        height: 30px;
        margin-right: 10px;
        border-radius: 4px;
        &.no-avatar {
            line-height: 30px;
        }
    }
    .name {
        font-size: 16px;
    }
}

.loading {
    pointer-events: none;
}

/*h5 style*/

.h5-wrap {
    .packet-bg {
        width: px2rem(623);
        height: px2rem(920);
        background: #df6350;
        padding-top: 0;
        overflow: visible;
        &:before{
            top: px2rem(-680);
            width: px2rem(1360);
            height: px2rem(1360);
            background: #df6350;
            box-shadow: 0 0 4px #9c4538;
        }
    }
    .detail-bg {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 0 px2rem(108); // padding-top: 10;
        border-radius: 0;
        background-color: #fff;
        @include webkitbox(2);
        &:before{
            top: px2rem(-1100);
            width: px2rem(1500);
            height: px2rem(1500);
            background: #e1604c;
        }
        &.is-quantity{
            &:before{
                top: px2rem(-880);
                width: px2rem(1500);
                height: px2rem(1500);
                background: #e1604c;
            }
          .packet-list{
            // height: px2rem(400);
          }
        }
        .el-icon-close {
            visibility: hidden;
        }
        .name{
            color: #f9efc5;
        }
        .text{
            margin-top: px2rem(18);
            color: #f9efc5;
            font-size: px2rem(28);
        }
        .money{
            margin: px2rem(50) auto;
            font-size: px2rem(62);
            font-weight: bold;
            color: #fae3b7;
            em{
                color: #fae3b7;
                // font-weight: normal;
            }
        }
        .state{
          color: #f9efc5;
        }
        .state-num{
          padding-left: px2rem(34);
          margin-top: px2rem(156);
          text-align: left;
        }

        .packet-list{
           height: auto;
           flex: 1;
          .content{
            font-size: px2rem(32);
            color: #181818;
            .bottom{
              display: flex;
              justify-content: space-between;
            }
            .time{
              font-size: px2rem(26);
              color: #b4b4b4;
              margin-right: px2rem(10);
            }
            .best{
              font-size: px2rem(28);
              color: #fbc463;
            }
          }
          li{
            padding: px2rem(30) 0;
          }
  
        } 
        .tips{
          position: absolute;
          left: 0;
          width: 100%;
          bottom: px2rem(30);
        }
    }
    .nav-bar {
        display: block;
        height: px2rem(84);
        display: flex;
        padding: 0 px2rem(25);
        justify-content: space-between;
        align-items: center;
        color: #f9efc5;
        margin-bottom: px2rem(66);
        a{
          font-size: px2rem(34);
        }
    }
    .avatar {
        display: inline-block;
        vertical-align: middle;
        line-height: 30px;
        width: 30px;
        height: 30px;
        margin-right: 10px;
        border-radius: 4px;
        &.no-avatar {
            line-height: 30px;
        }
    }
    .name {
        font-size: px2rem(34);
    }
    .user-info {
        margin-top: px2rem(215);
    }
    .text,
    .redpack-tips {
        font-size: px2rem(48);
    }
    .detail {
        font-size: px2rem(32);
        &::after {
            content: '';
            display: inline-block;
            width: px2rem(12);
            height: px2rem(12);
            margin-left: 2px;
            border-width: 1px;
            border-style: solid;
            border-color: #f9efc5 #f9efc5 transparent transparent;
            transform: rotate(45deg);
            vertical-align: middle;
        }
    }
    .open-btn {
        bottom: px2rem(152);
        width: px2rem(198);
        height: px2rem(198);
        line-height: px2rem(198);
        font-size: px2rem(94);
        font-family: KaiTi, STKaiti, Microsoft Yahei, PingFang SC;
    }
    .el-icon-close {
        top: auto;
        left: 50%;
        bottom: -px2rem(120);
        width: px2rem(80);
        height: px2rem(80);
        box-sizing: border-box;
        transform: translate(-50%);
        border: px2rem(4) solid #d2b072;
        border-radius: 50%;
        font-size: px2rem(48);
        color: #d2b072;
        line-height: px2rem(72);
    }
}