diff --git a/pages/feedback/index.wxml b/pages/feedback/index.wxml index 1e98e70..df9afa2 100644 --- a/pages/feedback/index.wxml +++ b/pages/feedback/index.wxml @@ -6,14 +6,16 @@ 填写课堂表现并保存到教学反馈记录。 - {{errorMessage}} - - - + + diff --git a/pages/feedback/index.wxss b/pages/feedback/index.wxss index e2ca290..71824fa 100644 --- a/pages/feedback/index.wxss +++ b/pages/feedback/index.wxss @@ -8,98 +8,99 @@ } .feedback-error-banner { + display: block; width: 100%; - align-items: center; - gap: 16rpx; - padding: 18rpx 20rpx; + padding: 20rpx; + border-color: rgba(209, 63, 58, 0.24); + background: #fff6f5; +} + +.feedback-error-content { + display: grid; + grid-template-columns: minmax(0, 1fr) 64rpx; + align-items: start; + width: 100%; + gap: 12rpx; } .feedback-error-actions { display: flex; - flex: none; align-items: center; - gap: 8rpx; + justify-content: flex-end; + width: 100%; + gap: 10rpx; + margin-top: 14rpx; } .feedback-error-message { display: block; - flex: 1; min-width: 0; + padding: 5rpx 0; + color: #9b2c27; font-size: 24rpx; - line-height: 1.4; + font-weight: 500; + line-height: 1.5; + word-break: normal; + overflow-wrap: break-word; } .feedback-error-close { display: flex; - flex: none; align-items: center; justify-content: center; - width: 44rpx; - height: 44rpx; + width: 64rpx; + min-width: 64rpx; + max-width: 64rpx; + height: 64rpx; margin: 0; padding: 0; border: 0; + border-radius: 12rpx; background: transparent; + line-height: 1; + transition: transform 100ms ease-out, background-color 100ms ease-out; } .feedback-error-close::after { border: 0; } -.feedback-error-close-icon { - position: relative; - width: 22rpx; - height: 22rpx; -} - -.feedback-error-close-icon::before, -.feedback-error-close-icon::after { - position: absolute; - top: 10rpx; - left: 1rpx; - width: 20rpx; - height: 2rpx; - border-radius: 1rpx; - background: #8e5b5b; - content: ''; -} - -.feedback-error-close-icon::before { - transform: rotate(45deg); -} - -.feedback-error-close-icon::after { - transform: rotate(-45deg); +.feedback-error-close:active { + transform: scale(0.94); + background: rgba(209, 63, 58, 0.08); } .feedback-error-copy, .feedback-error-retry { display: flex; - flex: none; align-items: center; justify-content: center; - height: 52rpx; + height: 62rpx; margin: 0; border: 0; - border-radius: 8rpx; + border-radius: 10rpx; font-size: 22rpx; + font-weight: 600; line-height: 1; + transition: transform 100ms ease-out, background-color 100ms ease-out; } .feedback-error-copy { - min-width: 68rpx; - padding: 0 10rpx; - background: transparent; + width: 128rpx; + min-width: 128rpx; + max-width: 128rpx; + padding: 0; + background: #f1f3f6; color: #6e6e73; - font-weight: 500; } .feedback-error-retry { - min-width: 92rpx; - padding: 0 16rpx; + width: 112rpx; + min-width: 112rpx; + max-width: 112rpx; + padding: 0; background: #007aff; color: #ffffff; - font-weight: 600; } .feedback-error-copy::after, @@ -113,6 +114,19 @@ opacity: 1; } +.feedback-error-copy:active, +.feedback-error-retry:active { + transform: scale(0.96); +} + +.feedback-error-copy:active { + background: #e5e5ea; +} + +.feedback-error-retry:active { + background: #006ee6; +} + .feedback-field, .content-field { padding: 24rpx; @@ -576,12 +590,18 @@ @media (prefers-reduced-motion: reduce) { .voice-button, .voice-state-actionable, - .voice-state-arrow { + .voice-state-arrow, + .feedback-error-copy, + .feedback-error-retry, + .feedback-error-close { transition: none; } .voice-button:active, - .voice-state-actionable:active { + .voice-state-actionable:active, + .feedback-error-copy:active, + .feedback-error-retry:active, + .feedback-error-close:active { transform: none; } }