<template>
  <NavBar />
  <BasicInfo />
  <div class="reset">
    <img src="@images/reset.png" />
  </div>
  <InforModal class="info-modal" />
  <listModal class="list-modal" />
</template>

<script lang="ts" setup>
import NavBar from './components/nav-bar.vue'
import BasicInfo from './components/basic-info.vue'
import InforModal from './components/info-modal.vue'
import listModal from './components/list-modal.vue'
</script>

<style lang="stylus">
@import '../components/MyComponent/main.styl'
.reset
  height .3rem
  width @height
  border-radius .02rem
  position fixed
  top .48rem
  left 3.5rem
  background $white-bg
  box-sizing border-box
  $center()
  cursor pointer
  &:hover
    >img
      transform scale(1.2)
  >img
    width .14rem
    height @width
    transition transform .3s ease-in-out
.info-modal
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  margin auto
.list-modal
  position fixed
  top 0
  bottom 0
  left 0
  right 0
  margin auto
  margin-left 8rem
</style>
