Improve details

src/components/NumberInfo/index.js

@@ -10,8 +10,19 @@ const NumberInfo = ({ theme, title, subTitle, total, subTotal, status, suffix, g
     })}
     {...rest}
   >
-    {title && <div className={styles.numberInfoTitle}>{title}</div>}
-    {subTitle && <div className={styles.numberInfoSubTitle}>{subTitle}</div>}
+    {title && (
+      <div className={styles.numberInfoTitle} title={typeof title === 'string' ? title : ''}>
+        {title}
+      </div>
+    )}
+    {subTitle && (
+      <div
+        className={styles.numberInfoSubTitle}
+        title={typeof subTitle === 'string' ? subTitle : ''}
+      >
+        {subTitle}
+      </div>
+    )}
     <div className={styles.numberInfoValue} style={gap ? { marginTop: gap } : null}>
       <span>
         {total}

src/locales/en-US.js

@@ -38,19 +38,19 @@ export default {
   'app.home.introduce': 'introduce',
   'app.analysis.test': 'Gongzhuan No.{no} shop',
   'app.analysis.introduce': 'Introduce',
-  'app.analysis.total-sales': 'total sales',
+  'app.analysis.total-sales': 'Total Sales',
   'app.analysis.day-sales': 'Day Sales',
   'app.analysis.visits': 'Visits',
   'app.analysis.visits-trend': 'Visits Trend',
   'app.analysis.visits-ranking': 'Visits Ranking',
   'app.analysis.day-visits': 'Day Visits',
-  'app.analysis.week': 'week ratio',
-  'app.analysis.day': 'day ratio',
+  'app.analysis.week': 'Week Ratio',
+  'app.analysis.day': 'Day Ratio',
   'app.analysis.payments': 'Payments',
   'app.analysis.conversion-rate': 'Conversion Rate',
   'app.analysis.operational-effect': 'Operational Effect',
   'app.analysis.sales-trend': 'Stores Sales Trend',
-  'app.analysis.sales-ranking': 'sales ranking',
+  'app.analysis.sales-ranking': 'Sales Ranking',
   'app.analysis.all-year': 'All Year',
   'app.analysis.all-month': 'All Month',
   'app.analysis.all-week': 'All Week',

src/pages/Dashboard/Analysis.js

@@ -456,9 +456,19 @@ class Analysis extends Component {
                       <ul className={styles.rankingList}>
                         {this.rankingListData.map((item, i) => (
                           <li key={item.title}>
-                            <span className={i < 3 ? styles.active : ''}>{i + 1}</span>
-                            <span>{item.title}</span>
-                            <span>{numeral(item.total).format('0,0')}</span>
+                            <span
+                              className={`${styles.rankingItemNumber} ${
+                                i < 3 ? styles.active : ''
+                              }`}
+                            >
+                              {i + 1}
+                            </span>
+                            <span className={styles.rankingItemTitle} title={item.title}>
+                              {item.title}
+                            </span>
+                            <span className={styles.rankingItemValue}>
+                              {numeral(item.total).format('0,0')}
+                            </span>
                           </li>
                         ))}
                       </ul>

src/pages/Dashboard/Analysis.less

@@ -20,30 +20,36 @@
   li {
     .clearfix();
     margin-top: 16px;
+    display: flex;
+    align-items: center;
     span {
       color: @text-color;
       font-size: 14px;
       line-height: 22px;
     }
-    span:first-child {
+    .rankingItemNumber {
       background-color: @background-color-base;
       border-radius: 20px;
       display: inline-block;
       font-size: 12px;
       font-weight: 600;
-      margin-right: 24px;
+      margin-right: 16px;
       height: 20px;
       line-height: 20px;
       width: 20px;
       text-align: center;
-    }
-    span.active {
-      //background-color: @primary-color;
+      margin-top: 1.5px;
+      &.active {
         background-color: #314659;
         color: #fff;
       }
-    span:last-child {
-      float: right;
+    }
+    .rankingItemTitle {
+      flex: 1;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-right: 8px;
     }
   }
 }