hookehuyr

style(messages): 调整对话列表样式和布局

移除不必要的边距和固定高度,使布局更灵活
将 content-container 重命名为 content-container1 以保持命名一致性
...@@ -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;
......