You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
962 B
36 lines
962 B
<!--头部组件-->
|
|
<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>
|