<template>
  <div class="dashboard-editor-container">
    <div class="dashboard-promote">
      <!-- 头部 -->
      <div class="header">
        <div class="header-top">
          <span class="sp">运营数据</span>
          <el-radio-group v-model="numberValue" @change="getnumbersTime" size="small" style="margin-left: 27px;">
            <el-radio-button label="1">昨日</el-radio-button>
            <el-radio-button label="7">近7天</el-radio-button>
            <el-radio-button label="15">近15天</el-radio-button>
          </el-radio-group>
        </div>
        <div class="header-foot">
          <div class="foot-le">
            <el-row type="flex" justify="space-around">
              <el-col :span="6">
                <img src="@/assets/image/Sorder.png" alt="" class="header-img">
                <span class="header-span">成交订单数</span>
                <p class="header-p">{{operate.order_count}}</p>
              </el-col>
              <el-col :span="6">
                <img src="@/assets/image/Sorder.png" alt="" class="header-img">
                <span class="header-span">GMV</span>
                <p class="header-p">{{beGmv}}</p>
              </el-col>
              <el-col :span="6">
                <img src="@/assets/image/Sorder.png" alt="" class="header-img">
                <span class="header-span">退款订单数</span>
                <p class="header-p">{{operate.refund_count}}</p>
              </el-col>
            </el-row>
          </div>
          <div class="foot-ri">
            <el-row type="flex" justify="space-around">
              <el-col :span="10">
                <img src="@/assets/image/Sorder.png" alt="" class="header-img">
                <span class="header-span">正常发货率</span>
                <p class="header-p">{{delivery}}%</p>
              </el-col>
              <el-col :span="10">
                <img src="@/assets/image/Sorder.png" alt="" class="header-img">
                <span class="header-span">待结算金额</span>
                <p class="header-p">{{beSettled}}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="main">
        <el-row :gutter="10">
          <el-col :xs="24" :lg="17" >
            <div class="main-left">
          <div class="main-left-top">
            <el-row type="flex" justify="space-between">
              <el-col :span="5">
                <div class="tp-col" @click="godeliver()">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="tp-le">
                        <span>超时订单</span>
                        <p>{{waitFor.deliveredTimeNum}}</p>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="tp-img">
                        <img src="@/assets/image/stay1.png" alt="" >
                      </div>
                    </el-col>
                  </el-row> 
                </div>
              </el-col>
              <el-col :span="5">
                <div class="tp-col" @click="godeliver()">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="tp-le">
                        <span>24小时需发货</span>
                        <p>{{waitFor.deliverTime24Num}}</p>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="tp-img">
                        <img src="@/assets/image/stay2.png" alt="">
                      </div>
                    </el-col>
                  </el-row> 
                </div>
              </el-col>
              <el-col :span="5">
                <div class="tp-col" @click="godeliver()">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="tp-le">
                        <span>48小时需发货</span>
                        <p>{{waitFor.deliverTime48Num}}</p>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="tp-img">
                        <img src="@/assets/image/stay3.png" alt="">
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="tp-col" @click="afterSale()">
                  <el-row :gutter="10">
                    <el-col :span="12">
                      <div class="tp-le">
                        <span>待处理售后</span>
                        <p>{{waitFor.afterSaleNum}}</p>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="tp-img">
                        <img src="@/assets/image/stay4.png" alt="">
                      </div>
                    </el-col>
                  </el-row> 
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="main-left-foot">
            <div style="margin:30px 0 0 24px;">
              <span class="ft-sp">店铺数据</span>
              <div class="main-left-foot-top">
                <el-date-picker
                  size="mini"
                  v-model="value1"
                  @change="dateTimechange"
                  :picker-options="pickerOptions"
                  value-format="timestamp"
                  :default-time="['00:00:00', '23:59:59']"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
                <el-radio-group v-model="numSelect" @change="getnumData" size="small" style="margin-left: 18px;">
                  <el-radio-button label="11">订单数据</el-radio-button>
                  <!-- <el-radio-button label="12">商品数据</el-radio-button> -->
                  <el-radio-button label="13">销量排行</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div style="margin-top:38px;padding:16px 16px 0;" v-show="isShowData">
              <line-chart :chart-data="numberChartData"/>
            </div>
            <div style="margin-top:38px;padding:16px 16px 0;" v-show="!isShowData">
              <el-table
                :data="storeGoods"
                stripe
                style="width: 100%">
              <el-table-column
                type="index"
                label="排名"
                align="center"
                width="150">
              </el-table-column>
              <el-table-column
                prop = 'goods_title'
                label="商品名称"
                align="center"
                width="400">
              </el-table-column>
              <el-table-column
                prop="sale"
                label="销量"
                align="center"
                width="300">
              </el-table-column>
              <el-table-column
                prop="total_price"
                align="center"
                label="营业额">
              </el-table-column>
            </el-table>
            </div>
          </div>
        </div>
          </el-col>
          <el-col :xs="24" :lg="7"  >
            <div class="main-right">
          <div class="main-right-top">
            <div class="sa">常用功能</div>
            <div style="margin-top:24px;">
              <el-row :gutter="10">
                <el-col :span="8">
                  <div style="text-align:center;cursor: pointer;" @click="goCommodity()">
                    <div class="right-top-item">
                      <img src="@/assets/image/release.png" alt="">
                    </div>
                    <p>发布商品</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="main-right-top-point" style="text-align:center;cursor: pointer;" @click="goMyAssets()">
                    <div class="right-top-item">
                      <img src="@/assets/image/release.png" alt="">
                    </div>
                    <p>资产提现</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="text-align:center;">
                    <div class="right-top-item">
                      <img src="@/assets/image/release.png" alt="">
                    </div>
                    <p>版本记录</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="main-right-foot">
            <div style="overflow:hidden;">
              <span class="main-right-foot-sn">系统消息</span>
              <span class="main-right-foot-sa">更多>></span>
            </div> 
              <ul>
                <li>
                  <!-- <div class="main-right-foot-le">
                    <div style="color:#F0444E">重要</div>
                  </div> -->
                  <span class="foot-le-text">暂无消息</span>
                </li>
                <li>
                  <!-- <div class="main-right-foot-le">
                    <div style="color:#F0444E">重要</div>
                  </div> -->
                  <span class="foot-le-text">暂无消息</span>
                </li>
                <li>
                  <!-- <div class="main-right-foot-ri foot-color">
                    <div style="color:#F09C33;">新</div>
                  </div> -->
                  <span class="foot-le-text">暂无消息</span>
                </li>
                <li>
                  <!-- <div class="main-right-foot-ri foot-color">
                    <div >新</div>
                  </div> -->
                  <span class="foot-le-text">暂无消息</span>
                </li>
                <li>
                  <!-- <div class="main-right-foot-ri foot-color">
                    <div >新</div>
                  </div> -->
                  <span class="foot-le-text">暂无消息</span>
                </li>
                <li>
                  <!-- <div class="main-right-foot-ri foot-color">
                    <div>新</div>
                  </div> -->
                  <span class="foot-le-text">暂无消息</span>
                </li>
                <li>
                  <!-- <div class="main-right-foot-ri">
                    <div></div>
                  </div> -->
                  <span class="foot-le-text">暂无消息</span>
                </li>
              </ul>
          </div>
        </div>
          </el-col>
        </el-row>   
      </div>
      <!-- 底部 -->
      <div class="footer">
        <el-row :gutter="10">
          <el-col :xs="24"  :lg="17">
            <div class="footer-left">
          <div style="margin:0 0 0 24px;">
              <span class="footer-sp">热销类目排行</span>
              <!-- <div class="main-left-foot-top">
                <el-date-picker
                  size="mini"
                  v-model="value2"
                  @change="RankTimechange"
                  :picker-options="pickerOptions"
                  value-format="timestamp"
                  :default-time="['00:00:00', '23:59:59']"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
                <el-select v-model="Category" placeholder="请选择"  size="small">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div> -->
          </div>
           <el-table
            style="margin-top:15px;padding:16px 16px 0;"
            :cell-style='changeCellStyle'
            :header-cell-style="{background:'linear-gradient(0deg, #FCEBCE 0%, #FEF6E9 100%)',color:'#955300'}"
            :data="cateGory">
            <el-table-column
              type="index"
              label="排名"
              align="center"
              width="200">
              <template slot-scope="scope">
               <div :class="scope.$index==0?'foot-index':'foot-indexone'">
                 <img src="@/assets/image/yelimg.png" alt=""  v-if="(scope.$index==0)">
                 <img src="@/assets/image/blaimg.png" alt="" v-if="(scope.$index!==0)">
                 <span class="foot-table-text">{{scope.$index+1}}</span>
               </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="category_name"
              label="品类"
              align="center"
              min-width="30%"
              >
            </el-table-column>
            <el-table-column
              prop="num"
              label="商品总数"
              align="center"
              min-width='30%' >
              <template slot-scope="scope">
               <div class="foot-table">
                 <!-- <img src="@/assets/image/all-shop.png" alt="" class="foot-table-img"> -->
                 <span class="foot-table-text">{{scope.row.num}}</span>
               </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="sale"
              align="center"
              label="交易量"
              min-width="25%"
              >
              <template slot-scope="scope">
               <div class="foot-table">
                 <!-- <img src="@/assets/image/all-shop1.png" alt="" class="foot-table-imgone"> -->
                 <span class="foot-table-text">{{scope.row.sale}}</span>
               </div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="category_id"
              align="center"
              label="分类名称">
            </el-table-column> -->
          </el-table>
            </div>
          </el-col>
          <el-col :xs="24"  :lg="7">
            <div class="footer-right">
              <div class="footer-right-top">
                <span class="footer-right-top-text">商家成长</span>
                <div class="footer-right-top-item">
                  <div class="footer-right-top-img footer-top-one" @click="openDia()">
                    <span>规则中心</span>
                    <p>GO></p></p>
                  </div>
                  <div class="footer-right-top-img footer-top-two" @click="openDia()">
                    <span>学习中心</span>
                    <p>GO></p></p>
                  </div>
                  <div class="footer-right-top-img footer-top-thr" style="margin-top:15px;"@click="openDia()">
                    <span>商家成长</span>
                    <p>GO></p></p>
                  </div>
                </div>
              </div>
              <div class="footer-right-bot">
                <img src="@/assets/image/more.png" alt="" style="width:100%;">
              </div>
            </div>
          </el-col>
        </el-row>  
      </div>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <p class="dia-text">该模块内容正在建设中，敬请期待</p>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getStatisticalHome,
  getOperationalData,
  getGoodsSale,
  getStoreData,
} from "@/api/system/home/home.js";
import LineChart from "./dashboard/LineChart";
export default {
  name: "Index",
  components: {
    LineChart,
  },
  data() {
    return {
      delivery: "", //发货率
      beSettled: "", //待结算金额
      beGmv: "", //gmv
      dialogVisible: false, //控制弹框
      numberValue: "1", //控制运营数据时间筛选
      operate: {}, //运营数据
      waitFor: {}, //待办事项数据
      numberChartData: {}, //柱状图数据
      numberChartDataCopy: {}, //柱状图默认数据
      storeOrder: {}, //店铺数据-订单数据
      storeGoods: [], //店铺销量数据
      storeGoodsCopy: [], //销量排行默认数据
      cateGory: [], //热销类目数据
      numSelect: "11", //统计图数据切换
      isShowData: true, //控制柱状图的切换
      value1: [], //店铺数据时间查询
      value2: [], //热销类目时间查询
      //时间筛选验证
      pickerOptions: {
        disabledDate(time) {
          let curDate = new Date().getTime();
          let three = 30 * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          return time.getTime() > Date.now() || time.getTime() < threeMonths;
        },
      },
      //下拉框数据
      options: [
        {
          value: "一",
          label: "一级类目",
        },
        {
          value: "二",
          label: "二级类目",
        },
        {
          value: "三",
          label: "三级类目",
        },
      ],
      Category: "一级类目",
    };
  },
  created() {
    this.GetDefaultData();
  },
  watch: {
    value1: {
      handler: function () {
        if (this.value1 == null) {
          this.value1 = [];
        }
      },
    },
  },
  methods: {
    openDia() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    //跳转到我的资产
    goMyAssets() {
      this.$router.push("/system/asset/myAsset");
    },
    //跳转到商品发布页面
    goCommodity() {
      this.$router.push("/system/goods/add");
    },
    //跳转到售后
    afterSale() {
      this.$router.push("/system/repeat/retreat");
    },
    //跳转到订单列表
    godeliver() {
      this.$router.push("/system/order/index");
    },
    //跳转到订单列表
    // goovertime() {
    //   this.$router.push({
    //     path: "/system/order/index",
    //     // query: { timeout: 24 },
    //   });
    // },
    //获取默认数据
    async GetDefaultData() {
      const result = await getStatisticalHome();
      this.operate = result.data.operational_data; //运营数据
      this.waitFor = result.data.seller_todo_data; //代办事项
      this.storeOrder = result.data.store_order_data; //店铺数据-订单数据
      let arr = result.data.store_goods_sale_data; //对营业额进行分处理
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        item.total_price = item.total_price / 100;
      }
      this.storeGoods = arr; //销量排行数据
      this.cateGory = result.data.category_sale_data; //热销类目排行数据
      // this.numberChartData=this.storeOrder//柱状图数据
      this.delivery = result.data.operational_data.delivery_rate / 100; //发货率
      this.beSettled = result.data.operational_data.unsettled_amount / 100; //待结算数据
      this.beGmv = result.data.operational_data.order_total_price / 100; //GMV数据
      let storeObject = {}; //柱状图数据
      storeObject.date = this.storeOrder.date;
      let catePrice = this.storeOrder.customer_price.map((item) => {
        return item / 100;
      });
      let orderPrice = this.storeOrder.order_total.map((item) => {
        return item / 100;
      });
      storeObject.customerprice = catePrice;
      storeObject.ordercount = this.storeOrder.order_count;
      storeObject.ordertotal = orderPrice;
      this.numberChartData = storeObject; //给柱状图传的数据
      this.numberChartDataCopy = storeObject; //默认订单数据
      this.storeGoodsCopy = arr; //默认销量排行数据
    },
    //统计店铺数据时间和排行数据
    async dateTimechange() {
      if (this.value1 == null) {
        this.value1 = [];
        let objNum = this.numberChartDataCopy;
        let objStore = this.storeGoodsCopy;
        this.numberChartData = objNum;
        this.storeGoods = objStore;
      } else if (this.numSelect == "11") {
        let query = {};
        query.start_time = this.value1[0] / 1000;
        query.end_time = this.value1[1] / 1000;
        query.seller_id = this.$store.state.user.sellerid;
        const result = await getStoreData(query);
        let storeObject = {};
        storeObject.date = result.data.date;
        let catePrice = result.data.customer_price.map((item) => {
          return item / 100;
        });
        storeObject.customerprice = catePrice;
        storeObject.ordercount = result.data.order_count;
        let orderPrice = result.data.order_total.map((item) => {
          return item / 100;
        });
        storeObject.ordertotal = orderPrice;
        this.numberChartData = storeObject;
      } else if (this.numSelect == "13") {
        let query = {};
        query.start_time = this.value1[0] / 1000;
        query.end_time = this.value1[1] / 1000;
        const result = await getGoodsSale(query);
        //对金额进行除以100修改
        let arr = result.data;
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i];
          item.total_price = item.total_price / 100;
        }
        this.storeGoods = arr;
      } else {
        return;
      }
    },
    //热销类目排行数据时间
    RankTimechange() {
      // let query={}
      // query.start_time=this.value1[0]
      // query.end_time=this.value1[1]
      // const result=await getGoodsSale(query)
      // console.log(result)
      // console.log(query)
      // console.log(this.value2,'热销类目选择时间')
    },
    //修改表格样式
    changeCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === "品类") {
        return "color: #000000;font: 500 14px AlibabaPuHuiTi-Regular;margin-left:50px;";
      } else {
        return "";
      }
    },
    //时间筛选按钮
    async getnumbersTime(e) {
      let query = {};
      query.seller_id = this.$store.state.user.sellerid;
      if (e == 1) {
        const result = await getOperationalData(query);
        this.delivery = result.data.delivery_rate / 100;
        this.beSettled = result.data.unsettled_amount / 100;
        this.beGmv = result.data.order_total_price / 100;
        this.operate = result.data;
      } else if (e == 7) {
        query.day = e;
        const result = await getOperationalData(query);
        this.delivery = result.data.delivery_rate / 100;
        this.beSettled = result.data.unsettled_amount / 100;
        this.beGmv = result.data.order_total_price / 100;
        this.operate = result.data;
      } else if (e == 15) {
        query.day = e;
        const result = await getOperationalData(query);
        this.delivery = result.data.delivery_rate / 100;
        this.beSettled = result.data.unsettled_amount / 100;
        this.beGmv = result.data.order_total_price / 100;
        this.operate = result.data;
      }
    },
    //数据统计按钮
    getnumData(e) {
      if (e == 11) {
        this.isShowData = true;
        if (this.value1.length !== 0) {
          this.dateTimechange();
        }
      } else if (e == 13) {
        this.isShowData = false;
        if (this.value1.length !== 0) {
          this.dateTimechange();
        }
      } else {
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped type="text/stylus">
.dashboard-promote .el-row {
  margin-bottom: 20px;
  font-size: 14px;
}
.dashboard-promote {
  margin-left: 21px;
}
//头部
.header {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 8px;
}
.header .header-top {
  margin-top: 29px;
}
.header .sp {
  width: 63px;
  height: 16px;
  margin-left: 24px;
  font: 400 16px/5px Alibaba PuHuiTi;
  color: #000000;
}
.header-foot {
  width: 100%;
  height: 100px;
  margin-top: 39px;
  overflow: hidden;
}
.foot-le {
  width: 66%;
  text-align: center;
  display: inline-block;
}
.header-img {
  vertical-align: middle;
}
.header-span {
  font: 600 14px/11px Lantinghei SC;
  color: #333333;
}
.header-p {
  font: 600 24px/17px Lantinghei SC;
  color: #344750;
}
.foot-ri {
  width: 33%;
  height: 80px;
  display: inline-block;
  text-align: center;
  border-left: 2px solid #e6edfe;
}
@media screen and (max-width: 1600px) {
  .main-left-top .tp-col .tp-img {
  display: none;
}
}
@media screen and (max-width: 1490px) {
  .footer-top-two{
    margin-top: 15px;
  }
}
@media screen and (max-width: 1637px) {
  .footer-top-two{
    margin-top: 15px;
  }
}
@media screen and (max-width: 1200px) {
.main-left-top .tp-le{
  width: 100%;
  text-align: center;
    
}
.main-right-top,.footer-right{
  margin-top: 20px;
  margin-left: -15px;
}
.main-right-foot{
  margin-left: -15px;
}
.footer-top-one{
    margin-top: 15px;
  }
// .footer-left{
//   margin-top: 20px;
// }
// .main-left-top .tp-col {
//   background: #ffffff;
// }
}
//中间部分
.main {
  width: 100%;
  // height: 612px;
  margin-top: 20px;
}
.main .main-left {
  // float: left;
  height: 592px;
}
.main-left-top .tp-le,.tp-img {
  display: inline-block;
  text-align: center;
  margin-top: 27px;
}
.main-left-top .tp-col {
  // width: 281px;
  cursor: pointer;
  height: 106px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
  border-radius: 4px;
}
.main-left-top .tp-le {
  width: 163px;
}
.main-left-top .tp-col span {
  font: 400 14px/11px Alibaba PuHuiTi;
  color: #333333;
}
.main-left-top .tp-col p {
  font: bold 24px/17px Alibaba PuHuiTi;
  color: #19191a;
}
.main-left-foot {
  height: 466px;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
}
.main-left-foot .ft-sp {
  font: 400 16px/5px Alibaba PuHuiTi;
  color: #000000;
}
.main-left-foot-top {
  float: right;
  margin-right: 49px;
}
//右侧内容
.main-right {
  z-index: 10000;
  height: 592px;
  margin-left: 15px;
}
.main-right-top {
  height: 198px;
  // overflow: hidden;
  background: #ffffff;
  border-radius: 4px;
}
.main-right-top .sa {
  display: inline-block;
  margin: 30px 0 0 26px;
  font: 400 16px/5px Alibaba PuHuiTi;
  color: #000000;
}
.main-right-top .right-top-item {
  width: 70px;
  height: 70px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f6ff;
  border-radius: 10px;
}
.main-right-top-point{
  cursor: pointer;
}
.main-right-foot {
  height: 374px;
  margin-top: 20px;
  background: #ffffff;
  border-radius: 4px;
}
.main-right-foot ul {
  margin: 24px 0 0 25px;
}
.main-right-foot ul li {
  margin-bottom: 16px;
  cursor: pointer;
}
.main-right-foot-sn {
  display: inline-block;
  margin: 30px 0 0 25px;
  cursor: pointer;
  font: 400 16px Alibaba PuHuiTi;
  color: black;
}
.main-right-foot .main-right-foot-sa {
  float: right;
  margin: 30px 25px 0 0;
  cursor: pointer;
  font: 400 14px Alibaba PuHuiTi;
  color: #999999;
}
.main-right-foot .main-right-foot-le {
  display: none;
  width: 37px;
  height: 22px;
  display: inline-block;
  background: #fff5f6;
  border-radius: 4px;
}
.main-right-foot .main-right-foot-ri {
  display: none;
  width: 23px;
  height: 22px;
  display: inline-block;
  border-radius: 4px;
}
.foot-color {
  background: #fff6ed;
}
.main-right-foot-le,
.main-right-foot-ri div {
  text-align: center;
  line-height: 22px;
  font: 400 14px Alibaba PuHuiTi;
  font-style: italic;
}
.main-right-foot .foot-le-text {
  margin-left: 46px;
  font: 400 14px Alibaba PuHuiTi;
  color: #000000;
}
//底部样式
.footer-left {
  height: 448px;
  background: #ffffff;
  border-radius: 4px;
}
.footer-left .footer-sp{
  margin: 30px 0 0 23px;
  display: inline-block;
  font: 400 16px/5px Alibaba PuHuiTi;
  color: #000000;
}
.footer-right-top {
  width: 100%;
  // height: 276px;
  background: #ffffff;
  border-radius: 4px;
  display: inline-block;
  margin-left: 15px;
}
.footer-right-top-text {
  font: 400 16px Alibaba PuHuiTi;
  color: #000000;
  line-height: 5px;
  display: inline-block;
  margin: 30px 0 0 24px;
}
.footer-right-top-item {
  width: 88%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 24px auto;
}
.footer-right-top-img {
  cursor: pointer;
  width: 177px;
  height: 81px;
  border: 1px dotted black;
}
.footer-top-one {
  background-image: url(../assets/image/background-item1.png);
}
.footer-top-two {
  background-image: url(../assets/image/background-item2.png);
}
.footer-top-thr {
  background-image: url(../assets/image/background-item3.png);
}
.footer-right-top-img span {
  display: inline-block;
  font: 400 14px/2px Microsoft YaHei;
  color: #000000;
  margin: 20px 0 0 23px;
}
.footer-right-top-img p {
  font: 400 14px/2px FZZhengHeiS-B-GB;
  color: #c7cad7;
  margin: 14px 0 0px 23px;
}
.footer-right-bot {
  width: 100%;
  margin-top: 20px;
  display: inline-block;
  margin-left: 15px;
}
.foot-table-img {
  position: absolute;
  vertical-align: middle;
  left: 36%;
  top: 14%;
}
.foot-table-imgone {
  position: absolute;
  vertical-align: middle;
  left: 41%;
  top: 14%;
}
.foot-table {
  position: relative;
}
.dia-text {
  text-align: center;
  font: 600 24px FZZhengHeiS-B-GB;
  color: #000000;
}
.foot-index {
  margin: auto;
  width: 48px;
  height: 19px;
  background: #feeee5;
  border-radius: 10px;
}
.foot-indexone {
  margin: auto;
  width: 48px;
  height: 19px;
  background: #f5f7fa;
  border-radius: 10px;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.dashboard-editor-container {
  background-color: #f1f4fa;
  position: relative;
  height: calc(100%);
  overflow-y: scroll;
  overflow-x: hidden;
}
</style>