优化代码

src/components/Appaside.vue

@@ -0,0 +1,173 @@
+<template>
+ <div class="app-aside">
+    <div class="logo">
+        <img class="logo-img" src="@/assets/logo.png" alt="logo"></img>
+    </div>
+    <div class="Navigation">
+
+        <div class="Navigation-card" v-for="(item, index) in NavigationModule" :key="index" @click="handleClick(item.path, item.id)" :style="{backgroundColor: item.id === activeId|| item.id === 5? '#ffffff' : '' ,boxShadow: item.id === activeId|| item.id === 5? '5px 5px 15px rgba(0, 0, 0, 0.3)' : ''}">
+                <img class="Navigation-card-icon-img" :src="item.icon" alt="">
+            <div class="Navigation-card-name">{{ item.name }}</div>
+        </div>
+        
+    </div>
+    <div class="Avatar">
+        <img class="Avatar-img" src="@/assets/logo.png" alt="logo"></img>
+    </div>
+ </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+import { setStorage , getStorage } from '@/utils/storage.js';
+const router = useRouter();
+import {
+  ref, // 响应式基础
+  watch, // 侦听器
+  onMounted, // 组件挂载完成后执行
+  onBeforeMount, // 组件挂载前执行
+  onUpdated, // 组件更新后执行
+  onUnmounted, // 组件销毁前执行
+} from "vue";
+
+const NavigationModule = [
+    {   
+        name: 'PK',
+        id: 1,
+        path: '/nav/PK',
+        icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Pk.png'
+    },
+    {
+        name: '站内信',
+        id: 2,
+        path: '/nav/Forum',
+        icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Forum.png'
+    },
+    {
+        name: '消息',
+        id: 3,
+        path: '/nav/Message',
+        icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Message.png'
+    },
+    {
+        name: '我的',
+        id: 4,
+        path: '/nav/Mine',
+        icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Mine.png'
+    },
+    {
+        id: 5,
+        icon: 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/push.png'
+    }
+
+]
+const activeId = ref(1);
+function handleClick(path, id) {
+    
+    if (id === 5) {
+        
+    }else{
+        activeId.value = id;
+        router.push(path);
+    }
+}
+const refname = ref('');
+
+watch(refname, async (newQuestion, oldQuestion) => {
+  // 变化后执行
+});
+onMounted(() => {
+  // 组件挂载完成后执行
+  try{
+        activeId.value = getStorage('activeId');
+0    }catch(e){
+        activeId.value = 1
+    }
+});
+onBeforeMount(()=>{
+    // 组件挂载前执行
+});
+onUpdated(() => {
+  // 组件更新后执行
+});
+onUnmounted(() => {
+  // 组件销毁前执行
+});
+</script>
+<style scoped lang="less">
+.app-aside{
+    width: 100%;
+    height: 95%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content:space-between;
+    -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.logo{
+   width: 60px;
+   height: 60px;
+   margin-top: 20px;
+   border-radius: 10px;
+}
+.logo-img{
+    width: 60px;
+    height: 60px;
+    border-radius: 10px;
+}
+.Avatar{
+    width: 60px;
+    height: 60px;
+    border-radius: 50px;
+}
+.Avatar-img{
+    width: 60px;
+    height: 60px;
+    border-radius: 50px;
+    transition: all 0.3s ease;
+}
+.Avatar-img:hover{
+    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(1.1);
+    opacity: 0.8;
+}
+.Navigation{
+    width: 100%;
+    height: 75%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.Navigation-card{
+    width: 60px;
+    height: 60px;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 30px;
+    transition: all 0.3s ease;
+}
+.Navigation-card-icon{
+    width: 20px;
+    height: 20px;
+}
+.Navigation-card-icon-img{
+    width: 20px;
+    height: 20px;
+}
+.Navigation-card-name{
+    font-size: 12px;
+    color:@Prompt-text-color;
+    margin-top: 5px;
+}
+.Navigation-card:hover{
+    transform: scale(1.1);
+    opacity: 0.8;
+    background-color: #ffffff;
+}
+</style>