/* packageA//pages/checkin/checkin.wxss */ @charset "utf-8"; page, .checkin-container { /* height: 100%; overflow: hidden; */ } .checkin-container { background: linear-gradient(#FF7A07, #FF980F, white 95%); background-repeat: no-repeat; } .checkin-container { /* background-color: #3F7EFF; */ } .rule-container { padding-top: 40rpx; align-items: center; justify-content: space-between; position: relative; } .points { background-color: #FFBC47; color: #333; font-size: 26rpx; border-top-left-radius: 25rpx; border-bottom-left-radius: 25rpx; display: flex; align-items: center; padding-right: 20rpx; line-height: 50rpx; } .rule { padding: 10rpx 20rpx; color: white; font-size: 26rpx; } .coin { width: 30rpx; height: 25rpx; padding-left: 10rpx; padding-right: 6rpx; } .current { display: flex; justify-content: space-between; padding: 60rpx 30rpx 30rpx; color: white; font-size: 28rpx; } .days { font-weight: bold; color: #FFE749; } .f-vc { display: flex; align-items: center; } .btn-container { display: flex; justify-content: space-around; margin-bottom: 80rpx; } .icon-rili, .icon-buqian { margin-right: 10rpx; font-size: 40rpx; font-weight: normal; } .btn { width: 260rpx; line-height: 76rpx; padding-left: 30rpx; padding-right: 30rpx; background-color: #FFBC47; border-radius: 38rpx; color: white; text-align: center; box-shadow: 0 7px 0 #FF9A45, 0 8px 3px rgba(0, 0, 0, 0.3); margin: 0 auto; display: flex; align-items: center; justify-content: center; font-weight: bold; } .btn.gray{ background-color: gainsboro; } .list { margin: 80rpx 20rpx 60rpx; color: rgba(255,255,255,.3); align-items: center; position: relative; } .list::after { content: ''; position: absolute; left: 0; right: 0; top: 30rpx; margin: 0 auto; width: 94%; height: 10rpx; background-color: rgba(255,255,255,.3); } .list-item { width: calc(100% / 7); text-align: center; } .circle { width: 68rpx; height: 68rpx; line-height: 68rpx; font-size: 26rpx; color: white; background-color: #FF9A45; margin: 0 auto 10rpx auto; position: relative; z-index: 3; } .list-item.active { color: white; /* font-weight: bold; */ } .list-item.active .circle { box-sizing: border-box; background-color: #FFBC47; /* color: white; */ border: 4rpx solid white; line-height: 64rpx; /* box-shadow: 2rpx 2rpx 16rpx #ddd; */ } .calendar-container { position: relative; padding: 0 60rpx; } .calendar-container::before { content: ''; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: 680rpx; height: 24rpx; border-radius: 12rpx; /* background-color: #8AAFFC; */ background: linear-gradient(#CBDAFC, #6E9CFD); box-shadow: 0 2rpx 10rpx #6C98F4; } .calendar-wrapper { background: linear-gradient(#BAD4FD, white 6rpx); position: relative; z-index: 2; width: 100%; top: 12rpx; left: 0; border-bottom-left-radius: 16rpx; border-bottom-right-radius: 16rpx; box-shadow: 0 2rpx 16rpx #999; } .calendar-title { text-align: center; line-height: 86rpx; border-bottom: 2rpx solid #E0E6EE; display: flex; align-items: center; padding: 0 20rpx; justify-content: space-between; } .calendar { /* height: 400rpx; */ font-size: 26rpx; color: #838E9C; padding-bottom: 20rpx; } .week { display: flex; flex-wrap: wrap; text-align: center; } .jfbuy-container { padding: 60rpx 25rpx 40rpx; } .jfbuy { /* border: 2rpx solid black; */ border-radius: 16rpx; /* padding: 40rpx 30rpx; */ background-color: #FF980F; box-shadow: 0 2rpx 16rpx #FF7A07; /* position: fixed; width: 100%; bottom: 0; */ /* padding: 40rpx 20rpx; */ } .jfbuy-img { width: 260rpx; height: 180rpx; padding-right: 40rpx; } .t1 { font-weight: bolder; color: white; } .t2 { color: white; font-size: 24rpx; padding-top: 10rpx; } .right { display: flex; flex-direction: column; justify-content: space-between; flex: 1; } .btn-buy { /* padding: 20rpx 10rpx; */ border: 2rpx solid white; color: white; line-height: 60rpx; border-radius: 30rpx; } .today .day { /* background-color: skyblue; border-radius: 50%; */ /* color: white; */ /* width: 44rpx; height: 44rpx; line-height: 44rpx; */ /* border-radius: 50%; */ /* background-color: rgba(255,188,71,.6); */ /* box-shadow: 0 2rpx 12rpx #FFBC47; */ } .active .day, .bq .day { position: relative; } .active .day::after { content: ''; position: absolute; width: 10rpx; height: 10rpx; border-radius: 50%; background-color: #FFBC47; left: 0; right: 0; bottom: 12rpx; margin: auto; box-shadow: 0 2rpx 12rpx #FFBC47; } .bq .day { background-color: #eee; } .bq .day::before { position: absolute; top: 4rpx; right: 0; content: '补'; color: white; font-size: 16rpx; line-height: 16rpx; z-index: 5; } .bq .day::after { position: absolute; top: 0; right: 0; content: ''; width: 0; border-top: 34rpx solid #ccc; border-left: 34rpx solid transparent; } .popup-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 99; background-color: rgba(0,0,0,.5); } .popup-wrapper { position: absolute; width: 80%; max-height: 880rpx; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } .popup { padding: 30rpx; background-color: white; border-radius: 20rpx; max-height: 800rpx; overflow: auto; } .popup-title { font-weight: 28rpx; font-weight: bold; padding-bottom: 20rpx; } .popup-content { text-align: justify; } .popup-close { color: white; text-align: center; padding-top: 20rpx; } .btn-close { display: inline-block; width: 50rpx; height: 50rpx; line-height: 50rpx; border-radius: 50%; border: 4rpx solid white; } .date { width: 100%; display: flex; flex-wrap: wrap; text-align:center; } .cover-layer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; background: rgba(0,0,0,0.4); width: 100%; height: 100%; } .pop_up_no{ z-index: 2000; position: fixed; width:80%; height:500rpx; left: 50%; top:50%; transform:translate(-50%,-50%); background-color: #fff; font-size: 28rpx; border-radius: 20rpx; } .pop_up_no .title{ height: 90rpx; background-color: #ffd601; text-align: center; line-height: 90rpx; border-top-right-radius: 20rpx; border-top-left-radius: 20rpx; } .pop_up_no .content{ text-align: center; } .pop_up_no .close_img{ width:60rpx; height:60rpx;position:absolute; right:-15px; top:-15rpx; } .swiper { width: 700rpx; height: 300rpx; /* background: #cccc; */ } .swiper-item { display: flex; align-items: center; } .slide-image { width: 100%; height: 100%; }