首页日历样式确定

src/assets/less/mytodo.css

@@ -58,49 +58,35 @@
   color: white;
   box-shadow: 1px 1px 3px #333;
 }
-#home .secondLine .tips {
-  position: relative;
-}
-#home .secondLine .tips #showTime {
-  border: 1px solid #b4adad;
-  box-shadow: 2px 2px 2px #888888;
-  position: absolute;
-  top: 10%;
-  right: 4%;
-  background-color: rgba(133, 128, 128, 0.3);
-  border-radius: 10px;
-  padding: 0 10px;
-  color: #333;
-  font-style: normal;
-  font-size: 40px;
-  font-weight: 700;
-}
 #home /deep/ .ant-card-head-title {
   color: #1890ff;
 }
 #home /deep/ .ant-tabs {
   border-radius: 2px;
 }
-#home .ccfullCalendar /deep/ .fc-view-harness-active {
-  height: 80px !important;
+#home .ccfullCalendar {
+  background-image: url('../date03.jpg');
+  opacity: 0.8;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
-#home .ccfullCalendar /deep/ .ant-fullcalendar-header {
-  display: none;
+#home .ccfullCalendar /deep/ .fc-header-toolbar {
+  display: none !important;
 }
 #home .ccfullCalendar /deep/ .fc .fc-scrollgrid-liquid {
-  height: 72px !important;
-  overflow: hidden;
+  height: 290px;
 }
-#home .ccfullCalendar /deep/ .fc .fc-toolbar-title {
-  font-size: 24px;
-  letter-spacing: 1px;
-  background-color: pink;
+#home .ccfullCalendar /deep/ .fc-view-harness-active {
+  height: 290px !important;
 }
-#home .ccfullCalendar /deep/ .fc-scrollgrid-sync-table {
-  height: 274px !important;
+#home .ccfullCalendar /deep/ .fc-scrollgrid-sync-inner {
+  line-height: 30px;
 }
 #home .ccfullCalendar /deep/ .fc-scrollgrid-sync-inner a {
-  color: gray;
+  color: white;
+}
+#home .ccfullCalendar /deep/ .fc-col-header-cell-cushion {
+  color: #333 !important;
 }
 #home .ccfullCalendar /deep/ .fc-day-today {
   background-color: #bc4749;
@@ -108,9 +94,10 @@
 }
 #home .ccfullCalendar /deep/ .fc-day-today a {
   color: white;
+  font-weight: 700;
 }
 #home .ccfullCalendar /deep/ .fc-daygrid-day-bottom {
-  margin-top: -10px !important;
+  margin-top: -24px !important;
 }
 #home .ccfullCalendar /deep/ .fc .fc-button-primary {
   background-color: #1890ff;
@@ -120,7 +107,5 @@
 #home .ccfullCalendar /deep/ .fc .fc-toolbar-title {
   color: #333;
   font-size: 16px;
-}
-#home .ccfullCalendar /deep/ .fc-scrollgrid {
-  border-color: white !important;
+  letter-spacing: 1px;
 }

src/assets/less/mytodo.less

@@ -71,26 +71,6 @@
         box-shadow: 1px 1px 3px #333;
       }
     }
-
-    // 日程时间
-    .tips {
-      position: relative;
-      #showTime {
-        border: 1px solid rgb(180, 173, 173);
-        box-shadow: 2px 2px 2px #888888;
-        position: absolute;
-        top: 10%;
-        right: 4%;
-        background-color: rgba(133, 128, 128, 0.3);
-        border-radius: 10px;
-        padding: 0 10px;
-        // color: rgba(188, 71, 73);
-        color: #333;
-        font-style: normal;
-        font-size: 40px;
-        font-weight: 700;
-      }
-    }
   }
 
   // card 标题颜色
