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

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

View File

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

View File

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