dvcp_v2_wxcp_app/src/project/saas/AppPropagandaStatistics/calendarInfo.vue

<template>
  <div class="calendarInfo">
    <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/>

    <div class="dailyMatters">
      <div>
        <div v-for="(item, index) in list.slice(0,3)" :key="index" :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
          <div>{{ item.time }}</div>
          <div>{{ item.info }}</div>
        </div>
      </div>
      <div>
        <div v-for="(item, index) in list" :key="index" 
        :class="{'color1': index % 4 == 0,'color2': index % 4 == 1,'color3': index % 4 == 2,'color4': index % 4 == 3 }"
        class="daily_item">
          <div>{{ item.time }}</div>
          <div>{{ item.info }}</div>
        </div>
      </div>

      <div class="readMore" @click="toGroup">查看更多</div>
    </div>
  </div>
</template>

<script>
import { uniCalendar } from "@dcloudio/uni-ui"
export default {
  data() {
    return {
      date: '',
      selected: [{date: '2022-07-12'}],
      list: [{
        time: '11:00',
        info: '晴风小区志愿者活动'
      }]
    }
  },
  components: {
    uniCalendar
  },
  methods: {
    change(val) {
      this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
    },
    toGroup() {
      uni.navigateTo({url: './groupSendResident'})
    }
  },
  onShow() {
    document.title = '宣发日历'
  },

}
</script>

<style lang="scss" scoped>
.calendarInfo {
  ::v-deep .uni-calendar-item__weeks-box-circle {
    top: 77%;
    right: 45%;
    border-radius: 12px;
  }
  ::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>