Explorar o código

feat: 消息中心 样式调整

lanceJiang hai 9 meses
pai
achega
e07e0a98d2
Modificáronse 1 ficheiros con 15 adicións e 2 borrados
  1. 15 2
      src/layout/components/Header/components/Message.vue

+ 15 - 2
src/layout/components/Header/components/Message.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-popover placement="bottom" :width="320" popper-style="padding: 0px;" trigger="click">
+	<el-popover placement="bottom-end" :width="320" popper-style="padding: 0px;" trigger="click">
 		<template #reference>
 			<div class="menu--message-trigger">
 				<el-tooltip :content="$t('le.message.txt')" effect="dark" placement="bottom">
@@ -27,7 +27,7 @@
 			</template>
 
 			<div class="flex items-center flex-start">
-				<el-radio-group v-model="activeTab">
+				<el-radio-group v-model="activeTab" class="radio-group">
 					<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>
@@ -241,6 +241,19 @@ onMounted(() => {
 		cursor: pointer;
 	}
 }
+.radio-group {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	.el-radio-button {
+		flex: 1;
+		&:deep(.el-radio-button__inner) {
+			width: 100%;
+			padding: 8px;
+		}
+	}
+}
 .avatar {
 	background-color: var(--el-color-primary);
 	.avatar-txt {