@@ -313,7 +364,7 @@ messageList.value.forEach(item => {
-
+
-
- | 消息 ({{ messageNum }})
+
-
暂无未办消息，快去处理工作吧～
- | 消息 ({{ messageNum }})
+
-
-
- {{ time }}
-
+
+
@@ -469,12 +551,6 @@ messageList.value.forEach(item => {
align-items: center; /* 垂直居中 */
}
-.message-container {
- padding: 10px 50px 10px 50px; /* 上，右， 下，左 */
- display: flex;
- align-items: center; /* 垂直居中 */
-}
-
/* 调整下拉菜单的样式，确保它向上弹出 */
.el-dropdown-link:focus {
@@ -589,12 +665,7 @@ messageList.value.forEach(item => {
/* Firefox滑块和轨道颜色 */
}
-
-/* 添加相对定位，用于添加消息点 */
-.relative {
- position: relative;
-}
-
+/* 小红点 */
.dot {
position: absolute;
top: -2px;
@@ -605,72 +676,92 @@ messageList.value.forEach(item => {
border-radius: 50%;
}
-/* 整体样式 */
-.message {
- background: #0d84ff;
+/* 消息中心整体容器 */
+.message-container {
+ padding: 10px 50px 10px 50px; /* 上，右， 下，左 */
+ display: flex;
+ align-items: center; /* 垂直居中 */
+}
+/* 消息中心标题 */
+.message-title {
+ display: flex;
+ font-size: 16px;
+ color: black;
+
+ .divider {
+ align-items: flex-start;
+ gap: 36px;
+ align-self: stretch;
+ height: 20px;
+ border-left: 3px solid #266EFF;
+ }
}
/* 无消息的样式 */
.no-message {
text-align: center;
position: relative;
-}
-.no-message-text {
- position: absolute;
- top: 60%;
- left: 50%;
- /* 水平垂直居中 */
- transform: translate(-50%, -50%);
- /* 文字样式 */
- font-weight: bold;
- margin: 0;
- /* 可添加更多样式（如字体大小、阴影等） */
- font-size: 14px;
+ .no-message-text {
+ position: absolute;
+ top: 60%;
+ left: 50%;
+ /* 水平垂直居中 */
+ transform: translate(-50%, -50%);
+ /* 文字样式 */
+ font-weight: bold;
+ margin: 0;
+ /* 可添加更多样式（如字体大小、阴影等） */
+ font-size: 14px;
+ }
}
/* 有消息的样式 */
-
-.message-group {
- margin-bottom: 16px;
-}
.time-header {
font-size: 14px;
color: #666;
- margin-bottom: 8px;
-}
-.message-item {
display: flex;
align-items: center;
- margin-bottom: 12px;
- padding-bottom: 12px;
- border-bottom: 1px solid #eee;
+ gap: 8px;
}
-.message-content {
- flex: 1;
-}
-.message-tag {
- color: red;
- margin-right: 4px;
+
+.message-item {
+ height: 100px;
+ padding: 10px 10px 10px 10px;
+ border-radius: 4px;
+ border: 1px solid #E5E5E5;
+ background: #FCFEFF;
+ margin-bottom: 10px;
}
-.message-title {
+
+.message-card-title {
font-weight: bold;
margin-right: 4px;
}
+
+/* 圆点样式 */
+.red-dot {
+ width: 6px;
+ height: 6px;
+ margin-right: 9px;
+ border-radius: 50%;
+ background-color: red;
+}
+
.message-desc {
font-size: 13px;
color: #666;
- margin: 4px 0 0 0;
-}
-.view-btn {
- margin-right: 16px;
+ margin: 4px 0 15px 15px;
}
+
.message-time {
+ margin-left: auto;
font-size: 13px;
color: #999;
}
+
.view-all {
display: block;
margin: 0 auto 16px;
@@ -684,4 +775,5 @@ messageList.value.forEach(item => {
background-color: #CEE5FE;;
}
+
\ No newline at end of file
+ {{ time }}
-
- 查看全部
-
+
+
- {{ item.title }}
-
- {{ item.desc }}
+
+ 前往查看
-
+ 前往查看
+
+
+ {{ item.title }}
+
- {{ item.time }}
{{ item.time }}
+
+ {{ item.desc }}
+
+
+ {{ showAll ? '收起' : '查看全部' }}
+
+
+
+