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