share_activity/pages/luckDraw/detail.wxss

/* pages/luckDraw/detail.wxss */
page {
    background: #BF2637;
}
.head-bg {
    width: 750rpx;
    height: 576rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.head-bg image {
    width: 750rpx;
    /* height: 576rpx */
}

.luck-draw-box {
    width: 680rpx;
    height: 848rpx;
    margin: 370rpx auto 0;
    position: relative;
    z-index: 2;
}
.luck-draw-bg {
    width: 680rpx;
    height: 848rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.luck-draw-bg image {
    width: 680rpx;
    height: 848rpx;
}
.luck-draw-body {
    width: 680rpx;
    height: 848rpx;
    z-index: 2;
    position: relative;
}
.luck-draw-tip {
    width: 100%;
    height: 68rpx;
    margin: auto;
    padding-top: 116rpx;
    text-align: center;
    font-size: 56rpx;
    font-weight: 800;
    color: #fff;
    font-style: italic;
}

.luck-draw-tip image {
    height: 46rpx;
}
.luck-draw-tip ._niyou {
    width: 110rpx;
    margin-right: 6rpx;
}
.luck-draw-tip ._ci {
    width: 56rpx;
    margin-left: 6rpx;
}
.luck-draw-tip ._cjjh {
    width: 220rpx;
}
.luck-draw-tip ._num {
    height: 38rpx;
}
.luck-draw-tip ._0 {
    width: 40rpx;
}
.luck-draw-tip ._1 {
    width: 18rpx;
}
.luck-draw-tip ._2 {
    width: 40rpx;
}
.luck-draw-tip ._3 {
    width: 42rpx;
}

.luck-draw-tip ._4 {
    width: 38rpx;
}

.luck-draw-tip ._5 {
    width: 40rpx;
}

.luck-draw-tip ._6 {
    width: 40rpx;
}

.luck-draw-tip ._7 {
    width: 36rpx;
}

.luck-draw-tip ._8 {
    width: 40rpx;
}
.luck-draw-tip ._9 {
    width: 40rpx;
}

.luck-draw-record-btn {
    width: 178rpx;
    height: 38rpx;
    border-radius: 30rpx;
    background: #E9C597;
    color: #B01717;
    font-size: 24rpx;
    text-align: center;
    margin: 20rpx auto;
    font-weight: 600;
}

.luck-draw-gifts {
    width: 528rpx;
    height: 510rpx;
    margin: auto;
    position: relative;
}

._gift {
    position: absolute;
}
._pos_0 {
    left: 0;
    top: 0;
}
._pos_1 {
    left: 178rpx;
    top: 0;
}
._pos_2 {
    left: 356rpx;
    top: 0;
}
._pos_3 {
    left: 0;
    top: 176rpx;
}
._pos_4 {
    left: 356rpx;
    top: 176rpx;
}
._pos_5 {
    left: 0;
    top: 352rpx;
}
._pos_6 {
    left: 178rpx;
    top: 352rpx;
}
._pos_7 {
    left: 356rpx;
    top: 352rpx;
}

._gift ._ico {
    width: 168rpx;
    height: 160rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

._gift ._ico image {
    width: 168rpx;
    height: 160rpx;
}

._gift ._text {
    height: 24rpx;
    font-size: 22rpx;
    line-height: 24rpx;
    width: 168rpx;
    position: absolute;
    text-align: center;
    z-index: 2;
    color: #6C4EC2;
    left: 0;
    top: 102rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 10rpx;
    width: 168rpx;
    box-sizing: border-box;
}

._gift ._bg {
    width: 168rpx;
    height: 160rpx;
    position: absolute;
    left: 0;
    top: 0;
}

._turn_btn {
    left: 178rpx;
    top: 176rpx;
}

._turn_btn ._nums {
    width: 168rpx;
    font-size: 32rpx;
    font-weight: 800;
    height: 32rpx;
    position: absolute;
    left: 0;
    top: 88rpx;
    color: #fff;
    text-align: center;
}

.block-item-title {
    height: 38rpx;
    line-height: 38rpx;
    text-align: center;
    margin: 104rpx auto 80rpx;
    display: flex;
    justify-content: center;
}

.block-item-title view:nth-child(1) {
    width: 90rpx;
    height: 1px;
    position: relative;
    top: 20rpx;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5)); 
}
.block-item-title text {
    font-weight: 580;
    font-size: 40rpx;
    color: #fff;
    margin: 0 20rpx;
}
.block-item-title view:nth-child(3) {
    width: 90rpx;
    height: 1px;
    background: #fff;
    position: relative;
    top: 20rpx;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5)); 
}

