hookehuyr

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

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