.topBg { top: 0; left: 0; width: 100%; height: auto; } .navTitle { left: 0; margin: 0 23rpx; font-size: 36rpx; font-weight: bold; color: white; } .searchC { background-color: white; left: 0; right: 0; margin: 20rpx 25rpx 0; padding: 0 20rpx; height: 75rpx; border-radius: 20rpx; font-size: 26rpx; font-weight: 500; } .searchC .icon { margin-right: 16rpx; width: 30rpx; height: auto; } .searchC input { height: 100%; } .searchC .line { background-color: #E1E1E1; width: 1rpx; height: 40rpx; } .searchC .search { padding: 0 25rpx; color: #F97316; } .contentC { background-color: white; left: 0; right: 0; bottom: calc(55px + env(safe-area-inset-bottom)); margin-top: 22rpx; border-radius: 20rpx 20rpx 0 0; overflow-y: scroll; } .contentC .todayC { padding: 12rpx 26rpx; } .contentC .todayC .todayDateC { font-size: 32rpx; font-weight: bold; color: #222; } .contentC .todayC .todayDateC .icon { margin-left: 16rpx; width: 30rpx; height: auto; } .contentC .todayC .today { background-color: #F973161A; width: 40rpx; line-height: 40rpx; border-radius: 50%; font-size: 26rpx; font-weight: 500; color: #F97316; text-align: center; } .contentC .weekList .item { line-height: 40rpx; font-size: 24rpx; color: #292621; text-align: center; } .contentC .weekDateList .item { padding-top: 14rpx; } .contentC .weekDateList .item .date { width: 40rpx; line-height: 40rpx; font-size: 24rpx; text-align: center; } .contentC .weekDateList .item .date.today { background-color: #F9731626; border-radius: 5rpx; color: #F97316; } .contentC .weekDateList .item .eventNum { margin-top: 12rpx; width: 80rpx; height: 30rpx; line-height: 30rpx; border-radius: 5rpx; font-size: 16rpx; font-weight: 500; color: white; text-align: center; } .contentC .weekDateList .item .eventNum.danger { background-color: #EB4A46; } .contentC .weekDateList .item .eventNum.warning { background-color: #FD9C16; } .contentC .weekDateList .item .eventNum.info { background-color: #16BBCF; } .contentC .weekDateList .item .eventNum.success { background-color: #55AE59; } .contentC .monthDateList .item { padding-top: 14rpx; width: calc(100%/7); } .contentC .monthDateList .item .date { width: 40rpx; line-height: 40rpx; font-size: 24rpx; font-weight: bold; color: #292621; text-align: center; } .contentC .monthDateList .item .date.today { background-color: #F9731626; border-radius: 5rpx; color: #F97316; } .contentC .monthDateList .item .date.notCurrentMonth { color: #999; } .contentC .monthDateList .item .eventNum { margin-top: 12rpx; width: 80rpx; height: 30rpx; line-height: 30rpx; border-radius: 5rpx; font-size: 16rpx; font-weight: 500; color: white; text-align: center; } .contentC .monthDateList .item .eventNum.danger { background-color: #EB4A46; } .contentC .monthDateList .item .eventNum.warning { background-color: #FD9C16; } .contentC .monthDateList .item .eventNum.info { background-color: #16BBCF; } .contentC .monthDateList .item .eventNum.success { background-color: #55AE59; } .contentC .expandBgC { margin: 0 25rpx; border-bottom: solid 1rpx #E4E4E4; } .contentC .expandBgC .expandC { padding: 20rpx 0; font-size: 22rpx; font-weight: 500; color: #8A857C; } .contentC .expandBgC .expandC .arrow { margin-left: 7rpx; width: 15rpx; height: auto; } .contentC .tabC .item { display: inline-block; padding: 0 24rpx; line-height: 70rpx; font-size: 32rpx; color: #42485B; } .contentC .tabC .item.select { color: #F97316; } .contentC .topCategoryC { white-space: nowrap; border-bottom: solid 1rpx #E4E4E4; } .contentC .topCategoryC .item { display: inline-block; line-height: 72rpx; padding: 0 28rpx; font-size: 27rpx; font-weight: 500; color: #42485B; } .contentC .topCategoryC .item.select { font-weight: bold; color: black; } .contentC .topCategoryC .item.select .line { background-color: #F97316; left: calc((100% - 50rpx)/2); width: 50rpx; height: 2rpx; bottom: 0; } .eventList { padding: 0 25rpx; } .eventList .item { padding: 30rpx 0; border-bottom: solid 1rpx #E4E4E4; } .eventList .item .time { font-size: 24rpx; font-weight: bold; color: #767676; } .eventList .item .starC .starList { top: 0; left: 0; } .eventList .item .starC .icon { margin-right: 9rpx; width: 27rpx; height: auto; } .eventList .item .categoryTitleC { margin-top: 18rpx; } .eventList .item .categoryTitleC .category { background-color: #FD9A14; margin-right: 10rpx; padding: 0 12rpx; line-height: 40rpx; border-radius: 8rpx; font-size: 22rpx; font-weight: bold; color: white; } .eventList .item .categoryTitleC .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 30rpx; font-weight: bold; color: #222; } .eventList .item .labelC { margin-top: 12rpx; } .eventList .item .labelC .label { display: inline-block; margin-right: 10rpx; padding: 0 10rpx; line-height: 30rpx; font-size: 20rpx; font-weight: 500; border-radius: 5rpx; border: solid 1rpx #333; } .eventList .item .content { margin-top: 20rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; overflow: hidden; font-size: 24rpx; font-weight: 500; color: #666; } .eventList .item .percentList { white-space: nowrap; margin-top: 20rpx; } .eventList .item .percentList .percentItem { display: inline-flex; align-items: center; background-color: #F8F8F8; margin-right: 20rpx; padding: 0 20rpx; height: 70rpx; border-radius: 10rpx; font-size: 26rpx; font-weight: bold; color: #222; } .eventList .item .percentList .percentItem zui-progress-circle { margin-left: 20rpx; } .eventList .item .percentList .percentItem .num { width: 23px; line-height: 23px; font-size: 17rpx; font-weight: bold; color: #999; text-align: center; } .eventList .item .percentList .percentItem:last-child { margin-right: 0; } .dataList { padding: 0 25rpx; } .dataList .item { padding: 30rpx 0; border-bottom: solid 1rpx #E4E4E4; } .dataList .item .time { font-size: 24rpx; font-weight: bold; color: #767676; } .dataList .item .starC .starList { top: 0; left: 0; } .dataList .item .starC .icon { margin-right: 9rpx; width: 27rpx; height: auto; } .dataList .item .title { margin-top: 16rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 30rpx; font-weight: bold; color: #222; } .dataList .item .valueList { margin-top: 20rpx; font-size: 26rpx; font-weight: 500; color: #666; } .popup { background-color: white; padding: 30rpx 0; } .popup .yearMonthC { padding: 0 30rpx; } .popup .yearMonthC .yearMonth { text-align: center; font-size: 24rpx; } .popup .yearMonthC .btn { background-color: #f8f8f8; width: 40rpx; height: 40rpx; border-radius: 50%; } .popup .yearMonthC .btn .icon { display: block; width: 24rpx; height: auto; } .popup .weekList { margin-top: 20rpx; padding: 0 30rpx; } .popup .weekList .item { line-height: 40rpx; font-size: 24rpx; color: #a1a1a1; text-align: center; } .popup .monthDateList { padding: 0 30rpx; } .popup .monthDateList .item { margin-bottom: 10rpx; width: calc(100%/7); } .popup .monthDateList .item .date { background-color: #f8f8f8; width: calc(100% - 10rpx); line-height: 64rpx; border-radius: 15rpx; font-size: 24rpx; font-weight: bold; color: #333; text-align: center; } .popup .monthDateList .item .date.today { background-color: #FF7E1A; color: white; } .popup .monthDateList .item .date.inRange { background-color: #FFF2EB; } .popup .monthDateList .item .date.notCurrentMonth { background-color: #fdfdfd; color: #c3c3c3; } .popup .monthDateList .item .eventNum { margin-top: 12rpx; width: 80rpx; height: 30rpx; line-height: 30rpx; border-radius: 5rpx; font-size: 16rpx; font-weight: 500; color: white; text-align: center; }