tk-mini-program-PC/src/components/Appaside.vue

<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>