|
|
@@ -0,0 +1,120 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <SearchBlock :searchList="blockSearchList"></SearchBlock>
|
|
|
+
|
|
|
+ <el-calendar v-model="selectedCalendarTime" ref="calendar">
|
|
|
+ <!-- 自定义日历头 -->
|
|
|
+ <template #header="{ date }">
|
|
|
+ <i></i>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 自定义日期单元格 -->
|
|
|
+ <template #date-cell="{ data}">
|
|
|
+ <span class="has_things">
|
|
|
+ {{ data.day.split('-').pop() }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-calendar>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+import SearchBlock from '@/baseComponents/SearchBlock.vue';
|
|
|
+import {blockSearchList} from './searchBlock'
|
|
|
+
|
|
|
+
|
|
|
+const selectedCalendarTime = defineModel('selectedCalendarTime')
|
|
|
+const calendar = ref()
|
|
|
+const selectDate = (val) => {
|
|
|
+ if (!calendar.value) return
|
|
|
+ calendar.value.selectDate(val)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+:deep(.el-calendar){
|
|
|
+ .el-calendar__header{
|
|
|
+ padding:0;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-calendar__body{
|
|
|
+ padding:24px 0 8px 0;
|
|
|
+ border-bottom: 1px solid #F3F3F3;
|
|
|
+ font-size: 14px;
|
|
|
+ .el-calendar-table{
|
|
|
+ tr td{
|
|
|
+ border:none;
|
|
|
+ &.is-today{
|
|
|
+ color: #2E64FA;
|
|
|
+ }
|
|
|
+ &.prev .el-calendar-day span.has_things{
|
|
|
+ &::after{
|
|
|
+ background-color: #a8abb2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.is-selected{
|
|
|
+ background-color: transparent;
|
|
|
+ .el-calendar-day{
|
|
|
+ span{
|
|
|
+ background-color: #2E64FA;
|
|
|
+ color: #FFFFFF;
|
|
|
+ &:hover{
|
|
|
+ background-color: #2E64FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.has_things::after{
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-calendar-day{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 48px;
|
|
|
+ padding:0;
|
|
|
+ &:hover{
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 1;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+
|
|
|
+ &.has_things{
|
|
|
+ position: relative;
|
|
|
+ &::after{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 3px;
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #2E64FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ background-color: rgba(46, 100, 250,0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|