toncent/PropertyDeployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

version9

Browse Source 
web
This commit is contained in:
Anfioo
2025-12-18 17:05:39 +08:00
parent 978b106239
commit 0cf39a451c
6 changed files with 186 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
resources/Web/MicroCommunityWeb/html/css/vc.css
View File

@@ -601,6 +601,7 @@ body,
.vc-menu {
border-right: 1px solid #EFEFF0;
overflow: visible !important;
}
.vc-menu-main {
@@ -664,10 +665,101 @@ body,
scrollbar-width: none;
}
/* 二级菜单改为飞出式 */
.vc-menu-sub.flyout {
position: absolute !important;
left: 100px; /* 紧贴一级菜单右侧 */
top: 10px; /* 初始top，由JS动态设置 */
width: 200px; /* 可根据需要调整，建议180-220px */
max-height: calc(100vh - 120px); /* 最大高度：视口高度减去顶部导航和底部边距 */
background: var(--vc-menu-sub-bg);
box-shadow: 3px 3px 15px rgba(0,0,0,0.12);
border-radius: 8px;
border: 1px solid #e8e8e8;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateX(-15px);
transition: all 0.3s ease;
overflow: hidden; /* 重要：外层隐藏溢出 */
display: flex;
flex-direction: column;
}
/* 显示时动画飞出 */
.vc-menu-sub.flyout.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.vc-menu-sub::-webkit-scrollbar {
display: none;
}
/* 二级菜单内部样式微调（更美观） */
.vc-menu-sub.flyout ul {
padding: 12px 0;
margin: 0;
overflow-y: auto; /* 超出时出现滚动条 */
overflow-x: hidden;
max-height: calc(100vh - 160px); /* 留出title和footer空间 */
flex: 1;
}
.vc-menu-sub.flyout ul li.title {
padding: 12px 20px 8px 20px;
font-weight: bold;
font-size: 14px;
color: var(--vc-menu-sub-title-font-color);
flex-shrink: 0; /* 不被压缩 */
border-bottom: 1px solid #f0f0f0;
}
.vc-menu-sub.flyout ul li {
padding-left: 20px !important;
padding-right: 10px;
height: 40px;
line-height: 40px;
flex-shrink: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vc-menu-sub.flyout ul li:hover {
background-color: var(--vc-menu-sub-bg-active-color);
color: var(--vc-menu-sub-active-font-color);
}
.vc-menu-sub.flyout ul li.sub-footer {
flex-shrink: 0;
text-align: right;
padding: 8px 15px;
margin: 0;
background: #f9f9f9;
border-top: 1px solid #f0f0f0;
font-size: 13px;
color: #666;
}
/*menu2中二级菜单滚动条样式*/
.vc-menu-sub.flyout ul::-webkit-scrollbar {
width: 6px;
}
.vc-menu-sub.flyout ul::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.vc-menu-sub.flyout ul::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 10px;
}
.vc-menu-sub.flyout ul::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.vc-menu-sub .active {
background-color: var(--vc-menu-sub-bg-active-color);
color: var(--vc-menu-sub-active-font-color);
@@ -714,12 +806,82 @@ body,
}
.vc-nav {
height: 50px;
height: 60px; /* 匹配侧边栏 logo 高度 60px */
width: 100%;
background-color: var(--vc-nav-bg);
font-size: 14px;
line-height: 50px;
color: var(--vc-nav-color);
line-height: 60px; /* 行高匹配侧边栏 logo */
color: #333333 !important;
background-color: var(--vc-menu-main-bg) !important; /* 完全复用侧边栏背景色 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: relative;
padding: 0; /* 清空默认内边距，避免样式错位 */
display: flex;
align-items: stretch; /* 让子容器高度撑满顶部栏 */
}
/* 顶部 logo 容器：完全复用侧边栏 vc-menu-main + title 样式 */
.vc-nav-logo {
width: 100px; /* 完全匹配侧边栏 vc-menu-main 宽度 */
background-color: var(--vc-menu-main-bg); /* 侧边栏背景色 */
color: var(--vc-menu-main-title-font-color);
text-align: start;
font-size: 14px;
height: 100%; /* 撑满顶部栏高度 */
overflow-x: hidden;
overflow-y: hidden; /* 隐藏滚动，和侧边栏一致 */
border-right: 1px solid #EFEFF0; /* 保留侧边栏的分隔线样式 */
}
/* 顶部 logo 容器：完全复用侧边栏 vc-menu-main + title 样式 */
.vc-nav-logo {
width: 101px; /* 完全匹配侧边栏 vc-menu-main 宽度 */
background-color: var(--vc-menu-main-bg); /* 侧边栏背景色 */
color: var(--vc-menu-main-title-font-color);
text-align: start;
font-size: 14px;
height: 100%; /* 撑满顶部栏高度 */
overflow-x: hidden;
overflow-y: hidden; /* 隐藏滚动，和侧边栏一致 */
border-right: 1px solid #EFEFF0; /* 保留侧边栏的分隔线样式 */
}
/* 顶部 logo 内的 a 标签：完全复用侧边栏样式 */
.vc-nav-logo ul li.title a {
text-decoration: none !important;
cursor: pointer !important;
color: var(--vc-menu-main-title-font-color) !important;
}
/* 原顶部内容容器：右移 + 适配新的顶部栏高度 */
.vc-nav-content {
flex: 1; /* 占满剩余宽度 */
padding: 0 15px; /* 保留内容内边距 */
display: flex;
align-items: center; /* 内容垂直居中（因顶部栏高度改为60px） */
background-color: #ffffff !important; /* 原内容区域保持白色背景 */
height: 100%; /* 撑满顶部栏高度 */
}
/* 修复原顶部内容的 li 样式：适配 60px 高度的垂直居中 */
.vc-nav-content ul li {
padding-left: 10px;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
color: #333333 !important;
line-height: 60px; /* 匹配顶部栏高度，垂直居中 */
height: 100%; /* 撑满容器高度 */
}
/* 顶部 logo 内的 li.title：完全复用侧边栏 logo 样式 */
.vc-nav-logo ul li.title {
color: var(--vc-menu-main-title-font-color) !important;
height: 60px !important; /* 匹配侧边栏 logo 高度 */
font-size: 19px !important; /* 匹配侧边栏 logo 字体大小 */
line-height: 60px !important; /* 行高居中 */
padding: 0 10px !important; /* 匹配侧边栏内边距 */
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.vc-nav ul li {
@@ -728,6 +890,20 @@ body,
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
color: #333333 !important;
}
.vc-nav ul li:hover,
.vc-nav ul li.active {
color: #007bff !important;
}
.vc-nav ul li.active {
border-bottom: 2px solid #007bff !important;
}
.vc-nav .dropdown-menu {
background-color: #ffffff !important;
}
.vc-nav ul li.title {