今天学习了web页面顶部栏的使用和连接的使用和跳转，对web页面进行了美化
<template><div class="common-layout"><el-container><el-header class="el-header"><img src="../photos/logo.png" width="200" style="display: inline-block; vertical-align: middle;"> <el-link class="text" type="info" id="home">首页</el-link><el-link class="text" type="info" id="roles">角色</el-link><el-link class="text" type="info" id="story">故事</el-link><el-link class="text" type="info" id="other">其他</el-link></el-header><router-view/></el-container></div>
</template>
<script setup>const links = document.querySelectorAll('.text');// 添加点击事件监听器
links.forEach(link => {link.addEventListener('click', () => {// 移除所有链接的选中状态links.forEach(l => l.classList.remove('selected'));// 添加选中状态到当前点击的链接link.classList.add('selected');// 根据所选链接跳转到相应的页面switch (link.id) {case 'home':router.push('/')break;case 'users':router.push('/users')break;case 'stores':router.push('/stores')break;case 'others':router.push('/others')break;default:break;}});
});
</script>
<style scoped>.text {font-size: 24px; /* 放大字体大小 */text-align: left; /* 文本居中 */}.el-header {background-color: rgba(0, 0, 0); /* 设置背景色为黑色并半透明 */color: white; /* 设置文字颜色为白色 */display: flex; /* 使用 flexbox 布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */position: fixed; /* 固定定位 */top: 0; /* 距离顶部0 */left: 0; /* 距离左侧0 */right: 0; /* 距离右侧0 */width: 100%; /* 宽度全覆盖 */z-index: 999; /* 设置层级 */justify-content: space-around; }
</style>
