index.scss

.collect-blessing {
  padding-bottom: 30px;
}

.collect-blessing__item {
  display: flex;
  align-items: center;
  position: relative;
  width: 335px;
  height: 60px;
  margin: 20px auto 0;
  border-radius: 5px;
  background-color: #fff;
}

.collect-blessing__num {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  padding-left: 6px;
  box-sizing: border-box;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
  color: #FFFFFD;
  line-height: 21px;
  background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/blessing-number-bg.png');
  background-size: cover;
}



.collect-blessing__title {
  flex: 1;
  padding: 0 8px 0 24px;
  font-size: 12px;
  color: #333;
  line-height: 18px;
}

.collect-blessing__content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 100%;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  background: linear-gradient(-40deg,rgba(255,75,240,1) 0%,rgba(162,0,255,1) 100%);

  i {
    font-style: normal;
    font-size: 12px;
  }

  &[data-layout="column"] {
    flex-direction: column;
  }

  &[data-status="done"] {
    background: rgba(82,92,101,.3);
  }
}

.collect-blessing__label {
  margin: 0 0 8px;
}

.collect-blessing__share {
  display: flex;
  align-items: center;
  justify-content: center;
}

.collect-blessing__share-button {
  display: block;
  width: 20px;
  height: 11px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;

  &[data-type="qq"] {
    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/qq-icon.png');
  }

  &[data-type="wechat"] {
    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/wechat-icon.png');
  }

  &[data-type="weibo"] {
    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/icon-weibo.png');
  }
}

.activity__over {
  font-size:12px;
  font-weight:400;
  color:rgba(255,243,240,1);
  margin: 10px auto;
  text-align: center;
}

.login__btn {
  width:34px;
  height:18px;
  background:linear-gradient(0deg,rgba(255,67,2,1), rgba(255,132,0,1));
  border-radius:3px;
  color: #FFF;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  margin-right: 12px;
}

.text_nologin {
  font-size:16px;
  font-weight:600;
  color:rgba(255,243,240,1);
  margin-left: 12px;
}

.rules__item {
  background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/fuqi_bj1.png') center center no-repeat;
  background-size: 100% 100%;
  width: 336px;
  padding: 18px 18px 10px 18px;
  margin: 10px auto 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 106px;

  .item__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 100%;
    padding-right: 10px;

    .tip__bubble {
      position: relative;
      margin-bottom: 10px;
      .tip__text {
        width: 54px;
        height: 22px;
        background:linear-gradient(90deg,rgba(245,175,172,1) 0%,rgba(241,226,229,1) 100%);
        border-radius:3px;
        font-weight:400;
        line-height: 22px;
        text-align: center;
        color:rgba(255,67,2,1);
      }
      .tip__style {
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #F3C9C9;
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .range__number {
      font-size:16px;
      font-weight:500;
      color:rgba(255,67,2,1);
    }
  }

  .item__right {
    border-left: 1px dashed rgba(255,255,255, .5);
    flex: 1 1 auto;
    font-size:12px;
    font-weight:400;
    color:rgba(242,240,250,1);
    line-height:15px;
    padding: 8px 0 8px 20px ;

    p {
      margin-bottom: 10px;
      line-height: 1;

      &:last-child {
        margin-bottom: 0; 
      }
      span {
        font: size 12px;
        font-weight:400;
        color:rgba(255,223,4,1);
        line-height:15px;
      }
    }
  }
}