mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
IM
This commit is contained in:
程
368
im/src/views/layout/MainLayout.vue
Normal file
368
im/src/views/layout/MainLayout.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<div class="body-bag" :class="themeBagImg">
|
||||
<el-container class="main-layout" :class="{ 'full-mode': themeMode }">
|
||||
<!-- <el-aside width="70px" class="side-edge">
|
||||
<el-container class="full-height">
|
||||
<el-header height="118px" class="logo-header">
|
||||
<div class="user-login" v-popover:usercard>
|
||||
<div class="user-box">
|
||||
<face :text="face"></face>
|
||||
</div>
|
||||
</div>
|
||||
<p class="user-status">
|
||||
<span v-if="name">{{ name }}</span>
|
||||
<span v-else>用户名称</span>
|
||||
</p>
|
||||
</el-header>
|
||||
<el-main class="sidebar-menu">
|
||||
<el-tooltip content="我的消息" placement="right" :visible-arrow="false">
|
||||
<router-link to="/message">
|
||||
<div class="menu-items" :class="{ active: idx == 0 }">
|
||||
<i class="el-icon-chat-line-round" />
|
||||
<span v-show="unreadNum" class="notify"></span>
|
||||
</div>
|
||||
</router-link>
|
||||
</el-tooltip>
|
||||
</el-main>
|
||||
<el-footer height="60px" class="fixed-sidebar">
|
||||
<div class="menu-items" @click="logout">
|
||||
<span class="logout">退出</span>
|
||||
</div>
|
||||
</el-footer>
|
||||
</el-container>
|
||||
</el-aside> -->
|
||||
|
||||
<el-main class="no-padding" style="background: white">
|
||||
<slot name="container"></slot>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<!-- 语音消息提示 -->
|
||||
<audio id="audio" preload="auto">
|
||||
<source src="~@/assets/image/1701.mp3" type="audio/mp3" />
|
||||
</audio>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Face from '../../components/face'
|
||||
import { mapState } from "vuex";
|
||||
import { ServeFindFriendApplyNum } from "@/api/contacts";
|
||||
|
||||
export default {
|
||||
components: { Face },
|
||||
name: "MainLayout",
|
||||
props: {
|
||||
idx: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
face: (state) => state.user.face,
|
||||
name: (state) => state.user.name,
|
||||
id: (state) => state.user.id,
|
||||
defaultAvatar: (state) => state.defaultAvatar,
|
||||
socketStatus: (state) => state.socketStatus,
|
||||
unreadNum: (state) => state.notify.unreadNum,
|
||||
applyNum: (state) => state.notify.applyNum,
|
||||
notifyCueTone: (state) => state.settings.notifyCueTone,
|
||||
themeMode: (state) => state.settings.themeMode,
|
||||
themeBagImg: (state) => state.settings.themeBagImg,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
unreadNum(n, o) {
|
||||
if (n > 0 && n > o && this.notifyCueTone) {
|
||||
this.play();
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.setApplyNum();
|
||||
},
|
||||
methods: {
|
||||
play() {
|
||||
document
|
||||
.querySelector("#audio")
|
||||
.play()
|
||||
.catch(() => {
|
||||
console.error("消息提示音播放异常");
|
||||
});
|
||||
},
|
||||
logout() {
|
||||
this.$store.dispatch("ACT_USER_LOGOUT");
|
||||
},
|
||||
setApplyNum() {
|
||||
// TODO 暂且return
|
||||
return;
|
||||
ServeFindFriendApplyNum().then((res) => {
|
||||
if (res.code == 200 && res.data.unread > 0) {
|
||||
this.$store.commit("INCR_APPLY_NUM");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" >
|
||||
.main-layout {
|
||||
position: fixed;
|
||||
width: 75%;
|
||||
height: 80%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
transition: ease 0.5s;
|
||||
border-radius: 5px;
|
||||
|
||||
&.full-mode {
|
||||
width: 70%;
|
||||
height: 85%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.side-edge {
|
||||
display: block;
|
||||
user-select: none;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #ededed;
|
||||
|
||||
.logo-header {
|
||||
padding: 0;
|
||||
|
||||
.user-status {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
color: #ccc9c9;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
|
||||
.online {
|
||||
color: #0d710d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
width: 60px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-items {
|
||||
cursor: pointer;
|
||||
color: #706d6d;
|
||||
position: relative;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
margin: 6px auto 0;
|
||||
line-height: 45px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
.notify {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: #ff1e1e;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 9px;
|
||||
animation: notifymove 3s infinite;
|
||||
animation-direction: alternate;
|
||||
-webkit-animation: notifymove 3s infinite;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #416641 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-sidebar {
|
||||
padding: 0;
|
||||
|
||||
.menu-items {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
padding: 10px 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 0 0 #ccc9c9;
|
||||
text-align: center;
|
||||
color: #afabab;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.logout {
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
color: #9e9e9e;
|
||||
transition: ease 0.5;
|
||||
|
||||
&:hover {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 主题背景图片 */
|
||||
.body-bag {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #121212;
|
||||
transition: ease-in 0.5s;
|
||||
|
||||
&.bag001 {
|
||||
background: url(~@/assets/image/background/001.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.bag002 {
|
||||
background: url(~@/assets/image/background/002.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.bag003 {
|
||||
background: url(~@/assets/image/background/003.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&.bag004 {
|
||||
background: url(~@/assets/image/background/005.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes notifymove {
|
||||
0% {
|
||||
background: #ff1e1e;
|
||||
}
|
||||
|
||||
25% {
|
||||
background: #2e3238;
|
||||
}
|
||||
|
||||
50% {
|
||||
background: #ff1e1e;
|
||||
}
|
||||
|
||||
75% {
|
||||
background: #2e3238;
|
||||
}
|
||||
|
||||
100% {
|
||||
background: #ff1e1e;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes notifymove {
|
||||
0% {
|
||||
background: #ff1e1e;
|
||||
}
|
||||
|
||||
25% {
|
||||
background: #2e3238;
|
||||
}
|
||||
|
||||
50% {
|
||||
background: #ff1e1e;
|
||||
}
|
||||
|
||||
75% {
|
||||
background: #2e3238;
|
||||
}
|
||||
|
||||
100% {
|
||||
background: #ff1e1e;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.main-layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// iphone
|
||||
@media screen and (max-width: 767px) {
|
||||
.side-edge {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.user-box {
|
||||
margin: 20px auto 10px auto;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
flex-shrink: 0;
|
||||
background-color: #508afe;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
user-select: none;
|
||||
transition: ease 1s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.top-mask {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(22, 25, 29, 0.6);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: white;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover .top-mask {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user