<template>
  <div class="full flex direction-column">
    <div class="flex items-center justify-between p-base fill-blank bootstrap-layout-header">
      <div class="drag flex items-center justify-center dou-yu bootstrap-layout-logo">
        <span>CET</span>
        <span> 电子阅卷</span>
      </div>
      <div class="grid fill-light-gray pointer close-icon" @click="closeApp">
        <el-icon><close /></el-icon>
      </div>
    </div>
    <div class="flex-1 bootstrap-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts" name="BootstrapLayout">
import { ElIcon } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import { closeApp } from '@/utils/shared'
</script>

<style scoped lang="scss">
.bootstrap-layout-header {
  height: 70px;
  .bootstrap-layout-logo {
    font-size: $MainLayoutHeaderLogoFontSize;
    color: $MainLayoutHeaderLogoFontColor;
  }
  .close-icon {
    width: 32px;
    height: 32px;
    font-size: 1.4em;
    border-radius: 50%;
    place-items: center;
    color: #666;
    transition: all 0.3s ease-in-out;
    &:hover {
      background-color: #dfdfdf;
      color: #444;
    }
  }
}
.bootstrap-content {
  background: url(@/assets/images/background.png) no-repeat center center / cover;
}
</style>
