style(messages): 调整对话列表样式和布局
移除不必要的边距和固定高度,使布局更灵活 将 content-container 重命名为 content-container1 以保持命名一致性
Showing
1 changed file
with
4 additions
and
7 deletions
| ... | @@ -41,7 +41,7 @@ | ... | @@ -41,7 +41,7 @@ |
| 41 | @scrolltolower="loadMore" @scroll="scroll" :lower-threshold="20" :enable-flex="false" | 41 | @scrolltolower="loadMore" @scroll="scroll" :lower-threshold="20" :enable-flex="false" |
| 42 | :scroll-top="scrollTop"> | 42 | :scroll-top="scrollTop"> |
| 43 | <view v-for="conversation in filteredConversations" :key="conversation.id" | 43 | <view v-for="conversation in filteredConversations" :key="conversation.id" |
| 44 | - class="conversation-item mt-2 mb-4 border-b border-gray-100 pb-2" | 44 | + class="conversation-item border-b border-gray-100 pb-2" |
| 45 | @click="onConversationClick(conversation)"> | 45 | @click="onConversationClick(conversation)"> |
| 46 | <view class="flex items-start"> | 46 | <view class="flex items-start"> |
| 47 | <view class="avatar-container flex-shrink-0"> | 47 | <view class="avatar-container flex-shrink-0"> |
| ... | @@ -53,7 +53,7 @@ | ... | @@ -53,7 +53,7 @@ |
| 53 | </view> | 53 | </view> |
| 54 | </view> | 54 | </view> |
| 55 | </view> | 55 | </view> |
| 56 | - <view class="content-container flex-1 min-w-0"> | 56 | + <view class="content-container1 flex-1 min-w-0"> |
| 57 | <view class="flex justify-between items-center mb-1"> | 57 | <view class="flex justify-between items-center mb-1"> |
| 58 | <text class="font-medium flex-1 mr-2 truncate">{{ conversation.name }}</text> | 58 | <text class="font-medium flex-1 mr-2 truncate">{{ conversation.name }}</text> |
| 59 | <view class="flex items-center flex-shrink-0"> | 59 | <view class="flex items-center flex-shrink-0"> |
| ... | @@ -109,7 +109,7 @@ import { getMessagesListAPI, getMessagesDetailAPI } from '@/api/chat' | ... | @@ -109,7 +109,7 @@ import { getMessagesListAPI, getMessagesDetailAPI } from '@/api/chat' |
| 109 | const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg' | 109 | const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg' |
| 110 | 110 | ||
| 111 | const scrollStyle = ref({ | 111 | const scrollStyle = ref({ |
| 112 | - height: 'calc(100vh - 500rpx)' | 112 | + height: 'auto' |
| 113 | }) | 113 | }) |
| 114 | 114 | ||
| 115 | // 滚动相关变量 | 115 | // 滚动相关变量 |
| ... | @@ -509,9 +509,7 @@ onUnmounted(() => { | ... | @@ -509,9 +509,7 @@ onUnmounted(() => { |
| 509 | 509 | ||
| 510 | /* 对话列表样式 */ | 510 | /* 对话列表样式 */ |
| 511 | .conversation-list { | 511 | .conversation-list { |
| 512 | - height: calc(100vh - 500rpx); | ||
| 513 | background: #ffffff; | 512 | background: #ffffff; |
| 514 | - overflow: hidden; | ||
| 515 | box-sizing: border-box; | 513 | box-sizing: border-box; |
| 516 | } | 514 | } |
| 517 | 515 | ||
| ... | @@ -524,7 +522,6 @@ onUnmounted(() => { | ... | @@ -524,7 +522,6 @@ onUnmounted(() => { |
| 524 | padding: 24rpx 20rpx; | 522 | padding: 24rpx 20rpx; |
| 525 | border-bottom: 1rpx solid #f0f0f0; | 523 | border-bottom: 1rpx solid #f0f0f0; |
| 526 | transition: background-color 0.2s; | 524 | transition: background-color 0.2s; |
| 527 | - margin: 20rpx 0; | ||
| 528 | } | 525 | } |
| 529 | 526 | ||
| 530 | .avatar-container { | 527 | .avatar-container { |
| ... | @@ -533,7 +530,7 @@ onUnmounted(() => { | ... | @@ -533,7 +530,7 @@ onUnmounted(() => { |
| 533 | flex-shrink: 0; | 530 | flex-shrink: 0; |
| 534 | } | 531 | } |
| 535 | 532 | ||
| 536 | - .content-container { | 533 | + .content-container1 { |
| 537 | flex: 1; | 534 | flex: 1; |
| 538 | min-width: 0; | 535 | min-width: 0; |
| 539 | padding-left: 8rpx; | 536 | padding-left: 8rpx; | ... | ... |
-
Please register or login to post a comment