fix(feedback): tighten error banner spacing

This commit is contained in:
zhangheng
2026-07-22 20:35:06 +08:00
parent 9f1d68cdd3
commit 4b5b91e766
2 changed files with 27 additions and 23 deletions

View File

@@ -9,10 +9,10 @@
<view class="feedback-error-content"> <view class="feedback-error-content">
<text class="feedback-error-message">{{errorMessage}}</text> <text class="feedback-error-message">{{errorMessage}}</text>
<button class="feedback-error-close" aria-label="关闭提示" bindtap="dismissError"> <button class="feedback-error-close" aria-label="关闭提示" bindtap="dismissError">
<icon type="clear" size="16" color="#8E5B5B" /> <icon type="clear" size="16" color="#9B2C27" />
</button> </button>
</view> </view>
<view class="feedback-error-actions"> <view class="feedback-error-actions {{errorRequestId ? '' : 'feedback-error-actions-single'}}">
<button wx:if="{{errorRequestId}}" class="feedback-error-copy" aria-label="复制问题编号" bindtap="copyRequestId">复制编号</button> <button wx:if="{{errorRequestId}}" class="feedback-error-copy" aria-label="复制问题编号" bindtap="copyRequestId">复制编号</button>
<button class="feedback-error-retry" loading="{{errorRetrying}}" disabled="{{errorRetrying}}" bindtap="retryError">重试</button> <button class="feedback-error-retry" loading="{{errorRetrying}}" disabled="{{errorRetrying}}" bindtap="retryError">重试</button>
</view> </view>

View File

@@ -10,36 +10,40 @@
.feedback-error-banner { .feedback-error-banner {
display: block; display: block;
width: 100%; width: 100%;
padding: 20rpx; padding: 16rpx;
border-color: rgba(209, 63, 58, 0.24); border-color: rgba(209, 63, 58, 0.24);
background: #fff6f5; background: #fff6f5;
} }
.feedback-error-content { .feedback-error-content {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr) 64rpx; grid-template-columns: minmax(0, 1fr) 56rpx;
align-items: start; align-items: start;
width: 100%; width: 100%;
gap: 12rpx; gap: 8rpx;
} }
.feedback-error-actions { .feedback-error-actions {
display: flex; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center; align-items: center;
justify-content: flex-end;
width: 100%; width: 100%;
gap: 10rpx; gap: 10rpx;
margin-top: 14rpx; margin-top: 8rpx;
}
.feedback-error-actions-single {
grid-template-columns: minmax(0, 1fr);
} }
.feedback-error-message { .feedback-error-message {
display: block; display: block;
min-width: 0; min-width: 0;
padding: 5rpx 0; padding: 4rpx 0;
color: #9b2c27; color: #9b2c27;
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.45;
word-break: normal; word-break: normal;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@@ -48,10 +52,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 64rpx; width: 56rpx;
min-width: 64rpx; min-width: 56rpx;
max-width: 64rpx; max-width: 56rpx;
height: 64rpx; height: 56rpx;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@@ -86,18 +90,18 @@
} }
.feedback-error-copy { .feedback-error-copy {
width: 128rpx; width: 100%;
min-width: 128rpx; min-width: 0;
max-width: 128rpx; max-width: none;
padding: 0; padding: 0;
background: #f1f3f6; background: rgba(155, 44, 39, 0.08);
color: #6e6e73; color: #9b2c27;
} }
.feedback-error-retry { .feedback-error-retry {
width: 112rpx; width: 100%;
min-width: 112rpx; min-width: 0;
max-width: 112rpx; max-width: none;
padding: 0; padding: 0;
background: #007aff; background: #007aff;
color: #ffffff; color: #ffffff;
@@ -120,7 +124,7 @@
} }
.feedback-error-copy:active { .feedback-error-copy:active {
background: #e5e5ea; background: rgba(155, 44, 39, 0.14);
} }
.feedback-error-retry:active { .feedback-error-retry:active {