xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 聊天室前端布局

Browse Source
This commit is contained in:
陈淳
2024-04-02 18:41:41 +08:00
parent 3bfe4b6980
commit 887ea275f6
3 changed files with 95 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
Yi.Bbs.Vue3/src/layout/ChatLayout.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="chat-body" >
<RouterView />
</div>
</template>
<style scoped>
.chat-body
{
height: 100%;
/* padding: 5%; */
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
</style>

19
Yi.Bbs.Vue3/src/router/index.js
View File

@@ -3,6 +3,7 @@ import Layout from "../layout/Index.vue";
import NotFound from "../views/error/404.vue"; import NotFound from "../views/error/404.vue";
import LoginLayout from "../layout/LoginLayout.vue"; import LoginLayout from "../layout/LoginLayout.vue";
import ActivityLayout from "../layout/activity/Index.vue"; import ActivityLayout from "../layout/activity/Index.vue";
import ChatLayout from "../layout/ChatLayout.vue"
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
scrollBehavior(to, from, savedPosition) { scrollBehavior(to, from, savedPosition) {
@@ -140,6 +141,24 @@ const router = createRouter({
}, },
], ],
}, },
{
path: "/chat",
name: "chat",
component: ChatLayout,
redirect: "/chat/main",
children: [
{
name: "main",
path: "main",
component: () => import("../views/chathub/Index.vue"),
meta: {
title: "聊天室",
},
}
],
},
{ path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound }, { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
], ],
}); });

59
Yi.Bbs.Vue3/src/views/chathub/Index.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<div class="body">
<div class="left"></div>
<div class="middle">
<div class="header"></div>
<div class="user-list"></div>
</div>
<div class="right">
<div class="header"></div>
<div class="content"></div>
<div class="bottom"></div>
</div>
</div>
</template>
<style scoped lang="scss">
.body {
height: 790px;
width: 1400px;
display: flex;
justify-content: center;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.left {
background-color: #2a2a2a;
width: 70px;
}
.middle {
background-color: #dadbdc;
width: 380px;
.header {
height: 75px;
background: #f7f7f7;
}
.user-list {
}
}
.right {
background-color: #f5f5f5;
width: 950px;
.header {
height: 75px;
background: #f7f7f7;
border: 1px solid #e7e7e7;
}
.content {
height: 580px;
}
.bottom {
height: calc(100% - 655px);
background: #f7f7f7;
border: 1px solid #e7e7e7;
}
}
</style>