日历效果实现

    <div class="bf2">
      <div class="f2">
        <div class="ititle">
          <div class="im" @click="plusMonth()">
            <img src="static/images/icon/sileft.png"/>
          </div>
          <div class="title">{{nowMonth}}</div>
          <div class="im1" @click="addMonth()">
            <img src="static/images/icon/siright.png"/>
          </div>
        </div>
        <div class="week">
          <div class="weeekRes">
            <div class="weekResT1" v-for="(item,index) in days" :key="index">
              <div class="weekResti1"><span>{{item.week}}</span></div>
            </div>
            <div class="weekResT2" v-for="(item,index) in list" :key="index">
              <div :class="['orderYuan']">
                <span :class="['orderYuanTT',{'cirTT':item.sign},{'y':!item.inMonth}]">{{item.name}}</span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="btn">签到</div>
          <div class="share">分享好友，签到积分翻倍！
            <img src="/static/img/share.png">
          </div>
        </div>
      </div>
    </div>

 .bf2 {
    width: 100%;
    margin-top: 57px;
  }

  .btn {
    color: #fff;
    background: #00B1F1;
    text-align: center;
    border-radius: 13px;
    height: 27px;
    line-height: 27px;
    width: 75px;
    margin: 10px auto 0;
  }

  .share {
    font-size: 12px;
    color: #656565;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
 .share img {
   width: 12px;
   height: 12px;
    }
 
  .f2 {
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 2px 8px 0 rgba(204, 204, 204, 0.5);
    margin-bottom: 14px;
    margin: 0 15px;
  }

  .f2 .ititle .title {
    font-size: 16px;
    color: #333;
    text-align: center;
  }

  .f2 .ititle {
    display: flex;
    padding: 14px 0 12px;
    margin: 0 9px;
  }

  .f2 .ititle img {
    height: 16px;
    width: 16px;
  }

  .f2 .ititle .im {
    margin-right: auto;
    margin-top: 3px;
  }

  .f2 .ititle .im1 {
    margin-left: auto;
    margin-top: 4px;
  }

  .f2 .week {
    display: flex;
    text-align: center;
    flex-wrap: wrap;

  }

  .f2 .week .weeekRes {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .f2 .week .weekResT1 {
    width: 14.28%;
    padding-bottom: 5px;
  }

  .f2 .week .weekResT2 {
    width: 14.28%;
    font-size: 12px;
    margin-bottom: 3px;
  }

  .f2 .week .weekResti1 {
    font-size: 12px;
  }

  .f2 .week .orderYuan {
    height: 24px;
    line-height: 24px;
    width: 100%;
  }

  .f2 .week .orderYuanTT {
    width: 24px;
    display: block;
    margin: 0 auto;
    border-radius: 51px;
    align-items: center;
    vertical-align: middle;
  }

  .f2 .week .y {
    color: #999;
  }

  .cirTT {
    background-color: #44c4a0 !important;
    color: #fff !important;
  }

  .f2 .week .t1 {
    width: 14.2%;
    box-sizing: border-box;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    padding: 2px 0;
  }

  .f2 .week .t1 .lp1 {
    font-size: 16px;
    color: #333;
  }

  .f2 .week .t1 .lp2 {
    font-size: 12px;
    color: #333;
    margin: 2px 12.5px;
    padding: 2.5px 0;
  }

  .f2 .week .t1 .cur {
    background-color: #44c4a0;
    border-radius: 25px;
    color: #fff;
    width: 24px;
    text-align: center;
    align-items: center;
    margin: 2px auto;
  }

   data() {
      return {
        monthOffset: 0,
        shows: true,
        exceed: true,
        nowMonth: '',
        list: [],
        days: [{
          week: '日'
        }, {
          week: '一'
        }, {
          week: '二'
        }, {
          week: '三'
        }, {
          week: '四'
        }, {
          week: '五'
        }, {
          week: '六'
        }]
      }
    }

    created() {
      let nowMonth = util.formatYY()
      this.nowMonth = nowMonth
      this.getCal()
    }
    methods: {
      getCal() {
        let monthOffset = this.monthOffset
        let nowMonth = moment().add(monthOffset, 'month').format('YYYY-MM') + '-01'
        //当前选择的年月（获取到1号）
        let list = []
        //算出周几
        let vWeekOfDay = moment(nowMonth).format('E') //算出这周的周几
        if (vWeekOfDay == 7) {
          vWeekOfDay = 0
        }
        //获取这个月的日历需要补满上个月的几天
        for (let i = vWeekOfDay; i > 0; i--) {
          //10-1往前减
          let xdate = moment(nowMonth).subtract(i, 'days')
          console.log(xdate)
          let xname = xdate.format('D')
          console.log(xname)
          list.push({
            name: xname,
            date: xdate.format('YYYY-MM-DD'), sign: false
          })
        }
        if (this.exceed) {
          if (vWeekOfDay > 4) {
            for (let i = 0; i < 42 - vWeekOfDay; i++) {
              let xdate = moment(nowMonth).add(i, 'days')
              let xname = xdate.format('D')
              list.push({
                name: xname,
                date: xdate.format('YYYY-MM-DD'),
                sign: false
              })
            }
          } else {
            for (let i = 0; i < 35 - vWeekOfDay; i++) {
              let xdate = moment(nowMonth).add(i, 'days')
              let xname = xdate.format('D')
              list.push({
                name: xname,
                date: xdate.format('YYYY-MM-DD'),
                sign: false
              })
            }
          }
        } else {
          //7-少了几个
          for (let i = 0; i < 7 - vWeekOfDay; i++) {
            let xdate = moment(nowMonth).add(i, 'days')
            let xname = xdate.format('D')
            list.push({
              name: xname,
              date: xdate.format('YYYY-MM-DD'),
              sign: false
            })
          }
        }
        this.list = list
        let that = this
        this.list.forEach(item => {
          item.inMonth = that.isInMoth(item.date)
        })
      },
      isInMoth(date) {
        let tmonth = moment(date).format('YYYY年MM月')
        if (tmonth == this.nowMonth) {
          return true
        }
        return false
      },
      plusMonth() {
        let monthOffset = this.monthOffset
        monthOffset = monthOffset - 1
        let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
        this.monthOffset = monthOffset
        this.nowMonth = nowMonth
        this.getCal()
      },
      addMonth() {
        let monthOffset = this.monthOffset
        monthOffset = monthOffset + 1
        let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
        this.monthOffset = monthOffset
        this.nowMonth = nowMonth
        this.getCal()
      }
    }