Merge branch 'dev' into 'test'

Dev

See merge request quanshu/mp-ui-pc!155

src/views/index.vue

@@ -7,158 +7,149 @@
           <span class="text">数据驾驶舱(今日实时数据)</span>
         </div>
         <div class="brief">
-          <flexbox
-            :span="2"
-            class="brief-item">
-            <flexbox class="brief-item__body">
-              <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>
+          <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>
-              </div>
-            </flexbox>
-          </flexbox>
-
-          <flexbox
-            :span="2"
-            class="brief-item">
-            <flexbox class="brief-item__body">
-              <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>
+             </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>
-              </div>
-            </flexbox>
-          </flexbox>
-
-         <flexbox
-            :span="2"
-            class="brief-item">
-            <flexbox class="brief-item__body">
-              <div class="info">
-                <div class="title">
-                 盲票销售张数
                 </div>
-                <div
-                  class="number">
-                  {{daily.ticketNum && daily.ticketNum.today || 0}}
+             </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>
-               <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>
-
+             </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>
-              </div>
-            </flexbox>
-          </flexbox>
-
-          <flexbox
-            :span="2"
-            class="brief-item">
-            <flexbox class="brief-item__body">
-              <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>
-            </flexbox>
-          </flexbox>
+             </el-col>
+          </el-row>
         </div>
         <!-- 交易金额 -->
         <div class="brief-box">
@@ -179,7 +170,6 @@
               >
               </el-date-picker>
             </span>
-
             <el-select
               v-model="queryParams1.level"
               placeholder="请选择统计粒度"
@@ -796,57 +786,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;