mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.1 KiB
115 lines
2.1 KiB
<script setup>
|
|
import { useChatStore } from "@/stores/chat";
|
|
import { Setting as SettingIcon } from "@element-plus/icons-vue";
|
|
|
|
const store = useChatStore();
|
|
</script>
|
|
|
|
<template>
|
|
<el-row>
|
|
<el-avatar
|
|
shape="square"
|
|
:size="40"
|
|
class="userAvatar"
|
|
:src="store.userInfo.avatar"
|
|
/>
|
|
</el-row>
|
|
<el-row @click="store.setCurrentNavId(0)">
|
|
<div class="menu-icon-box">
|
|
<el-icon
|
|
v-if="store.currentNavId === 0"
|
|
class="menu-icon-on"
|
|
>
|
|
<ChatLineRound />
|
|
</el-icon>
|
|
<el-icon
|
|
v-else
|
|
class="menu-icon"
|
|
>
|
|
<ChatRound />
|
|
</el-icon>
|
|
</div>
|
|
</el-row>
|
|
<el-row @click="store.setCurrentNavId(1)">
|
|
<div class="menu-icon-box">
|
|
<el-icon
|
|
v-if="store.currentNavId === 1"
|
|
class="menu-icon-on"
|
|
>
|
|
<UserFilled />
|
|
</el-icon>
|
|
<el-icon
|
|
v-else
|
|
class="menu-icon"
|
|
>
|
|
<User />
|
|
</el-icon>
|
|
</div>
|
|
</el-row>
|
|
<el-row @click="store.setCurrentNavId(2)">
|
|
<div class="menu-icon-box">
|
|
<el-icon
|
|
v-if="store.currentNavId === 2"
|
|
class="menu-icon-on"
|
|
>
|
|
<Platform />
|
|
</el-icon>
|
|
<el-icon
|
|
v-else
|
|
class="menu-icon"
|
|
>
|
|
<Monitor />
|
|
</el-icon>
|
|
</div>
|
|
</el-row>
|
|
<el-row @click="store.setCurrentNavId(5)">
|
|
<div class="menu-icon-box">
|
|
<el-icon
|
|
v-if="store.currentNavId === 5"
|
|
class="menu-icon-on"
|
|
>
|
|
<SettingIcon />
|
|
</el-icon>
|
|
<el-icon
|
|
v-else
|
|
class="menu-icon"
|
|
>
|
|
<SettingIcon />
|
|
</el-icon>
|
|
</div>
|
|
</el-row>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.userAvatar {
|
|
margin: 6px auto;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.menu-icon-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: 10px auto;
|
|
/* border-radius: 15%; */
|
|
transition: all 0.5s;
|
|
}
|
|
/* .menu-icon-box:hover {
|
|
background-color: #d9d9d9;
|
|
} */
|
|
|
|
.menu-icon {
|
|
margin: 0px auto;
|
|
font-size: 25px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menu-icon-on {
|
|
margin: 0px auto;
|
|
font-size: 25px;
|
|
color: #2A6BF2;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|