修改

src/App.vue

@@ -60,7 +60,7 @@ nav a {
   color: #515767;
 }
 
-nav a.router-link-active {
+nav a.route-active {
   color: #1e80ff;
 }
 

src/components/AppSidebar.vue

@@ -1,29 +1,74 @@
 <template>
     <nav class="side-navigator-wrap">
         <div class="nav-item-wrap">
-            <div class="nav-item-content">
-                <router-link to="/home/employeeDynamics">
-                    <i class="el-icon-s-home"></i>员工动态
+            <div class="nav-item-content" :class="{ active: employeeDynamics }">
+                <router-link to="/home/employeeDynamics" class="nav-item">
+                    <i class="el-icon-s-home"></i>
+                    <span class="nav-item-text">首页</span>
                 </router-link>
             </div>
         </div>
 
         <div class="nav-item-wrap">
-            <div class="nav-item-content">
-                <router-link to="/home/pointsMall">
-                        <i class="el-icon-s-home"></i>积分商城
+            <div class="nav-item-content" :class="{ active: pointsMall }">
+                <router-link to="/home/pointsMall" class="nav-item">
+                        <i class="el-icon-s-home"></i>
+                        <span class="nav-item-text">积分商城</span>
                     </router-link>
             </div>
         </div>
         <div class="nav-item-wrap">
-            <div class="nav-item-content">
-                <router-link to="/home/festiveEvents">
-                        <i class="el-icon-s-home"></i>节日活动
+            <div class="nav-item-content" :class="{ active: festiveEvents }">
+                <router-link to="/home/festiveEvents" class="nav-item">
+                        <i class="el-icon-s-home"></i>
+                        <span class="nav-item-text">福利领取</span>
                     </router-link>
             </div>
         </div>
+        
     </nav>
 </template>
+<script lang="ts">
+export default {
+  name: 'AppSidebar',
+  data() {
+    return {
+        employeeDynamics: false,
+        pointsMall: false,
+        festiveEvents: false,
+    };
+  },
+  methods:{
+    getRoute(){
+        var path = this.$route.path;
+        
+        if(path.indexOf("pointsMall") != -1){
+            this.employeeDynamics = false;
+            this.pointsMall = true;
+            this.festiveEvents = false;
+        }
+        
+        if(path.indexOf("employeeDynamics") != -1){
+            this.employeeDynamics = true;
+            this.pointsMall = false;
+            this.festiveEvents = false;
+        }
+        
+        if(path.indexOf("festiveEvents") != -1){
+            this.employeeDynamics = false;
+            this.pointsMall = false;
+            this.festiveEvents = true;
+        }
+    }
+  },
+  watch: {
+    $route:'getRoute'
+  },
+  created() {
+    this.getRoute();
+  },
+}
+</script>
 <style scoped>
 li a {
     font-weight: bold;
@@ -33,4 +78,44 @@ li a {
 li a.router-link-active {
     color: #1e80ff;
 }
+.side-navigator-wrap{
+    min-width: 180px;
+    box-sizing: border-box;
+    padding: 8px;
+    font-size: 16px;
+    color: #515767;
+}
+.nav-item-wrap{
+    display: flex;
+    flex-direction: column;
+}
+.nav-item-content{
+    line-height: 24px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+.active{
+    background-color: #eaf2ff;
+    color: #1e80ff;
+    font-weight: 500
+}
+.nav-item{
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 10px 17px;
+}
+.nav-item i{
+    vertical-align: middle;
+    margin-right: 12px;
+}
+.nav-item-text{
+    vertical-align: middle;
+    position: relative;
+}
 </style>

src/router/index.js

@@ -22,6 +22,10 @@ const routes = [
         path: '/home/pointsMall',
         component: () => import('@/views/HomeView/PointsMall.vue')
       },
+      {
+        path: '/home/pointsMall/redeem/:id',
+        component: () => import('@/views/HomeView/RedeemView.vue')
+      },
       {
         path: '/home/festiveEvents',
         component: () => import('@/views/HomeView/FestiveEvents.vue')
@@ -39,6 +43,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
+  linkActiveClass:'route-active',
   routes,
 })
 

src/views/HomeView.vue

@@ -36,8 +36,8 @@ export default {
     height: -moz-fit-content;
     height: fit-content;
     border-radius: 4px;
-    background-color: var(--juejin-font-white);
+    background-color: #fff;
     max-height: calc(100vh - 101px);
-    overflow-x: hidden;
+    /* overflow-x: hidden; */
 }
 </style>

src/views/HomeView/EmployeeDynamics copy 2.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="EmployeeDynamics">
-        员工动态
-    </div>
-</template>

src/views/HomeView/EmployeeDynamics copy 3.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="EmployeeDynamics">
-        员工动态
-    </div>
-</template>

src/views/HomeView/EmployeeDynamics copy 4.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="EmployeeDynamics">
-        员工动态
-    </div>
-</template>

src/views/HomeView/EmployeeDynamics copy 5.vue

@@ -1,5 +0,0 @@
-<template>
-    <div class="EmployeeDynamics">
-        员工动态
-    </div>
-</template>