From ad47a1e537163af2e9a3059ee488a88ae4025de6 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 27 六月 2024 15:11:48 +0800
Subject: [PATCH] router-view问题
---
src/layout/component/SideBar.vue | 121 ++++++++++++++++++++++++++++++
src/views/project/ch/home/component/waterRight/header.vue | 1
src/views/project/ch/home/Home.vue | 37 ++-------
src/layout/component/WIHeader.vue | 7 +
src/layout/component/main.vue | 36 +++++++-
src/theme/app.scss | 1
6 files changed, 167 insertions(+), 36 deletions(-)
diff --git a/src/layout/component/SideBar.vue b/src/layout/component/SideBar.vue
new file mode 100644
index 0000000..75d605f
--- /dev/null
+++ b/src/layout/component/SideBar.vue
@@ -0,0 +1,121 @@
+<template>
+ <div class="pc-chat_aside flex-0">
+ <div class="aside_top">
+ <div class="logo">
+ <div class="flex items-center">
+ <img src="/static/images/logo/logo-mini.svg" alt="logo" class="layout-logo-medium-img" />
+ <span class="font-extrabold text-xl text-white tracking-wide">姘村姟 AI骞冲彴</span>
+ </div>
+ </div>
+ </div>
+ <div class="aside_center">
+ <asideNew />
+ </div>
+ <div class="aside_bottom">
+ <asideTitle />
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import asideNew from '/@/views/project/ch/home/component/waterLeftAside/asideNew.vue';
+import asideTitle from '/@/views/project/ch/home/component/waterLeftAside/asideTitle.vue';
+
+</script>
+
+<style scoped lang="scss">
+.pc-chat_room {
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: #1c1e1d;
+ font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+.pc-chat_aside {
+ width: 252px !important;
+ height: 100%;
+ box-sizing: border-box;
+ background-color: #1b1d1c;
+ overflow: visible;
+ -webkit-transition: width 0.1s ease-in;
+ -o-transition: width 0.1s ease-in;
+ transition: width 0.1s ease-in;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
+.aside_top {
+ box-sizing: border-box;
+ position: relative;
+ width: 100%;
+ padding: 18px;
+}
+.layout-logo-medium-img {
+ width: 28px;
+ margin-right: 7px;
+}
+.aside_center {
+ flex: 1;
+ min-height: 0;
+ -webkit-transition: height 0.3s ease-in;
+ -o-transition: height 0.3s ease-in;
+ transition: height 0.3s ease-in;
+}
+.aside_bottom {
+ position: relative;
+ width: 100%;
+ padding-bottom: 20px;
+ -webkit-transition: height 0.3s ease-in;
+ -o-transition: height 0.3s ease-in;
+ transition: height 0.3s ease-in;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+}
+.pc-chat_right {
+ padding: 0;
+ background: linear-gradient(180deg, #f5f4f6 0, #f2f2f6 25%, #e9edf7);
+ position: relative;
+ margin: 6px;
+ border-radius: 10px;
+ display: block;
+ flex: 1;
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ overflow: auto;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ .pc-chatRoom {
+ box-sizing: border-box;
+ padding-right: 0px;
+ position: relative;
+ font-weight: 400;
+ background-color: #f2f4f8;
+ transition: padding-right 0.25s;
+ .homeBox {
+ padding: 42px 40px 0;
+ font-size: 14px;
+ line-height: 18px;
+ box-sizing: border-box;
+ }
+ .declare {
+ position: absolute;
+ bottom: 0;
+ z-index: 9;
+ width: 100%;
+ height: 34px;
+ font-size: 14px;
+ font-weight: 400;
+ color: #999;
+ text-align: center;
+ }
+ }
+}
+</style>
+
diff --git a/src/layout/component/WIHeader.vue b/src/layout/component/WIHeader.vue
new file mode 100644
index 0000000..8d69f8b
--- /dev/null
+++ b/src/layout/component/WIHeader.vue
@@ -0,0 +1,7 @@
+<template>
+
+ <div ></div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped lang="scss"></style>
diff --git a/src/layout/component/main.vue b/src/layout/component/main.vue
index b42ba3d..6f1a255 100644
--- a/src/layout/component/main.vue
+++ b/src/layout/component/main.vue
@@ -1,12 +1,19 @@
<template>
- <el-main class="layout-main" :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
+ <el-main
+ class="layout-main"
+ :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`"
+ >
<el-scrollbar
ref="layoutMainScrollbarRef"
- class="layout-main-scroll layout-backtop-header-fixed"
- wrap-class="layout-main-scroll"
- view-class="layout-main-scroll h100"
+ class="layout-main-scroll layout-backtop-header-fixed"
+ wrap-class="layout-main-scroll flex"
+ view-class="layout-main-scroll bg-[#1c1e1d] flex h100 w-full"
>
- <LayoutParentView />
+ <SideBar />
+ <div class="flex-auto flex-col flex right-container">
+ <waterHeader class="flex-0"/>
+ <LayoutParentView class="flex-auto" />
+ </div>
<!-- <LayoutFooter v-if="isFooter" /> -->
</el-scrollbar>
<el-backtop :target="setBacktopClass" />
@@ -20,6 +27,9 @@
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
+import SideBar from './SideBar.vue';
+import WIHeader from './WIHeader.vue';
+import waterHeader from '/@/views/project/ch/home/component/waterRight/header.vue';
// 寮曞叆缁勪欢
const LayoutParentView = defineAsyncComponent(() => import('/@/layout/routerView/parent.vue'));
@@ -63,3 +73,19 @@
layoutMainScrollbarRef,
});
</script>
+
+<style scoped lang="scss">
+.right-container{
+ width: 100vw;
+ // margin: 0;
+ padding: 0;
+ overflow: hidden;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background-color: #1c1e1d;
+ font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ margin: 6px;
+ border-radius: 10px;
+
+}
+</style>
diff --git a/src/theme/app.scss b/src/theme/app.scss
index 0569dbe..1bf6434 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -90,7 +90,6 @@
flex-direction: column;
// 鍐呭眰 el-scrollbar鏍峰紡锛岀敤浜庣晫闈㈤珮搴﹁嚜閫傚簲锛坢ain.vue锛�
.layout-main-scroll {
- @extend .layout-flex;
.layout-parent {
@extend .layout-flex;
position: relative;
diff --git a/src/views/project/ch/home/Home.vue b/src/views/project/ch/home/Home.vue
index 628bff6..32ce900 100644
--- a/src/views/project/ch/home/Home.vue
+++ b/src/views/project/ch/home/Home.vue
@@ -1,30 +1,13 @@
<template>
<div class="pc-chat_room">
<div class="flex h100 w100">
- <div class="pc-chat_aside">
- <div class="aside_top">
- <div class="logo">
- <div class="flex items-center">
- <img src="/static/images/logo/logo-mini.svg" alt="logo" class="layout-logo-medium-img" />
- <span class="font-extrabold text-xl text-white tracking-wide">姘村姟 AI骞冲彴</span>
- </div>
- </div>
- </div>
- <div class="aside_center">
- <asideNew />
- </div>
- <div class="aside_bottom">
- <asideTitle />
- </div>
- </div>
<div class="pc-chat_right">
- <waterHeader />
<div class="w100 h100 overflow-auto">
<div class="pc-chatRoom w100 h100">
<div class="homeBox w100 h100">
<div class="flex items-center flex-column mt-20">
<div class="flex items-center flex-column" v-if="!isShowChat">
- <waterTop @sendClick="sendClick"/>
+ <waterTop @sendClick="sendClick" />
<waterCenter />
<waterBottom />
</div>
@@ -47,18 +30,16 @@
<script setup lang="ts">
import { ref } from 'vue';
-import asideNew from './component/waterLeftAside/asideNew.vue';
-import asideTitle from './component/waterLeftAside/asideTitle.vue';
import waterBottom from './component/waterRight/bottom.vue';
import waterCenter from './component/waterRight/center.vue';
import waterHeader from './component/waterRight/header.vue';
import waterTop from './component/waterRight/top.vue';
import Chat from '/@/components/chat/Chat.vue';
-const isShowChat = ref(true);
+const isShowChat = ref(false);
const sendClick = () => {
- isShowChat.value =true;
+ isShowChat.value = true;
};
</script>
<style scoped lang="scss">
@@ -67,11 +48,11 @@
height: 100vh;
margin: 0;
padding: 0;
- overflow: hidden;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background-color: #1c1e1d;
- font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ // overflow: hidden;
+ // -webkit-box-sizing: border-box;
+ // box-sizing: border-box;
+ // background-color: #1c1e1d;
+ // font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.pc-chat_aside {
width: 252px !important;
@@ -120,8 +101,6 @@
padding: 0;
background: linear-gradient(180deg, #f5f4f6 0, #f2f2f6 25%, #e9edf7);
position: relative;
- margin: 6px;
- border-radius: 10px;
display: block;
flex: 1;
-ms-flex-preferred-size: auto;
diff --git a/src/views/project/ch/home/component/waterRight/header.vue b/src/views/project/ch/home/component/waterRight/header.vue
index c5a15a7..fc620a1 100644
--- a/src/views/project/ch/home/component/waterRight/header.vue
+++ b/src/views/project/ch/home/component/waterRight/header.vue
@@ -52,7 +52,6 @@
width: 100%;
height: 42px;
background-color: #fff;
- position: absolute;
top: 0;
z-index: 10;
}
--
Gitblit v1.9.3