.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%; padding: 0; border-style: none; 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: 14px; border-style: none; background-color: transparent; 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/qq.png'); } &[data-type="wechat"] { height: 16px; background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/wechat.png'); } &[data-type="weibo"] { height: 17px; background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/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; } } } }