chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-18 10:40:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): center Config Panel action bar and move ProviderNav to bottom

Browse Source
This commit is contained in:
LTbinglingfeng
2026-02-06 03:13:13 +08:00
parent adcf0b6582
commit f53d333198
6 changed files with 104 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/providers/ProviderNav/ProviderNav.module.scss
View File

@@ -2,25 +2,34 @@
.navContainer {
position: fixed;
right: 24px;
top: 50%;
transform: translateY(-50%);
left: var(--content-center-x, 50%);
bottom: calc(12px + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: 50;
pointer-events: auto;
width: fit-content;
max-width: calc(100vw - 24px);
}
.navList {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 8px;
display: inline-flex;
flex-direction: row;
gap: 6px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
border-radius: 999px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
overflow-x: auto;
scrollbar-width: none;
max-width: inherit;
&::-webkit-scrollbar {
display: none;
}
}
.indicator {
@@ -29,7 +38,7 @@
left: 0;
pointer-events: none;
opacity: 0;
border-radius: 10px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.15);
box-shadow: inset 0 0 0 2px var(--primary-color);
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
@@ -58,9 +67,10 @@
padding: 0;
border: none;
background: transparent;
border-radius: 10px;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.15s ease;
flex: 0 0 auto;
&:hover {
background: rgba(0, 0, 0, 0.06);
@@ -80,8 +90,8 @@
}
.icon {
width: 28px;
height: 28px;
width: 24px;
height: 24px;
object-fit: contain;
}
@@ -110,42 +120,20 @@
}
}
// 小屏幕改为底部横向浮层
// 小屏幕进一步收紧尺寸
@media (max-width: 1200px) {
.navContainer {
top: auto;
right: auto;
left: 50%;
bottom: calc(12px + env(safe-area-inset-bottom));
transform: translateX(-50%);
width: fit-content;
max-width: calc(100vw - 24px);
max-width: calc(100vw - 16px);
}
.navList {
display: inline-flex;
flex-direction: row;
gap: 6px;
padding: 8px 10px;
border-radius: 999px;
overflow-x: auto;
scrollbar-width: none;
max-width: inherit;
&::-webkit-scrollbar {
display: none;
}
}
.indicator {
border-radius: 999px;
}
.navItem {
width: 36px;
height: 36px;
border-radius: 999px;
flex: 0 0 auto;
}
.icon {