【首页】日历样式调整

src/assets/less/mytodo.css

@@ -63,22 +63,37 @@
 #home /deep/ .ant-tabs {
   border-radius: 2px;
 }
-#home .ccfullCalendar {
-  height: 200px;
+#home .ccfullCalendar /deep/ .fc-view-harness-active {
+  height: 80px !important;
 }
 #home .ccfullCalendar /deep/ .ant-fullcalendar-header {
   display: none;
 }
 #home .ccfullCalendar /deep/ .fc .fc-scrollgrid-liquid {
-  height: 160px !important;
+  height: 72px !important;
+  overflow: hidden;
 }
 #home .ccfullCalendar /deep/ .fc .fc-toolbar-title {
-  font-size: 14px;
+  font-size: 24px;
   letter-spacing: 1px;
+  background-color: pink;
 }
 #home .ccfullCalendar /deep/ .fc-scrollgrid-sync-table {
   height: 274px !important;
 }
+#home .ccfullCalendar /deep/ .fc-scrollgrid-sync-inner {
+  border-color: white;
+}
+#home .ccfullCalendar /deep/ .fc-scrollgrid-sync-inner a {
+  color: gray;
+}
+#home .ccfullCalendar /deep/ .fc-day-today {
+  background-color: #bc4749;
+  border-radius: 2px;
+}
+#home .ccfullCalendar /deep/ .fc-day-today a {
+  color: white;
+}
 #home .ccfullCalendar /deep/ .fc-daygrid-day-bottom {
   margin-top: -10px !important;
 }
@@ -91,9 +106,12 @@
   color: #333;
   font-size: 16px;
 }
-#home .ccfullCalendar .eventDeal-wrap {
-  height: 200px !important;
-}
 #home .ccfullCalendar /deep/ .fc-scrollgrid {
   border-color: white;
 }
+#home .ccfullCalendar /deep/ .fc-scrollgrid,
+#home .ccfullCalendar .fc-scrollgrid-liquid,
+#home .ccfullCalendar .fc-col-header,
+#home .ccfullCalendar .fc-scrollgrid-section {
+  border-color: white !important;
+}

src/assets/less/mytodo.less

@@ -83,22 +83,43 @@
 
   // 日历
   .ccfullCalendar {
-    height: 200px;
+    //日历高度
+    /deep/ .fc-view-harness-active {
+      height: 80px !important;
+      // background-color: pink;
+    }
     // 年月选择消失
     /deep/ .ant-fullcalendar-header {
       display: none;
     }
-    //日历真实高度
+    //整个历真实高度
     /deep/ .fc .fc-scrollgrid-liquid {
-      height: 160px !important;
+      height: 72px !important;
+      overflow: hidden;
     }
     /deep/ .fc .fc-toolbar-title {
-      font-size: 14px;
+      font-size: 24px;
       letter-spacing: 1px;
+      background-color: pink;
     }
     /deep/ .fc-scrollgrid-sync-table {
       height: 274px !important;
     }
+
+    //日历字体颜色
+    /deep/ .fc-scrollgrid-sync-inner {
+      border-color: white;
+      a {
+        color: gray;
+      }
+    }
+    /deep/ .fc-day-today {
+      background-color: #bc4749;
+      border-radius: 2px;
+      a {
+        color: white;
+      }
+    }
     /deep/ .fc-daygrid-day-bottom {
       margin-top: -10px !important;
     }
@@ -111,15 +132,17 @@
       color: #333;
       font-size: 16px;
     }
-    .eventDeal-wrap {
-      // background-color: #dddddd;
-      height: 200px !important;
-      // border: none;
-    }
 
+    //消失一部分日历边框
     /deep/ .fc-scrollgrid {
       border-color: white;
       // background-color: orange;
     }
+    /deep/.fc-scrollgrid,
+    .fc-scrollgrid-liquid,
+    .fc-col-header,
+    .fc-scrollgrid-section {
+      border-color: white !important;
+    }
   }
 }

src/views/dashboard/MyToDo.vue

@@ -57,7 +57,6 @@
     </a-row>
 
     <!-- 第二行-->
-
     <a-row :gutter="24" class="secondLine">
       <!-- 公告 -->
       <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="9" :style="{ marginBottom: '8px', paddingRight: 0 }">
@@ -128,10 +127,10 @@
           </template>
 
           <a-row :gutter="24">
-            <!-- 当前时间 -->
+            <!-- 图片 -->
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-              <div style="height:100px;background:#a5a58d;">
-                准备放当前时间
+              <div style="height:186px;">
+                <img src="../../assets/date.jpg" alt="" height="186px;" width="100%"/>
               </div>
             </a-col>
 
@@ -249,9 +248,9 @@ export default {
         firstDay: '1', // 设置一周中显示的第一天是周几，周日是0，周一是1
         weekNumberCalculation: 'ISO', // 与 firstDay 配套使用
         // eventColor: 'red', // 全部日历日程背景色
-        timeGridEventMinHeight: '50', // 设置事件的最小高度
-        // aspectRatio: '2.5', // 设置日历单元格宽高比
-        displayEventTime: true, // 是否显示事件时间
+        timeGridEventMinHeight: '20', // 设置事件的最小高度
+        // aspectRatio: '8.5', // 设置日历单元格宽高比
+        displayEventTime: false, // 是否显示事件时间
         allDaySlot: false, // 周、日视图时，all-day不显示
         eventLimit: true, // 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示
         eventTimeFormat: {
@@ -263,7 +262,7 @@ export default {
           hour: '2-digit',
           minute: '2-digit',
           meridiem: false,
-          hour12: false // 设置时间为24小时制
+          hour12: false // 设置时间为　24小时制
         }
       },
       userInfo: this.$store.getters.userInfo,
@@ -282,7 +281,7 @@ export default {
         formComponent: null,
         isNew: false
       },
-      //
+
       data: [], // 表单数据
       total: 0, // 表单数据总数
 
@@ -333,6 +332,7 @@ export default {
     this.getAnnList()
   },
   methods: {
+
     // 公告数据 ----|**查询条件：已发布、数据条数**|------
     async getAnnList() {
       await enterpriseEList({ isRelease: '1', pageSize: 1000 }).then(res => {
@@ -345,13 +345,13 @@ export default {
             var list = [item.id, item.type, item.title, item.createBy, item.createTime]
             scrollData.push(list) //取到的每一个数据放到轮播表数据中
           })
-          //轮播配置
+          //轮播表配置
           this.config = {
             oddRowBGC: 'white',
             evenRowBGC: 'white',
             columnWidth: [50, 200, 600, 300, 400],
             align: ['center'],
-            rowNum: 7,
+            rowNum: 6,
             waitTime: 2000,
             data: scrollData //双向绑定(轮播表数据 绑定到配置的 data数据中)
           }