<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>
            <span style="color: red;font-weight: bold; margin-left: 20px;font-size: 14px">退款金额：{{refundAmount.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,
        refundAmount:0
      }
    },
    watch: {
      dateRange() {
        this.dataForm.startTime = this.dateRange === null ? null : this.dateRange[0] // 开始时间
        this.dataForm.endTime = this.dateRange === null ? null : this.dateRange[1] // 结束时间
      }
    },
    created() {
      // 开始时间
      let startTime = moment().add(0, 'days').startOf('days').format('LL')
      // 结束时间
      let endTime = moment().add(0, 'days').endOf('days').format('LL')
      this.dataForm.startTime = startTime
      this.dataForm.endTime = endTime
      this.dateRange[0] = startTime
      this.dateRange[1] = endTime
      this.getPlatformStatistics(startTime, endTime) // 获取首页的基本信息 今日待办 实时概况
      // 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? e.shopName: ""
      },
      getShopData(e) {
        this.$http({
          url: this.$http.adornUrl('/platform/statistics/getShopStatistics'),
          params: {
            shopId: e? e.shopId : null,
            startTime: this.dataForm.startTime,
            endTime: this.dataForm.endTime
          },
          method: 'GET'
        }).then(({data}) => {
          this.hotProdList = data.hotProdList
          this.totalUserNums = data.totalUserNums
          this.totalAmount = data.totalAmount
          this.refundAmount = data.refundAmount
        })
      },
      getPlatformStatistics(startTime, endTime) {
        this.$http({
          url: this.$http.adornUrl('/platform/statistics/getShopStatistics'),
          params: {
            shopId: this.dataForm.shopId,
            startTime: startTime? startTime : this.dataForm.startTime,
            endTime: endTime? endTime : this.dataForm.endTime
          },
          method: 'GET'
        }).then(({data}) => {
          this.hotShopList = data.hotShopList
          this.hotProdList = data.hotProdList
          this.totalUserNums = data.totalUserNums
          this.totalAmount = data.totalAmount
          this.refundAmount = data.refundAmount
        })
      },
      /**
       * 根据选项设置时间
       * 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>

