宣发日历

src/project/saas/AppPropagandaStatistics/calendarInfo.vue

@@ -1,6 +1,23 @@
 <template>
   <div class="calendarInfo">
     <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/>
+
+    <div class="dailyMatters">
+      <div>
+        <div :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
+          <div>11:00</div>
+          <div>晴风小区志愿者活动</div>
+        </div>
+      </div>
+      <div>
+        <div :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
+          <div>11:00</div>
+          <div>晴风小区志愿者活动</div>
+        </div>
+      </div>
+
+      <div class="readMore">查看更多</div>
+    </div>
   </div>
 </template>
 
@@ -35,9 +52,63 @@ export default {
   }
   ::v-deep .uni-calendar__header {
     height: 76px;
+    justify-content: space-around;
+    border-bottom-style: none;
+  }
+  ::v-deep .uni-calendar__weeks-day {
+    border-bottom-style: none;
+  }
+  ::v-deep .uni-calendar__weeks-day-text,
+  ::v-deep .uni-calendar__header-text,
+  ::v-deep .uni-calendar-item__weeks-box-text {
+    font-size: 28px;
+  }
+  ::v-deep .uni-calendar__header-btn {
+    width: 16px;
+    height: 16px;
+    border-left-color: #5297FF;
+    border-top-color: #5297FF;
   }
   ::v-deep .uni-calendar__backtoday {
     display: none
   }
+
+  .dailyMatters {
+    padding: 30px;
+    box-sizing: border-box;
+    .daily_item {
+      background: #FFF;
+      padding: 30px 20px 30px 50px;
+      margin-bottom: 30px;
+      border-radius: 0px 16px 16px 0px;
+      
+      div:first-child {
+        color: #999999;
+        margin-bottom: 20px;
+      }
+    }
+    .color1 {
+      border-left: 6px solid #3AA0FF;
+    }
+    .color2 {
+      border-left: 6px solid #50CB74;
+    }
+    .color3 {
+      border-left: 6px solid #9D73D9;
+    }
+    .color4 {
+      border-left: 6px solid #435289;
+    }
+
+    .readMore {
+      height: 100px;
+      line-height: 100px;
+      text-align: center;
+      color: #3F8DF5;
+    }
+  }
+
+  
+
 }
 </style>