Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
map-demo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-09-21 01:33:25 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
e396f8ad37b5cc38721e93716534c96a2fe0c208
e396f8ad
1 parent
351b2305
feat(视图): 添加自适应字体和按钮尺寸功能
引入自适应工具函数并应用到标题、副标题和按钮样式 使用计算属性动态计算字体大小和内边距
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
23 additions
and
8 deletions
src/views/checkin/info.vue
src/views/checkin/info.vue
View file @
e396f8a
...
...
@@ -96,6 +96,7 @@ import AMapLoader from '@amap/amap-jsapi-loader'
import { mapAPI, mapAudioAPI } from '@/api/map.js'
import { isCheckedAPI, checkinAPI } from '@/api/checkin.js'
import { getAdaptiveFontSize, getAdaptivePadding } from '@/utils/tools.js'
const store = mainStore();
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
const $route = useRoute();
const $router = useRouter();
// 动态字体大小计算属性
const adaptiveTitleFontSize = computed(() => getAdaptiveFontSize(1.25));
const adaptiveSubTitleFontSize = computed(() => getAdaptiveFontSize(0.85));
const adaptiveButtonFontSize = computed(() => getAdaptiveFontSize(0.85));
const adaptiveTabFontSize = computed(() => getAdaptiveFontSize(0.95));
// 动态按钮尺寸计算属性
const adaptiveButtonWidth = computed(() => getAdaptiveFontSize(3)); // 基础宽度3rem
const adaptiveButtonHeight = computed(() => getAdaptiveFontSize(1.5)); // 基础高度1.5rem
const adaptiveButtonPadding = computed(() => getAdaptivePadding(0.5)); // 基础内边距0.5rem
const themeVars = ref({
swipeIndicatorInactiveBackground: '#fff',
swipeIndicatorMargin: '1.5rem',
tabFontSize:
'0.95rem'
,
tabFontSize:
adaptiveTabFontSize
,
});
const props = defineProps({
...
...
@@ -652,23 +664,26 @@ const checkIn = async () => { // 打卡
// justify-content: space-between;
// align-items: center;
.info-title {
font-size:
1.25rem
;
font-size:
v-bind(adaptiveTitleFontSize)
;
margin-bottom: 0.5rem;
}
.info-sub-title {
font-size:
0.85rem
;
font-size:
v-bind(adaptiveSubTitleFontSize)
;
color: #A0A8B1;
line-height: 1.75;
}
.info-btn {
width: 3rem;
height: 1.5rem;
width: v-bind(adaptiveButtonWidth);
height: v-bind(adaptiveButtonHeight);
padding: v-bind(adaptiveButtonPadding);
border: 1px solid #DD7850;
color: #DD7850;
border-radius: 0.8rem;
font-size: 0.85rem;
text-align: center;
line-height: 1.5rem;
font-size: v-bind(adaptiveButtonFontSize);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
}
.info-content {
...
...
Please
register
or
login
to post a comment