<template>
  <NavBar @focus="showTag = false" @blur="showTag = true" />
  <BasicInfo :visible="showTag" />
  <div v-if="showReset" class="reset">
    <n-icon class="icon" size=".14rem">
      <svg-icon :data="reset" original />
    </n-icon>
  </div>
  <!-- <InforModal class="fix1" /> -->
  <ActivityDetail class="fix1" />
  <ListModal class="fix2" pagination />
</template>

<script lang="ts" setup>
import { computed, 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 ActivityDetail from './components/activity-detail.vue'
import reset from '@images/reset.svg'
import store from '@/store'

const showTag = ref(true)
const showReset = computed(() => store.state.showBasicInfo)
</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
.fix1
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
.fix2
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  margin-left 4rem

.n-form-item-label__asterisk
  color $red !important
.n-input .n-input-wrapper
  background #F9FAFB
  border-radius inherit
.n-base-selection .n-base-selection-label
  background #F9FAFB
</style>
