chore: adjust mobile font
This commit is contained in:
@@ -230,6 +230,60 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ========================================
|
||||||
|
移动端字体独立优化(< 640px)
|
||||||
|
大屏保持不变,小屏单独增重、优化渲染
|
||||||
|
======================================== */
|
||||||
|
@media (max-width: 639px) {
|
||||||
|
body {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 450;
|
||||||
|
letter-spacing: 0;
|
||||||
|
/* 移动端关闭 subpixel antialiasing,字体更实更清晰 */
|
||||||
|
-webkit-font-smoothing: auto;
|
||||||
|
-moz-osx-font-smoothing: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题类字体在小屏下同步增重 */
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 正文段落、描述类文字增重 */
|
||||||
|
p,
|
||||||
|
span:not([class*="icon"]),
|
||||||
|
label,
|
||||||
|
[class*="description"],
|
||||||
|
[class*="muted"] {
|
||||||
|
font-weight: 420;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 小号字在移动端专门增重,与 Windows 小字优化区分开 */
|
||||||
|
.text-xs {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-sm {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 450;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮文字增重,更易点击辨识 */
|
||||||
|
button,
|
||||||
|
[role="button"] {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格单元格 */
|
||||||
|
td, th {
|
||||||
|
font-weight: 430;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 高级感增强 - 微妙的渐变背景 */
|
/* 高级感增强 - 微妙的渐变背景 */
|
||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
|
|||||||
@@ -19,12 +19,12 @@ const activeTab = ref('password')
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tabs v-model="activeTab" class="max-w-2xl">
|
<Tabs v-model="activeTab" class="max-w-2xl">
|
||||||
<TabsList class="w-full sm:w-auto flex sm:inline-flex h-10 gap-1 p-1 bg-muted/50 rounded-lg overflow-x-auto no-scrollbar">
|
<TabsList class="w-full grid grid-cols-5 h-auto p-1 bg-muted/50 rounded-lg">
|
||||||
<TabsTrigger value="password" class="flex-1">密码修改</TabsTrigger>
|
<TabsTrigger value="password" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">密码修改</TabsTrigger>
|
||||||
<TabsTrigger value="site" class="flex-1">站点设置</TabsTrigger>
|
<TabsTrigger value="site" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">站点设置</TabsTrigger>
|
||||||
<TabsTrigger value="scheduler" class="flex-1">调度设置</TabsTrigger>
|
<TabsTrigger value="scheduler" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">调度设置</TabsTrigger>
|
||||||
<TabsTrigger value="backup" class="flex-1">备份恢复</TabsTrigger>
|
<TabsTrigger value="backup" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">备份恢复</TabsTrigger>
|
||||||
<TabsTrigger value="about" class="flex-1">关于</TabsTrigger>
|
<TabsTrigger value="about" class="text-xs sm:text-sm px-1 sm:px-3 py-1.5 whitespace-nowrap">关于</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
<TabsContent value="password" class="mt-6">
|
<TabsContent value="password" class="mt-6">
|
||||||
|
|||||||
Reference in New Issue
Block a user