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

<template>
    <div id="employmentSituation">
        <img class="ring_background_png" src="../../assets/png/ring_background.png"></img>
        <div id="chart_1">
          <ThreeDCharts></ThreeDCharts>
        </div>
      
      
    </div>
</template>
    
<script>
     import ThreeDCharts from "../Utils/ThreeDCharts.vue"
    export default {
      name: 'EmploymentSituation',
      components:{
        ThreeDCharts
      },
      data () {
        return {
          msg: '',
        }
      },
      mounted(){
  
      },
      methods:{
        
      
      }
    }
</script>
    
    
 <style scoped>
   #chart_1{
     position: absolute;
     width: 100%;
     height: 100%;
     top: -70%;
    left: -26%
   }

   @media screen and (max-height: 1000px) {
    #chart_1{
     position: absolute;
     width: 100%;
     height: 100%;
      top: -80%;
      left: -26%
   }
   }

     #employmentSituation{
        position: absolute;
        width: 100%;
        height: 20%;
        top:28%;
        /* background-color: rgb(0, 0, 255,0.5); */
     }
     .ring_background_png{
          position: absolute; 
         width: 55%;
         left: 30%;
         top:10%
     }
</style>