<script setup>
import { ref, computed } from "vue";
const currentYear = ref(new Date().getFullYear());
const to
day = ref(new Date());
const week
Days = ["一", "二", "三", "四", "五", "六", "日"];
const checkedCities = ref([]);
const highlightOptions = {
holi
day: "节假日",
spring
: "春季",
summer
: "夏季",
autumn
: "秋季",
winter
: "冬季",
mon
day: "周一",
tues
day: "周二",
wednes
day: "周三",
thurs
day: "周四",
fri
day: "周五",
satur
day: "周六",
sun
day: "周日",
};
const activeHighlight = ref(new Set());
const excludedMonths = ref([]);
const excluded
Days = ref(new Set());
const overrideExcludedHighlights = ref(new Set()); // 新增：记录手动取消的高亮日期
const monthOptions = Array.from({ length
: 12 }).map((_, idx) => ({
value
: idx + 1,
label
: `${idx + 1}月`,
}));
// 计算总天数（考虑闰年）
const total
Days = computed(() => {
const isLeapYear =
(currentYear.value % 4 === 0 && currentYear.value % 100 !== 0) ||
currentYear.value % 400 === 0;
return isLeapYear ? 366
: 365;
});
// 计算排除的天数
const excluded
DaysCount = computed(() => {
let count = 0;
// 1. 排除月份的天数（保持不变）
excludedMonths.value.forEach((month) => {
count += new Date(currentYear.value, month, 0).getDate();
});
// 2. 单独排除的天数（保持不变）
excluded
Days.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 &&
!excluded
Days.value.has(
day.date) &&
!overrideExcludedHighlights.value.has(
day.date) && // 新增条件
shouldHighlight(
day, month.value)
) {
count++;
}
}
}
}
return count;
});
// 剩余天数计算保持不变
const remaining
Days = computed(() => {
return total
Days.value - excluded
DaysCount.value;
});
const toggle
DayExclusion = (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 {
excluded
Days.value.has(dateStr)
? excluded
Days.value.delete(dateStr)
: excluded
Days.value.add(dateStr);
}
};
const handleMonthChange = () => {
// console.log("排除的月份
:", excludedMonths.value);
};
const isCurrentMonth = (monthIndex) => {
return (
currentYear.value === to
day.value.getFullYear() &&
monthIndex === to
day.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.get
Day();
const week
dayMap = {
sun
day: 0,
mon
day: 1,
tues
day: 2,
wednes
day: 3,
thurs
day: 4,
fri
day: 5,
satur
day: 6,
};
return Array.from(activeHighlight.value).some((highlight) => {
switch (highlight) {
case "holi
day"
:
return
day.isHoli
day;
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 === week
dayMap[highlight]
);
}
});
};
const isManuallyExcluded = (dateStr) => {
return (
excluded
Days.value.has(dateStr) ||
overrideExcludedHighlights.value.has(dateStr)
);
};
// 节假日(只适用于2025年)
const holi
daysData = 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 first
Day = new Date(currentYear.value, monthIndex, 1);
const
daysInMonth = new Date(
currentYear.value,
monthIndex + 1,
0
).getDate();
let starting
Day = first
Day.get
Day() - 1;
if (starting
Day < 0) starting
Day = 6;
const
days = [];
for (let i = 0; i < starting
Day; 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 isTo
day =
currentYear.value === to
day.value.getFullYear() &&
monthIndex === to
day.value.getMonth() &&
day === to
day.value.getDate();
const isExcluded =
excludedMonths.value.includes(monthIndex + 1) || // 是否在排除月份
excluded
Days.value.has(dateStr) || // 是否在排除日期
(shouldHighlight(
{
date
: dateStr,
isHoli
day: !!holi
daysData.value[`${monthIndex + 1}-${
day}`],
// 其他需要的属性...
},
monthIndex
) &&
!overrideExcludedHighlights.value.has(dateStr)); // 是否被手动取消
const
dayOfWeek = currentDate.get
Day();
const isSatur
day =
dayOfWeek === 6;
const isSun
day =
dayOfWeek === 0;
const is
Weekend = isSatur
day || isSun
day;
const holi
dayKey = `${monthIndex + 1}-${
day}`;
const holi
dayInfo = holi
daysData.value[holi
dayKey];
const isHoli
day = !!holi
dayInfo;
days.push({
day,
date
: currentDate.toISOString(),
isTo
day,
is
Weekend,
isSatur
day,
isSun
day,
isHoli
day,
holi
dayName
: holi
dayInfo?.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
: getMonth
DayExclusionDataAll(),
months
: excludedMonths.value,
remaining
Days
: remaining
Days.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 getMonth
DayExclusionData = () => {
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 });
}
});
// 处理排除的单个日期
excluded
Days.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 &&
!excluded
Days.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 getMonth
DayExclusionDataAll = () => {
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 formatted
Day = String(
day).padStart(2, "0");
result.push(`${currentYear.value}-${formattedMonth}-${formatted
Day}`);
}
});
// 处理排除的单个日期
excluded
Days.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 formatted
Day = String(
day).padStart(2, "0");
result.push(`${currentYear.value}-${formattedMonth}-${formatted
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 &&
!excluded
Days.value.has(
day.date) &&
!overrideExcludedHighlights.value.has(
day.date) &&
shouldHighlight(
day, month.value)
) {
const formattedMonth = String(monthValue).padStart(2, "0");
const formatted
Day = String(
day.
day).padStart(2, "0");
result.push(`${currentYear.value}-${formattedMonth}-${formatted
Day}`);
}
}
}
}
// 去重处理
const uniqueDates = [...new Set(result)];
return uniqueDates;
};
const parseMonth
DayData = (month
DayArray) => {
const dateSet = new Set();
const monthSet = new Set();
// 创建月份天数统计Map {month
: {total
: number,
days
: Set}}
const monthStats = new Map();
month
DayArray.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 total
Days = new Date(currentYear.value, month, 0).getDate();
monthStats.set(month, {
total
: total
Days,
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 = [];
excluded
Days.value.clear();
overrideExcludedHighlights.value.clear();
activeHighlight.value.clear();
// 处理month
Day数据
if (data?.month
Day) {
const { excludedDates, excludedMonths
: parsedMonths } = parseMonth
DayData(
data.month
Day
);
excluded
Days.value = new Set([...excluded
Days.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();
});
excluded
Days.value = new Set([...excluded
Days.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 =
excluded
Days.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.get
Day();
const
day = date.getDate();
switch (type) {
case "holi
day"
:
const holi
dayKey = `${month}-${
day}`;
return !!holi
daysData.value[holi
dayKey];
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 "mon
day"
:
return
dayOfWeek === 1;
case "tues
day"
:
return
dayOfWeek === 2;
case "wednes
day"
:
return
dayOfWeek === 3;
case "thurs
day"
:
return
dayOfWeek === 4;
case "fri
day"
:
return
dayOfWeek === 5;
case "satur
day"
:
return
dayOfWeek === 6;
case "sun
day"
:
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,
getMonth
DayExclusionData, // 返回后端主要数据
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 week
Days"
: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,
to
day: day.isTo
day,
highlighted
:
(shouldHighlight(
day, month.value) &&
!overrideExcludedHighlights.has(
day.date)) ||
excluded
Days.has(
day.date) ||
isMonthExcluded(month.value + 1),
isActive
: !excluded
Days.has(
day.date),
'
weekend-purple'
: isPurpleMonth(month.value) &&
day.is
Weekend,
'
weekend-red'
: isRedMonth(month.value) &&
day.is
Weekend,
'
weekend-yellow'
: isYellowMonth(month.value) &&
day.is
Weekend,
'
weekend-green'
: isGreenMonth(month.value) &&
day.is
Weekend,
'week
day-purple-bg'
:
isPurpleMonth(month.value) && !
day.is
Weekend && !
day.empty,
'week
day-red-bg'
:
isRedMonth(month.value) && !
day.is
Weekend && !
day.empty,
'week
day-yellow-bg'
:
isYellowMonth(month.value) && !
day.is
Weekend && !
day.empty,
'week
day-green-bg'
:
isGreenMonth(month.value) && !
day.is
Weekend && !
day.empty,
'manually-excluded'
: isManuallyExcluded(
day.date),
'auto-excluded'
:
!isManuallyExcluded(
day.date) &&
(excludedMonths.includes(month.value + 1) ||
shouldHighlight(
day, month.value)),
}"
@click="
!
day.empty && toggle
DayExclusion(
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">{{ remaining
Days }}</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;
}
.holi
day-name {
font-size
: 0.6em;
color
: #e53935;
font-weight
: bold;
line-height
: 1;
word-break
: break-word;
}
.
day.to
day {
/* background-color
: #4caf50;
color
: white;
font-weight
: bold; */
}
.
day.to
day .holi
day-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>
现在有这么一个需求,我是通过日历来选择天数,如果我选择 一月份刚好一天不少 就把月份返回给我,同样我通过 筛选季节,以及周几和月份功能 都需要把月份返还给我
本文分享了一篇关于时间管理的文章，强调了高效利用时间的重要性，并记录了作者拒绝低效兼职的经历。此外，还介绍了Structs2原理并布置了相关任务，提到了收到博为科公司的面试邀请。
扫一扫
1173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
