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>
      <img class="yq_back_img" id="img2" src="../../assets/png/yq_background.png"></img>
      <img class="yq_border_img" id="img3" src="../../assets/png/yq_border.png"></img>
      <img class="yq_border_img" id="img4" src="../../assets/png/yq_border.png"></img>
      <img class="yq_border_img" id="img5" src="../../assets/png/yq_border.png"></img>

        <span id="ym_name1">疫苗接种</span>
        <span id="ym_num">10000</span>
        <span id="ym_name2">疫苗总接种率</span>
        <span id="ym_num1">90.99%</span>

        <span id="ym_name3">3-12岁疫苗接种率</span>
        <span id="ym_num2">90.34%</span>
        <span id="ym_name4">12-18岁疫苗接种率</span>
        <span id="ym_num3">99.99%</span>
        <span id="ym_name5">18岁以上疫苗接种率</span>
        <span id="ym_num4">96.06%</span>
    </div>
</template>
    
<script>
    export default {
      name: 'VaccinationPage',
      components:{
  
      },
      data () {
        return {
          msg: '',
        }
      },
      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>