首页统计标签样式优化

src/views/index.vue

@@ -7,7 +7,152 @@
           <span class="text">数据驾驶舱(今日实时数据)</span>
         </div>
         <div class="brief">
-          <flexbox
+          <el-row >
+             <el-col :span="6">
+               <div class="brief-item">
+                 <div class="info">
+                   <div class="title">
+                    实时交易金额
+                   </div>
+                   <div
+                     class="number">
+                     ￥ {{ accDiv((daily.payAmt && daily.payAmt.today || 0), 100)}}
+                   </div>
+                  <div class="brief-item__others">
+                    <div class="text">
+                      较昨天
+                    </div>
+                    <div class="rate text-one-line">
+                      <span class="rate__num">
+                         <span v-if="(daily.payAmt && daily.payAmt.yesterday || 0) > 0 ">
+                             <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) > 0" class="el-icon-top rate__icon" style="color: green;" />
+                             <span v-if="((daily.payAmt && daily.payAmt.today || 0) - daily.payAmt.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: red;" />
+                              <span v-if="(daily.payAmt && daily.payAmt.today || 0) >0">
+                                 {{ getRate((daily.payAmt && daily.payAmt.today || 0) , daily.payAmt.yesterday) }}
+                              </span>
+                              <span v-else>100</span>
+                         </span>
+                         <span v-if="(daily.payAmt && daily.payAmt.yesterday || 0) == 0">
+                             <span v-if="(daily.payAmt && daily.payAmt.today || 0) > 0" class="el-icon-top rate__icon" style="color: green;" />
+                              {{(daily.payAmt && daily.payAmt.today || 0) > 0 ? 100 : 0 }}
+                         </span>
+                         %
+                       </span>
+                    </div>
+                  </div>
+                 </div>
+               </div>
+             </el-col>
+             <el-col :span="6">
+               <div class="brief-item">
+                 <div class="info">
+                   <div class="title">
+                    交易用户
+                   </div>
+                   <div
+                     class="number">
+                     {{daily.payUser && daily.payUser.today || 0}}
+                   </div>
+                  <div class="brief-item__others">
+                    <div class="text">
+                      较昨天
+                    </div>
+                    <div class="rate text-one-line">
+                      <span class="rate__num">
+                        <span v-if="(daily.payUser && daily.payUser.yesterday || 0) > 0 ">
+                             <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) > 0" class="el-icon-top rate__icon" style="color: green;" />
+                             <span v-if="((daily.payUser && daily.payUser.today || 0) - daily.payUser.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: red;" />
+                             <span v-if="(daily.payUser && daily.payUser.today || 0) >0">
+                                {{ getRate((daily.payUser && daily.payUser.today || 0) , daily.payUser.yesterday) }}
+                             </span>
+                             <span v-else>100</span>
+                        </span>
+                        <span v-if="(daily.payUser && daily.payUser.yesterday || 0) == 0">
+                             <span v-if="(daily.payUser && daily.payUser.today || 0) > 0" class="el-icon-top rate__icon" style="color: green;" />
+                             {{(daily.payUser && daily.payUser.today || 0) > 0 ? 100 : 0 }}
+                        </span>
+                        %
+                      </span>
+                    </div>
+                  </div>
+                 </div>
+                </div>
+             </el-col>
+             <el-col :span="6">
+               <div class="brief-item">
+                  <div class="info">
+                    <div class="title">
+                     盲票销售张数
+                    </div>
+                    <div
+                      class="number">
+                      {{daily.ticketNum && daily.ticketNum.today || 0}}
+                    </div>
+                   <div class="brief-item__others">
+                     <div class="text">
+                       较昨天
+                     </div>
+                     <div class="rate text-one-line">
+                       <span class="rate__num">
+                         <span v-if="(daily.ticketNum && daily.ticketNum.yesterday || 0) > 0 ">
+                              <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) > 0" class="el-icon-top rate__icon" style="color: green;" />
+                              <span v-if="((daily.ticketNum && daily.ticketNum.today || 0) - daily.ticketNum.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: red;" />
+                              <span v-if="(daily.ticketNum && daily.ticketNum.today || 0) >0">
+                                {{ getRate((daily.ticketNum && daily.ticketNum.today || 0) , daily.ticketNum.yesterday) }}
+                              </span>
+                              <span v-else>100</span>
+                         </span>
+                         <span v-if="(daily.ticketNum && daily.ticketNum.yesterday || 0) == 0">
+                             <span v-if="(daily.ticketNum && daily.ticketNum.today || 0) > 0" class="el-icon-top rate__icon" style="color: green;" />
+                              {{(daily.ticketNum && daily.ticketNum.today || 0) > 0 ? 100 : 0 }}
+                         </span>
+                         %
+                       </span>
+
+                     </div>
+                   </div>
+                  </div>
+                </div>
+             </el-col>
+             <el-col :span="6">
+               <div class="brief-item">
+                 <div class="info">
+                   <div class="title">
+                    新增经销商
+                   </div>
+                   <div
+                     class="number">
+                     {{daily.newSite && daily.newSite.today || 0}}
+                   </div>
+                  <div class="brief-item__others">
+                    <div class="text">
+                      较昨天
+                    </div>
+                    <div class="rate text-one-line">
+                      <span class="rate__num">
+                        <span v-if="(daily.newSite && daily.newSite.yesterday || 0) > 0 ">
+                             <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) > 0" class="el-icon-top rate__icon" style="color: green;" />
+                             <span v-if="((daily.newSite && daily.newSite.today || 0) - daily.newSite.yesterday) < 0" class="el-icon-bottom rate__icon" style="color: red;" />
+                             <span v-if="(daily.newSite && daily.newSite.today || 0) >0">
+                               {{ getRate((daily.newSite && daily.newSite.today || 0) , daily.newSite.yesterday) }}
+                             </span>
+                             <span v-else>100</span>
+                        </span>
+                        <span v-if="(daily.newSite && daily.newSite.yesterday || 0) == 0">
+                             <span v-if="(daily.newSite && daily.newSite.today || 0) > 0" class="el-icon-top rate__icon" style="color: green;" />
+                             {{(daily.newSite && daily.newSite.today || 0) > 0 ? 100 : 0 }}
+                        </span>
+                        %
+                      </span>
+                    </div>
+                  </div>
+                 </div>
+                </div>
+             </el-col>
+          </el-row>
+
+
+          <!-- <flexbox
             :span="2"
             class="brief-item">
             <flexbox class="brief-item__body">
