代码提交

src/assets/font/font.css

@@ -11,4 +11,11 @@
     src: url('./msyhl.ttc');
     font-weight: normal;
     font-style: normal;
+}
+/* D-DIN-Bold */
+@font-face {
+    font-family: "D-DIN-Bold";
+    src: url('./D-DIN-Bold.otf');
+    font-weight: normal;
+    font-style: normal;
 }

src/components/calendar/index.vue

@@ -17,7 +17,7 @@ const selectDate = (val) => {
     <template #header="{ date }">
       <div>
         <img
-          @click="selectDate('prev-month')"
+          @click="selectDate('prev-year')"
           src="../../assets/images/overview/prevMonth.png"
           style="
             width: 16px;
@@ -26,9 +26,30 @@ const selectDate = (val) => {
             border: 0.5px dashed rgba(255, 255, 255, 0.3);
           "
         />
+        <img
+          @click="selectDate('prev-month')"
+          src="../../assets/images/overview/prevYear.png"
+          style="
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            border: 0.5px dashed rgba(255, 255, 255, 0.3);
+          "
+        />
+
         <span @click="toggleClick" style="font-size: 13px">{{ date }}</span>
         <img
           @click="selectDate('next-month')"
+          src="../../assets/images/overview/nextYear.png"
+          style="
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            border: 0.5px dashed rgba(255, 255, 255, 0.3);
+          "
+        />
+        <img
+          @click="selectDate('next-year')"
           src="../../assets/images/overview/nextMonth.png"
           style="
             width: 16px;
@@ -48,7 +69,7 @@ const selectDate = (val) => {
 </template>
 
 <style scoped lang="less">
-:deep.el-calendar {
+.el-calendar {
   font-size: 0.7rem;
   width: 100% !important;
   height: 100% !important;
@@ -91,10 +112,12 @@ const selectDate = (val) => {
   }
 }
 :deep(.el-calendar-day .day) {
-  font-size: 12px;
+  font-size: 13px;
   height: 60%;
+  font-family: "D-DIN-Bold";
 }
 :deep(.el-calendar-day .value) {
+  font-size: 10px;
   color: rgba(91, 250, 241, 1);
   height: 40%;
 }