解决多日历样式冲突

src/components/app-calendar/app-calendar.vue

@@ -45,7 +45,7 @@
                'mc-last-month': child.lastMonth, 'mc-next-month': child.nextMonth}, child.className, child.rangeClassName]"
             @click="select(k1, k2, child, $event, index)"
             class="mc-day"
-            :style="itemStyle"
+            :style="itemStyle()"
           >
             <span v-if="showToday.show && child.isToday" class="mc-today calendar-date">{{showToday.text}}</span>
             <span :class="[{'mc-date-red': k2 === (monFirst ? 5 : 0) || k2 === 6}, 'calendar-date']" v-else>{{child.day}}</span>
@@ -259,14 +259,7 @@
       };
     },
     computed: {
-      itemStyle() {
-        return {
-          width: `${this.itemWidth}px`,
-          height: `${this.itemWidth}px`,
-          fontSize: `${this.itemWidth / 4}px`,
-          lineHeight: this.lunar ? `${this.itemWidth / 1.5}px` : `${this.itemWidth}px`
-        };
-      }
+
     },
     watch: {
       events() {
@@ -358,6 +351,14 @@
       }
     },
     methods: {
+      itemStyle() {
+        return {
+          width: `50px`,
+          height: `50px`,
+          fontSize: `${50 / 4}px`,
+          lineHeight: `50px`
+        };
+      },
       changeStyle(){
         this.changebtntop = !this.changebtntop;
         this.render(this.year, this.month);