用vue实现一个根据不同百分比显示不同背景颜色的日历

根据百分比去实现背景颜色不同的日历，百分比越高，背景颜色越深；百分比越低，背景颜色越浅

代码实现：

html

<template>
  <div>
    <div class="maxbox">
      <div class="item">
        <p>
          <el-input v-model="year" style="width: 70%" />
          <el-button type="primary" @click="createDateJson()">
            点击查询对应年份的日历
          </el-button>
        </p>
        <div class="boxes">
          <div class="month" v-for="(key, value) in dateJSON" :key="value">
            <h2>{
  { year }}-{
  { value }}</h2>
            <div class="week">
              <div class="li" v-for="index in 7" :key="index">
                星期{
  { weekList[