更改样式名字每个组件对应自己样式名,避免样式串

This commit is contained in:
XaoLi717 2024-12-05 09:04:06 +08:00
parent 7f4f5361d2
commit 60ecb88f38
3 changed files with 13 additions and 13 deletions

View File

@ -28,7 +28,7 @@
</template>
<!-- 自定义展示内容 根据需要自定义就好了-->
<template #date-cell="{ data }">
<div class='holiday'>
<div class='holidayHy'>
<span style="font-size: 14px">
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
</span>
@ -205,7 +205,7 @@ onMounted(()=> {
</script>
<style>
/* 隐藏滚动条 */
.holiday::-webkit-scrollbar {
.holidayHy::-webkit-scrollbar {
display: none;
}
/*今天显示为其他颜色*/
@ -234,7 +234,7 @@ onMounted(()=> {
font-weight: bold;
}
/*设置日历格子内 超出内容不换行 超出内容显示为省略 内容超出大小是可以滚动*/
.holiday {
.holidayHy {
overflow-x: scroll;
text-overflow: ellipsis;
white-space: nowrap;

View File

@ -27,7 +27,7 @@
<template #date-cell="{ data }">
<div
class='holiday'
class='holidayRc'
>
<span style="font-size: 14px">
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
@ -171,7 +171,7 @@ onMounted(()=> {
</script>
<style>
/* 隐藏滚动条 */
.holiday::-webkit-scrollbar {
.holidayRc::-webkit-scrollbar {
display: none;
}
/*今天显示为其他颜色*/
@ -199,7 +199,7 @@ onMounted(()=> {
font-weight: bold;
}
//
.holiday {
.holidayRc {
overflow-x: scroll;
text-overflow: ellipsis;
white-space: nowrap;

View File

@ -2,10 +2,10 @@
<ContentWrap>
<el-button-group style="display: flex; justify-content: space-between;">
<el-button size="small" @click="selectDate(-1)">上年</el-button>
<el-button size="small" @click="toYear()">今年</el-button>
<el-button size="small" @click="selectDate(1)">下年</el-button>
<el-button size="small" @click="getListDate()">刷新</el-button>
<el-button size="large" @click="selectDate(-1)">上年</el-button>
<el-button size="large" @click="toYear()">今年</el-button>
<el-button size="large" @click="selectDate(1)">下年</el-button>
<el-button size="large" @click="getListDate()">刷新</el-button>
<!-- <el-button size="small" @click="createDate()">创建</el-button>-->
</el-button-group>
@ -29,7 +29,7 @@
</template>
<template #date-cell="{ data }">
<div @click="handleSelect(data)" :class="{ 'holiday': holidayDate[data.day]?.isWorkday }">
<div @click="handleSelect(data)" :class="{ 'holidayWork': holidayDate[data.day]?.isWorkday }">
<span style="font-size: 14px">
{{ formatDate2(data.date) === current? data.date.getDate()+'(今天)':data.date.getDate() }}
</span>
@ -173,7 +173,7 @@ onMounted( async ()=> {
.custom-calendar .el-calendar-day {
width: 100%;
height: 100%;
padding: 0 !important;
padding: 0;
}
.custom-calendar .is-today {
@ -182,7 +182,7 @@ onMounted( async ()=> {
background-color: #f56c6c;
font-size: 16px;
}
.holiday {
.holidayWork {
width: 100%;
height: 100%;
background-color: #15bc83;