fix: 优化消息弹框样式

src/components/MessageReminder/Complex/index.jsx

@@ -41,18 +41,23 @@ const MessageItem = props => {
       <div className={styles['complex-list__item--header']}>
         <span className={styles['order-number']}> 订单编号：{message.orderNo}</span>
         <span className={styles.time}>订单时间：{message.time}</span>
-        {readStatus === 0 ? (
-          <a className={styles['read-status']} onClick={() => onMark([item.id], item)}>
-            标记为已读
-          </a>
-        ) : (
-          <span className={styles['read-status--read']}>已读</span>
-        )}
+        <span className={styles['read-status']}>
+          {readStatus === 0 ? (
+            <a className={styles['read-status--un-read']} onClick={() => onMark([item.id], item)}>
+              标记为已读
+            </a>
+          ) : (
+            <span className={styles['read-status--read']}>已读</span>
+          )}
+        </span>
       </div>
       <div className={styles['complex-list__item--body']}>{goodList}</div>
       <div className={styles['complex-list__item--footer']}>
         <div className={styles.actions}>
-          <a onClick={() => viewDetail(message)} className={styles.notice}>
+          <a
+            onClick={() => viewDetail(message)}
+            className={[styles.notice, readStatus === 0 ? styles['un-read'] : ''].join(' ')}
+          >
             {message.title}，请查看
           </a>
         </div>

src/components/MessageReminder/Complex/index.less

@@ -71,9 +71,13 @@
         flex: 1;
         padding-right: 20px;
         color: #999;
+        word-break: break-all;
+        // white-space: nowrap
       }
 
       .read-status {
+        min-width: 80px;
+        text-align: right;
         &--read {
           color: #999;
         }
@@ -87,6 +91,11 @@
         line-height: 1.5;
         &__name {
           flex: 1;
+          word-break: break-all;
+        }
+        &__count {
+          min-width: 80px;
+          text-align: right;
         }
       }
     }
@@ -99,22 +108,25 @@
         width: 100%;
         margin-left: 20px;
         line-height: 40px;
-        a {
+        .notice {
           position: relative;
           display: block;
           flex: 1;
-          color: #ff1515;
+          color: #999;
           font-weight: 400;
-          &::before {
-            display: inline-block;
-            width: 6px;
-            height: 6px;
-            margin-top: 17px;
-            margin-right: 6px;
-            vertical-align: top;
-            background: #ff1515;
-            border-radius: 50%;
-            content: '';
+          &.un-read {
+            color: #ff1515;
+            &::before {
+              display: inline-block;
+              width: 6px;
+              height: 6px;
+              margin-top: 17px;
+              margin-right: 6px;
+              vertical-align: top;
+              background: #ff1515;
+              border-radius: 50%;
+              content: '';
+            }
           }
           &::after {
             position: absolute;