|
@@ -21,9 +21,13 @@
|
|
|
</template>
|
|
|
<template #date-cell="{ data }">
|
|
|
<div class="dayCon" @click.stop>
|
|
|
- <div v-if="data.type === 'current-month'" class="dayBox" @click.stop="handleClickDate(data)">
|
|
|
- <div class="daytit" :class="isMarkClass(data.day)">
|
|
|
- {{ format() === data.day ? "今" : format(data.day, "d") }}
|
|
|
+ <div v-if="data.type === 'current-month'" :class="isMarkClass(data.day)" class="dayBox" @click.stop="handleClickDate(data)">
|
|
|
+ <div class="daytit">
|
|
|
+ {{
|
|
|
+ format() === data.day && format(props.modelValue, "yyyy/mm/dd") !== format(new Date(), "yyyy/mm/dd")
|
|
|
+ ? "今"
|
|
|
+ : format(data.day, "d")
|
|
|
+ }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="nobg"></div>
|
|
@@ -193,15 +197,7 @@ function handleClickDate(data: { type: "prev-month" | "current-month" | "next-mo
|
|
|
&:hover {
|
|
|
background: #fff7ed;
|
|
|
}
|
|
|
- }
|
|
|
- .nobg {
|
|
|
- height: var(--el-calendar-cell-width);
|
|
|
- }
|
|
|
- .daytit {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 28px;
|
|
|
- position: relative;
|
|
|
- &.old {
|
|
|
+ &.old .daytit {
|
|
|
&::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
@@ -215,19 +211,30 @@ function handleClickDate(data: { type: "prev-month" | "current-month" | "next-mo
|
|
|
}
|
|
|
}
|
|
|
&.new {
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
- bottom: -14px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- background-color: #ff8057;
|
|
|
+ background: #fff7ed;
|
|
|
+ .daytit {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ bottom: -14px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background-color: #ff8057;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .nobg {
|
|
|
+ height: var(--el-calendar-cell-width);
|
|
|
+ }
|
|
|
+ .daytit {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
}
|
|
|
&.is-today .el-calendar-day .dayCon .dayBox {
|
|
|
background-image: url("./img//jiao.png");
|
|
@@ -238,12 +245,10 @@ function handleClickDate(data: { type: "prev-month" | "current-month" | "next-mo
|
|
|
&.isNowMonth .el-calendar-table td.is-selected .el-calendar-day .dayCon .dayBox {
|
|
|
background: linear-gradient(45deg, #ffa357 0%, #ff6736 100%), #fff7ed;
|
|
|
color: #ffffff;
|
|
|
- .daytit {
|
|
|
- &.old,
|
|
|
- &.new {
|
|
|
- &::after {
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
+ &.old .daytit,
|
|
|
+ &.new .daytit {
|
|
|
+ &::after {
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|