<template>
  <NavBar @focus="showTag = false" @blur="showTag = true" />
  <BasicInfo :visible="showTag" />
  <div class="reset">
    <n-icon class="icon" size=".14rem">
      <svg-icon :data="reset" original />
    </n-icon>
  </div>
  <InforModal class="info-modal" />
  <ListModal class="list-modal" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
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'
import reset from '@images/reset.svg'
const showTag = ref(true)
</script>

<style lang="stylus">
@import '../components/MyComponent/main.styl'
.reset
  height .3rem
  width @height
  border-radius .02rem
  position fixed
  top .48rem
  left 3.1rem
  background $white-bg
  box-sizing border-box
  $center()
  cursor pointer
  &:hover
    .icon
      color $red
.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>
