<template>
    <div class="class-header">
        <div class="title title_border">
            <slot></slot>
        </div>
        <div class="title title_border"style="margin-left:-200px;">
            <slot name="TeacherName"></slot>
        </div>
        <div class="title" @click="$router.go(-1)" style="padding-right: 4.1vw;cursor: pointer;">
            <el-icon style="vertical-align: bottom; margin-right: 6px;"><ArrowLeftBold/></el-icon>
            返回
        </div>
    </div>
</template>

<script setup lang="ts">
import { ArrowLeftBold } from '@element-plus/icons-vue'
</script>

<script lang="ts">
export default {
  name: "classHeader"
}
</script>

<style scoped>
.class-header {
    width: '100%';
    height: 7.5vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 0.5vw;
    margin-top: -15px;
}
.title{
    /* 字体设置 一级标题 */
    color:#70BBDB;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    height:28px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.title_border{
    border-bottom: 5px solid #4FA3C5;
}
</style>