fix: 修复反馈页面 textarea 样式问题
- 将 NutUI textarea 替换为原生 textarea 组件 - 原生组件可完全控制 padding、字体等样式 - 手动实现字符计数功能(右下角显示) - 修复 help-center 图标名称和文案 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
2 changed files
with
16 additions
and
11 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2026-01-29 22:26:13 | 2 | * @Date: 2026-01-29 22:26:13 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2026-01-30 21:36:29 | 4 | + * @LastEditTime: 2026-01-31 14:40:32 |
| 5 | * @FilePath: /manulife-weapp/src/pages/feedback/index.vue | 5 | * @FilePath: /manulife-weapp/src/pages/feedback/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -26,17 +26,19 @@ | ... | @@ -26,17 +26,19 @@ |
| 26 | </view> | 26 | </view> |
| 27 | 27 | ||
| 28 | <!-- Description --> | 28 | <!-- Description --> |
| 29 | - <view class="bg-white rounded-[24rpx] p-[32rpx] mb-[24rpx] shadow-sm"> | 29 | + <view class="bg-white rounded-[24rpx] p-[28rpx] mb-[24rpx] shadow-sm"> |
| 30 | <view class="text-[30rpx] font-bold text-gray-900 mb-[24rpx]">问题描述</view> | 30 | <view class="text-[30rpx] font-bold text-gray-900 mb-[24rpx]">问题描述</view> |
| 31 | - <view class="border border-[#E5E7EB] rounded-[16rpx] overflow-hidden"> | 31 | + <view class="feedback-textarea-wrapper border border-[#E5E7EB] rounded-[16rpx] overflow-hidden relative"> |
| 32 | - <nut-textarea | 32 | + <textarea |
| 33 | v-model="description" | 33 | v-model="description" |
| 34 | placeholder="请详细描述您遇到的问题或建议..." | 34 | placeholder="请详细描述您遇到的问题或建议..." |
| 35 | - :rows="4" | 35 | + :maxlength="200" |
| 36 | - limit-show | 36 | + class="w-full h-[240rpx] p-[24rpx] text-[28rpx] leading-normal bg-transparent resize-none" |
| 37 | - max-length="200" | 37 | + auto-height |
| 38 | - class="!p-[24rpx] !text-[28rpx] !border-none w-full" | ||
| 39 | /> | 38 | /> |
| 39 | + <view class="absolute bottom-[16rpx] right-[24rpx] text-[22rpx] text-gray-400"> | ||
| 40 | + {{ description.length }}/200 | ||
| 41 | + </view> | ||
| 40 | </view> | 42 | </view> |
| 41 | </view> | 43 | </view> |
| 42 | 44 | ||
| ... | @@ -101,3 +103,6 @@ const onSubmit = () => { | ... | @@ -101,3 +103,6 @@ const onSubmit = () => { |
| 101 | }, 1000) | 103 | }, 1000) |
| 102 | } | 104 | } |
| 103 | </script> | 105 | </script> |
| 106 | + | ||
| 107 | +<style lang="less"> | ||
| 108 | +</style> | ... | ... |
| ... | @@ -23,7 +23,7 @@ | ... | @@ -23,7 +23,7 @@ |
| 23 | <text class="text-[32rpx] text-gray-900 font-medium">联系客服</text> | 23 | <text class="text-[32rpx] text-gray-900 font-medium">联系客服</text> |
| 24 | </view> | 24 | </view> |
| 25 | <view class="z-10"> | 25 | <view class="z-10"> |
| 26 | - <IconFont name="rectRight" class="text-gray-400" size="16" /> | 26 | + <IconFont name="rect-right" class="text-gray-400" size="16" /> |
| 27 | </view> | 27 | </view> |
| 28 | </view> | 28 | </view> |
| 29 | 29 | ||
| ... | @@ -139,8 +139,8 @@ const contactMethods = [ | ... | @@ -139,8 +139,8 @@ const contactMethods = [ |
| 139 | { | 139 | { |
| 140 | icon: 'service', | 140 | icon: 'service', |
| 141 | label: '微信公众号', | 141 | label: '微信公众号', |
| 142 | - value: '美乐爱觉', | 142 | + value: 'manulife', |
| 143 | - desc: '搜索"美乐爱觉"关注我们', | 143 | + desc: '搜索"manulife"关注我们', |
| 144 | color: '#16A34A' // green-600 | 144 | color: '#16A34A' // green-600 |
| 145 | }, | 145 | }, |
| 146 | { | 146 | { | ... | ... |
-
Please register or login to post a comment