text-flex-end

 {{# list}}
 <div class="grade-bill">
     <div class="grade-bill-left">
-        <div class="order clearfix"><span>{{desc}}</span>{{#if activityInfoTitle}}<span class="order-tip">({{activityInfoTitle}}</span><span class="order-tip-end">)</span>{{/if}}</div>
+        <div class="order"><span>{{desc}}</span>{{#if activityInfoTitle}}<span class="order-tip">({{activityInfoTitle}}</span><span class="order-tip-end">)</span>{{/if}}</div>
         <div class="time">{{createTimeStr}}</div>
     </div>
     <div class="grade-bill-right">

@@ -21,14 +21,6 @@
 }
 
 .grade-detail-page {
-    .clearfix:after {
-        content: ".";
-        display: block;
-        height: 0;
-        clear: both;
-        visibility: hidden;
-    }
-
     > .user-defined-header > .nav-title {
         font-size: 32px;
         font-weight: 500;
@@ -153,11 +145,11 @@
                 white-space: nowrap;
                 width: 100%;
                 height: 40px;
+                line-height: 40px;
+                display: flex;
+                align-items: flex-end;
 
-                span {
-                    float: left;
-                }
-
+                .order-tip,
                 .order-tip-end {
                     font-size: 18px;
                     color: #4a90e2;
@@ -165,9 +157,6 @@
                 }
 
                 .order-tip {
-                    font-size: 18px;
-                    color: #4a90e2;
-                    font-weight: 300;
                     max-width: 260px;
                     overflow: hidden;
                     text-overflow: ellipsis;