src/components/common/Calendar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 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);
@@ -104,7 +105,7 @@ const handleDateClick = (day: number) => {
 
 <template>
   <div class="calendar-wrapper">
-    <div class="header">
+    <div class="calendar-wrapper-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>
@@ -148,25 +149,24 @@ const handleDateClick = (day: number) => {
 
 <style scoped lang="scss">
 .calendar-wrapper {
-  .header {
+  &-header {
+    margin-bottom: 8px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    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: 4px;
+      border-radius: 6px;
       cursor: pointer;
 
       &:hover {
@@ -175,6 +175,7 @@ const handleDateClick = (day: number) => {
       }
     }
   }
+
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -193,35 +194,40 @@ const handleDateClick = (day: number) => {
     justify-content: space-between;
     align-items: center;
     font-weight: 500;
-    font-size: 14px;
+    font-size: 12px;
     color: #999999;
     font-style: normal;
+
     .item {
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
+
       span {
         margin: auto;
-        height: 34px;
-        width: 34px;
+        height: 25px;
+        width: 25px;
         display: flex;
         justify-content: center;
         align-items: center;
         font-weight: bold;
-        font-size: 16px;
+        font-size: 14px;
         color: #666666;
         font-style: normal;
-        border-radius:17px;
+        border-radius: 25px;
       }
+
       .currentDay {
         background: #1677FE;
         color: #fff;
       }
+
       .otherMonth {
         color: #999;
       }
+
       .selectedDay {
         background: #FFA500;
         color: #fff;