<template>
    <div class="header-box max-w pos-r">
         <div class="header-animal pos-a"></div>
         <div class="flex jc-sb">
            <div class="flex ml-2 max-h ai-c ta-l">
              <img class="imgbox" src="/images/sitelogo.png" />
              <span class="ml-1 fz-20 fc-w">智慧社区云物联</span>
            </div>
            <div class="mr-2 fz-16 fc-w">
              <span class="mr-2">{{userName}}</span>
              <span class="cursor" @click="backLogin">退出登录</span>
            </div>
         </div>
         
    </div>
</template>
<script>
import {defineComponent, reactive, onMounted, toRefs} from "vue"; 
import {useRouter} from 'vue-router'   
export default defineComponent({
    name: 'Index',
    components: {
        // homeHeader
    },
    setup() {
        let data = reactive({
            userName: localStorage.getItem('userName')
        })
        const router = useRouter()
        onMounted(() => {
            
        })
        let methods = {
            backLogin(){
              localStorage.clear("Token")
              router.push({
                path:'/login',
                query:{}
              })
            }
           
        };
        return {
            ...methods,
            ...toRefs(data),
        };
    },
    });
</script>

<style scoped>
.header-box{
    height: 70px;
    line-height: 70px;
    background: #2f6bee;
    border-bottom: 1px solid #f6f6f6;
}
.header-animal{
    width: 70%;
    height: 70px;
    top: 0;
    left: 0;
    background: url('/images/animalbg.png') no-repeat;
    animation: spa-header-bg-snow-anim 1.75s steps(1) infinite;
}
.imgbox{
    width: 50px;
    height: 50px;
}



@keyframes spa-header-bg-snow-anim {
  5% {
    background-position: 0 -75px;
  }

  10% {
    background-position: 0 -150px;
  }

  15% {
    background-position: 0 -225px;
  }

  20% {
    background-position: 0 -300px;
  }

  25% {
    background-position: 0 -375px;
  }

  30% {
    background-position: 0 -450px;
  }

  35% {
    background-position: 0 -525px;
  }

  40% {
    background-position: 0 -600px;
  }

  45% {
    background-position: 0 -675px;
  }

  50% {
    background-position: 0 -750px;
  }

  55% {
    background-position: 0 -825px;
  }

  60% {
    background-position: 0 -900px;
  }

  65% {
    background-position: 0 -975px;
  }

  70% {
    background-position: 0 -1050px;
  }

  75% {
    background-position: 0 -1125px;
  }

  80% {
    background-position: 0 -1200px;
  }

  85% {
    background-position: 0 -1275px;
  }

  90% {
    background-position: 0 -1350px;
  }

  95% {
    background-position: 0 -1425px;
  }

  100% {
    background-position: 0 -1500px;
  }

}
</style>