style: update border-radius and padding values across components
- standardize border-radius from 8px to 6px for consistent styling - adjust padding values from 1rem to 0.75rem for better visual hierarchy - remove redundant overflow-y properties for cleaner code
This commit is contained in:
@@ -265,7 +265,7 @@ const setActive = (func) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
@@ -357,8 +357,8 @@ const setActive = (func) => {
|
||||
|
||||
.detail-example {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
|
||||
@@ -470,8 +470,8 @@ const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === curren
|
||||
.step-content {
|
||||
flex: 1;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@@ -517,7 +517,7 @@ const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === curren
|
||||
|
||||
.token-part {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -622,8 +622,8 @@ const currentNginxConfig = computed(() => nginxConfigs.find(c => c.id === curren
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #22c55e;
|
||||
}
|
||||
|
||||
|
||||
@@ -422,7 +422,7 @@ watch(serverCount, (newVal) => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
@@ -523,7 +523,7 @@ watch(serverCount, (newVal) => {
|
||||
background: linear-gradient(135deg, rgba(var(--vp-c-brand-rgb), 0.1), rgba(var(--vp-c-brand-rgb), 0.05));
|
||||
border: 2px solid var(--vp-c-brand);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@@ -596,7 +596,7 @@ watch(serverCount, (newVal) => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@@ -714,7 +714,7 @@ watch(serverCount, (newVal) => {
|
||||
.request-queue {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
@@ -746,7 +746,7 @@ watch(serverCount, (newVal) => {
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.queue-item {
|
||||
@@ -792,7 +792,7 @@ watch(serverCount, (newVal) => {
|
||||
.strategy-stats {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@@ -812,7 +812,7 @@ watch(serverCount, (newVal) => {
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
|
||||
@@ -366,7 +366,7 @@ const resetSimulation = () => {
|
||||
.compare-item {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -435,7 +435,7 @@ const resetSimulation = () => {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@@ -466,9 +466,9 @@ const resetSimulation = () => {
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
|
||||
@@ -634,7 +634,7 @@ onUnmounted(() => {
|
||||
background: linear-gradient(180deg, #fef3c7, #fde68a);
|
||||
border: 3px solid #f59e0b;
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -655,7 +655,7 @@ onUnmounted(() => {
|
||||
align-content: flex-start;
|
||||
padding: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.token {
|
||||
@@ -679,7 +679,7 @@ onUnmounted(() => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -711,7 +711,7 @@ onUnmounted(() => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.queue-title {
|
||||
@@ -726,7 +726,7 @@ onUnmounted(() => {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.request-item {
|
||||
@@ -790,14 +790,14 @@ onUnmounted(() => {
|
||||
background: linear-gradient(180deg, #dbeafe, #bfdbfe);
|
||||
border: 3px solid #3b82f6;
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bucket-content {
|
||||
height: 150px;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -866,7 +866,7 @@ onUnmounted(() => {
|
||||
|
||||
/* 滑动窗口可视化 */
|
||||
.sliding-window-vis {
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.window-container {
|
||||
@@ -904,7 +904,7 @@ onUnmounted(() => {
|
||||
align-items: flex-end;
|
||||
padding: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.time-slot {
|
||||
@@ -937,9 +937,9 @@ onUnmounted(() => {
|
||||
.window-stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@@ -1060,8 +1060,8 @@ onUnmounted(() => {
|
||||
.config-code {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
overflow-x: auto;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.6;
|
||||
@@ -1070,8 +1070,8 @@ onUnmounted(() => {
|
||||
|
||||
.config-explanation {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.exp-title {
|
||||
|
||||
@@ -223,7 +223,7 @@ const currentScenarios = computed(() => mode.value === 'forward' ? forwardScenar
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 12px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
|
||||
@@ -323,7 +323,7 @@ const applyPreset = (preset) => {
|
||||
.input-group select {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
@@ -337,11 +337,11 @@ const applyPreset = (preset) => {
|
||||
|
||||
.match-btn {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
@@ -534,7 +534,7 @@ code {
|
||||
padding: 0.6rem 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9rem;
|
||||
|
||||
@@ -324,7 +324,7 @@ const bestPractices = [
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
@@ -532,8 +532,8 @@ const bestPractices = [
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
@@ -580,8 +580,8 @@ const bestPractices = [
|
||||
|
||||
.nginx-config {
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
@@ -607,8 +607,8 @@ const bestPractices = [
|
||||
.practice-card {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.practice-header {
|
||||
|
||||
Reference in New Issue
Block a user