165 lines
4.0 KiB
Vue
165 lines
4.0 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<view class="test-section">
|
||
<view class="test-title">字体缩放测试页面</view>
|
||
<view class="test-info">
|
||
<text class="info-item">当前缩放比例: {{ scale }}</text>
|
||
<text class="info-item">根字体大小: {{ rootFontSize }}</text>
|
||
</view>
|
||
|
||
<view class="test-group">
|
||
<view class="group-title">使用 class 的字体大小</view>
|
||
<view class="test-item">
|
||
<text class="text-xs">超小字体 (xs: 10px)</text>
|
||
</view>
|
||
<view class="test-item">
|
||
<text class="text-sm">小字体 (sm: 11px)</text>
|
||
</view>
|
||
<view class="test-item">
|
||
<text class="text-base">基础字体 (base: 13px)</text>
|
||
</view>
|
||
<view class="test-item">
|
||
<text class="text-md">中等字体 (md: 14px)</text>
|
||
</view>
|
||
<view class="test-item">
|
||
<text class="text-lg">大字体 (lg: 16px)</text>
|
||
</view>
|
||
<view class="test-item">
|
||
<text class="text-xl">超大字体 (xl: 20px)</text>
|
||
</view>
|
||
<view class="test-item">
|
||
<text class="text-xxl">特大字体 (xxl: 24px)</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="test-group">
|
||
<view class="group-title">对比测试（固定 px vs rem）</view>
|
||
<view class="test-item">
|
||
<text class="fixed-size">固定大小 (14px，不应缩放)</text>
|
||
</view>
|
||
<view class="test-item">
|
||
<text class="rem-size">rem 大小 (0.875rem，应该缩放)</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="test-actions">
|
||
<button class="btn btn-primary" @click="goToSettings">去设置页面调整字体</button>
|
||
<button class="btn btn-outline" @click="refreshTest">刷新测试</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
scale: 1.0,
|
||
rootFontSize: '16px'
|
||
}
|
||
},
|
||
onShow() {
|
||
this.refreshTest()
|
||
},
|
||
methods: {
|
||
refreshTest() {
|
||
// 从 Vuex 读取当前缩放比例
|
||
this.scale = this.$store.state.font.fontScale || 1.0
|
||
|
||
// 读取根字体大小
|
||
try {
|
||
if (typeof document !== 'undefined' && document.documentElement) {
|
||
this.rootFontSize = getComputedStyle(document.documentElement).fontSize
|
||
}
|
||
} catch (e) {
|
||
this.rootFontSize = '无法获取'
|
||
}
|
||
},
|
||
|
||
goToSettings() {
|
||
uni.navigateTo({
|
||
url: '/pages/settings/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/styles/variables.scss';
|
||
|
||
.page-container {
|
||
padding: $spacing-md;
|
||
}
|
||
|
||
.test-section {
|
||
background: $bg-card;
|
||
border-radius: $border-radius-md;
|
||
padding: $spacing-md;
|
||
}
|
||
|
||
.test-title {
|
||
font-size: $font-size-xl;
|
||
font-weight: 600;
|
||
color: $text-primary;
|
||
margin-bottom: $spacing-md;
|
||
text-align: center;
|
||
}
|
||
|
||
.test-info {
|
||
background: $bg-primary;
|
||
padding: $spacing-sm;
|
||
border-radius: $border-radius-sm;
|
||
margin-bottom: $spacing-md;
|
||
|
||
.info-item {
|
||
display: block;
|
||
font-size: $font-size-sm;
|
||
color: $text-secondary;
|
||
margin-bottom: $spacing-xs;
|
||
}
|
||
}
|
||
|
||
.test-group {
|
||
margin-bottom: $spacing-lg;
|
||
|
||
.group-title {
|
||
font-size: $font-size-md;
|
||
font-weight: 600;
|
||
color: $text-primary;
|
||
margin-bottom: $spacing-sm;
|
||
padding-bottom: $spacing-xs;
|
||
border-bottom: 1px solid $border-color;
|
||
}
|
||
}
|
||
|
||
.test-item {
|
||
padding: $spacing-sm;
|
||
margin-bottom: $spacing-sm;
|
||
background: #f9f9f9;
|
||
border-radius: $border-radius-sm;
|
||
border-left: 3px solid $primary-color;
|
||
}
|
||
|
||
/* 字体大小 class */
|
||
.text-xs { font-size: $font-size-xs; }
|
||
.text-sm { font-size: $font-size-sm; }
|
||
.text-base { font-size: $font-size-base; }
|
||
.text-md { font-size: $font-size-md; }
|
||
.text-lg { font-size: $font-size-lg; }
|
||
.text-xl { font-size: $font-size-xl; }
|
||
.text-xxl { font-size: $font-size-xxl; }
|
||
|
||
/* 对比测试 */
|
||
.fixed-size { font-size: 14px; }
|
||
.rem-size { font-size: 0.875rem; }
|
||
|
||
.test-actions {
|
||
margin-top: $spacing-lg;
|
||
|
||
.btn {
|
||
margin-bottom: $spacing-sm;
|
||
}
|
||
}
|
||
</style>
|