mirror of https://gitee.com/godoos/godoos.git
16 changed files with 924 additions and 526 deletions
@ -1,70 +1,116 @@ |
|||
<script setup> |
|||
import {ref} from "vue"; |
|||
import { useChatStore } from "@/stores/chat"; |
|||
import { Setting as SettingIcon } from "@element-plus/icons-vue"; |
|||
const store = useChatStore() |
|||
const getOnline = () => { |
|||
store.getOnlineUsers() |
|||
store.setCurrentNavId(1) |
|||
} |
|||
|
|||
const store = useChatStore(); |
|||
</script> |
|||
|
|||
<template> |
|||
<el-row> |
|||
<el-avatar shape="square" :size="40" class="userAvatar" :src="store.userInfo.avatar"/> |
|||
<el-avatar |
|||
shape="square" |
|||
:size="40" |
|||
class="userAvatar" |
|||
:src="store.userInfo.avatar" |
|||
/> |
|||
</el-row> |
|||
<el-row @click="store.setCurrentNavId(0)"> |
|||
<el-icon v-if="store.currentNavId === 0" class="menu-icon-on"> |
|||
<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"> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<ChatRound /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
<el-row @click="getOnline"> |
|||
<el-icon v-if="store.currentNavId === 1" class="menu-icon-on"> |
|||
<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"> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<User /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
<el-row @click="store.setCurrentNavId(2)"> |
|||
<el-icon v-if="store.currentNavId === 2" class="menu-icon-on"> |
|||
<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"> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<Monitor /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
<el-row @click="store.setCurrentNavId(5)"> |
|||
<el-icon v-if="store.currentNavId === 5" class="menu-icon-on"> |
|||
<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"> |
|||
<el-icon |
|||
v-else |
|||
class="menu-icon" |
|||
> |
|||
<SettingIcon /> |
|||
</el-icon> |
|||
</div> |
|||
</el-row> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.userAvatar { |
|||
margin: 30px auto 10px; |
|||
-webkit-app-region: no-drag |
|||
-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%; |
|||
/* background-color: #bae7ff; */ |
|||
transition: all 0.5s; |
|||
} |
|||
.menu-icon-box:hover { |
|||
background-color: #d9d9d9; |
|||
} |
|||
|
|||
.menu-icon { |
|||
margin: 20px auto; |
|||
margin: 0px auto; |
|||
font-size: 25px; |
|||
color: #8F8F8F; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.menu-icon-on { |
|||
margin: 20px auto; |
|||
margin: 0px auto; |
|||
font-size: 25px; |
|||
color: #0078d4; |
|||
color: #1890ff; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
</style> |
Loading…
Reference in new issue