hookehuyr

feat(视图): 添加自适应字体和按钮尺寸功能

引入自适应工具函数并应用到标题、副标题和按钮样式
使用计算属性动态计算字体大小和内边距
...@@ -96,6 +96,7 @@ import AMapLoader from '@amap/amap-jsapi-loader' ...@@ -96,6 +96,7 @@ import AMapLoader from '@amap/amap-jsapi-loader'
96 96
97 import { mapAPI, mapAudioAPI } from '@/api/map.js' 97 import { mapAPI, mapAudioAPI } from '@/api/map.js'
98 import { isCheckedAPI, checkinAPI } from '@/api/checkin.js' 98 import { isCheckedAPI, checkinAPI } from '@/api/checkin.js'
99 +import { getAdaptiveFontSize, getAdaptivePadding } from '@/utils/tools.js'
99 100
100 const store = mainStore(); 101 const store = mainStore();
101 const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store); 102 const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store);
...@@ -103,10 +104,21 @@ const { audio_status, audio_entity, audio_list_status, audio_list_entity } = sto ...@@ -103,10 +104,21 @@ const { audio_status, audio_entity, audio_list_status, audio_list_entity } = sto
103 const $route = useRoute(); 104 const $route = useRoute();
104 const $router = useRouter(); 105 const $router = useRouter();
105 106
107 +// 动态字体大小计算属性
108 +const adaptiveTitleFontSize = computed(() => getAdaptiveFontSize(1.25));
109 +const adaptiveSubTitleFontSize = computed(() => getAdaptiveFontSize(0.85));
110 +const adaptiveButtonFontSize = computed(() => getAdaptiveFontSize(0.85));
111 +const adaptiveTabFontSize = computed(() => getAdaptiveFontSize(0.95));
112 +
113 +// 动态按钮尺寸计算属性
114 +const adaptiveButtonWidth = computed(() => getAdaptiveFontSize(3)); // 基础宽度3rem
115 +const adaptiveButtonHeight = computed(() => getAdaptiveFontSize(1.5)); // 基础高度1.5rem
116 +const adaptiveButtonPadding = computed(() => getAdaptivePadding(0.5)); // 基础内边距0.5rem
117 +
106 const themeVars = ref({ 118 const themeVars = ref({
107 swipeIndicatorInactiveBackground: '#fff', 119 swipeIndicatorInactiveBackground: '#fff',
108 swipeIndicatorMargin: '1.5rem', 120 swipeIndicatorMargin: '1.5rem',
109 - tabFontSize: '0.95rem', 121 + tabFontSize: adaptiveTabFontSize,
110 }); 122 });
111 123
112 const props = defineProps({ 124 const props = defineProps({
...@@ -652,23 +664,26 @@ const checkIn = async () => { // 打卡 ...@@ -652,23 +664,26 @@ const checkIn = async () => { // 打卡
652 // justify-content: space-between; 664 // justify-content: space-between;
653 // align-items: center; 665 // align-items: center;
654 .info-title { 666 .info-title {
655 - font-size: 1.25rem; 667 + font-size: v-bind(adaptiveTitleFontSize);
656 margin-bottom: 0.5rem; 668 margin-bottom: 0.5rem;
657 } 669 }
658 .info-sub-title { 670 .info-sub-title {
659 - font-size: 0.85rem; 671 + font-size: v-bind(adaptiveSubTitleFontSize);
660 color: #A0A8B1; 672 color: #A0A8B1;
661 line-height: 1.75; 673 line-height: 1.75;
662 } 674 }
663 .info-btn { 675 .info-btn {
664 - width: 3rem; 676 + width: v-bind(adaptiveButtonWidth);
665 - height: 1.5rem; 677 + height: v-bind(adaptiveButtonHeight);
678 + padding: v-bind(adaptiveButtonPadding);
666 border: 1px solid #DD7850; 679 border: 1px solid #DD7850;
667 color: #DD7850; 680 color: #DD7850;
668 border-radius: 0.8rem; 681 border-radius: 0.8rem;
669 - font-size: 0.85rem; 682 + font-size: v-bind(adaptiveButtonFontSize);
670 - text-align: center; 683 + display: flex;
671 - line-height: 1.5rem; 684 + align-items: center;
685 + justify-content: center;
686 + box-sizing: border-box;
672 } 687 }
673 } 688 }
674 .info-content { 689 .info-content {
......