毕设Day4

• 前言
• 一、使用天行api数据
• 二、CovidInfo病毒信息介绍并且设置样式
• • 1.编写html代码
  • 2.设置蓝色条纹样式
  • 3.设置信息样式
• 三、CovidNum疫情数据并且设置样式
• • 1.新增时间过滤器和数据过滤器方法

前言

第四天啦！！！加油加油加油！

一、使用天行api数据

1、调用getCovidInfo()，将请求的数据放在Home组件中，CovidInfo子组件和CovidNum子组件进行调用

  created() {
    console.log(this.$api);
    this.$api.getCovidInfo().then((res) => {
      if (res.data.code == 200) {
        console.log(res.data.newslist[0]);
        let desc = res.data.newslist[0].desc;
        // 病毒描述
        this.covidInfo = desc;
        // 疫情数量
        this.covidNumber = desc;
      }
    });
  },

在date里面初始化covidInfo类（病毒信息）和covidNumber类（疫情数量）

   data() {
    return {
      //病毒信息
      covidInfo: {
        note1: "",
        note2: "",
        note3: "",
        remark1: "",
        remark2: "",
        remark3: "",
      },
      //病毒数量
      covidNumber: {
        currentConfirmedCount: "", //现存确诊人数
        confirmedCount: "", //累计确诊人数
        suspectedCount: "", //累计境外输入人数
        curedCount: "", //累计治愈人数
        deadCount: "", //累计死亡人数
        seriousCount: "", //现存无症状人数
        suspectedIncr: "", //新增境外输入人数
        currentConfirmedIncr: "", //相比昨天现存确诊人数
        confirmedIncr: "", //相比昨天累计确诊人数
        curedIncr: "", //相比昨天新增治愈人数
        deadIncr: "", //相比昨天新增死亡人数
        seriousIncr: "", //相比昨天现存无症状人数
        modifyTime: "", //更新时间
      },
    };
  },

父传子：

    <!-- 病毒信息 -->
    <covid-info :covidInfo="covidInfo"></covid-info>
    <!-- 病毒数据统计 -->
    <covid-num :covidNumber="covidNumber"></covid-num>

CovidInfo子组件接收数据:

  props: {
    covidInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

CovidNum子组件接收数据:

  props: {
    // 接收Home父组件传过来的数据
    covidNumber: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },

二、CovidInfo病毒信息介绍并且设置样式

1.编写html代码

<div class="covidInfo">
    <p class="title">
      <i></i>
      病毒信息
    </p>
    <ul class="info">
      <li>{{ covidInfo.note1 }}</li>
      <li>{{ covidInfo.note2 }}</li>
      <li>{{ covidInfo.note3 }}</li>
      <li>{{ covidInfo.remark1 }}</li>
      <li>{{ covidInfo.remark2 }}</li>
      <li>{{ covidInfo.remark3 }}</li>
    </ul>
  </div>

2.设置蓝色条纹样式

.title {
  padding-bottom: 0.2rem;
  font-size: 0.35rem;
  font-weight: bold;
  line-height: 0.5rem;
  i {
    display: inline-block;
    width: 0.08rem;
    height: 0.4rem;
    margin-right: 0.06rem;
    margin-bottom: 0.03rem;
    vertical-align: middle;
    background: #4169e2;
  }
}

3.设置信息样式

.covidInfo {
  padding: 0.2rem;
  .info li {
    line-height: 0.5rem;
    font-size: 14px;
    color: rgb(7, 6, 6);
  }
}

三、CovidNum疫情数据并且设置样式

1.新增时间过滤器和数据过滤器方法

methods: {
    //过滤较昨日的数据，显示+/-
    caseNumChange(value) {
      if (value >= 0) {
        return "+" + value;
      } else {
        return value;
      }
    },
    //时间戳过滤器
    formatData(date) {
      var date = new Date(date);
      var YY = date.getFullYear();
      var MM = date.getMonth() + 1;
      var DD = date.getDate();
      var hh = date.getHours();
      var mm = date.getMinutes();
      function fun(num) {
        return (num = num > 9 ? num : "0" + num);
      }
      return YY + "-" + fun(MM) + "-" + fun(DD) + " " + fun(hh) + ":" + fun(mm);
    },
  },