From ca29c3019845a4c8e7da21c0e1b7ad64fe853fcd Mon Sep 17 00:00:00 2001
From: NiuZiYuan <niuziyuan@jizhiweb.cn>
Date: Mon, 26 May 2025 10:28:46 +0800
Subject: [PATCH] dev

---
 src/components/common/Calendar.vue | 56 +++++++++++++-----------------
 1 file changed, 25 insertions(+), 31 deletions(-)

diff --git a/src/components/common/Calendar.vue b/src/components/common/Calendar.vue
index 19db830..24c5614 100644
--- a/src/components/common/Calendar.vue
+++ b/src/components/common/Calendar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import {ref, computed} from 'vue';
-import {ArrowLeft, ArrowRight} from '@element-plus/icons-vue'
-
+import { ref, computed } from 'vue';
+import {ArrowLeft,ArrowRight} from '@element-plus/icons-vue'
 const currentMonth = ref(new Date().getMonth());
 const currentYear = ref(new Date().getFullYear());
 const selectedDate = ref<{ day: number; isCurrentMonth: boolean } | null>(null);
@@ -52,17 +51,17 @@ const generateCalendarData = (
       // 当前月日期
       if ((isFirstWeek && day >= firstDayIndex) || (!isFirstWeek && dayCounter <= daysInMonth)) {
         const isToday = dayCounter === currentDay && month === currentMonthValue && year === currentYearValue;
-        weekDays.push({day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday});
+        weekDays.push({ day: dayCounter, isCurrentMonth: true, isCurrentDay: isToday });
         dayCounter++;
       }
       // 前月日期
       else if (isFirstWeek) {
         const prevDay = daysInPrevMonth - firstDayIndex + day + 1;
-        weekDays.push({day: prevDay, isCurrentMonth: false, isCurrentDay: false});
+        weekDays.push({ day: prevDay, isCurrentMonth: false, isCurrentDay: false });
       }
       // 下月日期
       else {
-        weekDays.push({day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false});
+        weekDays.push({ day: nextMonthDayCounter, isCurrentMonth: false, isCurrentDay: false });
         nextMonthDayCounter++;
       }
     }
@@ -96,19 +95,19 @@ const nextMonth = () => {
   }
   selectedDate.value = null;
 };
-const emit = defineEmits(['dateClick']);
+const emit=defineEmits(['dateClick']);
 const handleDateClick = (day: number) => {
-  selectedDate.value = {day, isCurrentMonth: true};
-  emit('dateClick', `${currentYear.value}-${currentMonth.value + 1}-${day}`)
+    selectedDate.value = { day, isCurrentMonth:true };
+   emit('dateClick',`${currentYear.value}-${currentMonth.value + 1}-${day}` )
 };
 </script>
 
 <template>
   <div class="calendar-wrapper">
-    <div class="calendar-wrapper-header">
-      <span class="btn" @click="prevMonth"><el-icon><ArrowLeft/></el-icon></span>
+    <div class="header">
+      <span class="btn" @click="prevMonth"><el-icon><ArrowLeft /></el-icon></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>
     </div>
     <div class="row">
       <div class="item">
@@ -149,24 +148,25 @@ const handleDateClick = (day: number) => {
 
 <style scoped lang="scss">
 .calendar-wrapper {
-  &-header {
-    margin-bottom: 8px;
+  .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    .current {
+    margin-bottom: 8px;
+    .current{
       font-weight: 500;
       font-size: 18px;
       color: #333333;
       font-style: normal;
+      margin-bottom: 8px;
     }
 
     .btn {
+      padding: 5px 10px;
       font-size: 14px;
       color: #1677FE;
       background-color: #FFF;
-      border-radius: 6px;
+      border-radius: 4px;
       cursor: pointer;
 
       &:hover {
@@ -175,11 +175,10 @@ const handleDateClick = (day: number) => {
       }
     }
   }
-
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding: 0 20px 20px;
+  padding:0 20px 20px;
   background-color: #FFF;
   border-radius: 0 0 8px 8px;
   display: flex;
@@ -188,46 +187,41 @@ const handleDateClick = (day: number) => {
   .row {
     flex: 1;
     width: 100%;
-    background: #F9FAFC;
+    background: #F9FAFC ;
     padding: 0 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-weight: 500;
-    font-size: 12px;
+    font-size: 14px;
     color: #999999;
     font-style: normal;
-
     .item {
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
-
       span {
         margin: auto;
-        height: 25px;
-        width: 25px;
+        height: 34px;
+        width: 34px;
         display: flex;
         justify-content: center;
         align-items: center;
         font-weight: bold;
-        font-size: 14px;
+        font-size: 16px;
         color: #666666;
         font-style: normal;
-        border-radius: 25px;
+        border-radius:17px;
       }
-
       .currentDay {
         background: #1677FE;
         color: #fff;
       }
-
-      .otherMonth {
+      .otherMonth{
         color: #999;
       }
-
       .selectedDay {
         background: #FFA500;
         color: #fff;