update notice style

mock/notices.js

@@ -56,8 +56,8 @@ export default {
       id: '000000009',
       title: '任务名称',
       description: '任务需要在 2017-01-12 20:00 前启动',
-      extra: '马上到期',
-      status: 'urgent',
+      extra: '未开始',
+      status: 'todo',
       type: '待办',
     }, {
       id: '000000010',

src/components/NoticeIcon/NoticeList.js

@@ -29,7 +29,7 @@ export default function NoticeList({
                 className={styles.meta}
                 avatar={item.avatar ? <Avatar className={styles.avatar} src={item.avatar} /> : null}
                 title={
-                  <div>
+                  <div className={styles.title}>
                     {item.title}
                     <div className={styles.extra}>{item.extra}</div>
                   </div>

src/components/NoticeIcon/NoticeList.less

@@ -16,6 +16,7 @@
 
     .avatar {
       background: #fff;
+      margin-top: 4px;
     }
 
     &.read {
@@ -29,10 +30,7 @@
     }
     .title {
       font-weight: normal;
-      color: @text-color;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      margin-bottom: 8px;
     }
     .description {
       font-size: 12px;
@@ -48,6 +46,7 @@
       color: @text-color-secondary;
       font-weight: normal;
       margin-right: 0;
+      margin-top: -1.5px;
     }
   }
 }

src/components/NoticeIcon/demo/popover.md

@@ -55,13 +55,13 @@ ReactDOM.render(
         list={noticeData['通知']}
         title="通知"
         emptyText="你已查看所有通知"
-        emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
+        emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
       />
       <NoticeIcon.Tab
         list={noticeData['消息']}
         title="消息"
         emptyText="您已读完所有消息"
-        emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
+        emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
       />
       <NoticeIcon.Tab
         list={noticeData['待办']}

src/components/NoticeIcon/index.less

@@ -24,7 +24,7 @@
       text-align: center;
     }
     .ant-tabs-bar {
-      margin-bottom: 0;
+      margin-bottom: 4px;
     }
   }
 }

src/layouts/BasicLayout.js

@@ -122,9 +122,10 @@ class BasicLayout extends React.PureComponent {
       }
       if (newNotice.extra && newNotice.status) {
         const color = ({
+          todo: '',
           processing: 'blue',
           urgent: 'red',
-          doing: 'yellow',
+          doing: 'gold',
         })[newNotice.status];
         newNotice.extra = <Tag color={color}>{newNotice.extra}</Tag>;
       }
@@ -243,13 +244,13 @@ class BasicLayout extends React.PureComponent {
                     list={noticeData['通知']}
                     title="通知"
                     emptyText="你已查看所有通知"
-                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
+                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
                   />
                   <NoticeIcon.Tab
                     list={noticeData['消息']}
                     title="消息"
                     emptyText="您已读完所有消息"
-                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg"
+                    emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
                   />
                   <NoticeIcon.Tab
                     list={noticeData['待办']}