@@ -104,45 +84,45 @@
 
   // 日历
   .ccfullCalendar {
-    //日历高度
-    /deep/ .fc-view-harness-active {
-      height: 80px !important;
-      // background-color: pink;
-    }
-    // 年月选择消失
-    /deep/ .ant-fullcalendar-header {
-      display: none;
+    background-image: url('../date03.jpg');
+    opacity: 0.8;
+    background-size: cover;
+    background-repeat: no-repeat;
+    // 不需要日历头部选择按钮
+    /deep/ .fc-header-toolbar {
+      display: none !important;
     }
     //整个历真实高度
     /deep/ .fc .fc-scrollgrid-liquid {
-      height: 72px !important;
-      overflow: hidden;
-    }
-    /deep/ .fc .fc-toolbar-title {
-      font-size: 24px;
-      letter-spacing: 1px;
-      background-color: pink;
+      height: 290px;
     }
-    /deep/ .fc-scrollgrid-sync-table {
-      height: 274px !important;
+    //控制日历不要占位
+    /deep/ .fc-view-harness-active {
+      height: 290px !important;
     }
 
-    //日历字体颜色
+    // 日历行高字体颜色
     /deep/ .fc-scrollgrid-sync-inner {
+      line-height: 30px;
       a {
-        color: gray;
+        color: white;
       }
     }
+    /deep/ .fc-col-header-cell-cushion {
+      color: #333 !important;
+    }
     // 今天日历显示
     /deep/ .fc-day-today {
       background-color: #bc4749;
       border-radius: 2px;
       a {
         color: white;
+        font-weight: 700;
       }
     }
+
     /deep/ .fc-daygrid-day-bottom {
-      margin-top: -10px !important;
+      margin-top: -24px !important;
     }
     /deep/ .fc .fc-button-primary {
       background-color: #1890ff;
@@ -152,11 +132,7 @@
     /deep/ .fc .fc-toolbar-title {
       color: #333;
       font-size: 16px;
-    }
-
-    // 消失部分边框
-    /deep/ .fc-scrollgrid {
-      border-color: white !important;
+      letter-spacing: 1px;
     }
   }
 }

src/views/dashboard/MyToDo.vue

@@ -128,14 +128,14 @@
 
           <a-row :gutter="24">
             <!-- 图片 -->
-            <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+            <!-- <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
               <div style="height:186px;">
-                <div class="tips">
-                  <img src="../../assets/date.jpg" alt="" height="186px;" width="100%" />
-                  <!-- <i id="showTime"></i> -->
-                </div>
+                <div class="tips"> -->
+            <!-- <img src="../../assets/date.jpg" alt="" height="186px;" width="100%" /> -->
+            <!-- <i id="showTime"></i> -->
+            <!-- </div>
               </div>
-            </a-col>
+            </a-col> -->
 
             <!-- 小日历 -->
             <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
@@ -344,20 +344,20 @@ export default {
   },
   methods: {
     //获取当前时间
-    getCurrentTime() {
-      var _this = this
-      let yy = new Date().getFullYear()
-      let mm = new Date().getMonth() + 1
-      let dd = new Date().getDate()
-      let hh = new Date().getHours()
-      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
-      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
-      //  yy + '/' + mm + '/' +dd + ' ' +  省掉年月日
-      _this.gettime = hh + ':' + mf + ':' + ss
-      this.value = _this.gettime
-      showTime.innerHTML = _this.gettime
-      // console.log(_this.gettime)
-    },
+    // getCurrentTime() {
+    //   var _this = this
+    //   let yy = new Date().getFullYear()
+    //   let mm = new Date().getMonth() + 1
+    //   let dd = new Date().getDate()
+    //   let hh = new Date().getHours()
+    //   let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
+    //   let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
+    //   //  yy + '/' + mm + '/' +dd + ' ' +  省掉年月日
+    //   _this.gettime = hh + ':' + mf + ':' + ss
+    //   this.value = _this.gettime
+    //   showTime.innerHTML = _this.gettime
+    //   // console.log(_this.gettime)
+    // },
     // 公告数据 ----|**查询条件：已发布、数据条数**|------
     async getAnnList() {
       await enterpriseEList({ isRelease: '1', pageSize: 1000 }).then(res => {
@@ -566,4 +566,16 @@ export default {
 // 单独创建页面写样式  如下
 @import '~@assets/less/mytodo.less';
 @import '~@assets/less/common.less';
+.contain {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  // height: 300px;
+  // line-height: 50px;
+  // text-align: center;
+  background: rgba(255, 255, 255, 0.3);
+}
 </style>