<template>
  <div class="right">
    <el-icon :size="20" class="search">
      <search />
    </el-icon>
    <el-icon class="bell"><bell /></el-icon>
    <span class="line">|</span>
    <a-icon type="question-circle" />
    <i-bi:question-circle
      style="color: #a39980; font-size: 16px; vertical-align: middle"
    />
    <div class="head"></div>
    <!-- <span>{{ name }}</span> -->
  </div>
</template>

<script setup lang="ts">
// import useUserStore from '~/stores/user'

// const store = useUserStore()
// const name = store.name
// import { useModel } from '@fesjs/fes'
// import type { State } from '~/app'
import { Search, Bell } from '@element-plus/icons-vue'
// const initialState = useModel('@@initialState') as State
</script>

<style scope lang="scss">
.right {
  width: 15%;
  padding: 0 20px;
  text-align: right;
  float: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search,
  .bell {
    font-size: 20px;
    color: #929292;
  }
  .line {
    color: #929292;
  }
  .head {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: pink;
  }
}
</style>