.rule-des {
    width: 600rpx;
    margin: auto;
    color: #fff;
    font-size: 28rpx;
}
.rule-des view {
    margin-bottom: 20rpx;
}

.hit-record-list {
    width: 600rpx;
    margin: auto;
    min-height: 300rpx;
    max-height: 1000rpx;
}
.hit-record-list ._item {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 28rpx;
    height: 60rpx;
}

/**
 * 弹出框
**/
.dlg {
    width: 100vw;
    height: 100vh;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    position: fixed;
}
.prize-body {
    width: 630rpx;
    height: 750rpx;
    position: absolute;
    left: calc(100vw / 2 - 630rpx / 2);
    top: calc(100vh / 2 - 750rpx / 2);
    z-index: 1;
}
.prize-body ._bg {
    width: 630rpx;
    height: 750rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.prize-title {
    width: 534rpx;
    height: 134rpx;
    position: absolute;
    left: calc(630rpx / 2 - 534rpx / 2);
    top: 112rpx;
    z-index: 0;
    text-align: center;
    font-size: 68rpx;
    color: #F9635F;
    font-weight: 800;
    line-height: 134rpx;
}
.prize-title image {
    width: 534rpx;
    height: 134rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.prize-figure {
    width: 306rpx;
    height: 216rpx;
    position: absolute;
    left: 164rpx;
    top: 365rpx;
}
.prize-figure image {
    width: 306rpx;
    height: 216rpx;
}

.prize-subtitle {
    width: 100%;
    height: 35rpx;
    font-size: 34rpx;
    color: #fff;
    line-height: 35rpx;
    position: absolute;
    top: 265rpx;
    left: 0;
    text-align: center;
    box-sizing: border-box;
    padding: 0 120rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.prize-tip {
    width: 100%;
    font-size: 30rpx;
    height: 50rpx;
    position: absolute;
    top: 595rpx;
    left: 0;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    padding: 0 60rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dlg .btns {
    height: 96rpx;
    width: 100%;
    position: absolute;
    top: 651rpx;
    display: flex;
    justify-content:center;
}
.dlg .btns ._btn {
    height: 80rpx;
    background: #FC7A73;
    border-radius: 28rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    font-size: 36rpx;
    font-weight: 600;
    margin: 0 10rpx;
    box-shadow:rgba(229, 80, 79, 1) 0 0 5px;
}
.dlg ._confirm {
    width: 240rpx;
}
.dlg ._exchange {
    width: 240rpx;
}
.dlg ._share {
    width: 400rpx;
}
.dlg button._share {
    padding: 0;
    margin: 0;
}

.dlg ._layer {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
button.phone-button {
    width: 168rpx !important;
    height: 160rpx;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
}

.status_tip_layer {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 2000;
    background:rgba(0,0,0, 0.9);
    left: 0;
    top: 0;
}

.status_tip_layer ._text {
    color: #fff;
    width: 100vw;
    height: 200rpx;
    position: absolute;
    left: 0;
    top: calc(100vh / 2 - 200rpx / 2);
    text-align: center;
    color: #FB766F;
    font-weight: 800;
    font-size: 60rpx;
    font-style: italic;
}