feat: 消息中心 样式调整

src/layout/components/Header/components/Message.vue

@@ -15,9 +15,9 @@
 		<el-card :body-style="{ padding: '12px' }">
 			<template #header>
 				<div class="flex flex-pack-justify">
-					<span>消息中心</span>
+					<span class="font-bold">消息中心</span>
 					<span class="ml-2 cursor-pointer">
-						<el-popconfirm title="确定全部已读吗?" @confirm="handleReadAll" :width="'200'">
+						<el-popconfirm title="确定全部已读吗?" :width="'200'" @confirm="handleReadAll">
 							<template #reference>
 								<LeIcon class="text-rose-700" icon-class="icon-processInfo-broom-light" />
 							</template>
@@ -26,44 +26,35 @@
 				</div>
 			</template>
 
-			<div class="flex flex-align-pack-center">
+			<div class="flex items-center flex-start">
 				<el-radio-group v-model="activeTab">
 					<el-radio-button v-for="v of tabsConfig" :key="v.name" :label="v.name">{{ v.label }}({{ v.list.length }})</el-radio-button>
 				</el-radio-group>
 			</div>
 
 			<div class="mt-2">
-				<div class="message-container" style="height: 200px; overflow-y: auto">
+				<el-scrollbar class="message-list">
 					<template v-if="tabsConfig[activeTab].list.length">
-					<div class="message-list">
 						<div v-for="item of tabsConfig[activeTab].list" :key="item.id" class="message-item" @click="jumpMessageDetail(item)">
 							<div>
-								<el-avatar :style="{ backgroundColor: 'var(--el-color-primary)', color: 'var(--el-color-white)' }">
-									<span style="transform: scale(0.8)">
-										{{ item.createBy }}
-									</span>
+								<el-avatar class="avatar">
+									<le-text class="avatar-txt" :value="item.createBy"></le-text>
 								</el-avatar>
 							</div>
 							<div class="message-content ml-2">
 								<div class="message-title">
-									<el-tooltip :content="item.title" placement="top">
-										<span class="w-[160px] text-[16px] font-[600] sm:w-[180px] text-overflow_ellipsis" :title="item.title">{{ item.title }}</span>
-									</el-tooltip>
+									<le-text class="message-title-txt" :value="item.title"></le-text>
 									<span class="message-date">{{ formatTimeSecond(item.createTime) }}</span>
 								</div>
-								<el-tooltip :content="item.content" placement="top">
-									<span class="message-txt w-[220px] sm:w-[240px] text-overflow_ellipsis">{{ item.content }}</span>
-								</el-tooltip>
+								<le-text class="message-title-desc" :value="item.content"></le-text>
 							</div>
 						</div>
-					</div>
 					</template>
 					<template v-else>
 						<LeNoData />
 					</template>
-				</div>
-
-				<div v-if="tabsConfig[activeTab].list.length" class="view-more h-[50px] flex items-center justify-center">
+				</el-scrollbar>
+				<div v-if="tabsConfig[activeTab].list.length" class="view-more h-[36px] flex items-center justify-end">
 					<el-link type="primary" @click.stop="jumpMessageInfo"> 查看更多 >> </el-link>
 				</div>
 			</div>
@@ -198,10 +189,8 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .message-list {
-	display: flex;
-	flex-direction: column;
-	max-height: 390px;
 	overflow-y: auto;
+	height: 200px;
 	.message-item {
 		display: flex;
 		align-items: center;
@@ -222,6 +211,13 @@ onMounted(() => {
 				margin-bottom: 5px;
 				font-weight: 600;
 				color: var(--el-text-color-primary);
+				&-txt {
+					//width: 160px;
+					:deep(.el-text) {
+						color: var(--el-text-color-primary);
+						font-size: 16px;
+					}
+				}
 			}
 			.message-date {
 				font-size: 12px;
@@ -245,6 +241,16 @@ onMounted(() => {
 		cursor: pointer;
 	}
 }
+.avatar {
+	background-color: var(--el-color-primary);
+	.avatar-txt {
+		:deep(.el-text) {
+			color: var(--el-color-white);
+			// transform: scale(0.8);
+			font-size: 10px;
+		}
+	}
+}
 .menu--message-trigger {
 	height: 100%;
 }