<template>
  <NavBar @focus="showTag = false" @blur="showTag = true" />
  <BasicInfo :visible="showTag" />
  <div class="reset">
    <n-icon class="icon" size=".14rem">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 6.66667C9.05333 6.66667 6.66667 9.05333 6.66667 12C6.66667 14.9467 9.05333 17.3333 12 17.3333C14.9467 17.3333 17.3333 14.9467 17.3333 12C17.3333 9.05333 14.9467 6.66667 12 6.66667ZM2.66667 16H0V21.3333C0 22.8 1.2 24 2.66667 24H8V21.3333H2.66667V16ZM2.66667 2.66667H8V0H2.66667C1.2 0 0 1.2 0 2.66667V8H2.66667V2.66667ZM21.3333 0H16V2.66667H21.3333V8H24V2.66667C24 1.2 22.8 0 21.3333 0ZM21.3333 21.3333H16V24H21.3333C22.8 24 24 22.8 24 21.3333V16H21.3333V21.3333Z"
          fill="currentColor"
        />
      </svg>
    </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'
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>
