Compare commits

..

2 Commits

Author SHA1 Message Date
牛子源 4b5217b334 Merge remote-tracking branch 'origin/main' 2025-05-26 10:28:51 +08:00
牛子源 ca29c30198 dev 2025-05-26 10:28:46 +08:00
1 changed files with 25 additions and 31 deletions

View File

@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue' import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue'
const currentMonth = ref(new Date().getMonth()); const currentMonth = ref(new Date().getMonth());
const currentYear = ref(new Date().getFullYear()); const currentYear = ref(new Date().getFullYear());
const selectedDate = ref<{ day: number; isCurrentMonth: boolean } | null>(null); const selectedDate = ref<{ day: number; isCurrentMonth: boolean } | null>(null);
@ -105,7 +104,7 @@ const handleDateClick = (day: number) => {
<template> <template>
<div class="calendar-wrapper"> <div class="calendar-wrapper">
<div class="calendar-wrapper-header"> <div class="header">
<span class="btn" @click="prevMonth"><el-icon><ArrowLeft /></el-icon></span> <span class="btn" @click="prevMonth"><el-icon><ArrowLeft /></el-icon></span>
<span class="current">{{ currentYear }}{{ currentMonth + 1 }}</span> <span class="current">{{ currentYear }}{{ currentMonth + 1 }}</span>
<span class="btn" @click="nextMonth"><el-icon><ArrowRight /></el-icon></span> <span class="btn" @click="nextMonth"><el-icon><ArrowRight /></el-icon></span>
@ -149,24 +148,25 @@ const handleDateClick = (day: number) => {
<style scoped lang="scss"> <style scoped lang="scss">
.calendar-wrapper { .calendar-wrapper {
&-header { .header {
margin-bottom: 8px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 8px;
.current{ .current{
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
color: #333333; color: #333333;
font-style: normal; font-style: normal;
margin-bottom: 8px;
} }
.btn { .btn {
padding: 5px 10px;
font-size: 14px; font-size: 14px;
color: #1677FE; color: #1677FE;
background-color: #FFF; background-color: #FFF;
border-radius: 6px; border-radius: 4px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@ -175,7 +175,6 @@ const handleDateClick = (day: number) => {
} }
} }
} }
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -194,40 +193,35 @@ const handleDateClick = (day: number) => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 14px;
color: #999999; color: #999999;
font-style: normal; font-style: normal;
.item { .item {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
span { span {
margin: auto; margin: auto;
height: 25px; height: 34px;
width: 25px; width: 34px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 16px;
color: #666666; color: #666666;
font-style: normal; font-style: normal;
border-radius: 25px; border-radius:17px;
} }
.currentDay { .currentDay {
background: #1677FE; background: #1677FE;
color: #fff; color: #fff;
} }
.otherMonth{ .otherMonth{
color: #999; color: #999;
} }
.selectedDay { .selectedDay {
background: #FFA500; background: #FFA500;
color: #fff; color: #fff;