vue+css漂亮的定制日历

最终预览图

html

<div class="data_box">
        <div class="list list_top">
          週日
        </div>
        <div class="list list_top">
          週一
        </div>
        <div class="list list_top">
          週二
        </div>
        <div class="list list_top">
          週三
        </div>
        <div class="list list_top">
          週四
        </div>
        <div class="list list_top">
          週五
        </div>
        <div class="list list_top">
          週六
        </div>
        <div :class="[item.can==0?'list list_deep':current_data==item.detail?'list list_active':'list']"
          v-for="(item,index) in dataList" @click="choose_index(index)">
          <div>{{item.day}}</div>
          <div><img src="../assets/img/final/clock.png" alt="" v-show="current_data==item.detail"></div>
        </div>
      </div>

css

  .data_box {
    display: grid;
    width: 100%;
    grid-template-columns: calc(100%/7) calc(100%/7) calc(100%/7) calc(100%/7) calc(100%/7) calc(100%/7) calc(100%/7);
    grid-template-rows: 70px 70px 70px 70px 70px 70px;
    border-left: 1px solid #d8d8d8;
  }

  .list {
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .list img {
    width: 18px;
    margin-top: 4px;
    margin-left: 8px;

  }

  .list_dis {
    background: #fbfbfb;
    color: #999999;
  }

  .list_deep {
    background: #fbfbfb;
    color: #d8d8d8;
  }

  .list_active {
    background: #f48a2b;
    color: white;
  }

  .list_top {
    border-top: 1px solid #d8d8d8;
  }

js逻辑暂时自己做的本地时间判断，太长了不放了，后面要从后端获取，可以注意判断一下当月前面补几天后面补几天以及跨年的情况