<template>
  <div class="container">
    <div class="item" @click="handleJump('/leader/index')">
      <i class="icon1" />
      <span>指挥端</span>
    </div>
    <div class="item2" @click="handleJump('/worker')">
      <i class="icon2" />
      <span>工作人员端</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";

const router = useRouter();

const handleJump = (path: string) => {
  router.push({ path: path });
}

</script>

<style lang="scss" scoped>
.container {
  padding: 39px 8px 20px;
  .item {
    background: url("@/assets/images/staffBox.png") no-repeat;
  }
  .item2 {
    margin-top: 20px;
    background: url("@/assets/images/leaderBox.png") no-repeat;
  }
  .item,
  .item2 {
    width: 100%;
    height: 152px;
    background-size: 100% 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #414F64;
  }
  .icon1 {
    width: 100px;
    height: 100px;
    background: url(@/assets/images/staffIcon.png) no-repeat;
    background-size: 100% 100%;
  }
  .icon2 {
    width: 100px;
    height: 100px;
    background: url(@/assets/images/leaderIcon.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
