Knowledge_Test_Vue/src/components/Layout/Header.vue

<!--头部组件-->
<template>
  <!-- 头部容器 -->
  <div class="header">
    <!-- 系统Logo -->
    <div class="logo">Homily Link</div>
  </div>
</template>

<script>
export default {
  // 组件名称：Header（由于是单个单词，已禁用多单词命名规则）
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Header'
}
</script>

<style scoped>
/* 头部样式 */
.header {
  height: 60px;                /* 高度60px */
  background-color: white;     /* 白色背景 */
  display: flex;               /* 使用flex布局 */
  align-items: center;         /* 垂直居中对齐 */
  justify-content: flex-start; /* 内容靠左对齐 */
  padding-left: 20px;          /* 左内边距20px */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加底部阴影效果 */
}

/* Logo样式 */
.logo {
  color: #e74c3c;     /* 红色字体 */
  font-weight: bold;  /* 粗体 */
  font-size: 18px;    /* 字体大小18px */
}
</style>