字体,样式宽度修改

This commit is contained in:
2025-12-01 18:37:43 +08:00
parent 241807325b
commit 9570745a94
24 changed files with 94 additions and 86 deletions

Binary file not shown.

View File

@@ -12,8 +12,7 @@
<style lang="scss">
#app {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: 'Source Han Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100vh;

View File

@@ -5,6 +5,15 @@
* @figma https://www.figma.com/design/4aM0yqyoAjtW2jTZcqPAtN
*/
// ============ 字体声明 ============
@font-face {
font-family: 'Source Han Sans SC';
src: url('/font/SourceHanSansSC-VF.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
// ============ 设计令牌 (Design Tokens) ============
// 颜色
@@ -18,8 +27,8 @@ $color-bg-white: #FFFFFF; // 白色背景
$color-border: #dcdfe6; // 边框
// 字体
$font-family-cn: 'PingFang SC', 'Microsoft YaHei', sans-serif;
$font-family-en: 'Nunito Sans', sans-serif;
$font-family-cn: 'Source Han Sans SC', sans-serif;
$font-family-en: 'Source Han Sans SC', sans-serif;
$font-size-base: 14px;
$line-height-base: 1.571428571em;

View File

@@ -41,7 +41,7 @@ withDefaults(defineProps<Props>(), {
}
.head-title {
font-family: 'MiSans VF', 'PingFang SC';
font-family: 'Source Han Sans SC', sans-serif;
font-weight: 630;
font-size: 40px;
line-height: 1.2;
@@ -57,7 +57,7 @@ withDefaults(defineProps<Props>(), {
}
.breadcrumb-label {
font-family: 'PingFang SC';
font-family: 'Source Han Sans SC', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 22px;
@@ -72,7 +72,7 @@ withDefaults(defineProps<Props>(), {
}
.breadcrumb-item {
font-family: 'PingFang SC';
font-family: 'Source Han Sans SC', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 22px;
@@ -84,7 +84,7 @@ withDefaults(defineProps<Props>(), {
}
.separator {
font-family: 'PingFang SC';
font-family: 'Source Han Sans SC', sans-serif;
font-size: 14px;
color: #C9CDD4;
}

View File

@@ -196,7 +196,7 @@ function handleClick(menu: SysMenu) {
color: #334155;
font-size: 16px;
font-weight: 500;
font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-family: 'Source Han Sans SC', sans-serif;
line-height: 1.5;
transition: color 0.3s;
user-select: none;

View File

@@ -63,7 +63,7 @@ function handleMenuClick(menu: SysMenu) {
display: flex;
align-items: center;
justify-content: center;
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 16px;
line-height: 1.5em;

View File

@@ -55,7 +55,7 @@ input {
padding: 0 90px 0 20px;
border: none;
outline: none;
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-size: 14px;
color: #141F38;

View File

@@ -256,7 +256,7 @@ function handleLogout() {
}
.logo-text {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 700;
font-size: 20.6px;
line-height: 1.31;
@@ -328,7 +328,7 @@ function handleLogout() {
gap: 2px;
padding: 26px 21px;
color: #141F38;
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 16px;
line-height: 1.5;
@@ -380,7 +380,7 @@ function handleLogout() {
gap: 8px;
padding: 12px 16px;
color: #333;
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.5;
@@ -425,7 +425,7 @@ function handleLogout() {
border: none;
outline: none;
padding: 7px 20px;
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.57;

View File

@@ -348,7 +348,7 @@ function handleDialogClose() {
.title {
margin: 0;
font-family: 'Inter', 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 16px;
line-height: 1.5em;
@@ -366,7 +366,7 @@ function handleDialogClose() {
border: none;
border-radius: 8px;
color: #FFFFFF;
font-family: 'Inter', 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 14px;
line-height: 1.43em;
@@ -409,7 +409,7 @@ function handleDialogClose() {
.category-title {
margin: 0;
font-family: 'Inter', 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 18px;
line-height: 1.5em;
@@ -417,7 +417,7 @@ function handleDialogClose() {
}
.category-count {
font-family: 'Inter', 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.5em;
@@ -462,7 +462,7 @@ function handleDialogClose() {
}
.tag-name {
font-family: 'Inter', 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 16px;
line-height: 1.5em;
@@ -478,7 +478,7 @@ function handleDialogClose() {
background: #ECEEF2;
border: 1px solid transparent;
border-radius: 8px;
font-family: 'Inter', 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 12px;
line-height: 1.33em;
@@ -501,7 +501,7 @@ function handleDialogClose() {
background: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
font-family: 'Inter', 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 14px;
line-height: 1.43em;

View File

@@ -111,7 +111,7 @@ function handleClick() {
justify-content: center;
box-sizing: border-box;
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 0.875em;
line-height: 1.57;
@@ -126,7 +126,7 @@ function handleClick() {
flex-direction: column;
.article-title {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 1.25em;
line-height: 1.4;
@@ -141,7 +141,7 @@ function handleClick() {
}
.article-desc {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 0.875em;
line-height: 1.57;
@@ -173,7 +173,7 @@ function handleClick() {
}
span {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 0.875em;
line-height: 1.57;
@@ -182,7 +182,7 @@ function handleClick() {
}
.view-count {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 0.875em;
line-height: 1.57;

View File

@@ -113,7 +113,7 @@ function handleClick() {
box-sizing: border-box;
.day {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 1.875em;
line-height: 0.73;
@@ -123,7 +123,7 @@ function handleClick() {
}
.month {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 0.875em;
line-height: 1.57;
@@ -140,7 +140,7 @@ function handleClick() {
flex-direction: column;
.card-title {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 1.25em;
line-height: 1.4;
@@ -155,7 +155,7 @@ function handleClick() {
}
.card-desc {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 0.875em;
line-height: 1.57;

View File

@@ -735,7 +735,7 @@ defineExpose({
}
.article-title {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 28px;
line-height: 28px;
@@ -753,7 +753,7 @@ defineExpose({
}
.meta-item {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 28px;
@@ -780,7 +780,7 @@ defineExpose({
}
.article-content {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 16px;
line-height: 30px;

View File

@@ -69,7 +69,7 @@ function handleLearn() {
background: #FFFFFF;
border-radius: 12px;
border: none;
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 16px;
line-height: 22.4px;

View File

@@ -530,7 +530,7 @@ function formatDuration(minutes?: number): string {
}
.course-title {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 20px;
line-height: 1.4;
@@ -539,7 +539,7 @@ function formatDuration(minutes?: number): string {
}
.course-desc {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.57;
@@ -568,7 +568,7 @@ function formatDuration(minutes?: number): string {
}
span {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.57;
@@ -590,7 +590,7 @@ function formatDuration(minutes?: number): string {
gap: 14px;
.progress-label {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 14px;
line-height: 1.71;
@@ -620,7 +620,7 @@ function formatDuration(minutes?: number): string {
}
.progress-percent {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 14px;
line-height: 1.71;
@@ -637,7 +637,7 @@ function formatDuration(minutes?: number): string {
:deep(.el-button) {
height: 42px;
border-radius: 8px;
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 16px;
padding: 8px 24px;
@@ -727,7 +727,7 @@ function formatDuration(minutes?: number): string {
}
.title-text {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 16px;
line-height: 1.5;
@@ -772,7 +772,7 @@ function formatDuration(minutes?: number): string {
}
.chapter-name {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 16px;
line-height: 1.5;
@@ -806,7 +806,7 @@ function formatDuration(minutes?: number): string {
flex: 1;
.node-number {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.57;
@@ -825,7 +825,7 @@ function formatDuration(minutes?: number): string {
}
.node-name {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.57;
@@ -836,7 +836,7 @@ function formatDuration(minutes?: number): string {
.node-right {
.node-status {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.57;

View File

@@ -540,7 +540,7 @@ onMounted(() => {
margin-top: 46.66px;
p {
font-family: 'Taipei Sans TC Beta', 'PingFang SC', sans-serif;
font-family: 'Source Han Sans SC', sans-serif;
font-weight: 700;
font-size: 50px;
line-height: 1.42;
@@ -606,7 +606,7 @@ onMounted(() => {
}
.login-title {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 16px;
line-height: 1.5;
@@ -762,7 +762,7 @@ onMounted(() => {
border: none;
border-radius: 12px;
color: #FFFFFF;
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 16px;
line-height: 1.4;
@@ -774,7 +774,7 @@ onMounted(() => {
}
.agreement-text {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 10px;
line-height: 1.8;
@@ -788,7 +788,7 @@ onMounted(() => {
width: 100%;
.register-link {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 12px;
line-height: 1.83;
@@ -806,7 +806,7 @@ onMounted(() => {
}
.copyright {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-size: 12px;
line-height: 2;
color: #D9D9D9;

View File

@@ -557,7 +557,7 @@ onUnmounted(() => {
margin-top: 46.66px;
p {
font-family: 'Taipei Sans TC Beta', 'PingFang SC', sans-serif;
font-family: 'Source Han Sans SC', sans-serif;
font-weight: 700;
font-size: 50px;
line-height: 1.42;
@@ -623,7 +623,7 @@ onUnmounted(() => {
}
.register-title {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 16px;
line-height: 1.5;
@@ -718,7 +718,7 @@ onUnmounted(() => {
border: none;
border-radius: 12px;
color: #FFFFFF;
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 16px;
line-height: 1.4;
@@ -730,7 +730,7 @@ onUnmounted(() => {
}
.agreement-text {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 10px;
line-height: 1.8;
@@ -744,7 +744,7 @@ onUnmounted(() => {
width: 100%;
.login-link {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 12px;
line-height: 1.83;
@@ -762,7 +762,7 @@ onUnmounted(() => {
}
.copyright {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-size: 12px;
line-height: 2;
color: #D9D9D9;

View File

@@ -104,7 +104,7 @@ function getChartOption(): EChartsOption {
axisLabel: {
color: '#979797',
fontSize: 14,
fontFamily: 'PingFang SC'
fontFamily: 'Source Han Sans SC'
}
},
yAxis: {
@@ -121,7 +121,7 @@ function getChartOption(): EChartsOption {
axisLabel: {
color: '#979797',
fontSize: 14,
fontFamily: 'PingFang SC'
fontFamily: 'Source Han Sans SC";'
},
splitLine: {
lineStyle: {
@@ -221,7 +221,7 @@ onUnmounted(() => {
}
.progress-title {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 20px;
line-height: 38px;
@@ -230,7 +230,7 @@ onUnmounted(() => {
}
.update-time {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 22px;
@@ -254,7 +254,7 @@ onUnmounted(() => {
background: transparent;
border: none;
border-radius: 6px;
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 14px;
line-height: 22px;

View File

@@ -512,7 +512,7 @@ function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
}
.header-text {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 16px;
line-height: 1.5;
@@ -527,7 +527,7 @@ function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
padding: 10px;
.task-title {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 20px;
line-height: 1.4;
@@ -536,7 +536,7 @@ function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
}
.task-description {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.5714285714285714;
@@ -560,7 +560,7 @@ function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
display: flex;
align-items: center;
gap: 7px;
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 1.5714285714285714;
@@ -612,7 +612,7 @@ function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
gap: 8px;
.stat-label {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 16px;
line-height: 1.5714285714285714;
@@ -620,7 +620,7 @@ function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
}
.stat-value {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 32px;
line-height: 1;
@@ -654,7 +654,7 @@ function getItemStatusType(status?: number): 'info' | 'warning' | 'success' {
.progress-label,
.progress-value {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 16px;
line-height: 1.5;

View File

@@ -246,7 +246,7 @@ onMounted(() => {
margin-bottom: 24px;
.section-title {
font-family: 'PingFang SC';
font-family: 'Source Han Sans SC', sans-serif;
font-weight: 600;
font-size: 28px;
line-height: 38px;
@@ -262,7 +262,7 @@ onMounted(() => {
transition: color 0.3s;
span {
font-family: 'PingFang SC';
font-family: 'Source Han Sans SC', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;

View File

@@ -48,7 +48,7 @@ function handleNavigate(direction: 'prev' | 'next') {
}
.nav-link {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 16px;
line-height: 24px;

View File

@@ -60,7 +60,7 @@ function handleCollect() {
}
span {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 24px;

View File

@@ -231,7 +231,7 @@ defineExpose({
}
.resource-title {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 28px;
line-height: 28px;
@@ -251,7 +251,7 @@ defineExpose({
}
span {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 24px;
@@ -260,7 +260,7 @@ defineExpose({
}
.resource-summary {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 16px;
line-height: 24px;
@@ -278,7 +278,7 @@ defineExpose({
.empty {
text-align: center;
padding: 20px;
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-size: 14px;
color: #979797;
}

View File

@@ -107,7 +107,7 @@ function handleCategoryClick(category: Tag) {
}
.category-name {
font-family: 'PingFang SC';
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 16px;
line-height: 24px;

View File

@@ -117,7 +117,7 @@ onMounted(async () => {
}
.title {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 20px;
line-height: 28px;
@@ -130,7 +130,7 @@ onMounted(async () => {
background: rgba(198, 40, 40, 0.05);
border: 1px solid #C62828;
border-radius: 4px;
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 16px;
line-height: 24px;
@@ -178,7 +178,7 @@ onMounted(async () => {
}
.username {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 600;
font-size: 20px;
line-height: 24px;
@@ -198,7 +198,7 @@ onMounted(async () => {
}
.gender-text {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 24px;
@@ -212,7 +212,7 @@ onMounted(async () => {
}
.info-item {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 22px;
@@ -226,7 +226,7 @@ onMounted(async () => {
}
.info-label {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 400;
font-size: 14px;
line-height: 22px;
@@ -239,7 +239,7 @@ onMounted(async () => {
}
.level-text {
font-family: 'PingFang SC', sans-serif;
font-family: "Source Han Sans SC";
font-weight: 500;
font-size: 12px;
line-height: 24px;