|
@@ -5,6 +5,7 @@
|
|
|
</div>
|
|
|
<el-popover
|
|
|
placement="bottom-start"
|
|
|
+ :width="useVW(400)"
|
|
|
:show-arrow="false"
|
|
|
:virtual-ref="messageIcon"
|
|
|
trigger="click"
|
|
@@ -15,7 +16,17 @@
|
|
|
<span class="unread-count">{{ unReadMessages?.newCount || 0 }}</span>
|
|
|
<span>条消息</span>
|
|
|
</div>
|
|
|
- <div class="message-list"></div>
|
|
|
+ <div class="message-list">
|
|
|
+ <div class="flex message-row">
|
|
|
+ <div class="message-send-user">
|
|
|
+ <div class="user-name">陈晓明</div>
|
|
|
+ <div class="message-time">20:88:33</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1 message-content">
|
|
|
+ 啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<confirm-button
|
|
|
ok-text="收消息"
|
|
|
cancel-text="发消息"
|
|
@@ -29,9 +40,10 @@
|
|
|
<script setup lang="ts" name="Message">
|
|
|
import { reactive, ref } from 'vue'
|
|
|
import { ElPopover } from 'element-plus'
|
|
|
+import useVW from '@/hooks/useVW'
|
|
|
+import ConfirmButton from '@/components/common/ConfirmButton.vue'
|
|
|
import SvgIcon from '@/components/common/SvgIcon.vue'
|
|
|
import useMessageLoop from '@/hooks/useMessageLoop'
|
|
|
-import ConfirmButton from '../common/ConfirmButton.vue'
|
|
|
|
|
|
const messageIcon = ref<HTMLDivElement>()
|
|
|
|
|
@@ -73,11 +85,29 @@ const onSendMessage = () => {
|
|
|
}
|
|
|
}
|
|
|
.message-list {
|
|
|
+ border-bottom: $OnePixelLine;
|
|
|
.message-row {
|
|
|
padding: 10px 4px;
|
|
|
+ height: 52px;
|
|
|
+ font-weight: 500;
|
|
|
+ border-top: $OnePixelLine;
|
|
|
.message-send-user {
|
|
|
+ width: 49px;
|
|
|
+ margin-right: 0.5em;
|
|
|
+ font-size: $SmallFont;
|
|
|
+ .user-name {
|
|
|
+ text-align: justify;
|
|
|
+ text-align-last: justify;
|
|
|
+ }
|
|
|
}
|
|
|
.message-content {
|
|
|
+ word-break: break-all;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ font-size: $SmallFont;
|
|
|
}
|
|
|
}
|
|
|
}
|