pika_shangjia/integralShop/task/index.css

page{padding-bottom: 50rpx;}
.top-fixed{position: fixed;left: 0;top: 0;right: 0;z-index: 50;}
.bgcolor {background: var(--mina);position: absolute;top: 0;left: 0;right: 0;transition: .3s all ease;opacity: 0;}
.opacity{opacity: 1;}
.top-fixed-c{position: relative;}
.back{position: absolute;top: 50%;transform: translateY(-50%);left: 0;padding-left: 30rpx;}
.back image{width: 24rpx;height: 39rpx;}
.top-title{font-size: 34rpx;color: #fff;font-weight: bold;text-align: center;}
.top{position: relative;height: 410rpx;box-sizing: border-box;overflow: hidden;}
.top::after{content: '';display: block;position: absolute;left: -20%;right: -20%;top: 0;bottom: 0;background: var(--mina);border-radius: 0 0 50% 50%;z-index: 1;}
.task-bg{width: 100%;height: 100%;position: absolute;z-index: 2;top: 0;left: 0;}
.top-c{position: relative;z-index: 3;padding: 10rpx 30rpx 0;}
.jifen{font-size: 64rpx;color: #fff;font-weight: bold;}
.jifen text{display: block;font-size: 28rpx;opacity: .8;font-weight: normal;margin-bottom: 10rpx;}
.top-btn{width: 212rpx;height: 66rpx;background: #FFFFFF;border-radius: 32rpx;font-size: 28rpx;color: #EB1C24;justify-content: center;}
.top-btn image{width: 29rpx;height: 32rpx;margin-right: 10rpx;}
.date{background: #fff;border-radius: 16rpx;margin: -65rpx 30rpx 0;padding: 40rpx 30rpx;position: relative;z-index: 5;}
.date-list{justify-content: space-around;}
.date-list .li{font-size: 24rpx;color: #999;text-align: center;position: relative;}
.date-list .li::after{content: '';display: block;width: 35rpx;height: 2rpx;background: #D3D3D3;position: absolute;right: -35rpx;top: 31rpx;}
.li-jifen{width: 60rpx;height: 60rpx;background: #F1EFF1;border-radius: 50%;font-size: 22rpx;color: #333;justify-content: center;position: relative;}
.date-list .li.end .li-jifen{background: #FFE7C4;}
.date-list .li.end::after{background: #FF7334;}
.yiqian{width: 30rpx;height: 22rpx;}
.day{margin-top: 5rpx;}
.date-list .li.ing .day{color: #FF7334;}
.date-list .li:last-child .li-jifen{background: linear-gradient(180deg, #FDD674 0%, #FFB74A 100%);color: #fff;}
.date-list .li:last-child .li-jifen::before{content: '';display: block;position: absolute;top: -5rpx;left: -5rpx;right: -5rpx;bottom: -5rpx;border: 1rpx solid #FFC657;border-radius: 50%;}
.date-list .li:last-child::after{display: none;}
.date-btn{height: 66rpx;background: linear-gradient(111deg, #FD8403 0%, #FFA407 100%);border-radius: 50rpx;font-size: 26rpx;color: #fff;text-align: center;line-height: 66rpx;margin-top: 25rpx;box-shadow: 0 5rpx 0 #F7730C;}
.task{background: #fff;border-radius: 16rpx;margin: 30rpx 30rpx 0;padding: 35rpx 30rpx 0;}
.tits{font-size: 30rpx;color: #333;font-weight: bold;}
.task-list .li{padding: 35rpx 0;border-bottom: 1rpx solid #DEDEDE;}
.task-list .li:last-child{border-bottom: none;}
.task-name{font-size: 28rpx;color: #333;}
.task-name text{font-size: 30rpx;color: #FF7334;font-weight: bold;margin-left: 10rpx;}
.task-bri{font-size: 24rpx;color: #999;line-height: 1.5;margin-top: 5rpx;}
.li-r{text-align: center;margin-left: 50rpx;}
.task-btn{width: 156rpx;height: 56rpx;border-radius: 50rpx;border: 1rpx solid #333333;font-size: 26rpx;color: #333;text-align: center;line-height: 54rpx;box-sizing: border-box;}
.task-btn.ing{background: linear-gradient(90deg, #FD8403 0%, #FCC870 100%);color: #fff;line-height: 56rpx;border: none;}
.task-btn.end{background: #C7C7C7;color: #fff;line-height: 56rpx;border: none;}
.task-num{font-size: 24rpx;color: #999;margin-top: 15rpx;}