活动主题

src/views/modules/communityParty/calendar/cpts/calendar.vue

@@ -1,35 +1,33 @@
 <template>
   <div class="m-calendar">
     <div class="top-list">
-      <div
+      <div class="top"
-        class="top"
+           v-for="(item, index) in top"
-        v-for="(item, index) in top"
+           :class="{ 'z-weekend': index > 4 }"
-        :class="{ 'z-weekend': index > 4 }"
+           :key="item">
-        :key="item"
-      >
         {{ item }}
       </div>
     </div>
     <!-- 日历号 -->
     <div class="date-list">
-      <div
+      <div class="date-item"
-        class="date-item"
+           :class="{
-        :class="{
           'z-on': item.format == currentDate,
           'z-this-month': item.thisMonth,
           'z-today': item.isToday,
           'z-after-today': item.afterToday,
           'z-weekend': item.day == 6 || item.day == 0,
         }"
-        v-for="(item, index) in visibleCalendar"
+           v-for="(item, index) in visibleCalendar"
-        :key="index"
+           :key="index"
-        @click="handleClickDate(item)"
+           @click="handleClickDate(item)">
-      >
         <div class="date">{{ item.date }}</div>
         <div class="nongli">
           {{ computeNongliText(item.year, item.month, item.date) }}
         </div>
-        <slot name="date-item" v-bind:item="item" v-bind:index="index"> </slot>
+        <slot name="date-item"
+              v-bind:item="item"
+              v-bind:index="index"> </slot>
       </div>
     </div>
   </div>
@@ -49,7 +47,7 @@ export default {
       default: new Date().getMonth(),
     },
   },
-  data() {
+  data () {
     return {
       top: ["一", "二", "三", "四", "五", "六", "日"],
       currentDate: "",
@@ -57,7 +55,7 @@ export default {
   },
   computed: {
     // 获取当前月份显示日历,共42天
-    visibleCalendar() {
+    visibleCalendar () {
       // 获取今天的年月日
       const { currentYear, currentMonth } = this;
       const today = new Date();
@@ -118,30 +116,30 @@ export default {
     },
   },
   watch: {
-    visibleCalendar() {
+    visibleCalendar () {
       this.init();
     },
   },
-  mounted() {
+  mounted () {
     console.log("123", this.time);
     this.init();
   },
   methods: {
-    computeNongliText(y, m, d) {
+    computeNongliText (y, m, d) {
-      let item = nongli.solar2lunar(y, m+1, d);
+      let item = nongli.solar2lunar(y, m + 1, d);
       return item.festival || item.lunarFestival || item.Term || item.IDayCn;
     },
 
-    init() {
+    init () {
       if (!this.currentDate) {
         this.handleClickDate(
           this.visibleCalendar.find((item) => item.isToday) ||
-            this.visibleCalendar.filter((item) => item.thisMonth)[0]
+          this.visibleCalendar.filter((item) => item.thisMonth)[0]
         );
       }
     },
 
-    handleClickDate(item) {
+    handleClickDate (item) {
       console.log("点击日历日期", item);
       this.currentDate = item.format;
 
@@ -235,7 +233,7 @@ export default {
         color: #3e8ef7;
       }
 
-      .nongli{
+      .nongli {
         position: absolute;
         z-index: 0;
         left: 0;