fix: 优化消息弹框样式

src/components/MessageReminder/Complex/index.jsx

@@ -239,11 +239,13 @@ const Complex = props => {
       display: 'flex',
       flexWrap: 'wrap',
       padding: 0,
+      backgroundColor: '#f7f8f9',
     },
-    width: '1000px',
-    height: '600px',
+    wrapClassName: 'complex-modal',
+    width: '834px',
+    height: '650px',
     visible,
-    title: '消息提醒',
+    title: <span className="title-icon">消息提醒</span>,
     footer: null,
     onCancel: close,
   };
@@ -251,9 +253,9 @@ const Complex = props => {
   const TabRender = tabProps => {
     const { title, count = 0 } = tabProps;
     return (
-      <span>
+      <span className={styles['tab-render']}>
         {title}
-        <Badge size="small" overflowCount={999} count={count} />
+        <Badge overflowCount={999} count={count} />
       </span>
     );
   };
@@ -275,7 +277,7 @@ const Complex = props => {
             value="1"
             onChange={onReadStatusChange}
           >
-            已读读
+            已读
           </Checkbox>
         </div>
         <div className={styles['filter-box__actions']}>
@@ -290,7 +292,11 @@ const Complex = props => {
       <Tabs
         className={styles.tabs}
         activeKey={queryParams.type}
+        tabBarStyle={{
+          width: '150px',
+        }}
         tabPosition="left"
+        tabBarGutter={0}
         onChange={onTabChange}
       >
         <Tabs.TabPane tab={<TabRender title="订单消息" count={orderUnReadCount} />} key="0" />
@@ -310,22 +316,21 @@ const Complex = props => {
             )}
           </div>
         </Spin>
+        {dataTotal > 0 ? (
+          <div className={styles.pagination}>
+            <Pagination
+              onChange={onPageChange}
+              total={dataTotal}
+              showTotal={(total, range) => `第${range[0]}-${range[1]}条 /总共${total}条`}
+              showSizeChanger
+              pageSize={queryParams.pageSize}
+              current={queryParams.pageNo}
+            />
+          </div>
+        ) : (
+          ''
+        )}
       </div>
-
-      {dataTotal > 0 ? (
-        <div className={styles.pagination}>
-          <Pagination
-            onChange={onPageChange}
-            total={dataTotal}
-            showTotal={(total, range) => `第${range[0]}-${range[1]}条 /总共${total}条`}
-            showSizeChanger
-            pageSize={queryParams.pageSize}
-            current={queryParams.pageNo}
-          />
-        </div>
-      ) : (
-        ''
-      )}
     </Modal>
   );
 };

src/components/MessageReminder/Complex/index.less

 .tab-pane {
   flex: 1;
 }
+.tabs {
+  :global .ant-tabs-tab {
+    height: 48px;
+    line-height: 48px;
+    border-bottom: 1px solid #efefef;
+  }
+  :global .ant-tabs-ink-bar {
+    height: 40px !important;
+    margin-top: 4px !important;
+  }
+}
+
+.tab-render {
+  display: flex;
+  align-items: center;
+  :global .ant-badge {
+    margin-left: 5px;
+  }
+}
 
 .filter-box {
   display: flex;
@@ -9,9 +28,22 @@
   &__content {
     flex: 1;
   }
-  // &__actions{
+}
 
-  // }
+:global .complex-modal {
+  .ant-modal-header {
+    text-align: center;
+    background-color: #2d8cf0;
+  }
+  .ant-modal-title,
+  .ant-modal-close {
+    color: #fff;
+    .title-icon {
+      padding-left: 25px;
+      background: #1890ff url('https://img.lkbang.net/notice.94d42513.png') no-repeat 0 center;
+      background-size: 20px 20px;
+    }
+  }
 }
 
 .complex-list {
@@ -24,6 +56,7 @@
   }
   &__item {
     margin-top: 15px;
+    background: #fff;
     border: 1px solid #efefef;
     &--header {
       display: flex;
@@ -64,7 +97,7 @@
       .actions {
         display: flex;
         width: 100%;
-        margin-left: 10px;
+        margin-left: 20px;
         line-height: 40px;
         a {
           position: relative;
@@ -72,6 +105,17 @@
           flex: 1;
           color: #ff1515;
           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: '';
+          }
           &::after {
             position: absolute;
             top: 50%;

src/components/MessageReminder/Simple/index.less

@@ -129,6 +129,17 @@
           position: relative;
           display: block;
           color: #ff1515;
+          &::before {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            margin-top: 8px;
+            margin-right: 6px;
+            vertical-align: top;
+            background: #ff1515;
+            border-radius: 50%;
+            content: '';
+          }
           &::after {
             position: absolute;
             top: 50%;

src/pages/AfterSaleManage/index.jsx

@@ -319,7 +319,7 @@ const AfterSale = props => {
   const TabCountElement = ({ count, text }) => (
     <span>
       {text}
-      {count}
+      <span className="count">{count}</span>
     </span>
   );
 

src/pages/AfterSaleManage/index.less

@@ -41,4 +41,20 @@
   :global .ant-tabs-nav::before {
     display: none;
   }
+  :global .ant-tabs-tab {
+    .count {
+      padding-left: 5px;
+      color: #888;
+      transition: 0.3s ease;
+    }
+    &:hover .count {
+      color: #1890ff;
+      transition: 0.3s ease;
+    }
+  }
+  :global .ant-tabs-tab-active {
+    .count {
+      color: #1890ff;
+    }
+  }
 }