/* components/xx-calendar/xx-calendar.wxss */ /* 头部样式start */ .title-wrap{ /* background-color: #F2F2F2; */ /* padding-top: 20rpx; */ /* border-bottom: 1px solid #D4DBDC; */ /* padding-bottom: 10rpx; */ /* width: 697rpx; */ /* margin: 0 auto; padding: 37rpx 22rpx 40rpx; */ background-color: #FFD6B2; margin: 0 auto; padding: 37rpx 22rpx 40rpx; background-image: url("https://static.ticket.sz-trip.com/jundaosuzhou/images/calendar-top.png"); background-size: 100% 100%; width: 90%; height: 65.67rpx } .change-date{ display: flex; justify-content: space-between; align-items: center; } .change-date image{ width: 50rpx; height: 50rpx; transform: scale(1.5); display: flex; } .year-mouth{ margin: 0 60rpx; font-weight: bold; font-size: 35rpx; color: #000; } .week{ width: 100%; display: flex; justify-content: space-between; font-size: 24rpx; margin-top: 30rpx; color: #1F1F1F; } .week text{ flex: 1; text-align: center; } /* 头部样式end */ /* 日期区域样式start */ .date-wrap{ /* height: 500rpx; */ width: 697rpx; margin: 0 auto; background-color: #fff; display: flex; flex-wrap: wrap; border-radius: 20rpx; margin-top: -28rpx; position: relative; } .mouth-date{ display: flex; font-size: 24rpx; flex-direction: column; align-items: center; width: calc(100% / 7); /* border-bottom: 1rpx solid rgb(229, 234, 235); */ padding-top: 10rpx; } .last-mouth text,.next-mouth text{ opacity: 0; } .mouth-date .day{ display: flex; flex-direction: column; align-items: center; color: #1F1F1F; } .mouth-date .day-nongli{ font-size: 18rpx; /* color: #888888; */ margin-bottom: 6rpx; } .mouth-date .color{ color: #8096F0; } .mouth-date .day-dot{ width: 8rpx; height: 8rpx; border-radius: 50%; background-color: #8096F0; } .mouth-date .day-box{ border-radius: 27rpx; width: 86rpx; padding-top: 10rpx; display: flex; flex-direction: column; align-items: center; margin-bottom: 10rpx; padding-bottom: 8rpx; } .mouth-date .active{ background-color: #0B898E !important; } .mouth-date .active text{ color: #fff !important; } .mouth-date .active .day-text{ font-weight: 600; } .not-dot{ width: 8rpx; height: 8rpx; } .holiday-box{ background-color: #ffecda; border-radius: 10px; } .holiday { /* background-color: #ffecda; */ position: relative; /* color: #e1856e; */ } .holidayactive { position: relative; } .day-text .xiu { font-size: 6px; position: absolute; right: 5px; top: 5px; } .holiday .xiu { font-size: 6px; position: absolute; right: 5px; top: 5px; } .holiday .day-nongli { /* color: #e1856e; */ } .footer{ display: flex; justify-content: center; width: 100%; height: 54rpx; color:#adb1b3; font-size:24rpx; } .footer .arrow{ width:22rpx; height: 34rpx; } .footer image { width: 20rpx; height: 20rpx; margin: 12rpx auto 20rpx; } .arrow-left{ transform-origin:50% 50%; transform: rotate(180deg) } .arrow-down{ transform-origin:50% 50%; transform: rotate(90deg) } .arrow-up{ transform-origin:50% 50%; transform: rotate(-90deg) } .next, .prev { display: flex; align-items: baseline; font-size: 27rpx; font-weight: 500; color: #000; } .next image, .prev image { width: 20rpx; height: 20rpx; }