新增日历组件图标信息

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

@@ -77,12 +77,16 @@
       <div :class="['calendar-months', {'calendar-week-switch-months': weekSwitch}]">
         <span v-for="(m, i) in months" :key="m" @click.stop="changeMonth(i)" :class="{'active': i === month}">{{m}}</span>
       </div>
-
     </div>
-      <div v-if="isChangeStyle"  class="changebox">
-          <div v-if="changebtntop" @click="changeStyle()" class="changeStyle_bottom"></div>
-          <div v-if="!changebtntop" @click="changeStyle()" class="changeStyle_top"></div>
-      </div>
+    <!-- user -->
+    <div v-if="illustration" class="illustration">
+      <div v-for="(il,index) in illustration" :key="index" class="illustration-item"><div :style="{color: il.color}" class="illustration-color">—</div><div class="illustration-text">{{il.text}}</div></div>
+    </div>
+    <!-- user -->
+    <div v-if="isChangeStyle"  class="changebox">
+        <div v-if="changebtntop" @click="changeStyle()" class="changeStyle_bottom"></div>
+        <div v-if="!changebtntop" @click="changeStyle()" class="changeStyle_top"></div>
+    </div>
   </div>
 </template>
 
@@ -95,6 +99,10 @@
         type: Boolean,
         default: false
       },
+      illustration:{
+        type: Array,
+        default: null
+        },
       arrowLeft: {
         type: String,
         default: ''

src/components/app-calendar/icon.css

@@ -26,21 +26,23 @@
     color: #ccc;
   }
 .changeStyle_bottom{
-    border-color: rgb(104, 96, 96);
+    border-color: rgb(135, 135, 135);
     border-width: 0 0 2px 2px;
     border-style: solid;
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
-    width: 14px;
-    height: 14px;
+    width: 10px;
+    height: 10px;
     position: absolute;
     right: calc(50% - 7px );
+    -webkit-transition: 100 unset;
     transition: 100 unset;
-    top: 0px;
+    top: 3px;
 }
 .changebox{
     position: relative;
-    height: 25px;
+    height: 7px;
+    top: -14px;
 }
 .changeStyle_top{
     border-color: rgb(104, 96, 96);
@@ -48,10 +50,27 @@
     border-style: solid;
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(136deg);
-    width: 14px;
-    height: 14px;
+    width: 10px;
+    height: 10px;
     position: absolute;
     right: calc(50% - 7px );
     transition: 100 unset;
-    top: 0px;
+    top: 3px;
+}
+.illustration-color {
+    color: #ccc;
+}
+.illustration-item {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+}
+.illustration {
+    display: flex;
+    justify-content: flex-end;
+}
+.illustration-text {
+    padding-left: 10px;
+    font-size: 12px;
 }
\ No newline at end of file