fix(检查页面): 调整按钮宽度和内边距样式
将按钮宽度改为自动适应内容,调整内边距计算方式并只设置左右padding 添加最小宽度和禁止文字换行以保证美观
Showing
1 changed file
with
5 additions
and
3 deletions
| ... | @@ -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 { | ... | ... |
-
Please register or login to post a comment