上下箭头动态切换

src/views/statisticAnalysis/PSY.vue

@@ -8,13 +8,15 @@
                 <div class="describe">
                     <div class="up">
                         <span>年同比</span>
-                        <span class="icon el-icon-caret-top"></span>
-                        <span>{{ headData.psyAnnualRatio }}%</span>
+                        <span v-if="headData.lsyAnnualRatio>=0" class="icon el-icon-caret-top" style="color:#8FD96B"></span>
+                        <span v-else class="icon el-icon-caret-bottom" style="color:#F5232E"></span>
+                        <span>{{ Math.abs(headData.psyAnnualRatio) }}%</span>
                     </div>
                     <div class="down">
-                        <span>周环比</span>
-                        <span class="icon el-icon-caret-bottom"></span>
-                        <span>{{ headData.psyMonthlyRatio }}%</span>
+                        <span>月环比</span>
+                        <span v-if="headData.lsyAnnualRatio>=0" class="icon el-icon-caret-top" style="color:#8FD96B"></span>
+                        <span v-else class="icon el-icon-caret-bottom" style="color:#F5232E"></span>
+                        <span>{{ Math.abs(headData.psyMonthlyRatio) }}%</span>
                     </div>
                 </div>
             </article>
@@ -25,13 +27,15 @@
                 <div class="describe">
                     <div class="up">
                         <span>年同比</span>
-                        <span class="icon el-icon-caret-top"></span>
-                        <span>{{ headData.lsyAnnualRatio }}%</span>
+                        <span v-if="headData.lsyAnnualRatio>=0" class="icon el-icon-caret-top" style="color:#8FD96B"></span>
+                        <span v-else class="icon el-icon-caret-bottom" style="color:#F5232E"></span>
+                        <span>{{ Math.abs(headData.lsyAnnualRatio) }}%</span>
                     </div>
                     <div class="down">
-                        <span>周环比</span>
-                        <span class="icon el-icon-caret-bottom"></span>
-                        <span>{{ headData.lsyMonthlyRatio }}%</span>
+                        <span>月环比</span>
+                        <span v-if="headData.lsyAnnualRatio>=0" class="icon el-icon-caret-top" style="color:#8FD96B"></span>
+                        <span v-else class="icon el-icon-caret-bottom" style="color:#F5232E"></span>
+                        <span>{{ Math.abs(headData.lsyMonthlyRatio) }}%</span>
                     </div>
                 </div>
             </article>
@@ -42,13 +46,15 @@
                 <div class="describe">
                     <div class="up">
                         <span>年同比</span>
-                        <span class="icon el-icon-caret-top"></span>
-                        <span>{{ headData.fetusAnnualRatio }}%</span>
+                        <span v-if="headData.lsyAnnualRatio>=0" class="icon el-icon-caret-top" style="color:#8FD96B"></span>
+                        <span v-else class="icon el-icon-caret-bottom" style="color:#F5232E"></span>
+                        <span>{{ Math.abs(headData.fetusAnnualRatio) }}%</span>
                     </div>
                     <div class="down">
-                        <span>周环比</span>
-                        <span class="icon el-icon-caret-bottom"></span>
-                        <span>{{ headData.fetusMonthlyRatio }}%</span>
+                        <span>月环比</span>
+                        <span v-if="headData.lsyAnnualRatio>=0" class="icon el-icon-caret-top" style="color:#8FD96B"></span>
+                        <span v-else class="icon el-icon-caret-bottom" style="color:#F5232E"></span>
+                        <span>{{ Math.abs(headData.fetusMonthlyRatio) }}%</span>
                     </div>
                 </div>
             </article>