hookehuyr

fix(检查页面): 调整按钮宽度和内边距样式

将按钮宽度改为自动适应内容,调整内边距计算方式并只设置左右padding
添加最小宽度和禁止文字换行以保证美观
......@@ -111,9 +111,9 @@ const adaptiveButtonFontSize = computed(() => getAdaptiveFontSize(0.85));
const adaptiveTabFontSize = computed(() => getAdaptiveFontSize(0.95));
// 动态按钮尺寸计算属性
const adaptiveButtonWidth = computed(() => getAdaptiveFontSize(3)); // 基础宽度3rem
const adaptiveButtonWidth = computed(() => 'auto'); // 自动宽度,根据内容调整
const adaptiveButtonHeight = computed(() => getAdaptiveFontSize(1.5)); // 基础高度1.5rem
const adaptiveButtonPadding = computed(() => getAdaptivePadding(0.5)); // 基础内边距0.5rem
const adaptiveButtonPadding = computed(() => getAdaptiveFontSize(0.8)); // 基础内边距0.8rem,使用字体大小计算
// 动态文章内容适配计算属性 - 仅适配iPad类似设备
const adaptiveContentFontSize = computed(() => {
......@@ -698,7 +698,7 @@ const checkIn = async () => { // 打卡
.info-btn {
width: v-bind(adaptiveButtonWidth);
height: v-bind(adaptiveButtonHeight);
padding: v-bind(adaptiveButtonPadding);
padding: 0 v-bind(adaptiveButtonPadding); // 只设置左右padding,保持美观
border: 1px solid #DD7850;
color: #DD7850;
border-radius: 0.8rem;
......@@ -707,6 +707,8 @@ const checkIn = async () => { // 打卡
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: calc(v-bind(adaptiveButtonHeight) + 2 * v-bind(adaptiveButtonPadding)); // 最小宽度包含padding
white-space: nowrap; // 防止文字换行
}
}
.info-content {
......