From 15792ad8baea4ab886dbfc58009847f26de45df8 Mon Sep 17 00:00:00 2001
From: zhaowei <zhaowei>
Date: 星期五, 02 八月 2024 17:55:19 +0800
Subject: [PATCH] 1、利用viewport完成PC端页面响应式布局，其他端还未适配 2、基本完成语言大模型页面布局及部分功能 3、实现对于侧边栏图标在首页与其他页面时不同的展示风格 4、使用压缩后的背景图与首页gif（效果不好，跳转路由后仍会出现短暂背景图片未加载出情况） 5、修改项目浏览器页签图标
---
src/components/menu/SideMenu.vue | 102 ++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 76 insertions(+), 26 deletions(-)
diff --git a/src/components/menu/SideMenu.vue b/src/components/menu/SideMenu.vue
index 830ec60..646fa47 100644
--- a/src/components/menu/SideMenu.vue
+++ b/src/components/menu/SideMenu.vue
@@ -8,17 +8,16 @@
<div id="menu-container">
<logo/>
- <div class="nav-split-line"></div>
+ <div class="nav-split-line" :style="{backgroundColor:$route.meta.title==='棣栭〉'?'#E5E5E5':'#585258'}"></div>
<s-menu
- :collapsed="collapsed"
:menu="menus"
- :theme="theme"
+ theme="light"
@select="onSelect"
@updateMenuTitle="onUpdateMenuTitle"
:mode="mode"
:style="smenuStyle">
</s-menu>
- <div class="nav-split-line"></div>
+ <div class="nav-split-line" :style="{backgroundColor:$route.meta.title==='棣栭〉'?'#E5E5E5':'#585258'}"></div>
<div class="avatar">
<a-avatar :src="getAvatar()" @click="$router.push('/user/UserManagement')"/>
</div>
@@ -52,12 +51,12 @@
export default {
name: 'SideMenu',
- components: { Logo, SMenu },
+ components: { Logo, SMenu },
mixins: [mixin, mixinDevice],
data() {
return {
- normalCollapsedWidth: 100,
- collapsedWidth: 100
+ normalCollapsedWidth: '5.2vw',
+ collapsedWidth: '5.2vw'
}
},
props: {
@@ -129,6 +128,7 @@
/* update_begin author:sunjianlei date:20190509 for: 淇敼渚ц竟瀵艰埅鏍忔粴鍔ㄦ潯鐨勬牱寮� */
.sider {
@scrollBarSize: 10px;
+ background: transparent!important;
#menu-container {
background-color: rgba(255, 255, 255, .34);
@@ -143,6 +143,7 @@
/deep/ .ant-menu {
background-color: transparent;
width: 60px;
+ border: none;
/* 瀹氫箟婊氬姩鏉￠珮瀹藉強鑳屾櫙 楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
&::-webkit-scrollbar {
width: @scrollBarSize;
@@ -188,15 +189,29 @@
/deep/ .ant-menu-inline-collapsed > .ant-menu-item {
padding: 0 !important;
- border-radius: 12px;
-
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 59px;
+ margin: 0;
a {
text-align: center;
border-radius: 12px;
- }
- .anticon {
- font-size: 25px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .anticon {
+ font-size: 30px;
+ line-height: 0;
+ transition: all .3s ease-in-out;
+ }
+
+ & > span {
+ display: none;
+ }
}
/*瀵艰埅鏍忓彾瀛愯彍鍗曟寜閽閫変腑鍚庢牱寮�*/
@@ -209,9 +224,46 @@
/*瀵艰埅鏍忔寜閽婵�娲诲悗鏍峰紡*/
&.ant-menu-item-active {
- background-color: #E7EBF6;
+ background-color: rgba(0, 0, 0, .2);
+
a {
color: rgba(0, 0, 0, 0.65)
+ }
+ .anticon {
+ transform: scale(1.1);
+ }
+ }
+ }
+
+ /deep/ .ant-menu-inline-collapsed > .ant-menu-submenu {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .ant-menu-submenu-title {
+ padding: 0 !important;
+ width: 100%;
+ height: 59px;
+ border-radius: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0;
+
+ & > span {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .anticon {
+ font-size: 30px;
+ line-height: 0;
+ transition: all .3s ease-in-out;
+ }
+
+ span {
+ display: none;
+ }
}
}
}
@@ -224,25 +276,15 @@
/*瀵艰埅鏍忛潪鍙跺瓙鑿滃崟鎸夐挳琚縺娲诲悗鏍峰紡*/
/deep/ .ant-menu-vertical .ant-menu-submenu-active {
.ant-menu-submenu-title {
- background-color: #E7EBF6;
+ background-color: rgba(0, 0, 0, .2);
+ /*transform: scale(1.2);*/
color: rgba(0, 0, 0, 0.65);
- }
- }
-
- /deep/ .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
- padding: 0 !important;
- text-align: center;
- border-radius: 12px;
-
- .anticon {
- font-size: 25px;
}
}
.nav-split-line {
width: 50px;
height: 1px;
- background-color: #E5E5E5;
border-radius: 12px;
cursor: pointer;
margin: 15px auto
@@ -250,9 +292,16 @@
.avatar {
text-align: center;
+ height: 60px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
/deep/ .ant-avatar {
cursor: pointer;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
}
}
}
@@ -267,10 +316,11 @@
cursor: pointer;
transition: all .2s ease;
opacity: 0;
+ z-index: 99;
#response-line-0, #response-line-1 {
width: 4px;
- height: 13px;
+ height: 14px;
background-color: #c6c6c6;
left: 4px;
position: absolute;
--
Gitblit v1.9.3