增加字体大小设置
This commit is contained in:
@@ -3,6 +3,9 @@ export default {
|
||||
onLaunch() {
|
||||
console.log('App Launch')
|
||||
|
||||
// 🔥 初始化字体缩放（使用 Vuex）
|
||||
this.$store.dispatch('font/initFontScale')
|
||||
|
||||
// 从本地存储恢复登录状态
|
||||
const token = uni.getStorageSync('token')
|
||||
const userInfo = uni.getStorageSync('userInfo')
|
||||
@@ -25,7 +28,6 @@ export default {
|
||||
// 初始化扫码模式配置
|
||||
this.$store.dispatch('scan/initScanMode')
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -37,5 +39,11 @@ export default {
|
||||
|
||||
page {
|
||||
height: 100%;
|
||||
|
||||
/*
|
||||
* 使用 rem 方案后，不需要设置 font-size
|
||||
* 所有元素使用 rem 单位，会自动相对于根字体大小计算
|
||||
* 根字体大小由 JavaScript 动态设置（document.documentElement.style.fontSize）
|
||||
*/
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -53,7 +53,7 @@ export default {
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
@@ -64,7 +64,7 @@ export default {
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@@ -77,12 +77,12 @@ export default {
|
||||
border-radius: 8px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.record-text {
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -54,13 +54,13 @@ export default {
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
color: #666;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
@@ -71,7 +71,7 @@ export default {
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@ export default {
|
||||
border-radius: 8px;
|
||||
// margin: 0 16px 10px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -117,7 +117,7 @@ export default {
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 12px;
|
||||
font-size: $font-size-xs;
|
||||
color: #999;
|
||||
min-width: 70px;
|
||||
text-align: right;
|
||||
|
||||
@@ -42,6 +42,20 @@ Vue.prototype.$hideLoading = function() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
|
||||
// 全局字体工具
|
||||
Vue.prototype.$fontSize = require('./utils/fontSize').default
|
||||
|
||||
// 🔥 全局混入：每个页面显示时自动应用字体设置
|
||||
Vue.mixin({
|
||||
onShow() {
|
||||
// 从 Vuex 读取字体设置并应用到 DOM
|
||||
const scale = this.$store.state.font.fontScale
|
||||
if (scale && scale !== 1.0) {
|
||||
this.$store.dispatch('font/applyFontScale', scale)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
App.mpType = 'app'
|
||||
|
||||
const app = new Vue({
|
||||
|
||||
+12
@@ -109,6 +109,12 @@
|
||||
"navigationBarTitleText": "环境配置"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/settings/other-settings",
|
||||
"style": {
|
||||
"navigationBarTitleText": "其他设置"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/settings/devices/printer",
|
||||
"style": {
|
||||
@@ -194,6 +200,12 @@
|
||||
"navigationBarTitleText": "自动打印"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/testpages/font-test",
|
||||
"style": {
|
||||
"navigationBarTitleText": "字体缩放测试"
|
||||
}
|
||||
},
|
||||
/* #endif */
|
||||
{
|
||||
"path": "pages/weigh/generate",
|
||||
|
||||
+8
-8
@@ -115,20 +115,20 @@ export default {
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
.home-hospital {
|
||||
font-size: 17px;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.home-welcome {
|
||||
font-size: 12px;
|
||||
font-size: $font-size-xs;
|
||||
opacity: 0.85;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.quick-section { padding: 16px 16px 8px; }
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
font-weight: 600;
|
||||
color: $text-primary;
|
||||
margin-bottom: 12px;
|
||||
@@ -158,7 +158,7 @@ export default {
|
||||
justify-content: center;
|
||||
}
|
||||
.quick-item text {
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
color: $text-primary;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
@@ -182,12 +182,12 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-size: $font-size-lg;
|
||||
background: #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.recent-info { flex: 1; }
|
||||
.recent-info .name { font-size: 13px; color: $text-primary; font-weight: 500; }
|
||||
.recent-info .detail { font-size: 11px; color: $text-placeholder; margin-top: 2px; }
|
||||
.recent-time { font-size: 10px; color: #bbbbbb; }
|
||||
.recent-info .name { font-size: $font-size-base; color: $text-primary; font-weight: 500; }
|
||||
.recent-info .detail { font-size: $font-size-xs; color: $text-placeholder; margin-top: 2px; }
|
||||
.recent-time { font-size: calc(10 * var(--font-scale) * 1px); color: #bbbbbb; }
|
||||
</style>
|
||||
|
||||
@@ -124,23 +124,23 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.page { padding: 20rpx; background: #f5f5f5; min-height: 100vh; }
|
||||
|
||||
.user-bar { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 30rpx; border-radius: 12rpx; margin-bottom: 20rpx; }
|
||||
.user-left { display: flex; align-items: center; gap: 16rpx; }
|
||||
.username { font-size: 32rpx; font-weight: bold; color: #333; }
|
||||
.role-tag { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 4rpx; background: #007aff; color: #fff; }
|
||||
.username { font-size: $font-size-lg; font-weight: bold; color: #333; }
|
||||
.role-tag { font-size: $font-size-xs; padding: 4rpx 12rpx; border-radius: 4rpx; background: #007aff; color: #fff; }
|
||||
.role-tag.admin { background: #f0ad4e; }
|
||||
.mode-tag { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 4rpx; background: #4cd964; color: #fff; }
|
||||
.mode-tag { font-size: $font-size-xs; padding: 4rpx 12rpx; border-radius: 4rpx; background: #4cd964; color: #fff; }
|
||||
.mode-tag.offline { background: #ff9900; }
|
||||
|
||||
.btn-scan { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; margin-bottom: 20rpx; height: 100rpx; line-height: 100rpx; font-size: 32rpx; border-radius: 12rpx; }
|
||||
.btn-scan { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; margin-bottom: 20rpx; height: 100rpx; line-height: 100rpx; font-size: $font-size-lg; border-radius: 12rpx; }
|
||||
|
||||
.grid-item-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30rpx 0; }
|
||||
.grid-text { font-size: 32rpx; font-weight: bold; color: #333; margin-top: 16rpx; }
|
||||
.grid-desc { font-size: 26rpx; color: #999; }
|
||||
.info-bar { display: flex; justify-content: space-between; padding: 20rpx; font-size: 24rpx; color: #999; }
|
||||
.grid-text { font-size: $font-size-lg; font-weight: bold; color: #333; margin-top: 16rpx; }
|
||||
.grid-desc { font-size: $font-size-base; color: #999; }
|
||||
.info-bar { display: flex; justify-content: space-between; padding: 20rpx; font-size: $font-size-sm; color: #999; }
|
||||
|
||||
.btn-logout { margin-top: 20rpx; color: #666; font-size: 28rpx; background: #fff; height: 90rpx; line-height: 90rpx; }
|
||||
.btn-logout { margin-top: 20rpx; color: #666; font-size: $font-size-md; background: #fff; height: 90rpx; line-height: 90rpx; }
|
||||
</style>
|
||||
|
||||
+4
-4
@@ -434,7 +434,7 @@ export default {
|
||||
|
||||
// 单位文本
|
||||
.unit-text {
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
color: #666;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@@ -443,7 +443,7 @@ export default {
|
||||
.hazard-tag {
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 4rpx;
|
||||
font-size: 12px;
|
||||
font-size: $font-size-xs;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -455,7 +455,7 @@ export default {
|
||||
|
||||
.btn-sm {
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
@@ -476,7 +476,7 @@ export default {
|
||||
}
|
||||
|
||||
.scan-status-text {
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
|
||||
+3
-3
@@ -368,7 +368,7 @@ export default {
|
||||
|
||||
// 单位文本
|
||||
.unit-text {
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
color: #666;
|
||||
margin-left: 8px;
|
||||
}
|
||||
@@ -380,14 +380,14 @@ export default {
|
||||
|
||||
// 提示文本
|
||||
.hint-text {
|
||||
font-size: 12px;
|
||||
font-size: $font-size-xs;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
<view class="data-card-row"><text>入库时间</text><text class="val">{{ item.time }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 8px 16px;">
|
||||
<button class="btn btn-outline" style="width:100%;height:36px;font-size:12px;" @click="handleReset">重置筛选</button>
|
||||
<view class="filter-reset-area">
|
||||
<button class="btn btn-outline filter-reset-btn" @click="handleReset">重置筛选</button>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@@ -50,3 +50,17 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.filter-reset-area {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.filter-reset-btn {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -137,14 +137,14 @@ export default {
|
||||
|
||||
.login-title {
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
font-size: $font-size-xl;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@@ -164,7 +164,7 @@ export default {
|
||||
border-radius: 10px;
|
||||
padding: 0 16px;
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
.login-input::placeholder {
|
||||
@@ -178,7 +178,7 @@ export default {
|
||||
color: #1890ff;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 700;
|
||||
line-height: 48px;
|
||||
}
|
||||
@@ -188,14 +188,14 @@ export default {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 12px;
|
||||
font-size: $font-size-xs;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.login-version {
|
||||
padding-top: 24px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 11px;
|
||||
font-size: $font-size-xs;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,8 +42,7 @@
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">说明</text>
|
||||
<text class="value" style="font-size:12px;color:#999;">
|
||||
{{ scanMode === 'uniapp' ? '使用默认摄像头扫码' : scanMode === 'idata' ? '仅支持 iData 设备内置扫码' : '通用 Android PDA 设备' }}
|
||||
<text class="value value-desc">{{ scanMode === 'uniapp' ? '使用默认摄像头扫码' : scanMode === 'idata' ? '仅支持 iData 设备内置扫码' : '通用 Android PDA 设备' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -300,4 +299,9 @@ export default {
|
||||
gap: $spacing-sm;
|
||||
margin-top: $spacing-base;
|
||||
}
|
||||
|
||||
.value-desc {
|
||||
font-size: $font-size-xs;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -98,7 +98,22 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分组4：高级设置 -->
|
||||
<!-- 分组4：其他设置 -->
|
||||
<view class="settings-group">
|
||||
<view class="settings-item" @click="navigateTo('/pages/settings/other-settings')">
|
||||
<view class="s-icon" style="background:#f9f0ff;">
|
||||
<uni-icons type="font" size="20" color="#722ed1"></uni-icons>
|
||||
</view>
|
||||
<view class="s-text">
|
||||
<text class="s-title">其他设置</text>
|
||||
<text class="s-desc">字体大小、显示设置</text>
|
||||
</view>
|
||||
<text class="s-extra">{{ currentFontLabel }}</text>
|
||||
<uni-icons type="right" size="14" color="#cccccc"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分组5：高级设置 -->
|
||||
<view class="settings-group">
|
||||
<view class="settings-item" @click="navigateTo('/pages/settings/env-config')">
|
||||
<view class="s-icon" style="background:#fff7e6;">
|
||||
@@ -112,7 +127,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分组5：退出登录 -->
|
||||
<!-- 分组6：退出登录 -->
|
||||
<view class="settings-group">
|
||||
<view class="settings-item" @click="handleLogout">
|
||||
<view class="s-icon" style="background:#fff1f0;">
|
||||
@@ -136,15 +151,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { mapGetters, mapGetters as mapFontGetters } from 'vuex'
|
||||
import { api } from '@/api'
|
||||
export default {
|
||||
computed: {
|
||||
// 检查设备是否已配置（从 Vuex store 获取）
|
||||
...mapGetters('print', ['hasSavedConfig']),
|
||||
...mapGetters('user', ['enterpriseName', 'enterpriseInfo']),
|
||||
// 从 Vuex 读取字体标签
|
||||
...mapFontGetters('font', ['fontScaleLabel']),
|
||||
deviceConfigured() {
|
||||
return this.hasSavedConfig
|
||||
},
|
||||
|
||||
// 显示字体标签
|
||||
currentFontLabel() {
|
||||
return this.fontScaleLabel || '默认'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -164,6 +186,7 @@ export default {
|
||||
const enterpriseInfo = await this.$store.dispatch('user/getEnterpriseInfo')
|
||||
this.hospitalName = enterpriseInfo.fullEnterpriseName
|
||||
},
|
||||
|
||||
navigateTo(path) { uni.navigateTo({ url: path }) },
|
||||
handleLogout() {
|
||||
uni.showModal({
|
||||
@@ -277,7 +300,7 @@ export default {
|
||||
|
||||
.s-arrow {
|
||||
color: #cccccc;
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
|
||||
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<scroll-view class="page-body" scroll-y>
|
||||
<view class="settings-section">
|
||||
<!-- 字体大小调整 -->
|
||||
<view class="setting-card">
|
||||
<view class="card-header">
|
||||
<uni-icons type="font" size="20" color="#722ed1"></uni-icons>
|
||||
<text class="card-title">字体大小</text>
|
||||
</view>
|
||||
|
||||
<view class="font-preview">
|
||||
<text class="preview-text" :style="{ fontSize: previewFontSize + 'px' }">预览文字大小</text>
|
||||
</view>
|
||||
|
||||
<view class="slider-section">
|
||||
<view class="slider-labels">
|
||||
<text class="label-small">小</text>
|
||||
<text class="label-current">{{ currentFontLabel }}</text>
|
||||
<text class="label-large">大</text>
|
||||
</view>
|
||||
|
||||
<slider
|
||||
class="font-slider"
|
||||
:value="sliderValue"
|
||||
:min="0"
|
||||
:max="3"
|
||||
:step="1"
|
||||
:activeColor="sliderColor"
|
||||
:backgroundColor="'#e8e8e8'"
|
||||
block-size="24"
|
||||
@change="onSliderChange"
|
||||
@changing="onSliderChanging"
|
||||
show-value
|
||||
/>
|
||||
|
||||
<view class="slider-values">
|
||||
<text class="value-text">100%</text>
|
||||
<text class="value-text">125%</text>
|
||||
<text class="value-text">150%</text>
|
||||
<text class="value-text">200%</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="font-actions">
|
||||
<button class="btn-reset" @click="resetToDefault">恢复默认</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<view class="tip-card">
|
||||
<uni-icons type="info" size="16" color="#fa8c16"></uni-icons>
|
||||
<text class="tip-text">调整后会立即生效，所有页面的文字大小都会同步变化</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 字体大小选项
|
||||
fontSizeOptions: [
|
||||
{ label: '默认', value: 1.0, desc: '标准字体', sliderIndex: 0 },
|
||||
{ label: '大', value: 1.25, desc: '放大 25%', sliderIndex: 1 },
|
||||
{ label: '较大', value: 1.5, desc: '放大 50%', sliderIndex: 2 },
|
||||
{ label: '最大', value: 2.0, desc: '放大 100%', sliderIndex: 3 }
|
||||
],
|
||||
previewFontSize: 16
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 从 Vuex 读取字体状态
|
||||
...mapState('font', ['fontScale']),
|
||||
...mapGetters('font', ['fontScaleLabel']),
|
||||
|
||||
// 当前滑块值
|
||||
sliderValue: {
|
||||
get() {
|
||||
const option = this.fontSizeOptions.find(opt => opt.value === this.fontScale)
|
||||
return option ? option.sliderIndex : 0
|
||||
},
|
||||
set(value) {
|
||||
// 滑块值改变时应用到 Vuex
|
||||
this.applyFontSetting(value)
|
||||
}
|
||||
},
|
||||
|
||||
// 当前字体标签
|
||||
currentFontLabel() {
|
||||
return this.fontScaleLabel
|
||||
},
|
||||
|
||||
// 滑块颜色
|
||||
sliderColor() {
|
||||
const colors = ['#52c41a', '#1890ff', '#fa8c16', '#f5222d']
|
||||
return colors[this.sliderValue] || '#1890ff'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 初始化时应用当前字体设置到预览
|
||||
this.updatePreview()
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 滑块值改变（拖动结束）
|
||||
*/
|
||||
onSliderChange(e) {
|
||||
const index = e.detail.value
|
||||
this.applyFontSetting(index)
|
||||
},
|
||||
|
||||
/**
|
||||
* 滑块值改变（拖动中）
|
||||
*/
|
||||
onSliderChanging(e) {
|
||||
const index = e.detail.value
|
||||
const option = this.fontSizeOptions[index]
|
||||
if (option) {
|
||||
// 拖动中只更新预览，不实际应用
|
||||
this.previewFontSize = 16 * option.value
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 应用字体设置到 Vuex
|
||||
*/
|
||||
applyFontSetting(sliderIndex) {
|
||||
const option = this.fontSizeOptions[sliderIndex]
|
||||
if (!option) return
|
||||
|
||||
// 通过 Vuex action 设置字体
|
||||
this.$store.dispatch('font/setFontScale', {
|
||||
scale: option.value,
|
||||
label: option.label
|
||||
})
|
||||
|
||||
// 提示用户
|
||||
uni.showToast({
|
||||
title: `已设置为${option.label}`,
|
||||
icon: 'success',
|
||||
duration: 1500
|
||||
})
|
||||
|
||||
this.updatePreview()
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新预览字体大小
|
||||
*/
|
||||
updatePreview() {
|
||||
// 基准字体大小 16px，根据缩放比例计算预览大小
|
||||
this.previewFontSize = 16 * this.fontScale
|
||||
},
|
||||
|
||||
/**
|
||||
* 恢复默认设置
|
||||
*/
|
||||
resetToDefault() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要恢复默认字体大小吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 通过 Vuex action 重置字体
|
||||
this.$store.dispatch('font/resetFontScale')
|
||||
|
||||
uni.showToast({
|
||||
title: '已恢复默认',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
this.updatePreview()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.settings-section {
|
||||
padding: $spacing-md;
|
||||
}
|
||||
|
||||
.setting-card {
|
||||
background: #ffffff;
|
||||
border-radius: $border-radius-md;
|
||||
padding: $spacing-lg;
|
||||
margin-bottom: $spacing-base;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
.card-title {
|
||||
font-size: $font-size-md;
|
||||
color: $text-primary;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.font-preview {
|
||||
background: #f9f9f9;
|
||||
border-radius: $border-radius-sm;
|
||||
padding: $spacing-lg;
|
||||
text-align: center;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
.preview-text {
|
||||
color: $text-primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-section {
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
.slider-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: $spacing-sm;
|
||||
|
||||
.label-small,
|
||||
.label-large {
|
||||
font-size: $font-size-sm;
|
||||
color: $text-placeholder;
|
||||
}
|
||||
|
||||
.label-current {
|
||||
font-size: $font-size-md;
|
||||
color: $primary-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.font-slider {
|
||||
margin: $spacing-sm 0;
|
||||
}
|
||||
|
||||
.slider-values {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 $spacing-xs;
|
||||
|
||||
.value-text {
|
||||
font-size: $font-size-xs;
|
||||
color: $text-placeholder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.font-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.btn-reset {
|
||||
background: #fff;
|
||||
color: $text-secondary;
|
||||
border: 1px solid $border-light;
|
||||
border-radius: $border-radius-sm;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
font-size: $font-size-sm;
|
||||
line-height: 1.5;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip-card {
|
||||
background: #fff7e6;
|
||||
border-radius: $border-radius-sm;
|
||||
padding: $spacing-md;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-sm;
|
||||
|
||||
.tip-text {
|
||||
font-size: $font-size-sm;
|
||||
color: #d48806;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -46,7 +46,7 @@ export default {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
font-size: $font-size-lg;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
@@ -66,12 +66,12 @@ export default {
|
||||
justify-content: space-between;
|
||||
|
||||
.item-name {
|
||||
font-size: 15px;
|
||||
font-size: $font-size-md;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.item-code {
|
||||
font-size: 14px;
|
||||
font-size: $font-size-base;
|
||||
color: #999999;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@@ -157,14 +157,16 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
.device-item, .service-item, .char-item {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.mac {
|
||||
font-size: 12px;
|
||||
font-size: $font-size-sm;
|
||||
color: gray;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
<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>
|
||||
@@ -271,7 +271,7 @@ export default {
|
||||
}
|
||||
|
||||
.type-modal-close {
|
||||
font-size: 18px;
|
||||
font-size: $font-size-lg;
|
||||
color: $text-placeholder;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
@@ -327,7 +327,7 @@ export default {
|
||||
align-items: center;
|
||||
}
|
||||
.data-card-toggle {
|
||||
font-size: 12px;
|
||||
font-size: $font-size-xs;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -338,7 +338,7 @@ export default {
|
||||
.data-card-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-size: $font-size-xs;
|
||||
&.orange {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
|
||||
@@ -184,14 +184,14 @@ export default {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.label-toggle {
|
||||
font-size: 12px;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: 400;
|
||||
opacity: 0.9;
|
||||
}
|
||||
@@ -211,24 +211,24 @@ export default {
|
||||
}
|
||||
.label-section-title {
|
||||
padding: 10px 0 6px;
|
||||
font-size: 12px;
|
||||
font-size: $font-size-xs;
|
||||
font-weight: 600;
|
||||
color: $primary-color;
|
||||
border-bottom: 1px solid $border-light;
|
||||
margin-bottom: 4px;
|
||||
&:first-child { padding-top: 0; }
|
||||
}
|
||||
.label-key { color: $text-secondary; font-size: 13px; }
|
||||
.label-val { color: $text-primary; font-size: 13px; font-weight: 500; }
|
||||
.label-key { color: $text-secondary; font-size: $font-size-base; }
|
||||
.label-val { color: $text-primary; font-size: $font-size-base; font-weight: 500; }
|
||||
.label-code {
|
||||
font-size: 11px !important;
|
||||
font-size: $font-size-xs !important;
|
||||
word-break: break-all;
|
||||
text-align: right;
|
||||
max-width: 60%;
|
||||
}
|
||||
.label-reprint {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-size: $font-size-xl;
|
||||
font-weight: 700;
|
||||
color: $danger-color;
|
||||
margin-top: 8px;
|
||||
|
||||
@@ -438,7 +438,7 @@ export default {
|
||||
|
||||
.btn-sm {
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
font-size: $font-size-base;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
@@ -457,7 +457,7 @@ export default {
|
||||
|
||||
text {
|
||||
margin-left: 4px;
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
+3
-1
@@ -10,6 +10,7 @@ import sync from './modules/sync'
|
||||
import print from './modules/print'
|
||||
import scale from './modules/scale'
|
||||
import scan from './modules/scan'
|
||||
import font from './modules/font'
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules: {
|
||||
@@ -18,7 +19,8 @@ export default new Vuex.Store({
|
||||
sync,
|
||||
print,
|
||||
scale,
|
||||
scan
|
||||
scan,
|
||||
font
|
||||
},
|
||||
strict: process.env.NODE_ENV !== 'production'
|
||||
})
|
||||
@@ -0,0 +1,184 @@
|
||||
export default {
|
||||
namespaced: true,
|
||||
|
||||
state: {
|
||||
// 字体缩放比例：1.0=默认, 1.25=大, 1.5=较大, 2.0=最大
|
||||
fontScale: 1.0,
|
||||
// 字体大小标签
|
||||
fontScaleLabel: '默认'
|
||||
},
|
||||
|
||||
mutations: {
|
||||
/**
|
||||
* 设置字体缩放比例
|
||||
* @param {Object} state - Vuex state
|
||||
* @param {Object} payload - { scale: number, label: string }
|
||||
*/
|
||||
SET_FONT_SCALE(state, payload) {
|
||||
state.fontScale = payload.scale
|
||||
state.fontScaleLabel = payload.label
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
/**
|
||||
* 初始化字体设置
|
||||
* 从本地存储读取用户设置，如果没有则使用默认值
|
||||
*/
|
||||
initFontScale({ commit }) {
|
||||
try {
|
||||
// 优先读取用户手动设置
|
||||
const savedFontSize = uni.getStorageSync('userFontScale')
|
||||
|
||||
if (savedFontSize) {
|
||||
const fontLabels = {
|
||||
1.0: '默认',
|
||||
1.25: '大',
|
||||
1.5: '较大',
|
||||
2.0: '最大'
|
||||
}
|
||||
|
||||
const label = fontLabels[savedFontSize] || '自定义'
|
||||
commit('SET_FONT_SCALE', { scale: savedFontSize, label })
|
||||
|
||||
console.log('[Vuex字体] 初始化成功，使用用户设置:', savedFontSize)
|
||||
} else {
|
||||
// 读取系统自动检测的字体缩放
|
||||
const systemScale = uni.getStorageSync('fontScale') || 1.0
|
||||
|
||||
const fontLabels = {
|
||||
1.0: '默认',
|
||||
1.25: '大',
|
||||
1.5: '较大',
|
||||
2.0: '最大'
|
||||
}
|
||||
|
||||
const label = fontLabels[systemScale] || '跟随系统'
|
||||
commit('SET_FONT_SCALE', { scale: systemScale, label })
|
||||
|
||||
console.log('[Vuex字体] 初始化成功，使用系统设置:', systemScale)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[Vuex字体] 初始化失败:', error)
|
||||
commit('SET_FONT_SCALE', { scale: 1.0, label: '默认' })
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置字体缩放
|
||||
* @param {Object} param - { commit, dispatch }
|
||||
* @param {Object} payload - { scale: number, label: string }
|
||||
*/
|
||||
setFontScale({ commit, dispatch }, payload) {
|
||||
try {
|
||||
// 更新 Vuex state
|
||||
commit('SET_FONT_SCALE', payload)
|
||||
|
||||
// 持久化到本地存储
|
||||
uni.setStorageSync('userFontScale', payload.scale)
|
||||
|
||||
console.log('[Vuex字体] 字体已设置为:', payload.label, '(', payload.scale, ')')
|
||||
|
||||
// 应用字体变化到 DOM
|
||||
dispatch('applyFontScale', payload.scale)
|
||||
} catch (error) {
|
||||
console.error('[Vuex字体] 设置失败:', error)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 应用字体缩放到 DOM
|
||||
* 直接操作根元素字体大小，使所有 rem 单位自动缩放
|
||||
*/
|
||||
applyFontScale(_, scale) {
|
||||
const rootFontSize = Math.round(16 * scale * 100) / 100 // 16px 基准
|
||||
|
||||
console.log(`[Vuex字体] 应用字体缩放: ${rootFontSize}px (scale=${scale})`)
|
||||
|
||||
// #ifdef H5 || APP-PLUS
|
||||
try {
|
||||
// 设置 document.documentElement
|
||||
if (typeof document !== 'undefined' && document.documentElement) {
|
||||
document.documentElement.style.fontSize = rootFontSize + 'px'
|
||||
console.log('[Vuex字体] ✓ documentElement.fontSize 已设置为', rootFontSize + 'px')
|
||||
}
|
||||
|
||||
// 设置所有 page 元素
|
||||
if (typeof document !== 'undefined') {
|
||||
const pages = document.querySelectorAll('page')
|
||||
if (pages.length > 0) {
|
||||
pages.forEach(p => p.style.fontSize = rootFontSize + 'px')
|
||||
console.log('[Vuex字体] ✓ 已设置', pages.length, '个 page 元素')
|
||||
}
|
||||
|
||||
// 设置 body
|
||||
if (document.body) {
|
||||
document.body.style.fontSize = rootFontSize + 'px'
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[Vuex字体] DOM操作失败:', e)
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
// 广播到所有 webview，确保已打开的页面也更新字体
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const allWebviews = plus.webview.all()
|
||||
let count = 0
|
||||
allWebviews.forEach(webview => {
|
||||
try {
|
||||
const fontSize = rootFontSize + 'px'
|
||||
webview.evalJS(`
|
||||
if (document.documentElement) document.documentElement.style.fontSize = '${fontSize}';
|
||||
if (document.body) document.body.style.fontSize = '${fontSize}';
|
||||
document.querySelectorAll('page').forEach(function(p){ p.style.fontSize = '${fontSize}'; });
|
||||
`)
|
||||
count++
|
||||
} catch (e2) {}
|
||||
})
|
||||
console.log(`[Vuex字体] 已广播到 ${count}/${allWebviews.length} 个webview`)
|
||||
} catch (e) {
|
||||
console.warn('[Vuex字体] 广播失败:', e)
|
||||
}
|
||||
}, 200)
|
||||
// #endif
|
||||
|
||||
// 保存到本地存储，以便其他页面读取
|
||||
uni.setStorageSync('fontScale', scale)
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置字体为默认大小
|
||||
*/
|
||||
resetFontScale({ commit, dispatch }) {
|
||||
try {
|
||||
// 清除用户设置
|
||||
uni.removeStorageSync('userFontScale')
|
||||
|
||||
// 更新 Vuex state
|
||||
commit('SET_FONT_SCALE', { scale: 1.0, label: '默认' })
|
||||
|
||||
// 应用默认字体
|
||||
dispatch('applyFontScale', 1.0)
|
||||
|
||||
console.log('[Vuex字体] 已恢复默认字体大小')
|
||||
} catch (error) {
|
||||
console.error('[Vuex字体] 重置失败:', error)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getters: {
|
||||
/**
|
||||
* 获取当前字体缩放比例
|
||||
*/
|
||||
fontScale: state => state.fontScale,
|
||||
|
||||
/**
|
||||
* 获取当前字体大小标签
|
||||
*/
|
||||
fontScaleLabel: state => state.fontScaleLabel
|
||||
}
|
||||
}
|
||||
+15
-9
@@ -7,6 +7,12 @@ page {
|
||||
font-size: $font-size-base;
|
||||
color: $text-primary;
|
||||
line-height: 1.5;
|
||||
|
||||
/*
|
||||
* 使用 rem 方案后，不需要设置固定的 font-size
|
||||
* 所有元素使用 rem 单位，会自动相对于根字体大小计算
|
||||
* 根字体大小由 JavaScript 动态设置（document.documentElement.style.fontSize）
|
||||
*/
|
||||
}
|
||||
|
||||
/* 清除默认样式 */
|
||||
@@ -92,7 +98,7 @@ button {
|
||||
|
||||
.back-btn {
|
||||
margin-right: 8px;
|
||||
font-size: 20px;
|
||||
font-size: $font-size-xl;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
@@ -542,7 +548,7 @@ button {
|
||||
flex-shrink: 0;
|
||||
|
||||
.iconfont {
|
||||
font-size: 22px;
|
||||
font-size: $font-size-xl;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -574,7 +580,7 @@ button {
|
||||
|
||||
.ledger-arrow {
|
||||
color: #cccccc;
|
||||
font-size: 16px;
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
/* 设置页面 */
|
||||
@@ -601,7 +607,7 @@ button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-size: $font-size-xl;
|
||||
}
|
||||
|
||||
.settings-name {
|
||||
@@ -643,7 +649,7 @@ button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-size: $font-size-lg;
|
||||
background: #f0f0f0;
|
||||
margin-right: $spacing-base;
|
||||
flex-shrink: 0;
|
||||
@@ -674,7 +680,7 @@ button {
|
||||
|
||||
.s-arrow {
|
||||
color: #cccccc;
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
@@ -708,7 +714,7 @@ button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-size: $font-size-lg;
|
||||
background: #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -732,7 +738,7 @@ button {
|
||||
|
||||
.sub-menu-arrow {
|
||||
color: #cccccc;
|
||||
font-size: 14px;
|
||||
font-size: $font-size-md;
|
||||
}
|
||||
|
||||
/* 设备管理 */
|
||||
@@ -756,7 +762,7 @@ button {
|
||||
}
|
||||
|
||||
.device-icon {
|
||||
font-size: 18px;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.device-title {
|
||||
|
||||
+22
-9
@@ -1,3 +1,25 @@
|
||||
// ============================================
|
||||
// 📌 字体大小 - 使用 rem 单位（推荐方案）
|
||||
// ============================================
|
||||
// 核心原理：
|
||||
// 1. rem 相对于根元素（page/html）的字体大小计算
|
||||
// 2. 只需要修改根字体大小，所有 rem 会自动缩放
|
||||
// 3. 基准：1rem = 16px（浏览器默认值）
|
||||
// 4. 字体缩放时，修改 document.documentElement.style.fontSize 即可
|
||||
|
||||
// 基础字号（基于 16px 基准）
|
||||
$font-size-xs: 0.625rem; // 10px / 16px
|
||||
$font-size-sm: 0.6875rem; // 11px / 16px
|
||||
$font-size-base: 0.8125rem; // 13px / 16px
|
||||
$font-size-md: 0.875rem; // 14px / 16px
|
||||
$font-size-lg: 1rem; // 16px / 16px
|
||||
$font-size-xl: 1.25rem; // 20px / 16px
|
||||
$font-size-xxl: 1.5rem; // 24px / 16px
|
||||
|
||||
// ============================================
|
||||
// 📌 SCSS 变量（主题、颜色等）
|
||||
// ============================================
|
||||
|
||||
// 主题色
|
||||
$primary-color: #1890ff;
|
||||
$success-color: #52c41a;
|
||||
@@ -43,15 +65,6 @@ $border-radius-md: 10px;
|
||||
$border-radius-lg: 14px;
|
||||
$border-radius-xl: 20px;
|
||||
|
||||
// 字体大小
|
||||
$font-size-xs: 10px;
|
||||
$font-size-sm: 11px;
|
||||
$font-size-base: 13px;
|
||||
$font-size-md: 14px;
|
||||
$font-size-lg: 16px;
|
||||
$font-size-xl: 20px;
|
||||
$font-size-xxl: 24px;
|
||||
|
||||
// 间距
|
||||
$spacing-xs: 4px;
|
||||
$spacing-sm: 8px;
|
||||
|
||||
@@ -39,9 +39,9 @@ $uni-border-color:#c8c7cc;
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
$uni-font-size-sm:0.75rem;
|
||||
$uni-font-size-base:0.875rem;
|
||||
$uni-font-size-lg:1rem;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
@@ -69,11 +69,11 @@ $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-font-size-title:1.25rem;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-font-size-subtitle:1.625rem;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
$uni-font-size-paragraph:0.9375rem;
|
||||
|
||||
// 导入自定义变量文件
|
||||
@import '@/styles/variables.scss';
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<slot v-else name="decoration"></slot>
|
||||
|
||||
<view class="uni-section-header__content">
|
||||
<text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
|
||||
<text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
|
||||
<text :style="titleFontSize ? {'font-size':titleFontSize,'color':titleColor} : {'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
|
||||
<text v-if="subTitle" :style="subTitleFontSize ? {'font-size':subTitleFontSize,'color':subTitleColor} : {'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
|
||||
</view>
|
||||
|
||||
<view class="uni-section-header__slot-right">
|
||||
@@ -53,7 +53,7 @@
|
||||
},
|
||||
titleFontSize: {
|
||||
type: String,
|
||||
default: '14px'
|
||||
default: ''
|
||||
},
|
||||
titleColor:{
|
||||
type: String,
|
||||
@@ -65,7 +65,7 @@
|
||||
},
|
||||
subTitleFontSize: {
|
||||
type: String,
|
||||
default: '12px'
|
||||
default: ''
|
||||
},
|
||||
subTitleColor: {
|
||||
type: String,
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* 字体大小工具函数
|
||||
* 提供响应式字体大小计算能力
|
||||
*/
|
||||
|
||||
const FONT_BASE = 16 // Android 默认字体大小基准
|
||||
const MIN_SCALE = 0.85
|
||||
const MAX_SCALE = 1.45
|
||||
|
||||
/**
|
||||
* 获取当前字体缩放比例
|
||||
* @returns {number} 缩放比例 (0.85 ~ 1.45)
|
||||
*/
|
||||
function getFontScale() {
|
||||
if (getApp().globalData && getApp().globalData.fontScale) {
|
||||
return getApp().globalData.fontScale
|
||||
}
|
||||
|
||||
const stored = uni.getStorageSync('fontScale')
|
||||
if (stored) {
|
||||
return parseFloat(stored)
|
||||
}
|
||||
|
||||
return 1
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算响应式字体大小
|
||||
* @param {number} basePx - 基础字体大小(px)
|
||||
* @param {boolean} round - 是否四舍五入取整
|
||||
* @returns {string} - 如 "15px" 或 "14.5px"
|
||||
*/
|
||||
function responsiveSize(basePx, round = true) {
|
||||
const scale = getFontScale()
|
||||
const size = basePx * scale
|
||||
|
||||
if (round) {
|
||||
return `${Math.round(size)}px`
|
||||
}
|
||||
return `${Math.round(size * 10) / 10}px`
|
||||
}
|
||||
|
||||
export default {
|
||||
getFontScale,
|
||||
responsiveSize,
|
||||
|
||||
// 常用预设
|
||||
presets: {
|
||||
xs: () => responsiveSize(10),
|
||||
sm: () => responsiveSize(11),
|
||||
base: () => responsiveSize(13),
|
||||
md: () => responsiveSize(14),
|
||||
lg: () => responsiveSize(16),
|
||||
xl: () => responsiveSize(20),
|
||||
xxl: () => responsiveSize(24)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user