page { background-color: #F4F4F4; } .continuouspunching_style::before { content: ""; display: block; padding-top: 100%; } .continuouspunching_style { background-image: url('https://i.loli.net/2019/10/18/C9cPfSnrMUmqxz8.png'); width: 100%; background-size: 100% auto; margin-top: -130rpx; } .continuouspunching_style .clockfrequency_view_style { padding-top: 100rpx; width: 77%; display: flex; justify-content: space-between; align-items: center; text-align: center; position: absolute; top: 30rpx; left: 95rpx; } .continuouspunching_style .clockfrequency_view_style .daka_info { color: white; line-height: 65rpx; letter-spacing: 5rpx; } .continuouspunching_style .clockfrequency_view_style .daka_info .daka_tiansu .daka_number_style { font-size: 60rpx; } .continuouspunching_style .clockfrequency_view_style .daka_info .daka_jiesao { opacity: 0.8; font-size: 30rpx; } .continuouspunching_style .all { position: absolute; top: 280rpx; left: 30rpx; width: 92%; box-shadow: 0 5px 8px -1px rgba(175, 171, 171, 0.2); padding-top: 20rpx; border-radius: 20rpx; background-color: white; } .continuouspunching_style .all .bar { display: flex; flex-direction: row; justify-content: space-between; padding: 10rpx; } .continuouspunching_style .all .bar .date { display: flex; justify-content: flex-start; align-items: center; font-size: 38rpx; font-weight: 500; color: #333333; margin: 0px auto; } .continuouspunching_style .all .bar .date .sanjiao { width: 0; height: 0; border-top: 9px solid transparent; border-right: 12px solid #2681FF; border-bottom: 9px solid transparent; margin-right: 20rpx; } .continuouspunching_style .all .bar .date .you_sanjiao { width: 0; height: 0; border-top: 9px solid transparent; border-left: 12px solid #ccc; border-bottom: 9px solid transparent; margin-left: 20rpx; } .continuouspunching_style .all .week { display: flex; flex-direction: row; justify-content: space-between; padding: 20rpx; padding-left: 40rpx; padding-right: 40rpx; border-radius: 10px; color: #2681FF; margin: 20rpx; font-size: 30rpx; } .continuouspunching_style .all .days { margin: 20rpx; padding: 10rpx; border-radius: 10px; font-size: 30rpx; } .continuouspunching_style .all .days .columns { display: flex; flex-direction: column; justify-content: space-between; } .continuouspunching_style .all .days .columns .rows { display: flex; flex-direction: row; justify-content: space-between; } .continuouspunching_style .all .days .columns .rows .cell { width: 84rpx; height: 88rpx; margin: 3rpx; text-align: center; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; } .continuouspunching_style .credit { width: 100%; display: flex; justify-content: center; position: absolute; top: 84%; font-weight: 700; } .continuouspunching_style .mxc2-1 { position: absolute; top: 89%; left: 50%; margin-left: -315rpx; width: 80%; }