practice_VUE/vueHomilyLink/src/components/ClubNav.vue

<script setup>

</script>

<template>
    <div class="club-nav">
        <div class="container">
            <RouterLink to="/bogu" class="nav-item">博股俱乐部</RouterLink>
            <RouterLink to="/mumin" class="nav-item">牧民俱乐部</RouterLink>
            <RouterLink to="/shenqiang" class="nav-item">神枪手俱乐部</RouterLink>
        </div>
    </div>
</template>

<style scoped>
.club-nav {
  height: 100vh; 
  width: 15%; 
  position: fixed;
  left: 30px;
  top: 30px;
  background-color: #fffffd; 
  overflow-x: hidden; 
  padding-top: 20px; 
  transition: 0.5s; 
}


.container {
  padding: 0;
  margin: 0;
  list-style-type: none;
}


.nav-item {
  padding: 10px 15px;
  text-decoration: none;
  font-size: 18px;
  color: rgb(19, 18, 18);
  display: block;
  transition: 0.3s;
}


.nav-item:hover {
  background-color: #407fdf; 
  color: #f1f1f1; 
}

.nav-item.router-link-active {
  background-color: #407fdf; 
  color: white; 
  border-radius: 5%;
}
</style>