<script setup>
import { ref, computed } from "vue";
const currentYear = ref(new Date().getFullYear());
const today = ref(new Date());
const weekDays = ["一", "二", "三", "四", "五", "六", "日"];
const checkedCities = ref([]);
const highlightOptions = {
holiday: "节假日",
spring: "春季",
summer: "夏季",
autumn: "秋季",
winter: "冬季",
monday: "周一",
tuesday: "周二",
wednesday: "周三",
thursday: "周四",
friday: "周五",
saturday: "周六",
sunday: "周日",
};
const activeHighlight = ref(new Set());
const excludedMonths = ref([]);
const excludedDays = ref(new Set());
const overrideExcludedHighlights = ref(new Set()); // 新增:记录手动取消的高亮日期
const monthOptions = Array.from({ length: 12 }).map((_, idx) => ({
value: idx + 1,
label: `${idx + 1}月`,
}));
// 计算总天数(考虑闰年)
const totalDays = computed(() => {
const isLeapYear =
(currentYear.value % 4 === 0 && currentYear.value % 100 !== 0) ||
currentYear.value % 400 === 0;
return isLeapYear ? 366 : 365;
});
// 计算排除的天数
const excludedDaysCount = computed(() => {
let count = 0;
// 1. 排除月份的天数(保持不变)
excludedMonths.value.forEach((month) => {
count += new Date(currentYear.value, month, 0).getDate();
});
// 2. 单独排除的天数(保持不变)
excludedDays.value.forEach((dateStr) => {
const date = new Date(dateStr);
const month = date.getMonth() + 1;
if (!excludedMonths.value.includes(month)) count++;
});
// 3. 高亮排除的天数(关键修改)
for (const column of groupedMonths.value) {
for (const month of column) {
const monthValue = month.value + 1;
if (excludedMonths.value.includes(monthValue)) continue;
for (const day of month.days) {
if (
!day.empty &&
!excludedDays.value.has(day.date) &&
!overrideExcludedHighlights.value.has(day.date) && // 新增条件
shouldHighlight(day, month.value)
) {
count++;
}
}
}
}
return count;
});
// 剩余天数计算保持不变
const remainingDays = computed(() => {
return totalDays.value - excludedDaysCount.value;
});
const toggleDayExclusion = (dateStr, day, monthIndex) => {
const isHighlighted = shouldHighlight({ ...day, date: dateStr }, monthIndex);
// 统一操作入口
if (isHighlighted) {
overrideExcludedHighlights.value.has(dateStr)
? overrideExcludedHighlights.value.delete(dateStr)
: overrideExcludedHighlights.value.add(dateStr);
} else {
excludedDays.value.has(dateStr)
? excludedDays.value.delete(dateStr)
: excludedDays.value.add(dateStr);
}
};
const handleMonthChange = () => {
// console.log("排除的月份:", excludedMonths.value);
};
const isCurrentMonth = (monthIndex) => {
return (
currentYear.value === today.value.getFullYear() &&
monthIndex === today.value.getMonth()
);
};
const isPurpleMonth = (monthIndex) => {
return [0, 4, 8].includes(monthIndex);
};
const isRedMonth = (monthIndex) => {
return [1, 5, 9].includes(monthIndex);
};
const isYellowMonth = (monthIndex) => {
return [2, 6, 10].includes(monthIndex);
};
const isGreenMonth = (monthIndex) => {
return [3, 7, 11].includes(monthIndex);
};
const toggleHighlight = (key) => {
if (activeHighlight.value.has(key)) {
activeHighlight.value.delete(key);
} else {
activeHighlight.value.add(key);
}
};
const isMonthExcluded = (monthValue) => {
return excludedMonths.value.includes(monthValue);
};
const shouldHighlight = (day, monthIndex) => {
if (day.empty || activeHighlight.value.size === 0) return false;
// 添加手动取消判断
if (overrideExcludedHighlights.value.has(day.date)) return false;
// 添加月份排除判断
if (excludedMonths.value.includes(monthIndex + 1)) return false;
const month = monthIndex + 1;
const date = new Date(day.date);
const dayOfWeek = date.getDay();
const weekdayMap = {
sunday: 0,
monday: 1,
tuesday: 2,
wednesday: 3,
thursday: 4,
friday: 5,
saturday: 6,
};
return Array.from(activeHighlight.value).some((highlight) => {
switch (highlight) {
case "holiday":
return day.isHoliday;
case "spring":
// 增加月份排除检查
return (
!excludedMonths.value.includes(month) && month >= 3 && month <= 5
);
case "summer":
return (
!excludedMonths.value.includes(month) && month >= 6 && month <= 8
);
case "autumn":
return (
!excludedMonths.value.includes(month) && month >= 9 && month <= 11
);
case "winter":
return (
!excludedMonths.value.includes(month) && (month === 12 || month <= 2)
);
default:
// 周类型判断也需要检查月份排除
return (
!excludedMonths.value.includes(month) &&
dayOfWeek === weekdayMap[highlight]
);
}
});
};
const isManuallyExcluded = (dateStr) => {
return (
excludedDays.value.has(dateStr) ||
overrideExcludedHighlights.value.has(dateStr)
);
};
// 节假日(只适用于2025年)
const holidaysData = computed(() => ({
"1-1": { name: "元旦" },
"1-28": { name: "春节" },
"1-29": { name: "春节" },
"1-30": { name: "春节" },
"1-31": { name: "春节" },
"2-1": { name: "春节" },
"2-2": { name: "春节" },
"2-3": { name: "春节" },
"2-4": { name: "春节" },
"4-4": { name: "清明" },
"4-5": { name: "清明" },
"4-6": { name: "清明" },
"5-1": { name: "劳动节" },
"5-2": { name: "劳动节" },
"5-3": { name: "劳动节" },
"5-4": { name: "劳动节" },
"5-5": { name: "劳动节" },
"5-31": { name: "端午" },
"6-1": { name: "端午" },
"6-2": { name: "端午" },
"10-1": { name: "中秋/国庆" },
"10-2": { name: "中秋/国庆" },
"10-3": { name: "中秋/国庆" },
"10-4": { name: "中秋/国庆" },
"10-5": { name: "中秋/国庆" },
"10-6": { name: "中秋/国庆" },
"10-7": { name: "中秋/国庆" },
"10-8": { name: "中秋/国庆" },
}));
const groupedMonths = computed(() => {
const allMonths = Array.from({ length: 12 }, (_, monthIndex) => {
const firstDay = new Date(currentYear.value, monthIndex, 1);
const daysInMonth = new Date(
currentYear.value,
monthIndex + 1,
0
).getDate();
let startingDay = firstDay.getDay() - 1;
if (startingDay < 0) startingDay = 6;
const days = [];
for (let i = 0; i < startingDay; i++) days.push({ empty: true });
for (let day = 1; day <= daysInMonth; day++) {
const currentDate = new Date(currentYear.value, monthIndex, day);
const dateStr = currentDate.toISOString();
const isToday =
currentYear.value === today.value.getFullYear() &&
monthIndex === today.value.getMonth() &&
day === today.value.getDate();
const isExcluded =
excludedMonths.value.includes(monthIndex + 1) || // 是否在排除月份
excludedDays.value.has(dateStr) || // 是否在排除日期
(shouldHighlight(
{
date: dateStr,
isHoliday: !!holidaysData.value[`${monthIndex + 1}-${day}`],
// 其他需要的属性...
},
monthIndex
) &&
!overrideExcludedHighlights.value.has(dateStr)); // 是否被手动取消
const dayOfWeek = currentDate.getDay();
const isSaturday = dayOfWeek === 6;
const isSunday = dayOfWeek === 0;
const isWeekend = isSaturday || isSunday;
const holidayKey = `${monthIndex + 1}-${day}`;
const holidayInfo = holidaysData.value[holidayKey];
const isHoliday = !!holidayInfo;
days.push({
day,
date: currentDate.toISOString(),
isToday,
isWeekend,
isSaturday,
isSunday,
isHoliday,
holidayName: holidayInfo?.name,
isExcluded,
});
}
return {
value: monthIndex,
label: `${monthIndex + 1}`,
days,
};
});
return [
[allMonths[0], allMonths[4], allMonths[8]],
[allMonths[1], allMonths[5], allMonths[9]],
[allMonths[2], allMonths[6], allMonths[10]],
[allMonths[3], allMonths[7], allMonths[11]],
];
});
const getMonthColorClass = (monthIndex) => {
if (isPurpleMonth(monthIndex)) return "month-purple";
if (isRedMonth(monthIndex)) return "month-red";
if (isYellowMonth(monthIndex)) return "month-yellow";
return "month-green";
};
const prevYear = () => {
currentYear.value--;
};
const nextYear = () => {
currentYear.value++;
};
const setYear = (year) => {
currentYear.value = year;
};
// 获取当前选择的排除数据
const getExclusionData = () => {
return {
type: Array.from(activeHighlight.value),
date: getMonthDayExclusionDataAll(),
months: excludedMonths.value,
remainingDays: remainingDays.value,
};
};
// 获取格式化后的排除数据(YYYY-MM-DD格式)
const getFormattedExclusionData = () => {
const data = getExclusionData();
return {
...data,
date: data.date.map((dateStr) => {
const date = new Date(dateStr);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}),
};
};
// 获取排除的月份和日期数组(格式:[{month: 1, day: 2}, ...])
const getMonthDayExclusionData = () => {
const result = [];
// 处理排除的月份
excludedMonths.value.forEach((month) => {
const daysInMonth = new Date(currentYear.value, month, 0).getDate();
for (let day = 1; day <= daysInMonth; day++) {
result.push({ month, day });
}
});
// 处理排除的单个日期
excludedDays.value.forEach((dateStr) => {
const date = new Date(dateStr);
const month = date.getMonth() + 1; // 转换为1-based
const day = date.getDate();
result.push({ month, day });
});
// 处理高亮排除(排除已手动覆盖的)
for (const column of groupedMonths.value) {
for (const month of column) {
const monthValue = month.value + 1;
if (excludedMonths.value.includes(monthValue)) continue;
for (const day of month.days) {
if (
!day.empty &&
!excludedDays.value.has(day.date) &&
!overrideExcludedHighlights.value.has(day.date) &&
shouldHighlight(day, month.value)
) {
result.push({
month: monthValue,
day: day.day,
});
}
}
}
}
// 去重处理
const uniqueMap = new Map();
result.forEach(({ month, day }) => {
const key = `${month}-${day}`;
if (!uniqueMap.has(key)) {
uniqueMap.set(key, { month, day });
}
});
return Array.from(uniqueMap.values());
};
const getMonthDayExclusionDataAll = () => {
const result = [];
// 处理排除的月份
excludedMonths.value.forEach((month) => {
const daysInMonth = new Date(currentYear.value, month, 0).getDate();
for (let day = 1; day <= daysInMonth; day++) {
const formattedMonth = String(month).padStart(2, "0");
const formattedDay = String(day).padStart(2, "0");
result.push(`${currentYear.value}-${formattedMonth}-${formattedDay}`);
}
});
// 处理排除的单个日期
excludedDays.value.forEach((dateStr) => {
const date = new Date(dateStr);
const month = date.getMonth() + 1; // 转换为1-based
const day = date.getDate();
const formattedMonth = String(month).padStart(2, "0");
const formattedDay = String(day).padStart(2, "0");
result.push(`${currentYear.value}-${formattedMonth}-${formattedDay}`);
});
// 处理高亮排除(排除已手动覆盖的)
for (const column of groupedMonths.value) {
for (const month of column) {
const monthValue = month.value + 1;
if (excludedMonths.value.includes(monthValue)) continue;
for (const day of month.days) {
if (
!day.empty &&
!excludedDays.value.has(day.date) &&
!overrideExcludedHighlights.value.has(day.date) &&
shouldHighlight(day, month.value)
) {
const formattedMonth = String(monthValue).padStart(2, "0");
const formattedDay = String(day.day).padStart(2, "0");
result.push(`${currentYear.value}-${formattedMonth}-${formattedDay}`);
}
}
}
}
// 去重处理
const uniqueDates = [...new Set(result)];
return uniqueDates;
};
const parseMonthDayData = (monthDayArray) => {
const dateSet = new Set();
const monthSet = new Set();
// 创建月份天数统计Map {month: {total: number, days: Set}}
const monthStats = new Map();
monthDayArray.forEach(({ month, day }) => {
// 转换月份为0-based
const jsMonth = month - 1;
const date = new Date(currentYear.value, jsMonth, day);
date.setHours(0, 0, 0, 0);
const isoDate = date.toISOString();
// 统计月份数据
if (!monthStats.has(month)) {
const totalDays = new Date(currentYear.value, month, 0).getDate();
monthStats.set(month, {
total: totalDays,
days: new Set(),
});
}
monthStats.get(month).days.add(day);
dateSet.add(isoDate);
});
// 检查完整排除的月份
monthStats.forEach((stats, month) => {
if (stats.days.size === stats.total) {
monthSet.add(month);
// 从dateSet中移除该月所有日期
stats.days.forEach((day) => {
const date = new Date(currentYear.value, month - 1, day);
dateSet.delete(date.toISOString());
});
}
});
return {
excludedDates: dateSet,
excludedMonths: Array.from(monthSet),
};
};
const setExclusionData = (data) => {
// 重置所有排除状态
excludedMonths.value = [];
excludedDays.value.clear();
overrideExcludedHighlights.value.clear();
activeHighlight.value.clear();
// 处理monthDay数据
if (data?.monthDay) {
const { excludedDates, excludedMonths: parsedMonths } = parseMonthDayData(
data.monthDay
);
excludedDays.value = new Set([...excludedDays.value, ...excludedDates]);
excludedMonths.value = Array.from(
new Set([...excludedMonths.value, ...parsedMonths])
);
}
// 处理date数据
if (data?.date) {
const dates = data.date.map((dateStr) => {
const [year, month, day] = dateStr.split("-");
return new Date(year, month - 1, day).toISOString();
});
excludedDays.value = new Set([...excludedDays.value, ...dates]);
}
// 处理months数据
if (data?.months) {
excludedMonths.value = Array.from(
new Set([...excludedMonths.value, ...data.months])
);
}
// 处理type数据,需要检查每个类型是否完全排除
if (data?.type) {
const validTypes = data.type.filter((type) => {
const dates = getDatesForHighlightType(type);
return dates.every((date) => {
// 判断日期是否被排除
const isExcluded =
excludedDays.value.has(date) ||
(isDateHighlighted(date, type) &&
!overrideExcludedHighlights.value.has(date));
return isExcluded;
});
});
// 在回显的时候 不展示对应排除的类别
// activeHighlight.value = new Set(validTypes);
// checkedCities.value = validTypes;
}
};
// 辅助函数:判断日期是否符合特定高亮类型
function isDateHighlighted(dateStr, type) {
const date = new Date(dateStr);
const month = date.getMonth() + 1; // 1-based
const dayOfWeek = date.getDay();
const day = date.getDate();
switch (type) {
case "holiday":
const holidayKey = `${month}-${day}`;
return !!holidaysData.value[holidayKey];
case "spring":
return month >= 3 && month <= 5;
case "summer":
return month >= 6 && month <= 8;
case "autumn":
return month >= 9 && month <= 11;
case "winter":
return month === 12 || month <= 2;
case "monday":
return dayOfWeek === 1;
case "tuesday":
return dayOfWeek === 2;
case "wednesday":
return dayOfWeek === 3;
case "thursday":
return dayOfWeek === 4;
case "friday":
return dayOfWeek === 5;
case "saturday":
return dayOfWeek === 6;
case "sunday":
return dayOfWeek === 0;
default:
return false;
}
}
// 辅助函数:获取某高亮类型对应的所有日期
function getDatesForHighlightType(type) {
const dates = [];
const year = currentYear.value;
// 生成整个年份的日期,排除已排除的月份
for (let monthIdx = 0; monthIdx < 12; monthIdx++) {
const month = monthIdx + 1;
if (excludedMonths.value.includes(month)) continue;
const daysInMonth = new Date(year, monthIdx + 1, 0).getDate();
for (let day = 1; day <= daysInMonth; day++) {
const date = new Date(year, monthIdx, day);
if (isDateHighlighted(date.toISOString(), type)) {
dates.push(date.toISOString());
}
}
}
return dates;
}
defineExpose({
getExclusionData,
getFormattedExclusionData,
getMonthDayExclusionData, // 返回后端主要数据
setExclusionData, // 回显数据
setYear,
});
</script>
<template>
<div class="calendar-container">
<!-- 高亮按钮区域 -->
<div class="filters">
排除 :
<el-checkbox-group
v-for="(label, key) in highlightOptions"
:key="key"
@click="toggleHighlight(key)"
v-model="checkedCities"
>
<el-checkbox :label="label" :value="key" />
</el-checkbox-group>
<!-- 月份选择区域 -->
<div class="month-select-buttons">
<el-select-v2
v-model="excludedMonths"
:options="monthOptions"
placeholder="选择要排除的月份"
style="width: 240px"
multiple
clearable
@change="handleMonthChange"
/>
</div>
</div>
<el-divider />
<div class="months-grid">
<div
class="month-column"
v-for="(columnMonths, colIndex) in groupedMonths"
:key="colIndex"
>
<div
class="month-container"
v-for="month in columnMonths"
:key="month.value"
:class="[
getMonthColorClass(month.value),
{ dimmed: isMonthExcluded(month.value + 1) },
{ 'current-month': isCurrentMonth(month.value) },
]"
>
<div
class="month-header"
:class="{
'purple-text': isPurpleMonth(month.value),
'red-text': isRedMonth(month.value),
'yellow-text': isYellowMonth(month.value),
'green-text': isGreenMonth(month.value),
}"
>
{{ month.label }}月
</div>
<div
class="days-header"
:class="{
'purple-bg': isPurpleMonth(month.value),
'red-bg': isRedMonth(month.value),
'yellow-bg': isYellowMonth(month.value),
'green-bg': isGreenMonth(month.value),
}"
>
<div
v-for="day in weekDays"
:key="day"
:class="{
'weekend-purple':
isPurpleMonth(month.value) && (day === '六' || day === '日'),
'weekend-red':
isRedMonth(month.value) && (day === '六' || day === '日'),
'weekend-yellow':
isYellowMonth(month.value) && (day === '六' || day === '日'),
'weekend-green':
isGreenMonth(month.value) && (day === '六' || day === '日'),
}"
>
{{ day }}
</div>
</div>
<div class="days-grid">
<div
v-for="day in month.days"
:key="day.date"
class="day"
:class="{
empty: day.empty,
today: day.isToday,
highlighted:
(shouldHighlight(day, month.value) &&
!overrideExcludedHighlights.has(day.date)) ||
excludedDays.has(day.date) ||
isMonthExcluded(month.value + 1),
isActive: !excludedDays.has(day.date),
'weekend-purple': isPurpleMonth(month.value) && day.isWeekend,
'weekend-red': isRedMonth(month.value) && day.isWeekend,
'weekend-yellow': isYellowMonth(month.value) && day.isWeekend,
'weekend-green': isGreenMonth(month.value) && day.isWeekend,
'weekday-purple-bg':
isPurpleMonth(month.value) && !day.isWeekend && !day.empty,
'weekday-red-bg':
isRedMonth(month.value) && !day.isWeekend && !day.empty,
'weekday-yellow-bg':
isYellowMonth(month.value) && !day.isWeekend && !day.empty,
'weekday-green-bg':
isGreenMonth(month.value) && !day.isWeekend && !day.empty,
'manually-excluded': isManuallyExcluded(day.date),
'auto-excluded':
!isManuallyExcluded(day.date) &&
(excludedMonths.includes(month.value + 1) ||
shouldHighlight(day, month.value)),
}"
@click="
!day.empty && toggleDayExclusion(day.date, day, month.value)
"
>
<div class="day-number">{{ day.day }}</div>
</div>
<div class="month-bg">
{{ month.label > 9 ? month.label : "0" + month.label }}
</div>
</div>
</div>
</div>
</div>
<el-divider />
<div class="day-all">
<div class="day-all-item wx-flex wx-center">
<img
style="width: 16px; height: 16px; display: block; margin-right: 6px"
src="/public/static/year/icon-zyd.png"
alt=""
/>
<span>总用电天数:</span>
<span class="icon-bg icon-electricity">{{ remainingDays }}</span>
</div>
</div>
</div>
</template>
<style scoped>
.manually-excluded {
background-color: #f0f0f0 !important;
/* border: 2px solid #ff0000; */
}
.auto-excluded {
/* background-color: #f0f0f0; */
}
.current-month-indicator {
text-align: center;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 15px;
color: #4caf50;
}
.month-container.current-month {
/* border: 2px solid #4caf50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.3); */
}
.weekend-purple {
color: #b98ef2 !important;
}
.weekend-red {
color: #ef7d7d !important;
}
.weekend-yellow {
color: #eca555 !important;
}
.weekend-green {
color: #71cf62 !important;
}
.highlighted {
background: #dcdcdc94 !important;
color: #a1a7bb !important;
position: relative;
display: inline-block;
}
.isActive {
color: #606266;
}
.dimmed {
opacity: 0.4;
filter: grayscale(70%);
pointer-events: none;
}
.calendar-container {
max-width: 1400px;
margin: 0 auto;
font-family: "Microsoft YaHei", sans-serif;
cursor: pointer;
}
.year-header {
text-align: center;
margin-bottom: 20px;
font-size: 2.5em;
color: #333;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.nav-button {
padding: 8px 15px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s;
}
.nav-button:hover {
background-color: #45a049;
}
.filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 20px;
align-items: center;
}
.filter-button {
padding: 6px 12px;
border: 1px solid #4caf50;
background: white;
color: #4caf50;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
.filter-button.active {
background-color: #4caf50;
color: white;
}
.month-select-buttons {
margin-left: 20px;
}
.months-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.month-column {
display: flex;
flex-direction: column;
gap: 20px;
}
.month-container {
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 15px;
height: 292px;
background-color: white;
position: relative;
overflow: hidden;
transition: all 0.3s;
}
.month-header.purple-text {
color: #b98ef2;
}
.month-header.red-text {
color: #ef7d7d;
}
.month-header.yellow-text {
color: #eca555;
}
.month-header.green-text {
color: #71cf62;
}
.month-purple {
background-color: #fcfbff;
}
.month-red {
background-color: #fffbfb;
}
.month-yellow {
background-color: #fffcf8;
}
.month-green {
background-color: #f9fff8;
}
.month-header {
font-size: 12px;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.days-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
font-size: 0.8em;
color: #666;
margin-bottom: 5px;
text-align: center;
padding: 3px 0;
}
.days-header.purple-bg {
background-color: rgba(156, 39, 176, 0.1);
}
.days-header.red-bg {
background-color: rgba(244, 67, 54, 0.1);
}
.days-header.yellow-bg {
background-color: rgba(255, 152, 0, 0.1);
}
.days-header.green-bg {
background-color: rgba(76, 175, 80, 0.1);
}
.days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
position: relative;
z-index: 1;
}
.month-bg {
position: absolute;
left: 0;
top: 0;
margin-left: 22%;
margin-top: 5%;
font-size: 115px;
z-index: -1;
color: #f3f3f5;
opacity: 0.8;
}
.day {
text-align: center;
font-size: 0.9em;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
transition: all 0.2s;
}
.day.empty {
visibility: hidden;
}
.day-number {
font-weight: bold;
margin-bottom: 2px;
}
.holiday-name {
font-size: 0.6em;
color: #e53935;
font-weight: bold;
line-height: 1;
word-break: break-word;
}
.day.today {
/* background-color: #4caf50;
color: white;
font-weight: bold; */
}
.day.today .holiday-name {
color: white;
}
.day-all {
display: flex;
}
.day-all-item {
margin-right: 40px;
}
.icon-bg {
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
margin-left: 10px;
}
.icon-electricity {
background-image: url("/public/static/year/icon-bjls.png");
font-weight: 500;
font-size: 16px;
color: #3470ff;
}
.icon-remaining {
background-image: url("/public/static/year/icon-bjhs.png");
font-weight: 500;
font-size: 16px;
color: #ff860d;
}
</style>
现在有这么一个需求,我是通过日历来选择天数,如果我选择 一月份刚好一天不少 就把月份返回给我,同样我通过 筛选季节,以及周几和月份功能 都需要把月份返还给我