share_activity/pages/signIn/activity/activity.wxss

/* pages/signIn/index.wxss */
page {
    background: #EDEDED;
}

.title-color {
    color: #EA443A;
}

.sign-head {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100vw;
}
.head-bg image{
    width: 100vw;
}

.head-bar {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    color: #fff;
    font-size: 32rpx;
}
.sign-scroll-body {
    position: relative;
    z-index: 2;
}

.sign-info-extra {
    height: 252rpx;
    width: 100vw;
    display: flex;
    flex-direction: row;
}

.coupon_num_box {
    flex: 1;
    box-sizing: border-box;
    padding: 20rpx 0 20rpx 80rpx;
}
.my_coupon_title {
    font-size: 24rpx;
    font-weight: 400;
}
.coupon_num_box ._num_arear {
    padding: 10rpx 0  0 0rpx;
    box-sizing: border-box;
    height: 150rpx;
    width: 480rpx;
    white-space: nowrap;
}
._num_arear ._num {
    font-size: 104rpx;
    vertical-align: baseline;
    height: 140rpx;
    display: inline-block;
}
._num_arear ._unit {
    padding-left: 10rpx;
    font-size: 48rpx;
    font-weight: 400;
    vertical-align: baseline;
    display: inline-block;
}

._num_arear ._btn {
    display: inline-block;
    font-size: 24rpx;
    border: 1px solid #fff;
    height: 26rpx;
    border-radius: 24rpx;
    padding: 4rpx 12rpx;
    margin-left: 20rpx;
    line-height: 24rpx;
}

.sign-info-extra ._look_btn {
    width: 180rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-weight: 400;
}


.sign-card-box {
    width: 704rpx;
    height: 550rpx;
    margin: auto;
    background: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 56rpx 40rpx 40rpx 40rpx;
    border-width: 2rpx;
    border-style: solid;
}

.sign-item-box {
    display: flex;
    flex-direction: row;
}

