jiangxiSZ/shuzhixiangzheng/src/components/MainPageChild/VaccinationPage.vue

<template>
  <div id="vaccinationPage">
    <img
      class="yq_back_img"
      id="img1"
      src="../../assets/png/yq_background.png"
    />
    <img
      class="yq_back_img"
      id="img2"
      src="../../assets/png/yq_background.png"
    />
    <img class="yq_border_img" id="img3" src="../../assets/png/yq_border.png" />
    <img class="yq_border_img" id="img4" src="../../assets/png/yq_border.png" />
    <img class="yq_border_img" id="img5" src="../../assets/png/yq_border.png" />

    <span id="ym_name1">疫苗接种</span>
    <span id="ym_num">{{vaccin? vaccin.total:0 }}</span>
    <span id="ym_name2">疫苗总接种率</span>
    <span id="ym_num1">{{vaccin? vaccin.allRate:0 }}%</span>

    <span id="ym_name3">3-12岁疫苗接种率</span>
    <span id="ym_num2">{{vaccin? vaccin.threeToTwelveRate:0 }}%</span>
    <span id="ym_name4">12-18岁疫苗接种率</span>
    <span id="ym_num3">{{ vaccin?vaccin.TwelveToEighteenRate:0 }}%</span>
    <span id="ym_name5">18岁以上疫苗接种率</span>
    <span id="ym_num4">{{vaccin? vaccin.eighteenRate:0 }}%</span>
  </div>
</template>
    
<script>
export default {
  props:['vaccin'],
  name: "VaccinationPage",
  components: {},
  data() {
    return {
      // vaccin: {
      //   // -- 疫苗接种情况
      //   allRate: 0, //总接种率
      //   total: 0, //疫苗接种总数
      //   eighteenRate: 0, //18岁以上接种率
      //   threeToTwelveRate: 0, //3-12岁以上接种率
      //   TwelveToEighteenRate: 0, //12-18岁以上接种率
      // },
    };
  },
  mounted() {
   
  },
  methods: {},
};
</script>
  
    <style scoped>
#ym_num {
  position: absolute;
  left: 21%;
  top: 28%;
  font-size: 28px;
  color: rgb(251, 212, 21);
  font-weight: bold;
}
#ym_name1 {
  position: absolute;
  left: 26%;
  top: 16%;
  font-size: 12px;
  color: rgb(4, 185, 202);
  font-weight: bold;
}

#ym_name2 {
  position: absolute;
  left: 62%;
  top: 16%;
  font-size: 12px;
  color: rgb(4, 185, 202);
  font-weight: bold;
}
#ym_name3 {
  position: absolute;
  font-weight: bold;
  top: 70%;
  left: 12%;
  font-size: 12px;
}
#ym_name4 {
  position: absolute;
  font-weight: bold;
  top: 70%;
  left: 39%;
  font-size: 12px;
}
#ym_name5 {
  position: absolute;
  font-weight: bold;
  top: 70%;
  left: 67%;
  font-size: 12px;
}
#ym_num1 {
  position: absolute;
  left: 60%;
  top: 28%;
  font-size: 28px;
  color: rgb(251, 212, 21);
  font-weight: bold;
}
#ym_num2 {
  position: absolute;
  left: 16%;
  top: 78%;
  font-size: 20px;
  font-weight: bold;
}
#ym_num3 {
  position: absolute;
  left: 43%;
  top: 78%;
  font-size: 20px;
  font-weight: bold;
}
#ym_num4 {
  position: absolute;
  left: 72%;
  top: 78%;
  font-size: 20px;
  font-weight: bold;
}
#img1 {
  left: 15%;
  top: 6%;
}
#img2 {
  left: 55%;
  top: 6%;
}
#img3 {
  left: 5%;
  bottom: -10%;
}
#img4 {
  left: 33%;
  bottom: -10%;
}
#img5 {
  right: 4%;
  bottom: -10%;
}
.yq_back_img {
  position: absolute;
  width: 30%;
  height: 50%;
}
.yq_border_img {
  position: absolute;
  width: 35%;
  height: 60%;
}
#vaccinationPage {
  position: absolute;
  bottom: 1%;
  width: 100%;
  height: 18%;
  /* background-color: rgb(0, 0, 255,0.1); */
}
</style>