<template>
  <div class="logo" :class="['logo' + (poStore.logo % 5)]" @click="poStore.logo++"></div>
</template>
<script setup>
import { usePoStore } from '@/store'
const poStore = usePoStore()
</script>
<style lang="scss" scoped>
.logo {
  background-repeat: no-repeat;
  height: 100%;
  width: 30em;
  background-size: auto 7.2em;
  background-position: 0 1em;


  &.logo0 {
    background-image: url(@/assets/imgs/logo1.png);
  }

  &.logo1 {
    background-image: url(@/assets/imgs/logo2.png);
  }

  &.logo2 {
    background-image: url(@/assets/imgs/logo1.png), url(@/assets/imgs/logo2.png);
    background-repeat: no-repeat, no-repeat;
    background-size: auto 4.6em, auto 4.6em;
    background-position: 1.5em bottom, 0 top;
  }

  &.logo3 {
    background-image: url(@/assets/imgs/logo1.png), url(@/assets/imgs/logo2.png);
    background-repeat: no-repeat, no-repeat;
    background-size: auto 4.6em, auto 4.6em;
    background-position: 1.5em top, 0 bottom;
  }
  

  &.logo4 {
    background-image: none;
  }
}
</style>