jiangxiSZ/shuzhixiangzheng/src/components/OtherChilds/LeftPage.vue

<template>
  <div id="leftPage">
    <img id="dazhong_img" src="../../assets/png/dazhong.png" />
    <div id="viewPage_f">
      <ViewPage :szdata="dataAll.index"></ViewPage>
    </div>
    <img id="person_status_img" src="../../assets/png/2.png" />
    <PepoleStatus></PepoleStatus>
    <img id="dizhizaihai_img" src="../../assets/png/dizhizaihai.png" v-if="showDZ"/>
    <Dezhizhaihai :data='dataAll.damage' v-if="showDZ"></Dezhizhaihai>
    <img id="populationStructure_img" src="../../assets/png/renkoujieguo.png" v-if="!showDZ"/>
    <PopulationStructure v-if="!showDZ"></PopulationStructure>
  </div>
</template>
  
  <script>
import ViewPage from "../MainPageChild/ViewPage.vue";
import PepoleStatus from "../OtherChilds/PepoleStatus.vue";
import Dezhizhaihai from "./Dezhizhaihai.vue";
import PopulationStructure from "./PopulationStructure.vue";
export default {
  props: ["dataAll"],
  name: "",
  components: {
    ViewPage,
    PepoleStatus,
    Dezhizhaihai,
    PopulationStructure
  },
  data() {
    return {
        showDZ:true
    };
  },
  mounted() {
    console.log('拿到数据',this.dataAll);
  },
  methods: {},
};
</script>
  
  
  <style scoped>
#viewPage_f {
  position: absolute;
  width: 100%;
  height: 100%;
  left: -10%;
}

#person_status_img {
  position: absolute;
  width: 150px;
  top: 30%;
}
#leftPage {
  position: absolute;
  left: 2%;
  top: 7%;
  z-index: 2;
  height: 93%;
  width: 23%;
  background-color: rgba(4, 11, 30, 0.6);
}
#dazhong_img {
  position: absolute;
  width: 200px;
  top: -1%;
}

#dizhizaihai_img {
  position: absolute;
  width: 200px;
  top: 70%;
}
#populationStructure_img{
    position: absolute;
  width: 150px;
  top: 70%;
}
</style>