<template>
  <!-- 农业和林业人员进入流调系统是在顶部显示的标记图块 -->
  <div class="flag-box" :class="[`box${deptType}`]" v-if="deptType === '2' || deptType === '3'">
    <img src="./imgs/nongye-icon.png" alt="" v-if="deptType === '2'" />
    <img src="./imgs/linye-icon.png" alt="" v-else />
    {{ deptType === '2' ? '农' : '林' }}业流调
  </div>
</template>
<script setup>
const deptType = JSON.parse(sessionStorage.getItem('user')).userInfo.deptList[0].deptType
</script>
<style lang="less" scoped>
.flag-box {
  width: 160px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #666;
  box-shadow: 0 0 6px var(--el-box-shadow-dark);
  margin-right: 16px;
  &.box2 {
    background: url('imgs/nongye-img.png');
  }
  &.box3 {
    background: url('imgs/linye-img.png');
  }
  img {
    margin-right: 4px;
    margin-left: 12px;
    vertical-align: middle;
  }
}
</style>
