更改信息展示
This commit is contained in:
parent
e3c97db099
commit
9deee62a47
@ -9,7 +9,7 @@
|
||||
<el-calendar
|
||||
ref="calendar"
|
||||
class="custom-calendar"
|
||||
:model-value="new Date(currentYear,currentMonth,currentDay)"
|
||||
:model-value="new Date(currentYear,currentMonth)"
|
||||
>
|
||||
<!-- 组件头 内部有日期 还有按钮-->
|
||||
<template #header="{ date }">
|
||||
@ -29,7 +29,9 @@
|
||||
<!-- 自定义展示内容 根据需要自定义就好了-->
|
||||
<template #date-cell="{ data }">
|
||||
<div class='holiday'>
|
||||
<span style="font-size: 14px">{{ data.date.getDate()}}</span>
|
||||
<span style="font-size: 14px">
|
||||
{{ data.date.getDate() === currentDay? data.date.getDate()+'(今天)':data.date.getDate() }}
|
||||
</span>
|
||||
<br/>
|
||||
<span
|
||||
v-for="item in (holidays2[data.day] || [])"
|
||||
@ -204,18 +206,21 @@ onMounted(()=> {
|
||||
.holiday::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/*今天显示为其他颜色*/
|
||||
.custom-calendar .is-today {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFE6E6;
|
||||
font-size: 16px;
|
||||
}
|
||||
/*设置日历表最大使用边框 还有来个小圆角*/
|
||||
/*设置日历组件边框大小圆角*/
|
||||
.custom-calendar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #1f1f1f !important; /* 使用 !important 确保样式生效 */
|
||||
border-radius: 5px; /* 可选:添加圆角 */
|
||||
}
|
||||
/*每个小各自大小*/
|
||||
.el-calendar-table .el-calendar-day {
|
||||
height: 105px/*这个覆盖了原组件宽度*/
|
||||
}
|
||||
@ -262,4 +267,10 @@ onMounted(()=> {
|
||||
border-radius: 2px; /* 可选:添加圆角 */
|
||||
padding: 0 2px 0 2px;
|
||||
}
|
||||
//悬浮信息展示的数据
|
||||
.el-descriptions-item__content {
|
||||
white-space: normal !important; /* 允许换行 */
|
||||
word-wrap: break-word; /* 长单词换行 */
|
||||
word-break: break-word; /* 强制换行 */
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user