.sign-item-box ._left {
    width: 390rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sign-item-box ._left ._item {
    width: 112rpx;
    height: 156rpx;
    border-radius: 12rpx;
    background: #F4F4F4;
    position: relative;
    overflow: hidden;
}
.sign-item-box ._left ._item:nth-child(1), .sign-item-box ._left ._item:nth-child(2) , .sign-item-box ._left ._item:nth-child(2)  {
    margin-bottom: 28rpx;
}

.sign-item-box ._left ._item ._figure {
    width: 112rpx;
    height: 154rpx;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    z-index: 0;
}
.sign-item-box ._left ._item ._lose_sign_in {
    width: 110rpx;
    height: 66rpx;
    position: absolute;
    left: 2rpx;
    display: block;
    top: 48rpx;
    z-index: 3;
}
.sign-item-box ._left ._item ._finish_sign_in {
    width: 110rpx;
    height: 66rpx;
    position: absolute;
    left: 2rpx;
    display: block;
    top: 48rpx;
    z-index: 3;
}

.sign-item-box ._left ._item ._no {
    height: 32rpx;
    width: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    color: #fff;
    font-size: 24rpx;
    text-align: center;
    line-height: 32rpx;
    background: linear-gradient(#EE5A5A, #cc4949,  #EE5A5A);
}

.sign-item-box ._right {
    width: 202rpx;
    margin-left: 32rpx;
}
.sign-item-box ._right ._item {
    width: 202rpx;
    height: 340rpx;
    border-radius: 12rpx;
    background: #F4F4F4;
    position: relative;
    overflow: hidden;
}

.sign-item-box ._right ._item ._figure {
    width: 202rpx;
    height: 340rpx;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

.sign-item-box ._right ._item ._lose_sign_in {
    width: 190rpx;
    height: 110rpx;
    display: block;
    position: absolute;
    left: 8rpx;
    top: 136rpx;
    z-index: 3;
}

.sign-item-box ._right ._item ._finish_sign_in {
    width: 190rpx;
    height: 110rpx;
    display: block;
    position: absolute;
    left: 8rpx;
    top: 136rpx;
    z-index: 3;
}

.sign-item-box ._right ._item ._no {
    height: 46rpx;
    width: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    color: #fff;
    font-size: 24rpx;
    text-align: center;
    line-height: 46rpx;
}

._sign_in_btn {
    width: 480rpx;
    height: 68rpx;
    border-radius: 68rpx;
    margin: 46rpx auto 0;
    text-align: center;
    color: #fff;
    position: relative;
    line-height: 68rpx;
    font-size: 36rpx;
    font-weight: 500;
    background: #c6c6c6;
}
._sign_in_btn button.phone-button {
    width: 480rpx;
    height: 68rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    opacity: 0;
}


.sign-task-box {
    width: 704rpx;
    margin: auto;
    background: #fff;
    border-radius: 8px;
    margin-top: 28rpx;
    box-sizing: border-box;
    padding: 42rpx 28rpx;
}
.sign-task-box ._task_title {
    font-size: 36rpx;
    color: #303030;
    font-weight: 400;
}
.sign-task-box ._task_list {
    margin-top: 40rpx;
}
.sign-task-box ._task_item {
    display: flex;
    flex-direction: row;
    margin-bottom: 46rpx;
}
.sign-task-box ._task_item_left {
    width: 650rpx;
    display: flex;
    flex-direction: row;
}
._task_item_left ._ico {
    width: 52rpx;
    height: 52rpx;
    padding-top: 10rpx;
}
._task_item_left ._ico image {
    width: 52rpx;
    height: 52rpx;
    display: block;
}
._task_item_left ._info {
    margin-left: 20rpx;
}
._task_item_left ._title {
    font-size: 28rpx;
    color: #303030;
    vertical-align: top;
}
._task_item_left ._des {
    font-size: 24rpx;
    color: #a2a2a2;
}


.sign-task-box ._task_item_right {
    width: 148rpx;
    padding-top: 10rpx;
}
.sign-task-box ._task_item_right ._btn {
    width: 148rpx;
    height: 52rpx;
    text-align: center;
    line-height: 52rpx;
    border-radius: 52rpx;
    font-size: 28rpx;
}


.activity-des {
    width: 704rpx;
    margin: auto;
    margin-top: 40rpx;
    font-size: 28rpx;
    color: #101010;
    padding-bottom: 100rpx;
}

.activity-des ._des {
    padding-top: 20rpx;
    font-size: 24rpx;
}

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

.sign-pop-body {
    width: 622rpx;
    height: 896rpx;
    position: absolute;
    left: calc(100vw / 2 - 622rpx / 2);
    top: calc(100vh / 2 - 896rpx / 2 - 60rpx);
}

.sign-pop-body ._body {
    width: 568rpx;
    height: 484rpx;
    position: absolute;
    left: 26rpx;
    top: 372rpx;
    z-index: 2;
}
.gift_wrap {
    width: 100%;
    height: 232rpx;
    box-sizing: border-box;
    padding-top: 28rpx;
}

.coupon_node {
    width: 508rpx;
    height: 148rpx;
    margin: auto;
    display: flex;
    flex-direction: row;
    position: relative;
}
.coupon_node ._bg {
    width: 508rpx;
    height: 148rpx;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.coupon_node ._node_left {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 20rpx 20rpx 20rpx 40rpx;
    flex: 1;
    width: 404rpx;
    overflow: hidden;
}
._node_left ._coupont_title {
    font-size: 32rpx;
    font-weight: 600;
}
._node_left ._coupon_sub_title {
    font-size: 26rpx;
    padding: 14rpx 0;
}
._node_left ._coupon_sub_title:before, ._node_left ._coupon_sub_title:after {
    width: 5px;
    height: 5px;
    background: #444;
    transform:rotate(45deg);
    margin: 0 10rpx;
    display: inline-block;
    content: "";
    vertical-align: middle;
}

._node_left ._coupon_times {
    font-size: 24rpx;
}

.coupon_node ._node_right {
    width: 144rpx;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    z-index: 1;
    position: relative;
    justify-content: center;
    align-items: baseline;
    color: #fff;
    box-sizing: border-box;
    padding-top: 10rpx;
}

._node_right._zk ._num {
    font-size: 76rpx;
    font-weight: 600;
    box-sizing:border-box;
}

._node_right._zk._small ._num {
    font-size: 50rpx;
    padding-top: 18rpx;
}

._node_right._zk ._zhe {
    font-size: 28rpx;
}


._node_right._cash ._num {
    font-size: 76rpx;
    font-weight: 600;
    box-sizing:border-box;
}

._coupon_use_text {
    color: #fff;
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    font-size: 24rpx;
}

._node_right._cash._small ._num {
    font-size: 50rpx;
    padding-top: 18rpx;
}

._node_right._cash ._unit {
    font-size: 28rpx;
    position: relative;
    top: -2rpx;
    padding-right: 2rpx;
}

.sign-pop-body .award_des {
    text-align: center;
    color: #BF2637;
    font-size: 28rpx;
    height: 120rpx;
    line-height: 120rpx;
}

.sign-pop-body ._btn {
    width: 360rpx;
    height: 76rpx;
    border-radius: 76rpx;
    text-align: center;
    color: #fff;
    line-height: 76rpx;
    margin: auto;
    font-size: 42rpx;
}

.sign-pop-body ._layer_bg {
    width: 622rpx;
    height: 896rpx;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    display: block;
}

.dlg ._close {
    width: 54rpx;
    height: 54rpx;
    position: absolute;
    display: block;
    left: calc(100vw / 2 - 54rpx / 2);
    top: calc(100vh / 2 + 896rpx / 2 + 10rpx);
}