<template>
  <el-tooltip class="lock-entry" effect="light" content="锁屏" placement="bottom">
    <div class="lock-box flex direction-column items-center" @click="lockOpen">
      <!-- <img src="../../assets/images/lock_screen.png" class="lock" title="锁屏" /> -->
      <svg-icon name="suo"></svg-icon>
      <p class="tip">锁屏</p>
    </div>
  </el-tooltip>
</template>
<script lang="ts" setup name="LockEntry">
// import { ElTooltip } from 'element-plus'
import SvgIcon from '../common/SvgIcon.vue'
import useMainStore from '@/store/main'
const mainStore = useMainStore()
const lockOpen = () => {
  mainStore.setLockScreen(true)
}
</script>
<style lang="scss" scoped>
.lock-box {
  cursor: pointer;
  // justify-content: flex-end;
  font-size: 18px;
  text-align: center;
  &:hover {
    opacity: 0.7;
  }
  .tip {
    font-size: 12px;
    margin-top: 4px;
  }
  .lock {
    height: 22px;
  }
}
</style>
