1、销售数据统计

src/views/modules/form/shopStat.vue

@@ -0,0 +1,1390 @@
+<template>
+  <div class="mod-home">
+    <div class="search-bar">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList(this.page)" size="small">
+        <div class="input-row">
+          <!--          <el-form-item label="店铺">-->
+          <!--            <template>-->
+          <!--              <el-select v-model="status" clearable placeholder="请选择店铺" size="small"-->
+          <!--                         @change="orderStatus">-->
+          <!--                <el-option v-for="item in options" :key="item.value" :label="item.label"-->
+          <!--                           :value="item.value"></el-option>-->
+          <!--              </el-select>-->
+          <!--              &lt;!&ndash;              &ndash;&gt;-->
+          <!--            </template>-->
+          <!--          </el-form-item>-->
+          <el-form-item label="日期">
+            <el-date-picker size="small" v-model="dateRange" type="datetimerange" range-separator="—"
+                            value-format="yyyy-MM-dd HH:mm:ss" :start-placeholder="this.$i18n.t('date.start')"
+                            :end-placeholder="this.$i18n.t('date.end')"
+                            :default-time="['00:00:00', '23:59:59']"></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <div class="default-btn" @click="setDateRange(1)">{{
+              $t("date.t")
+              }}
+            </div>
+            <div class="default-btn" @click="setDateRange(2)">{{
+              $t("date.y")
+              }}
+            </div>
+            <div class="default-btn" @click="setDateRange(3)">近3天</div>
+            <div class="default-btn" @click="setDateRange(5)">近5天</div>
+            <div class="default-btn" @click="setDateRange(7)">近7天</div>
+            <div class="default-btn" @click="setDateRange(30)">近一个月</div>
+            <div class="default-btn primary-btn" @click="getPlatformStatistics()">{{ $t("order.query") }}</div>
+            <!--            <div class="default-btn" @click="getSoldExcel()">{{ $t("order.export") }}</div>-->
+            <!--            <div class="default-btn" @click="clear()">{{ $t("product.reset") }}</div>-->
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <!-- 底部流量走势图 -->
+    <div class="refund-plate">
+      <div class="ranking-box">
+
+        <!-- 热卖店铺TOP10 -->
+        <div class="ranking-left">
+          <div class="ranking-title">店铺排行
+            <span style="color: red;font-weight: bold; margin-left: 20px;font-size: 14px">新增人数：{{totalUserNums}}</span>
+            <span style="color: red;font-weight: bold; margin-left: 20px;font-size: 14px">营业额：{{totalAmount.toFixed(2)}}</span>
+          </div>
+          <el-table
+            highlight-current-row
+            @current-change="handleCurrentChange"
+            :data="hotShopList"
+            height="500"
+            border
+            style="width: 100%">
+            <el-table-column
+              type="index"
+              width="50"
+              label="排名">
+            </el-table-column>
+            <el-table-column
+              prop="shopName"
+              label="店铺名称">
+            </el-table-column>
+            <el-table-column
+              prop="userNum"
+              label="新增用户">
+            </el-table-column>
+            <el-table-column
+              prop="amount"
+              label="营业额">
+            </el-table-column>
+            <el-table-column
+              prop="sales"
+              label="销量">
+            </el-table-column>
+          </el-table>
+        </div>
+        <!--/ 热卖店铺TOP10 end -->
+      </div>
+
+      <!-- 交易趋势 -->
+      <div class="refund-chart-box">
+
+        <!-- 热卖商品TOP10-->
+        <div class="ranking-right">
+          <div class="ranking-title">{{hotShop.shopName}}热卖商品排行</div>
+          <el-table
+            :data="hotProdList"
+            height="500"
+            border
+            style="width: 100%">
+            <el-table-column
+              type="index"
+              width="50"
+              label="排名">
+            </el-table-column>
+            <el-table-column
+              prop="prodName"
+              label="商品名称">
+            </el-table-column>
+            <el-table-column
+              prop="amount"
+              label="实付金额">
+            </el-table-column>
+            <el-table-column
+              prop="sales"
+              label="销量">
+            </el-table-column>
+            <el-table-column
+              prop="shopName"
+              label="店铺名称">
+            </el-table-column>
+          </el-table>
+        </div>
+        <!--/ 热卖商品TOP10end-->
+      </div>
+
+    </div>
+    <!-- /底部流量走势图 -->
+  </div>
+</template>
+
+<script>
+  import moment from "moment/moment";
+
+  export default {
+    data() {
+      return {
+        hotShop: {
+          shopName: null
+        },
+        dateRange: [],
+        dataForm: {
+          shopId: null,
+          startTime: null,
+          endTime: null,
+        },
+        hotProdList: [], // 热卖商品
+        hotShopList: [], // 热卖店铺
+        totalUserNums: 0,
+        totalAmount: 0,
+      }
+    },
+    watch: {
+      dateRange() {
+        this.dataForm.startTime = this.dateRange === null ? null : this.dateRange[0] // 开始时间
+        this.dataForm.endTime = this.dateRange === null ? null : this.dateRange[1] // 结束时间
+      }
+    },
+    created() {
+      this.getPlatformStatistics() // 获取首页的基本信息 今日待办 实时概况
+      // let erd = elementResizeDetectorMaker()
+      // erd.listenTo(document.getElementById('entirety-data-chart'), this.resizeFunc)
+    },
+    methods: {
+      setCurrent(row) {
+        this.$refs.singleTable.setCurrentRow(row);
+      },
+      handleCurrentChange(e) {
+        this.getShopData(e)
+        this.hotShop.shopName = e.shopName
+      },
+      getShopData(e) {
+        this.$http({
+          url: this.$http.adornUrl('/platform/statistics/getShopStatistics'),
+          params: {
+            shopId: e.shopId,
+            startTime: this.dataForm.startTime,
+            endTime: this.dataForm.endTime
+          },
+          method: 'GET'
+        }).then(({data}) => {
+          this.hotProdList = data.hotProdList
+          this.totalUserNums = data.totalUserNums
+          this.totalAmount = data.totalAmount
+        })
+      },
+      getPlatformStatistics() {
+        this.$http({
+          url: this.$http.adornUrl('/platform/statistics/getShopStatistics'),
+          params: {
+            shopId: this.dataForm.shopId,
+            startTime: this.dataForm.startTime,
+            endTime: this.dataForm.endTime
+          },
+          method: 'GET'
+        }).then(({data}) => {
+          this.hotShopList = data.hotShopList
+          this.hotProdList = data.hotProdList
+          this.totalUserNums = data.totalUserNums
+          this.totalAmount = data.totalAmount
+        })
+      },
+      /**
+       * 根据选项设置时间
+       * 1:今天 2:昨天 3: 近七天 4:近30天 5:近60天
+       */
+      setDateRange(val) {
+        var startDay = null
+        var endDay = null
+        if (val === 1) {
+          startDay = 0
+          endDay = 0
+        } else if (val === 2) {
+          startDay = -1
+          endDay = -1
+        } else if (val === 3) {
+          startDay = -3
+          endDay = -1
+        } else if (val === 5) {
+          startDay = -5
+          endDay = -1
+        } else if (val === 7) {
+          startDay = -7
+          endDay = -1
+        } else if (val === 30) {
+          startDay = -30
+          endDay = -1
+        } else {
+          return
+        }
+        // 开始时间
+        let startTime = moment().add(startDay, 'days').startOf('days').format('LL')
+        // 结束时间
+        let endTime = moment().add(endDay, 'days').endOf('days').format('LL')
+        this.dateRange = [startTime, endTime]
+        this.$nextTick(() =>{
+          this.getPlatformStatistics();
+        })
+
+      },
+    },
+    beforeDestroy() {
+      // let erd = elementResizeDetectorMaker()
+      // erd.uninstall(this.$refs.entirety) // 这里用ref是因为vue离开页面后获取不到dom
+    }
+  }
+</script>
+
+<style lang="scss">
+  // e-chart
+  #real-time-data-chart canvas {
+    width: 100%;
+    height: 100%;
+    padding: 0 20px !important
+  }
+
+  .mod-home {
+    .search-bar {
+      .input-row {
+        .select-time-btn {
+          margin-right: 20px;
+          display: inline-block;
+          color: #AAAAAA;
+          font-size: 14px;
+          cursor: pointer;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+        .select-time-btn.is-active {
+          color: #155BD4;
+        }
+
+      }
+    }
+
+    // 店铺状态异常提示
+    .shop-inf-imperfect-tips {
+      width: 100%;
+      line-height: 32px;
+      font-size: 14px;
+      color: #333;
+      background: #FFF7DD;
+      border: 1px solid #FFD888;
+      border-radius: 2px;
+      padding: 5px 10px;
+      margin-bottom: 10px;
+
+      .el-icon-warning {
+        font-size: 16px;
+        color: #FFA900;
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+
+    // font-size: 1em;
+    // line-height: 2em;
+    // .strong {
+    //   margin: 0;
+    //   font-size: 17px;
+    //   font-weight: bold;
+    //   text-align: center;
+    //   margin-bottom: 0.5em;
+    // }
+    // .content {
+    //   font-size: 16px;
+    //   padding: 0 30px;
+    // }
+    // background-color: #F5F6F9;
+    .grap {
+      color: #999999;
+    }
+
+    // 白色背景 标题样式
+    .white-basic {
+      background: #fff;
+      padding: 20px;
+      border-radius: 6px;
+      margin-bottom: 20px;
+
+      .title-basic {
+        font-size: 18px;
+        margin-bottom: 20px;
+        font-weight: bold;
+        line-height: 24px;
+        color: #333333;
+        opacity: 1;
+      }
+    }
+
+    // 今日待办
+    .abeyance-box {
+      display: flex;
+      justify-content: space-between;
+
+      .order-num-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 7px;
+        margin-bottom: 14px;
+        background-color: #fff;
+        box-sizing: border-box;
+        border-radius: 4px;
+        // cursor: pointer;
+        .item-box {
+          left: 30px;
+
+          .words {
+            font-size: 16px;
+            font-weight: 400;
+            color: #666;
+          }
+
+          .number {
+            font-size: 24px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #333;
+            margin-top: 10px;
+          }
+
+          .compare {
+            font-size: 14px;
+          }
+        }
+
+        .item-img {
+          position: relative;
+          margin-right: 25px;
+          display: block;
+          width: 60px;
+          height: 60px;
+
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+          }
+        }
+      }
+
+      .order-num-item:first-child {
+        margin-left: 30px;
+      }
+
+      .order-num-item:last-child {
+        margin-right: 100px;
+      }
+    }
+
+    // 订单栏项
+    .order-all-num {
+      // display: flex;
+      // justify-content: space-between;
+      .row-bg {
+        display: flex;
+
+        .col-box {
+          display: flex;
+          justify-content: space-between;
+          height: 120px;
+
+        }
+
+        .num-item-box {
+          position: relative;
+          width: calc(20% - 20px);
+          flex: 1;
+          padding-right: 20px;
+          box-sizing: border-box;
+        }
+
+        .num-item-box:last-child {
+          padding-right: 0;
+        }
+
+        .col-box:first-child {
+          // margin-right: 20px;
+          .num-item-box {
+            padding-right: 20px;
+            box-sizing: border-box;
+          }
+        }
+
+        .col-box:last-child {
+          .num-item-box:not(:last-child) {
+            padding-right: 20px;
+            box-sizing: border-box;
+          }
+        }
+      }
+
+      // 基本信息样式
+      .order-num-item {
+        // width: calc((100% - 73px) * 0.2);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #fff;
+        box-sizing: border-box;
+        border-radius: 4px;
+        // &:hover {
+        //   .item-img {
+        //     img {
+        //       position: absolute;
+        //       top: -10px;
+        //     }
+        //   }
+        // }
+        .item-box {
+          position: absolute;
+          z-index: 1;
+          left: 30px;
+
+          .words {
+            font-size: 14px;
+            font-weight: bold;
+            color: #fff;
+          }
+
+          .number {
+            width: 160px;
+            word-break: break-all;
+            font-size: 26px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #fff;
+            margin-top: 10px;
+
+            .text {
+              padding-right: 20px;
+            }
+
+            // .ratio{
+            //   font-size: 12px;
+            //   font-weight: 400;
+            //   color: #FFFFFF;
+            //   opacity: 0.7;
+            // }
+          }
+
+          // .ratio{
+          //   font-size: 12px;
+          //   font-weight: 400;
+          //   color: #FFFFFF;
+          //   opacity: 0.7;
+          // }
+          .seq {
+            display: flex
+          }
+
+          .up {
+            color: #3DD598;
+          }
+
+          .up-icon {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            margin: 0 12px 0 4px;
+            background: url('~@/assets/img/home/ic-arrow-narrow-up.png')
+          }
+
+          .down {
+            color: #F0142F;
+          }
+
+          .down-icon {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            margin: 0 12px 0 4px;
+            background: url('~@/assets/img/home/ic-arrow-narrow-down.png')
+          }
+
+          .compare {
+            font-size: 14px;
+          }
+        }
+
+        .item-img {
+          position: relative;
+          display: block;
+          width: 100%;
+          // transition: .35s;
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+
+    // 添加公告
+    .introduce {
+      margin-bottom: 10px;
+    }
+
+    .router-link-active {
+      //点击时去掉下划线
+      text-decoration: none;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    .title {
+      font-size: 22px;
+      color: #111111;
+      font-weight: bold;
+      padding: 20px;
+    }
+
+    .btn-more {
+      float: right;
+      margin: 10px;
+      margin-top: 0px;
+    }
+
+    .introduce-container {
+      padding: 10px;
+      display: flex;
+      background-color: #b4dff8;
+      margin: 20px 0 10px 0;
+    }
+
+    .introduce-container .text {
+      width: 50%;
+      line-height: 30px;
+      font-size: 22px;
+    }
+
+    // 栏目标题行
+    .title-line {
+      background: #f8f8f8;
+      padding: 12px;
+      font-size: 14px;
+      line-height: 1em;
+    }
+
+    .blue-vertical {
+      display: inline-block;
+      width: 3px;
+      height: 1em;
+      background: #155bd4;
+      margin-right: 0.5em;
+      vertical-align: middle;
+    }
+
+    .title-txt {
+      color: #000;
+      font-weight: bold;
+      margin-right: 1em;
+      vertical-align: middle;
+    }
+
+    .title-time {
+      color: #999999;
+      font-size: 12px;
+      margin-left: 12px;
+      vertical-align: middle;
+    }
+
+    .realtime {
+      // display: flex;
+      margin-top: 20px;
+      padding: 0;
+    }
+
+    /**
+      实时概况
+       */
+    .realtime-situation-box {
+      .real-time-content {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 10px;
+        margin-bottom: -12px;
+
+        .item {
+          width: 20%;
+          padding-left: 30px;
+          margin-bottom: 40px;
+
+          .word {
+            margin-bottom: 10px;
+            font-size: 16px;
+            font-weight: 400;
+            color: #999999;
+          }
+
+          .number {
+            font-size: 24px;
+            font-weight: bold;
+            line-height: 31px;
+            color: #333333;
+          }
+        }
+      }
+    }
+
+    .realtime-situation {
+      //左边
+      .realtime-left {
+        height: 100%;
+        // width: calc((100% - 20px) * 0.8);
+        // margin-right: 20px;
+        // .chart-content {
+        //   width: 100%;
+        //   height: 360px;
+        // }
+        background: #fff;
+        border-radius: 4px;
+      }
+
+      .col-item {
+        padding-right: 20px;
+        box-sizing: border-box;
+      }
+
+      // 标题
+      .title {
+        position: relative;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+
+        .t-title {
+          font-size: 18px;
+          font-weight: bold;
+          color: #333;
+        }
+
+        .update-time {
+          font-size: 12px;
+          color: #999999;
+          margin-left: 10px;
+        }
+
+        .t-small-text {
+          font-size: 12px;
+          color: #999;
+        }
+
+        .t-update-time {
+          margin-left: 12px;
+        }
+
+        .t-explain-item::before {
+          display: inline-block;
+          content: '';
+          width: 18px;
+          height: 8px;
+          background: #FF4141;
+          border-radius: 8px;
+          margin-right: 10px;
+        }
+
+        .t-explain-first-item {
+          margin-left: 50px;
+        }
+
+        .t-explain-second-item {
+          margin-left: 40px;
+        }
+
+        .t-red::before {
+          background: #FF4141;
+        }
+
+        .t-dark-green::before {
+          background: #42B983;
+        }
+
+        .t-today-data::before {
+          background: #1890FF;
+        }
+
+        .t-yesterday-data::before {
+          background: #21D59B;
+        }
+
+        .t-pay-amount {
+          position: absolute;
+          right: 0;
+          top: 0;
+          display: flex;
+
+          .t-pay-item {
+            color: #333;
+            text-align: left;
+            margin-right: 30px;
+
+            .tt-title {
+              font-size: 14px;
+            }
+
+            .tt-num {
+              font-size: 20px;
+              font-weight: bold;
+              margin-top: 13px;
+            }
+          }
+
+          .t-today {
+            margin-right: 150px;
+          }
+        }
+      }
+
+      .pay-amount-text {
+        font-weight: bold;
+      }
+
+      .pay-amount-num {
+        font-size: 24px;
+        min-height: 24px;
+        font-weight: 700;
+        margin: 10px 0;
+        line-height: 24px;
+      }
+
+      .pay-amount-tips {
+        color: #9b9b9b;
+      }
+
+      // 图表
+      .realtime-chart-box {
+        left: -10px !important;
+        // margin-top: 10px;
+      }
+
+      .wrapper__summary:nth-child(2) {
+        margin-top: 120px;
+      }
+
+      // 右边
+      .realtime-right {
+        min-width: calc((100% - 20px) * 0.2);
+        min-height: 426px;
+        height: 100%;
+        padding: 20px 0px 0 20px;
+        background-color: #fff;
+        box-sizing: border-box;
+        border-radius: 4px;
+
+        .realtime-right-title {
+          font-size: 18px;
+          font-weight: bold;
+          color: #333;
+          margin-bottom: 45px;
+        }
+
+        .realtime-right-box {
+          display: flex;
+          flex-wrap: wrap;
+          width: 100%;
+          height: 100%;
+
+          .realtime-right-box-left, .realtime-right-box-right {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+          }
+
+          .realtime-right-box-right {
+            margin-top: -30px;
+          }
+
+          .order-num-item {
+            width: 100%;
+            display: flex;
+
+            .item-img {
+              margin-right: 30px;
+
+              .words {
+                font-size: 16px;
+                font-weight: 400;
+                color: #666;
+              }
+
+              .number {
+                font-size: 24px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #333;
+                margin: 14px 0;
+              }
+
+              .compare {
+                font-size: 14px;
+              }
+            }
+
+            .item-box {
+              .words {
+                font-size: 16px;
+                font-weight: 400;
+                color: #666;
+              }
+
+              .number {
+                font-size: 26px;
+                font-family: Microsoft YaHei;
+                font-weight: bold;
+                color: #333;
+                margin: 14px 0;
+              }
+
+              .seq {
+                display: flex;
+
+                .value {
+                  color: #333333;
+                  font-weight: bold;
+                  margin-right: 8px;
+                }
+              }
+            }
+          }
+
+          // .order-num-item:nth-child(even){
+          //     margin-left: 86px;
+          // }
+        }
+      }
+
+      .realtime .wrapper__summary {
+        display: flex;
+      }
+
+      .realtime .wrapper__summary .summary__box {
+        display: inline-flex;
+        flex: 1;
+        margin-left: 20px;
+      }
+
+      .realtime .wrapper__summary .summary__item {
+        position: relative;
+        width: 100%;
+      }
+
+      //客户数信息
+      .customer-number-info {
+        margin-left: 60px;
+      }
+
+      .text-tit {
+        font-weight: 600;
+      }
+
+      .text-num {
+        font-size: 24px;
+        min-height: 24px;
+        font-weight: 700;
+        margin: 15px 0;
+        line-height: 24px;
+      }
+
+      .text-tips {
+        color: #9b9b9b;
+      }
+
+      // 客户数icon
+      svg {
+        fill: currentColor;
+        vertical-align: middle;
+      }
+
+      .realtime .wrapper__summary .summary__svg {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    /**
+      整体看板
+       */
+    .whole-plate {
+      margin: 20px 0 20px;
+      min-height: 460px;
+      background-color: #fff;
+      border-radius: 4px;
+
+      // 标题
+      .title {
+        width: 80%;
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .t-title {
+          font-size: 18px;
+          font-weight: bold;
+          color: #333;
+        }
+
+        .update-time {
+          font-size: 12px;
+          color: #999999;
+          margin-left: 10px;
+        }
+
+        .t-small-text {
+          font-size: 12px;
+          color: #999;
+        }
+
+        .t-update-time {
+          margin-left: 12px;
+        }
+
+        .t-explain-item::before {
+          display: inline-block;
+          content: '';
+          width: 18px;
+          height: 8px;
+          background: #FF4141;
+          border-radius: 8px;
+          margin-right: 10px;
+        }
+
+        .t-explain-first-item {
+          margin-left: 50px;
+        }
+
+        .t-explain-second-item {
+          margin-left: 40px;
+        }
+
+        .t-red::before {
+          background: #FF4141;
+        }
+
+        .t-dark-green::before {
+          background: #42B983;
+        }
+
+        .t-today-data::before {
+          background: #1890FF;
+        }
+
+        .t-yesterday-data::before {
+          background: #21D59B;
+        }
+
+        .t-pay-amount {
+          position: absolute;
+          right: 0;
+          top: 0;
+          display: flex;
+
+          .t-pay-item {
+            color: #333;
+            text-align: left;
+            margin-right: 30px;
+
+            .tt-title {
+              font-size: 14px;
+            }
+
+            .tt-num {
+              font-size: 20px;
+              font-weight: bold;
+              margin-top: 13px;
+            }
+          }
+
+          .t-today {
+            margin-right: 150px;
+          }
+        }
+      }
+
+      .money {
+        width: 20%;
+        display: flex;
+        justify-content: space-between;
+
+        .related-income-item {
+          text-align: center;
+        }
+      }
+
+      .related-income {
+        margin: 20px 0 0 0px;
+        padding-right: 50px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+
+      .item-tit {
+        margin-top: 23px;
+        margin-bottom: 15px;
+      }
+
+      .item-num {
+        height: 24px;
+        line-height: 24px;
+      }
+
+      .item-num-price {
+        font-size: 18px;
+        font-weight: 700;
+      }
+
+      .item-num a {
+        color: #155bd4;
+        text-decoration: none;
+      }
+
+      .integral-plate {
+        margin-top: 15px;
+      }
+    }
+
+    /**
+      退款看板
+       */
+    .refund-plate {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      // 上
+      .ranking-box {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        width: 50%;
+        padding-right: 20px;
+
+        .ranking-left,
+        .refund-rate-box {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          background: #fbfbfb;
+          padding: 20px;
+          box-sizing: border-box;
+          border-radius: 4px;
+          height: 574px;
+        }
+
+        .refund-rate-box {
+          height: 396px;
+        }
+
+        .ranking-left {
+          margin-top: 20px;
+          flex: auto
+        }
+
+        .ranking-title {
+          font-weight: bold;
+          color: #333;
+          font-size: 18px;
+          margin-bottom: 20px;
+        }
+
+        .table {
+          width: 100%;
+          border: none;
+          background: #fbfbfb;
+          // border-spacing: 10px 20px;
+          text-align: left;
+
+          .table-tit {
+            cursor: pointer;
+          }
+
+          .table-tit:hover {
+            background-color: lightgoldenrodyellow;
+            color: #000;
+          }
+
+          .table-tit:active {
+            background-color: lightblue;
+            color: #000;
+          }
+
+          tr {
+            border: none;
+            height: 3em;
+            line-height: 1.5em;
+          }
+
+          td {
+            border: none;
+            word-break: break-wrod;
+          }
+
+          .gray {
+            background: #F7F8FA;
+          }
+
+          .table-tit-item {
+            color: #999;
+            text-align: left;
+          }
+
+          .rank {
+            width: 20%;
+          }
+
+          .prod {
+            width: 50%;
+          }
+
+          .ref {
+            width: 20%;
+          }
+
+          .ranks {
+            width: 10%;
+          }
+
+          .prods {
+            width: 50%;
+          }
+
+          .refs {
+            width: 30%;
+          }
+
+          .prop {
+            width: 10%;
+            // text-align: center;
+          }
+        }
+
+        .no-data {
+          height: 60px;
+          line-height: 60px;
+          text-align: center;
+          font-size: 14px;
+          color: #999;
+        }
+
+        .line-clamp-one {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 1;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          /* autoprefixepxr: off */
+          -webkit-box-orient: vertical;
+          word-wrap: break-word;
+          word-break: break-all;
+        }
+
+        .padLeft {
+          padding-left: 20px;
+        }
+
+        .msg-tit {
+          font-weight: bold;
+          color: #333;
+          font-size: 18px;
+          margin-bottom: 15px;
+        }
+      }
+
+      //  下
+      .refund-chart-box {
+        display: flex;
+        flex-wrap: wrap;
+        width: 50%;
+
+        .successed-refund,
+        .ranking-right {
+          display: flex;
+          width: 100%;
+          flex-direction: column;
+          background: #fbfbfb;
+          padding: 20px;
+          box-sizing: border-box;
+          border-radius: 4px;
+        }
+
+        .successed-refund {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          background: #fbfbfb;
+          height: 396px;
+          padding: 20px;
+          box-sizing: border-box;
+        }
+
+        .ranking-right {
+          margin-top: 20px;
+        }
+
+        .ranking-title {
+          font-weight: bold;
+          color: #333;
+          font-size: 18px;
+          margin-bottom: 20px;
+        }
+
+        .table {
+          width: 100%;
+          border: none;
+          background: #fbfbfb;
+          // border-spacing: 10px 20px;
+          text-align: left;
+
+          tr {
+            border: none;
+            height: 3em;
+            line-height: 1.5em;
+          }
+
+          td {
+            border: none;
+            word-break: break-wrod;
+          }
+
+          .gray {
+            background: #F7F8FA;
+          }
+
+          .table-tit-item {
+            color: #999;
+            text-align: left;
+          }
+
+          .rank {
+            width: 10%;
+          }
+
+          .prod {
+            width: 50%;
+          }
+
+          .ref {
+            width: 30%;
+          }
+
+          .ranks {
+            width: 20%;
+          }
+
+          .prods {
+            width: 40%;
+          }
+
+          .refs {
+            width: 30%;
+          }
+
+          .prop {
+            width: 10%;
+            // text-align: center;
+          }
+        }
+
+        .msg-tit {
+          font-weight: bold;
+          color: #333;
+          font-size: 18px;
+          margin-bottom: 15px;
+        }
+
+        .padLeft {
+          padding-left: 20px;
+        }
+
+        .msg-price {
+          margin: 6px 0;
+          line-height: 26px;
+          padding: 0;
+          font-size: 24px;
+          font-weight: bold;
+          line-height: 1em;
+        }
+
+        .msg-txt-p {
+          width: 146px;
+        }
+
+        .compare {
+          color: #9b9b9b;
+          display: flex;
+          justify-content: space-between;
+          font-size: 12px;
+          padding: 5px;
+        }
+
+        .compare-left {
+          margin-right: 10px;
+          white-space: nowrap;
+        }
+      }
+
+      .integral-plate canvas {
+        left: -5px !important;
+      }
+
+      .money-padleft {
+        padding-left: 10px;
+      }
+
+      .refund-tip {
+        display: flex;
+        font-size: 14px;
+        font-weight: 400;
+        color: #5A607F;
+      }
+
+      .msg-tit-txt {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .traffictrendA, .traffictrendB {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 6px;
+        margin-right: 4px;
+      }
+
+      .traffictrendA {
+        background: #21D59B;
+      }
+
+      .traffictrendB {
+        margin-left: 40px;
+        background: #0058FF;
+      }
+
+    }
+  }
+
+  .empty {
+    display: block;
+    height: 200px;
+    line-height: 200px;
+    text-align: center;
+    color: #aaa;
+  }
+</style>
+