北京限行图

<template>
  <div class="page-container">
    <template v-for="day in 7">
      <div class="day">
        <div class="hour" style="background: #00CCFF">周{{day}}</div>
        <template v-for="i in 24">
          <div class="hour" :class="[(  (day==4&& 7<=i && i<20) ||  ( day<=5 && ((7<=i && i<9) || (17<=i && i<20)))  )?'red':'']">{{i}}时</div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>

export default {
  name: '',
  data() {
    return {}
  },
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.page-container *{
  box-sizing: border-box;
  flex-shrink: 0;
}
.page-container {
  margin: 20px;
  border: 5px solid #666;
  //width: 700px;
  display: flex;

  width: max-content;

  .day {
    .hour {
      width: 100px;
      height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: green;
      color: #fff;
      border:1px solid #fff;
    }

    .hour.red {
      background: red;
      color: #fff;
    }
  }


}

</style>