<template>
  <div class="m-smgz">
    <div class="waterfall">
      <img src="@/assets/imgs/topic/smgz/waterfall.png" alt="" />
    </div>
    <div class="gzmap">
      <img src="@/assets/imgs/topic/smgz/map.png" alt="" />
    </div>
    <div class="animal">
      <img src="@/assets/imgs/topic/smgz/animal.png" alt="" />
    </div>
    <div class="stone">
      <img src="@/assets/imgs/topic/smgz/stone.png" alt="" />
    </div>
    <div class="fish">
      <img src="@/assets/imgs/topic/smgz/fish.png" alt="" />
    </div>
    <div class="gzregion">
      <img src="@/assets/imgs/topic/smgz/region.png" alt="" />
    </div>
    <div class="archaeology">
      <img src="@/assets/imgs/topic/smgz/archaeology.png" alt="" />
    </div>
    <div class="evolution">
      <img src="@/assets/imgs/topic/smgz/evolution.png" alt="" />
    </div>
    <div class="title-first">
      <img src="@/assets/imgs/topic/smgz/smgz.png" alt="" />
    </div>
    <div class="title-last">
        <img src="@/assets/imgs/topic/smgz/gswwg.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.m-smgz {
  height: 100%;
  height: 100%;
  position: relative;
  > div {
    position: absolute;
    > img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .stone {
    height: 55px;
    width: 740px;
    bottom: 0;
    right: 0;
  }
  .animal {
    width: 1389px;
    height: 412px;
    bottom: 0;
    left: 0;
  }
  .archaeology {
    bottom: 55px;
    right: 0;
    width: 1336px;
    height: 340px;
  }
  .waterfall {
    top: 0;
    left: 0;
    width: 787px;
    height: 100%;
  }
  .gzmap {
    top: 0;
    right: 0;
    width: 1131px;
    height: calc(100% - 55px);
  }
  .fish {
    left: 50px;
    top: 128px;
    width: 512px;
    height: 276px;
  }
  .gzregion {
    bottom: 140px;
    right: 0;
    width: 515px;
    height: 687px;
  }
  .evolution {
    left: 530px;
    bottom: 20px;
    width: 510px;
    height: 498px;
  }
  .title-first {
    left: 400px;
    top: 263px;
    width: 359px;
    height: 126px;
  }
  .title-last {
    right: 700px;
    top: 262px;
    width: 418px;
    height: 125px;
  }
}
</style>
