HealthStudentWeb/src/views/insight/monthReport.vue

<!--  -->
<template>
  <div class="pageContent monthReport">
    <NavBar title="月报" @on-click-left="onNavBack" right-text="历史"> </NavBar>
    <div class="periodSwitch">
      <div class="arrow arrowLeft">
        <van-icon name="arrow-left"></van-icon>
      </div>
      <div class="timearea">2023-11-15~2023-11-22</div>
      <div class="arrow arrowRight">
        <van-icon name="arrow"></van-icon>
      </div>
    </div>

    <div class="periodNav">
      <div
        class="periodItem minPeriodItem"
        :class="{ active: signActive == index }"
        v-for="(item, index) in signList"
        :key="index"
        @click="onSignClick(index)"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="pieMain" v-show="signActive !== 2">
      <div class="label">
        <div class="left">今日{{ pieTitle }}趋势</div>
        <div class="right">
          <span>检测次数：15次</span>
        </div>
      </div>
      <div class="label history">
        <div class="left"></div>
        <div class="right">
          <span>历史监测</span>
        </div>
      </div>
      <div class="pie-chart-con">
        <div class="pie-chart-left">
          <div id="pieChart" ref="pieChart"></div>
        </div>

        <div class="pie-chart-right">
          <div class="list">
            <div class="item" v-for="(item, index) in pieRightList" :key="index">
              <div class="item-left">
                <div class="circle" :style="{ backgroundColor: item.color }"></div>
                <span class="text">{{ item.text || '--' }}</span>
              </div>

              <div class="item-right">
                <span :style="{ color: item.color }">{{ item.count ? item.count + '次' : '0次' }}</span>
                <label :style="{ color: item.color }">{{
                  item.percentage ? '(' + item.percentage + '%' + ')' : '(0%)'
                }}</label>
              </div>

              <div class="status">
                <img :src="calcImg(item.percentage, item.lastPercentage)" alt="" />
                <span :style="{ color: calcImg(item.percentage, item.lastPercentage, true) != 0 ? item.color : '' }">{{
                  calcImg(item.percentage, item.lastPercentage, true)
                    ? Math.abs(calcImg(item.percentage, item.lastPercentage, true)) + '%'
                    : '持平'
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="list">
          <div
            class="item"
            v-for="(item, index) in statisticsList"
            :key="index"
            :style="{ backgroundColor: item.bgColor }"
          >
            <div class="top">
              <span>{{ item.label || '--' }}</span>
            </div>

            <div class="middle">
              <span>{{ item.value || '--' }}</span>
            </div>

            <div class="bottom">
              <span>{{ item.time || '--' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- todo 柱形图 -->
    <div class="bar-chart-con" v-show="signActive !== 2"></div>
    <div class="chart-title" v-show="signActive !== 2">
      <p>{{ pieTitle }}数据图</p>
    </div>
    <div class="ChatBox" :class="{ hiddenChart: signActive == 2 }">
      <div class="legendBox minLegendBox">
        <div class="legend">
          <div class="legendItem" :class="item.type" v-for="(item, index) in signGrid" :key="index">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="Chat signChart" id="signChart"></div>
    </div>
    <div class="ChatBox minChartBox" :class="{ hiddenChart: signActive != 2 }">
      <h4>运动步数</h4>
      <div class="Chat stepChart" id="stepChart"></div>
      <div class="result">
        <div class="wrapBox">
          <div class="text">
            <div class="left"><p>总步数：285</p></div>
            <div class="right">
              <img :src="upImg" alt="" />
              <span>923</span>
            </div>
          </div>
          <div class="text">
            <div class="left"><p>平均步数：285</p></div>
            <div class="right">
              <img :src="downImg" alt="" />
              <span>923</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="advice">
      <div class="content">
        <p class="title">健康建议</p>
        <!-- <p>{{ weekResult.Advice || '--' }}</p> -->
        <p>若要健，天天练，运动是健康的源泉</p>
      </div>
    </div>
    <div class="grid">
      <div
        class="gridItem"
        :class="{ minItem: signGrid.length % 3 == 0 }"
        :style="`background:${item.color};`"
        v-for="(item, index) in signGrid"
        :key="index"
      >
        <div class="time">
          <span class="number">5</span>
          <span>天</span>
        </div>
        <div class="title">{{ item.name }}</div>
      </div>
    </div>
    <div class="ChatBox minChartBox" :class="{ hiddenChart: signActive != 2 }">
      <h4>热量消耗</h4>
      <div class="Chat calorieChart" id="calorieChart"></div>
      <div class="result">
        <div class="wrapBox">
          <div class="text">
            <div class="left"><p>总消耗：285</p></div>
            <div class="right">
              <img :src="upImg" alt="" />
              <span>923</span>
            </div>
          </div>
          <div class="text">
            <div class="left"><p>平均消耗：285</p></div>
            <div class="right">
              <img :src="downImg" alt="" />
              <span>923</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { isNotNull } from '@/services/utils-service';
import NavBar from '@/components/NavBar';
export default {
  components: {
    NavBar
  },
  data() {
    return {
      signActive: 0,
      emotionActive: 0,
      emotionList: [
        {
          name: '疲劳'
        },
        {
          name: '压力'
        },
        {
          name: '焦虑'
        }
      ],
      pieData: [],
      pieEcharts: null,
      emotionChart: null,
      signChart: null,
      stepChart: null,
      calorieChart: null,
      pieRightList: [
        {
          text: '心率偏低',
          count: 2,
          percentage: '80',
          color: '#8dc21f'
        },
        {
          text: '心率偏高',
          count: 1,
          percentage: '80',
          color: '#ff5f8b'
        },
        {
          text: '心率正常',
          count: 12,
          percentage: '80',
          color: '#179b3b'
        }
      ],
      upImg: require('@/assets/today/icons/up.png'),
      downImg: require('@/assets/today/icons/down.png'),
      statisticsList: [
        { label: '最大值', value: '75', time: '08:15', bgColor: '#ff5f8b' },
        { label: '最小值', value: '40', time: '10:15', bgColor: '#189b3b' },
        { label: '最近值', value: '50', time: '18:15', bgColor: '#2ea7e0' }
      ],
      signList: [
        {
          grid: 'heartRateList',
          name: '心率'
        },
        {
          grid: 'temperatureList',
          name: '体温'
        },
        {
          grid: 'stepList',
          name: '运动'
        }
      ],
      heartRateList: [
        {
          name: '正常',
          type: 'moderate',
          color: '#179B3B'
        },
        {
          name: '偏高',
          type: 'severe',
          color: '#FF5F8B'
        },
        {
          name: '偏低',
          type: 'mild',
          color: '#2EA7E0'
        }
      ],
      temperatureList: [
        {
          name: '正常',
          type: 'moderate',
          color: '#179B3B'
        },
        {
          name: '发烧',
          type: 'severe',
          color: '#FF5F8B'
        }
      ],
      stepList: [
        {
          name: '>=3000',
          type: 'moderate',
          color: '#179B3B'
        },
        {
          name: '<=3000',
          type: 'severe',
          color: '#FF5F8B'
        }
      ]
    };
  },
  computed: {
    pieOption() {
      return {
        tooltip: {
          trigger: 'item',
          textStyle: {
            fontSize: 14
          },
          position: 'right'
        },
        legend: {
          top: '5%',
          left: 'center',
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '90%'],
            avoidLabelOverlap: false,
            startAngle: 270, // 设置逆时针渲染
            itemStyle: {
              borderRadius: 5,
              borderColor: '#fff',
              borderWidth: 2,
              fontSize: 16
            },
            label: {
              show: false,
              position: 'center',
              fontSize: 16
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
          }
        ]
      };
    },
    signGrid() {
      let list = [];
      if (this.signList[this.signActive].grid) {
        let temp = this[`${this.signList[this.signActive].grid}`];
        if (temp) {
          list = temp;
        }
      }
      return list;
    },
    heartRateMap() {
      let map = new Map();
      this.heartRateList.forEach(item => {
        map.set(item.name, item.color);
      });
      return map;
    },
    temperatureMap() {
      let map = new Map();
      this.temperatureList.forEach(item => {
        map.set(item.name, item.color);
      });
      return map;
    },
    stepMap() {
      let map = new Map();
      this.stepList.forEach(item => {
        map.set(item.name, item.color);
      });
      return map;
    },
    pieTitle() {
      return this.signList[this.signActive].name;
    }
  },
  watch: {
    active(val) {
      console.log(val);
      this.emotionActive = 0;
      this.signActive = 0;
      this.$nextTick(() => {
        this.initData();
      });
    },
    /* emotionActive(val) {
      console.log(val);
      this.$nextTick(() => {
        this.initEmotionChart();
      });
    }, */
    signActive(val) {
      console.log(val);
      this.$nextTick(() => {
        this.initSignChart();
      });
    }
  },
  created() {
    this.pieData = this.pieRightList.map(item => {
      item.value = item.count;
      item.itemStyle = {
        color: item.color
      };
      return item;
    });
  },
  mounted() {
    this.initPieEchart();
    this.initData();
  },
  methods: {
    onNavBack() {
      this.$router.push({
        name: 'Insight'
      });
    },
    onEmotionClick(index) {
      this.emotionActive = index;
    },
    onSignClick(index) {
      this.signActive = index;
    },
    initData() {
      if (!this.signChart) {
        this.signChart = this.$echarts.init(document.getElementById('signChart'));
      }
      if (!this.stepChart) {
        this.stepChart = this.$echarts.init(document.getElementById('stepChart'));
      }
      if (!this.calorieChart) {
        this.calorieChart = this.$echarts.init(document.getElementById('calorieChart'));
      }
      this.initSignChart();
    },
    initSignChart() {
      let option = this.getOption();

      if (this.signActive == 0) {
        //测试
        let data = [
          {
            time: '5.11',
            value: 50
          },
          {
            time: '5.12',
            value: 60
          },
          {
            time: '5.13',
            value: 70
          },
          {
            time: '5.14',
            value: 80
          },
          {
            time: '5.15',
            value: 120
          },
          {
            time: '5.16',
            value: 130
          },
          {
            time: '5.17',
            value: 150
          }
        ];

        this.formateHeartRateData(option, data);
        this.signChart.setOption(option);
      } else if (this.signActive == 1) {
        //测试
        let data = [
          {
            time: '5.11',
            value: 36
          },
          {
            time: '5.12',
            value: 38
          },
          {
            time: '5.13',
            value: 37
          },
          {
            time: '5.14',
            value: 36
          },
          {
            time: '5.15',
            value: 38
          },
          {
            time: '5.16',
            value: 37
          },
          {
            time: '5.17',
            value: 39
          }
        ];
        this.formateTemperatureData(option, data);
        this.signChart.setOption(option);
      } else if (this.signActive == 2) {
        option = this.getOption(false);
        let option2 = this.getOption(false);

        //测试
        let data = [
          {
            time: '5.11',
            value: 36
          },
          {
            time: '5.12',
            value: 38
          },
          {
            time: '5.13',
            value: 37
          },
          {
            time: '5.14',
            value: 36
          },
          {
            time: '5.15',
            value: 38
          },
          {
            time: '5.16',
            value: 37
          },
          {
            time: '5.17',
            value: 39
          }
        ];
        //测试
        let data2 = [
          {
            time: '5.11',
            value: 36
          },
          {
            time: '5.12',
            value: 38
          },
          {
            time: '5.13',
            value: 37
          },
          {
            time: '5.14',
            value: 36
          },
          {
            time: '5.15',
            value: 38
          },
          {
            time: '5.16',
            value: 37
          },
          {
            time: '5.17',
            value: 39
          }
        ];

        this.formateStepData(option, data);
        this.formateCalorieData(option2, data2);

        this.stepChart.setOption(option);
        this.calorieChart.setOption(option2);
      }
    },
    formateStepData(option, data) {
      let xdata = [];
      let ydata = [];
      data.forEach(item => {
        xdata.push(item.time);
        ydata.push({
          value: item.value,
          label: {
            show: true
          },
          itemStyle: {
            color: this.formateTemperatureColor(item.value)
          }
        });
      });
      option.xAxis.data = xdata;
      option.series[0].data = ydata;
      // 隐藏y轴
      option.yAxis.show = false;
    },
    formateTemperatureData(option, data) {
      let xdata = [];
      let ydata = [];
      let fill = [];
      let max = 0;
      data.forEach(item => {
        if (item.value > max) {
          max = item.value;
        }
      });
      data.forEach(item => {
        xdata.push(item.time);
        fill.push({
          value: max - item.value,
          label: {
            show: false
          },
          itemStyle: {
            color: this.formateTemperatureColor(item.value)
          }
        });
        ydata.push({
          value: item.value,
          label: {
            show: true
          },
          itemStyle: {
            color: this.formateTemperatureColor(item.value)
          }
        });
      });
      option.xAxis.data = xdata;
      option.series[0].data = ydata;
      option.series[1].data = fill;
      // 规定最小值
      option.yAxis.min = 35;
      // 规定最大值
      option.yAxis.max = max;
    },
    formateTemperatureColor(value) {
      if (value > 38) {
        return this.temperatureMap.get('发烧');
      } else {
        return this.temperatureMap.get('正常');
      }
    },
    formateCalorieData(option, data) {
      let xdata = [];
      let ydata = [];
      data.forEach(item => {
        xdata.push(item.time);
        ydata.push({
          value: item.value,
          label: {
            show: true
          },
          itemStyle: {
            color: this.formateTemperatureColor(item.value)
          }
        });
      });
      option.xAxis.data = xdata;
      option.series[0].data = ydata;
      // 隐藏y轴
      option.yAxis.show = false;
    },
    formateHeartRateData(option, data) {
      let xdata = [];
      let ydata = [];
      let fill = [];
      let max = 0;
      data.forEach(item => {
        if (item.value > max) {
          max = item.value;
        }
      });
      data.forEach(item => {
        xdata.push(item.time);
        fill.push({
          value: max - item.value,
          label: {
            show: false
          },
          itemStyle: {
            color: this.formateHeartRateColor(item.value)
          }
        });
        ydata.push({
          value: item.value,
          label: {
            show: true
          },
          itemStyle: {
            color: this.formateHeartRateColor(item.value)
          }
        });
      });
      option.xAxis.data = xdata;
      option.series[0].data = ydata;
      option.series[1].data = fill;
      // 规定最小值
      option.yAxis.min = 40;
      // 规定最大值
      option.yAxis.max = 150;
      //设置高压标线
      option.series[1].markLine = {
        data: [
          {
            symbol: 'pin',
            silent: true,
            yAxis: 120,
            lineStyle: {
              color: '#C1272D'
            },
            label: {
              color: '#C1272D'
            }
          }
        ]
      };
    },
    formateHeartRateColor(value) {
      if (value > 120) {
        return this.heartRateMap.get('偏高');
      } else if (value >= 60) {
        return this.heartRateMap.get('正常');
      } else {
        return this.heartRateMap.get('偏低');
      }
    },
    getOption(point = true) {
      let option = {
        grid: {
          top: '10%',
          left: '10%',
          right: '10%',
          bottom: '20%'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'bar',
            barMaxWidth: 15,
            stack: 'value',
            stackStrategy: 'all',
            animation: false,
            label: {
              show: true,
              width: 15,
              height: 15,
              backgroundColor: '#fff',
              borderRadius: 50,
              borderWidth: 3,
              borderColor: 'inherit',
              verticalAlign: 'middle',
              position: 'insideTop',
              formatter: function () {
                return '';
              }
            },
            itemStyle: {
              borderRadius: [0, 0, 12, 12]
            }
          },
          {
            type: 'bar',
            barMaxWidth: 15,
            stack: 'value',
            stackStrategy: 'all',
            animation: false,
            itemStyle: {
              borderRadius: [12, 12, 0, 0]
            }
          }
        ]
      };

      if (!point) {
        option.series = [
          {
            type: 'bar',
            barMaxWidth: 15,
            label: {
              show: true,
              color: '#000',
              position: 'outside'
            },
            itemStyle: {
              borderRadius: 12
            }
          }
        ];
      }

      return option;
    },
    initPieEchart() {
      if (this.pieEcharts != null && this.pieEcharts != '' && this.pieEcharts != undefined) {
        this.pieEcharts.dispose();
      }
      this.pieEcharts = this.$echarts.init(this.$refs.pieChart);
      this.pieEcharts.setOption(this.pieOption);
    },
    /**
     *
     * @param { 本周情绪比例} current
     * @param { 上周情绪比例 } last
     * @param { 是否返回对比比例 } isCallBackCompare
     */
    calcImg(current, last, isCallBackCompare) {
      let imgUrl = '';
      let compare = '';
      if (isNotNull(current) && isNotNull(last)) {
        compare = Number(current) - Number(last);
        imgUrl = compare > 0 ? this.upImg : compare == 0 ? '' : this.downImg;
      }
      if (isCallBackCompare) {
        return compare;
      } else {
        return imgUrl;
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import './include.scss';
.monthReport {
  padding-top: 50px;

  .periodNav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .periodItem {
      width: 48%;
      font-size: 28px;
      color: black;
      text-align: center;
      padding: 12px;
      border-radius: 30px;
      background: #e6e6e6;
      &.active {
        color: white;
        background: #179b3b;
      }
    }
    .minPeriodItem {
      width: 32%;
      padding: 8px;
    }
  }

  .pie-chart-con {
    flex: 1;
    padding: 10px 0 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #fff;

    .pie-chart-left {
      position: relative;
      height: 350px;
      width: 300px;
      padding-left: 30px;
      @include center();
      #pieChart {
        height: 350px;
        width: 350px;
      }
    }

    .pie-chart-right {
      height: 280px;
      width: 65%;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;

      .list {
        display: flex;
        justify-content: center;
        flex-direction: column;
        .item {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24px;
          padding: 18px 0;
          .item-left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-right: 20px;

            .circle {
              height: 24px;
              width: 24px;
              margin: 0 8px;
            }

            span {
              font-size: 24px;
            }

            .text {
              color: #000;
              font-size: 24px;
            }
          }

          .item-right {
            @include center();
            span {
              font-size: 24px;
            }
          }
          .status {
            padding: 0 10px;
            @include center();
            img {
              height: 30px;
              width: 18px;
              padding: 0 6px;
            }
          }
        }
      }
    }
  }
  .periodSwitch {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0px;
    padding-bottom: 30px;

    .timearea {
      font-size: 28px;
      justify-self: center;
      color: gray;
    }
    .arrow {
      font-size: 45px;
    }
  }
  .bmi {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
    padding: 40px 8px 0 8px;
    font-weight: bold;

    p {
      padding: 0 5px;
      font-size: 28px;
    }
    .van-button {
      padding: 5px 10px;
      margin-left: 50px;
      font-size: 14px;
      color: #333;
      border-radius: 30px;
    }
  }
  .label {
    position: relative;
    font-size: 40px;
    font-weight: bold;
    padding: 30px 10px 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      position: relative;
      font-size: 30px;
      color: $border_color;
    }
    &.history {
      padding: 0 20px;
      font-size: 36px;
      font-weight: 400;
      color: $border_color;
    }
  }
  .statistics {
    height: 100%;
    padding: 10px 20px;
    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布
      /* grid-template-rows: repeat(3, 1fr); */
      gap: 40px;
      font-size: 32px;
      .item {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 30px;
        /* height: px2rem(136); */
        flex-direction: column;
        border: 1px solid $border_color;
        border-radius: 30px;
        color: #fff;
        .top {
          font-size: 24px;
        }

        .middle {
          font-size: 48px;
        }

        .bottom {
          font-size: 18px;
        }
      }
    }
  }
  .chart-title {
    padding: 30px 30px 0 30px;
    font-size: 36px;
    font-weight: bold;
    color: #282828;
  }
  .ChatBox {
    overflow: hidden;
    width: calc(100vw - 60px);
    height: 600px;
    border: 2px solid #cdf348;
    border-radius: 70px;
    margin-top: 30px;
    h4 {
      padding: 40px 0 10px 60px;
    }
    .legendBox {
      width: 100%;
      height: 150px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 0 30px;

      .legend {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        font-size: 20px;

        .legendItem {
          position: relative;
          width: 205px;
          margin-top: 10px;
          margin-right: 20px;

          &:nth-child(2n) {
            margin-right: 0;
          }
        }
        .not {
          .number {
            color: #179b3b;
          }
          &::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -20px;
            width: 15px;
            height: 15px;
            background: #179b3b;
            border-radius: 50%;
            margin: auto;
          }
        }
        .mild {
          .number {
            color: #2ea7e0;
          }
          &::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -20px;
            width: 15px;
            height: 15px;
            background: #2ea7e0;
            border-radius: 50%;
            margin: auto;
          }
        }
        .moderate {
          .number {
            color: #8dc21f;
          }
          &::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -20px;
            width: 15px;
            height: 15px;
            background: #8dc21f;
            border-radius: 50%;
            margin: auto;
          }
        }
        .severe {
          .number {
            color: #ff5f8b;
          }
          &::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: -20px;
            width: 15px;
            height: 15px;
            background: #ff5f8b;
            border-radius: 50%;
            margin: auto;
          }
        }
      }
    }
    .minLegendBox {
      .legend {
        .legendItem {
          width: auto;
          margin-right: 50px;

          &:nth-child(2n) {
            margin-right: 50px;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .Chat {
      width: calc(100vw - 60px);
      height: 500px;
    }
    .result {
      height: 140px;
      padding: 0 30px;
      border-radius: 70px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      .wrapBox {
        padding: 10px 180px 10px 60px;
        width: 100%;
        background-color: #e6e6e6;
        border-radius: 70px;
      }
      .text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right {
          @include center();
          img {
            height: 30px;
            width: 30px;
            object-fit: contain;
            margin: 0 5px;
          }
        }
      }
    }
  }
  .minChartBox {
    height: 760px;
  }
  .hiddenChart {
    width: 0;
    height: 0;
  }

  .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: white;
    font-size: 30px;

    .gridItem {
      width: calc((100vw - 60px) * 0.48);
      height: calc((100vw - 60px) * 0.48);
      border-radius: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 30px;

      .time {
        .number {
          font-size: 90px;
          font-weight: bold;
        }
      }
    }
    .minItem {
      width: calc((100vw - 60px) * 0.32);
      height: calc((100vw - 60px) * 0.32);
      font-size: 28px;

      .time {
        .number {
          font-size: 70px;
          font-weight: bold;
        }
      }
    }
  }
  .advice {
    padding: 52px 20px 60px 20px;
    .content {
      background: #f2f6ff;
      border-radius: 20px;
      padding: 0px 10px;
      text-align: left;

      p {
        font-size: 24px;
        color: #707070;
        line-height: 46px;
      }
      .title {
        font-size: 26px;
        font-weight: bold;
        /* color: $green; */
        line-height: 36px;
      }
    }
  }
}
</style>