diff --git a/components.d.ts b/components.d.ts index e04249fe16a2df2ee97e48f6ed9dac67c04794ae..49bfe5d43cc20ec544821244e8fffc4e6c25ca93 100644 --- a/components.d.ts +++ b/components.d.ts @@ -11,13 +11,10 @@ declare module 'vue' { CalendarBox: typeof import('./src/views/HomePage/components/CalendarBox.vue')['default'] CenterTask: typeof import('./src/components/CenterTask.vue')['default'] ElAside: typeof import('element-plus/es')['ElAside'] - ElAvatar: typeof import('element-plus/es')['ElAvatar'] ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElButton: typeof import('element-plus/es')['ElButton'] ElCalendar: typeof import('element-plus/es')['ElCalendar'] - ElCard: typeof import('element-plus/es')['ElCard'] - ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCol: typeof import('element-plus/es')['ElCol'] ElContainer: typeof import('element-plus/es')['ElContainer'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] @@ -26,7 +23,6 @@ declare module 'vue' { ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElHeader: typeof import('element-plus/es')['ElHeader'] ElIcon: typeof import('element-plus/es')['ElIcon'] - ElInput: typeof import('element-plus/es')['ElInput'] ElMain: typeof import('element-plus/es')['ElMain'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] @@ -34,7 +30,6 @@ declare module 'vue' { ElPagination: typeof import('element-plus/es')['ElPagination'] ElRadio: typeof import('element-plus/es')['ElRadio'] ElRow: typeof import('element-plus/es')['ElRow'] - ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] ElTable: typeof import('element-plus/es')['ElTable'] @@ -42,8 +37,6 @@ declare module 'vue' { ElUpload: typeof import('element-plus/es')['ElUpload'] ExampleComponent: typeof import('./src/components/ExampleComponent.vue')['default'] HomePage: typeof import('./src/views/HomePage/HomePage.vue')['default'] - IEpArrowLeft: typeof import('~icons/ep/arrow-left')['default'] - IEpArrowRight: typeof import('~icons/ep/arrow-right')['default'] IEpCalendar: typeof import('~icons/ep/calendar')['default'] IEpChatDotRound: typeof import('~icons/ep/chat-dot-round')['default'] IEpClose: typeof import('~icons/ep/close')['default'] @@ -54,7 +47,6 @@ declare module 'vue' { IEpHouse: typeof import('~icons/ep/house')['default'] IEpMessage: typeof import('~icons/ep/message')['default'] IEpSetting: typeof import('~icons/ep/setting')['default'] - IEpTools: typeof import('~icons/ep/tools')['default'] IEpUser: typeof import('~icons/ep/user')['default'] InterviewNewone: typeof import('./src/views/Interview/InterviewNewone.vue')['default'] InterviewShow: typeof import('./src/views/Interview/InterviewShow.vue')['default'] diff --git a/src/components/CenterTask.vue b/src/components/CenterTask.vue index 0aab1e24e5c661187cb216341fd8e1719aadd34f..9b518abc75c3e39002a8db3e01fdbd5ca022ba51 100644 --- a/src/components/CenterTask.vue +++ b/src/components/CenterTask.vue @@ -79,7 +79,7 @@ @open="handleOpen" @close="handleClose" > - <el-menu-item index="/homepage"> + <el-menu-item index="/MyCalendar"> <el-icon><i-ep-Calendar /></el-icon> <span class="menu-text">我的日程</span> </el-menu-item> diff --git a/src/router/index.ts b/src/router/index.ts index b8248609b529833320b1d01173782c5dd60d925c..4f5270c0953015de87079d4ebe4aa2147fbe938b 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -56,6 +56,10 @@ export const constantRoutes: RouteRecordRaw[] = [ component: () => import('@/views/StuHomework/StuHomework.vue') }, { path: 'Homework/HomeInfo', component: () => import('@/views/StuHomework/WorkInfo.vue') }, + { + path: 'MyCalendar', + component: () => import('@/views/MyCalendar/MyCalendar.vue') + }, { path: 'UserManagement', component: () => import('@/views/UserManagement/UserManagement.vue') @@ -104,7 +108,6 @@ export const constantRoutes: RouteRecordRaw[] = [ path: '/:pathMatch(.*)*', redirect: '404' }, - { path: '/404', component: () => import('@/components/NotFound.vue') diff --git a/src/views/MyCalendar/MyCalendar.vue b/src/views/MyCalendar/MyCalendar.vue new file mode 100644 index 0000000000000000000000000000000000000000..726fae89968a4690960d902da65b984652f48649 --- /dev/null +++ b/src/views/MyCalendar/MyCalendar.vue @@ -0,0 +1,101 @@ +<template> + <div class="my-calendar"> + <div class="container"> + <el-calendar v-model:current-date="currentDate"> + <template #date-cell="{ data }"> + <!--è‡ªå®šä¹‰æ’æ§½--> + <div> + <span>{{ data.date.getDate() }}</span> + <!--显示日期--> + <div class="event-container"> + <!--事件盒å--> + <div + v-for="event in getEvents(data.date)" + :key="event.id + event.time" + :style="{ backgroundColor: event.color }" + class="event" + > + {{ event.title }} {{ event.time }} + </div> + </div> + </div> + </template> + </el-calendar> + </div> + </div> +</template> + +<script lang="ts" setup> +import { ref, onMounted } from 'vue'; + +interface Event { + id: number; + date: string; + title: string; + time: string; + color: string; +} + +const currentDate = ref(new Date()); +const events = ref<Event[]>([]); + +const getEvents = (date: Date) => { + return events.value.filter(event => new Date(event.date).toDateString() === date.toDateString()); +}; + +const fetchEvents = () => { + events.value = [ + { id: 1, date: '2024-08-07', title: '作业æäº¤', time: '23:00', color: '#f56c6c' }, + { id: 5, date: '2024-08-07', title: '作业æäº¤', time: '24:00', color: '#f56c6c' }, + { id: 6, date: '2024-08-07', title: '作业æäº¤', time: '25:00', color: '#f56c6c' }, + { id: 2, date: '2024-08-17', title: 'é¢è¯•', time: '10:00', color: '#909399' }, + { id: 3, date: '2024-08-20', title: '培è®', time: '08:00', color: '#e6a23c' }, + { id: 4, date: '2024-08-28', title: '作业æäº¤', time: '23:00', color: '#f56c6c' } + ]; +}; + +onMounted(() => { + fetchEvents(); +}); +</script> + +<style lang="scss" scoped> +.my-calendar { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + width: 90%; + height: 90%; + background-color: white; + border-radius: 20px; + padding: 20px; +} + +.event-container { + height: 40px; + overflow-y: auto; +} + +.event { + padding: 5px; + border-radius: 4px; + margin-top: 5px; + color: white; +} +:deep(.el-calendar-table td) { + min-height: 100px; + min-width: 100px; + vertical-align: top; + padding: 10px; +} + +:deep(.el-calendar-day) { + display: flex; + flex-direction: column; +} +</style>