@@ -158,7 +303,7 @@
                </div>
               </div>
             </flexbox>
-          </flexbox>
+          </flexbox> -->
         </div>
         <!-- 交易金额 -->
         <div class="brief-box">
@@ -796,57 +941,53 @@ export default {
       width: 100%;
       padding: 20px 10px;
       background-color: #fff;
-      display: flex;
+      // display: flex;
       align-items: center;
-      justify-content: flex-start;
+      //justify-content: flex-start;
       flex-wrap: wrap;
       margin-bottom: 24px;
       border-radius: 0 0 3px 3px;
       .brief-item {
         cursor: pointer;
-        width: calc(25% - 20px);
+        // width: calc(25% - 20px);
         height: 125px;
         box-shadow: 0 0 16px 0 rgba(0,0,0,0.08);
         border-radius: 3px;
         padding: 15px 0px;
         margin: 10px;
-        .brief-item__body {
-          flex: 1;
+        .icon-box {
+          width: 36px;
+          height: 36px;
+          line-height: 36px;
+          text-align: center;
+          border-radius: 50%;
+          margin-right: 10px;
+          margin-left: 15px;
+          flex-shrink: 0;
+          .icon {
+            color: white;
+            font-size: 19px;
+          }
+        }
+        .info {
           overflow: hidden;
-          .icon-box {
-            width: 36px;
-            height: 36px;
-            line-height: 36px;
-            text-align: center;
-            border-radius: 50%;
-            margin-right: 10px;
-            margin-left: 15px;
-            flex-shrink: 0;
-
-            .icon {
-              color: white;
-              font-size: 19px;
-            }
+          padding-left: 10px;
+          .title {
+            font-size: 13px;
+            text-align: left;
           }
-          .info {
+          .number {
+            font-size: 23px;
+            font-weight: bold;
+            line-height: 1;
+            margin-top: 8px;
+            margin-right: 5px;
+            // white-space: nowrap;
+            // text-overflow: ellipsis;
             overflow: hidden;
-            padding-left: 10px;
-            .title {
-              font-size: 13px;
-              text-align: left;
-            }
-            .number {
-              font-size: 23px;
-              font-weight: bold;
-              line-height: 1;
-              margin-top: 8px;
-              margin-right: 5px;
-              // white-space: nowrap;
-              // text-overflow: ellipsis;
-              overflow: hidden;
-            }
           }
         }
+
         .brief-item__others {
           // position: relative;
           margin-top: 15px;