成长值超出

@@ -39,7 +39,7 @@
             <div class="line" style="width: {{process}}%;"></div>
             <div class="growth-line">
                 <div class="growth-c" style="left: {{process}}%;">
-                    <div class="growth">成长值：{{credit_points}}</div>
+                    <div class="growth">&nbsp;&nbsp;成长值：{{credit_points}}&nbsp;&nbsp;</div>
                     <div class="arr"></div>
                 </div>
             </div>

@@ -13,7 +13,8 @@ class Photography extends Page {
             $gender: $('.s-title.baby-gender'),
             $birthday: $('.s-title.baby-birthday'),
             $noDate: $('.s-title.modify[type!=date]'),
-            $growthC: $('.growth-c')
+            $growthC: $('.growth-c'),
+            $growth: $('.growth')
         };
 
         this.init();
@@ -28,9 +29,26 @@ class Photography extends Page {
     }
 
     growthRePosition() {
-        let gWidth = this.selector.$growthC.width() / 2;
+        let gWidth = this.selector.$growth.width() / 2;
+        let growthW = this.selector.$growth.width();
 
+        this.selector.$growthC.css('width', `${growthW}px`);
         this.selector.$growthC.css('margin-left', `-${gWidth}px`);
+        setTimeout(() => {
+            let limit = $(window).width() / 750 * 30;
+            let offset = this.selector.$growthC.offset().left;
+            let limitRight = $(window).width() - offset - limit - growthW;
+            let limitLeft = offset - limit;
+
+            if (limitRight <= 0) {
+                // 右边超出
+                this.selector.$growth.css('margin-left', `${limitRight}px`);
+            }
+            if (limitLeft <= 0) {
+                // 左边超出
+                this.selector.$growth.css('margin-left', `${-limitLeft}px`);
+            }
+        }, 100);
     }
 
     bindEvents() {

@@ -345,23 +345,32 @@ input::-webkit-calendar-picker-indicator {
                 position: absolute;
                 bottom: 15px;
                 left: 0;
+                height: 49px;
 
                 .growth {
-                    padding: 8px 10px;
+                    padding: 8px 0;
                     background-color: #eaeaea;
                     color: #000;
                     font-size: 18px;
                     border-radius: 10px;
                     white-space: nowrap;
+                    height: 41px;
+                    line-height: 25px;
+                    position: absolute;
+                    top: 0;
                 }
 
                 .arr {
-                    width: 15px;
-                    height: 15px;
+                    width: 16px;
+                    height: 16px;
                     background-color: #eaeaea;
                     margin: -8px auto 0;
                     transform: rotate(45deg);
                     border-radius: 100% 0 0;
+                    position: absolute;
+                    bottom: 0;
+                    left: 50%;
+                    margin-left: -8px;
                 }
             }