/* components/xx-calendar/xx-calendar.wxss */ page{ background: #FFFBF3; } .bigBg { background-image: url("https://static.ticket.sz-trip.com/jundaosuzhou/images/calendar2026/bigCalss.png"); background-size: 100% 100%; width: 750rpx; height: 893rpx; padding-top: 70rpx; box-sizing: border-box; position: relative; z-index: 2; margin-top: 756rpx; } .smallBg { background-image: url("https://static.ticket.sz-trip.com/jundaosuzhou/images/calendar2026/smallCal.png"); background-size: 100% 100%; width: 740.67rpx; height: 478rpx; padding-top: 103rpx; box-sizing: border-box; position: relative; z-index: 2; margin-top: 756rpx; } /* 头部样式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 0 40rpx; /* 节假日花样 */ /* background-image: url("https://static.ticket.sz-trip.com/uploads/20240605/82a51ad6c58274c78f99fef4af3c9739.png"); */ background-size: 100% 100%; width: 100%; /* height: 65.67rpx; */ height: 256.67rpx; /* background-image: url("https://static.ticket.sz-trip.com/uploads/20250421/58fee5695a0b676a14e8157b809ba1d6.png"); */ box-sizing: border-box; } .change-date{ display: flex; justify-content: space-between; align-items: center; margin: 0 50rpx; } .change-date image{ width: 50rpx; height: 50rpx; transform: scale(1.5); display: flex; } .year-mouth{ font-weight: 600; font-size: 36rpx; color: #EF1C24; } .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: 650rpx; margin: 0 auto; background-color: none; display: flex; flex-wrap: wrap; border-radius: 20rpx; margin-top: -165rpx; 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: 5rpx; padding-bottom: 8rpx; } .mouth-date .active{ background-color: #FFF168 !important; border: 3rpx solid #EF1C24; box-sizing: border-box; } .mouth-date .active text{ color: #00A4FA !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: 34rpx; height: 34rpx; margin: 0 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 { width: 128rpx; liine-height: 43rpx; text-align: center; background: #FFF168; border-radius: 21rpx 21rpx 21rpx 21rpx; border: 3rpx solid #EF1C24; font-weight: 500; font-size: 27rpx; color: #000000; margin-left: 30rpx; display: inline-block; } .next image, .prev image { width: 20rpx; height: 20rpx; } .bottom-image{ position: absolute; bottom: 0; right: 0; width: 290.13rpx; height: 146rpx; display: none; }