2024年5月8日

今天学习了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>