<template>
  <div class="container">
    <div class="left-bar">

      <display-board class="trade_left" style="width: 100%" title="已开票未收款">
        <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
      </display-board>
    </div>
    <div class="right-container">
      <div class="right-top">
        <display-board class="trade_middle" style="width: 61%" title="应收款情况" corner_size="large">
          <div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
            <simple-card v-for="data in arSummary" style="width: 30%;height: 100%">
              <title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'"
                                  isCenter isBold/>
            </simple-card>
          </div>
          <ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
        </display-board>
        <display-board class="trade_right" style="width: 33%" title="潜在客户">
          <winners-list style="height: 96%;overflow: auto;" :mouseHand="true" id="lose_user_list" :rows="lossUserList"/>
        </display-board>
      </div>
      <div class="right-bottom" >

        <display-board class="left" style="width: 61%" corner_size="large">
          <div style="display: flex; justify-content: space-between; width: 100%; height: 50%; padding-top: 2rem;">
            <div ref="areaBar" style="width: 100%; height: 100%;"/>
          </div>
          <div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" >
            <showcase style="width: 16%;" title="当日订单量">
              <title-content-mark
                style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
                content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
              />
              <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                  content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                  :content="drddl.amount+' 万元'" />
            </showcase>
            <showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
              <title-content-mark
                style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
                content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
              />
              <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                  content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                  :content="drydl.weight + ' 万吨'" />
            </showcase>
            <showcase style="width: 16%;" title="当日完成量">
              <title-content-mark
                style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
                content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
              />
              <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                  content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                  :content="drwcl.amount+ ' 万元'" />
            </showcase>
            <showcase style="width: 16%;" title="余量">
              <title-content-mark
                style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
                content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
              <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                  content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                  :content="yl.amount+ ' 万元'" />
            </showcase>
            <showcase style="width: 16%;" title="潜在客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
              <title-content-mark
                style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
                content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
              />
              <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                  content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                  :content="lskh.amount+ ' 万元'" />
            </showcase>
            <showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
              <title-content-mark
                style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
                content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
              />
              <title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
                                  content-style="font-size: 14px;" mark-style="font-size: 10px;"
                                  :content="xzkh.amount + ' 万元'" />
            </showcase>
          </div>
        </display-board >
        <display-board class="right" style="width: 33%" title="当日订单量占比">
        <div
          style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
          <ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;z-index: 999" name="运输类型占比"
                          :data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"
                          :value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
          <ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比"
                          :data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"
                          :value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
        </div>
      </display-board>
      </div>
    </div>
  </div>
</template>
<script>
import DisplayBoard from "../components/container/display-board.vue";
import Showcase from "../components/container/showcase.vue";
import ContrastCard from "../components/card/contrast-card.vue";
import SimpleCard from "../components/card/simple-card.vue";
import ArSummaryBar from "../components/chart/ar-summary-bar.vue";
import WinnersList from "../components/card/winners-list.vue";
import TitleContentMark from "../components/layout/title-content-mark.vue";
import TableColumn from "../components/table/table-column.vue";
import RingPieChart from "../components/chart/ring-pie-chart.vue";
import {
  arSummaryBar,
  getAccountSituation,
  arCompanyList,
  lostUserList,
  getBusinessConditionDatas,
  getOrderLoseAddCustomer,
  getOrderBusinessConditionData, getShipmentDataByArea
} from "../../api/apiList"
import {calc_hb_str, calc_tb_str, conver_amont, conver_num_retain} from "../../utils/numUtil";
import {getTransportTypeOrderFinishPie, getCustomerOrderFinishPie} from "./js/indexPieData";
import moment from 'moment'
import {getTargetOrderDataByConditionCount} from "./js/targetAchievementData";
import * as echarts from "echarts";
export default {
  components: {
    RingPieChart,
    TableColumn,
    TitleContentMark,
    Showcase,
    DisplayBoard,
    ContrastCard,
    SimpleCard,
    ArSummaryBar,
    WinnersList
  },
  data() {
    return {
      today: moment().format("yyyy-MM-DD"),
      yyqk: {
        yye: {
          title: "营业额",
          amount: "20,303",
          unit: "万元",
          hb: [
            {
              title: "昨天",
              amount: "21,000",
              rate: "-3.32%",
            },
            {
              title: "上月",
              amount: "20,000",
              rate: "+4.92%",
            },
          ],
        },
        cb: {
          title: "成本",
          amount: "10,303",
          unit: "万元",
          hb: [
            {
              title: "昨日",
              amount: "11,000",
              rate: "-2.68%",
            },
            {
              title: "上月",
              amount: "10,000",
              rate: "+5.71%",
            },
          ],
        },
        ml: {
          title: "毛利",
          amount: "10,000",
          unit: "万元",
          hb: [
            {
              title: "昨日",
              amount: "10,000",
              rate: "0.00%",
            },
            {
              title: "上月",
              amount: "10,000",
              rate: "0.00%",
            },
          ],
        },
      },
      arSummary: [
        {title: '累计营业收入（当年）', value: '20,303'},
        {title: '应收款（财务）', value: '20,303'},
        {title: '应收款（营销）', value: '20,303',},
      ],
      lskh: {
        weight: "2,000",
        amount: "20,000",
      },
      xzkh: {
        weight: "2,000",
        amount: "20,000",
      },
      drddl: {
        weight: "2,000",
        amount: "20,000",
      },
      drydl: {
        count: "2,000",
        weight: "20,000",
      },
      drwcl: {
        weight: "2,000",
        amount: "20,000",
      },
      zkqk: {
        yszk: {
          title: "应收账款",
          amount: "20,303",
          unit: "万元",
          hb: [
            {
              title: "昨天",
              amount: "21,000",
              rate: "-3.32%",
            },
            {
              title: "上月",
              amount: "20，000",
              rate: "+4.92%",
            },
          ],
        },
        yfzk: {
          title: "应付账款",
          amount: "10,303",
          unit: "万元",
          hb: [
            {
              title: "昨日",
              amount: "11,000",
              rate: "-2.68%",
            },
            {
              title: "上月",
              amount: "10,000",
              rate: "+5.71%",
            },
          ],
        },
        zsye: {
          title: "账上余额",
          amount: "10,000",
          unit: "万元",
          hb: [
            {
              title: "昨日",
              amount: "10,000",
              rate: "0.00%",
            },
            {
              title: "上月",
              amount: "10,000",
              rate: "0.00%",
            },
          ],
        },
      },
      yl: {
        weight: "2,000",
        amount: "20,000",
      },
      mockData: {
        zqk: {
          yszk: {
            title: "应收账款",
            amount: "20,303",
            unit: "万元",
            hb: [
              {
                title: "昨天",
                amount: "21,000",
                rate: "-3.32%",
              },
              {
                title: "上月",
                amount: "20，000",
                rate: "+4.92%",
              },
            ],
          },
          yfzk: {
            title: "应付账款",
            amount: "10,303",
            unit: "万元",
            hb: [
              {
                title: "昨日",
                amount: "11,000",
                rate: "-2.68%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "+5.71%",
              },
            ],
          },
          zsye: {
            title: "账上余额",
            amount: "10,000",
            unit: "万元",
            hb: [
              {
                title: "昨日",
                amount: "10,000",
                rate: "0.00%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "0.00%",
              },
            ],
          },
        },
        sr: [
          {
            title: '累计营业收入（当年）',
            value: '20,303',
          },
          {
            title: '应收款（财务）',
            value: '20,303',
          },
          {
            title: '应收款（营销）',
            value: '20,303',
          },
        ],
        mrmbqk: [
          {
            title: "吨位(万吨)",
            actualValue: "20,303",
            currentValue: "21,000",
          },
          {
            title: "营业额(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
          {
            title: "净利润(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
        ],
        ydmbqk: [
          {
            title: "吨位(万吨)",
            actualValue: "20,303",
            currentValue: "21,000",
          },
          {
            title: "营业额(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
          {
            title: "净利润(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
        ],
        drddl: {
          weight: "2,000",
          amount: "20,000",
        },
        drwcl: {
          weight: "2,000",
          amount: "20,000",
        },
        yl: {
          weight: "2,000",
          amount: "20,000",
        },
        lskh: {
          weight: "2,000",
          amount: "20,000",
        },
        xzkh: {
          weight: "2,000",
          amount: "20,000",
        },
        ndmbqk: [
          {
            title: "吨位(万吨)",
            actualValue: "20,303",
            currentValue: "21,000",
          },
          {
            title: "营业额(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
          {
            title: "净利润(万元)",
            actualValue: "32,342",
            currentValue: "21,000",
          },
        ],
        zkqk: {
          yszk: {
            title: "应收账款",
            amount: "20,303",
            unit: "万元",
            hb: [
              {
                title: "昨天",
                amount: "21,000",
                rate: "-3.32%",
              },
              {
                title: "上月",
                amount: "20，000",
                rate: "+4.92%",
              },
            ],
          },
          yfzk: {
            title: "应付账款",
            amount: "10,303",
            unit: "万元",
            hb: [
              {
                title: "昨日",
                amount: "11,000",
                rate: "-2.68%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "+5.71%",
              },
            ],
          },
          zsye: {
            title: "账上余额",
            amount: "10,000",
            unit: "万元",
            hb: [
              {
                title: "昨日",
                amount: "10,000",
                rate: "0.00%",
              },
              {
                title: "上月",
                amount: "10,000",
                rate: "0.00%",
              },
            ],
          },
        },
        barChart: {
          textStyle: {color: "#fff"},
          tooltip: {},
          xAxis: {
            data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款']
          },
          yAxis: {},
          series: [
            {
              name: '开票详情',
              type: 'bar',
              data: [500, 300, 500, 1001, 319],
              color: "#7f83f7",
              label: {
                show: true,
                position: 'top',
                color: "#fff",
              },
            }
          ]
        },
        drddlzb: {
          transportType: [
            {value: 2500, name: '汽运'},
            {value: 100, name: '码头/仓库'},
            {value: 500, name: '铁运'},
            {value: 484, name: '水运'},
          ],
          customer: [
            {value: 500, name: '上海欧冶物流股份有限公司'},
            {value: 2500, name: '宝钢运输部'},
            {value: 1100, name: '宝山钢铁股份有限公司'},
          ]
        },
      },
      paths: {
        "营业额": "yye",
        "成本": "cb",
        "毛利": "ml",
      },
      areaBarData: {
        tooltip: {
          trigger: 'axis'
        },
        textStyle: {
          color: "#FFFFFF",
          fontSize: "12"
        },
        grid: {
          containLabel: true,
          top: "10%",
          bottom: '0'
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#1E2C58"
            }
          },

        },
        xAxis: {
          data: ['华南', '华北', '华东', '华西', '华中', '东北'],
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "12",
          },
          axisTick: {
            show: false
          }
        },
        series: []
      },
      dataset: {},
      transportTypeOrderFinishPie: [],
      customerOrderFinishPie: [],
      arCompanyList: [],
      lossUserList: [],
      charts: {},
      targetAchievement:{
        day: null,
        month: null,
        year: null,
      }
    }
  },
  methods: {
    cellStyleFunction(data) {
      let res = {color: '#33ff66'};
      if (data.indexOf('-') !== -1) {
        res.color = '#ff3300'
      }
      return res;
    },
    resizeChart() {
      for (let chartsKey in this.charts) {
        this.charts[chartsKey].resize();
      }
    },
    routerTo(path, code) {
      this.$router.push({path: path, query: {code: code}});
    },
    //营业情况
    showBusinessConditionDatas() {
      let res = getBusinessConditionDatas(this.today)
      res.then(data => {
        data = data.data;
        //营业额
        this.yyqk.yye.amount = conver_amont(data.cur_sell_settle_amount);
        this.yyqk.yye.hb[0].amount = conver_amont(data.pre_sell_settle_amount);
        this.yyqk.yye.hb[0].rate = calc_hb_str(data.cur_sell_settle_amount, data.pre_sell_settle_amount);
        this.yyqk.yye.hb[1].amount = conver_amont(data.pre_month_sell_settle_amount);
        this.yyqk.yye.hb[1].rate = calc_tb_str(data.cur_sell_settle_amount, data.pre_month_sell_settle_amount);
        //成本
        this.yyqk.cb.amount = conver_amont(data.cur_buy_settle_amount);
        this.yyqk.cb.hb[0].amount = conver_amont(data.pre_buy_settle_amount);
        this.yyqk.cb.hb[0].rate = calc_hb_str(data.cur_buy_settle_amount, data.pre_buy_settle_amount);
        this.yyqk.cb.hb[1].amount = conver_amont(data.pre_month_buy_settle_amount);
        this.yyqk.cb.hb[1].rate = calc_tb_str(data.cur_buy_settle_amount, data.pre_month_buy_settle_amount);
        //毛利
        this.yyqk.ml.amount = conver_amont(data.cur_gross_profit_amount);
        this.yyqk.ml.hb[0].amount = conver_amont(data.pre_gross_profit_amount);
        this.yyqk.ml.hb[0].rate = calc_hb_str(data.cur_gross_profit_amount, data.pre_gross_profit_amount);
        this.yyqk.ml.hb[1].amount = conver_amont(data.pre_month_gross_profit_amount);
        this.yyqk.ml.hb[1].rate = calc_tb_str(data.cur_gross_profit_amount, data.pre_month_gross_profit_amount);
      })
    },
    // 跳转已开票未收款页面
    goArBar() {
      this.$router.push('/ar_bar')
    },
    // 跳转到应收账款汇总表
    goAccRevSearch() {
      parent.window.location = '/#/l/accounts_receivable_statistics_search'
    },
    // 获取应收账款数据
    getArSummaryBar() {
      arSummaryBar().then(res => {
        let data = res.data
        let seriesData = []
        seriesData.push(data.unsettled_amount)
        seriesData.push(data.settled_amount)
        seriesData.push(data.unregister_amount)
        seriesData.push(data.receivable_amount)
        seriesData.push(data.cancelled_amount)
        this.arSummary[0].value = conver_num_retain(data.total_amount)
        this.arSummary[1].value = conver_num_retain(data.unregister_amount)
        this.arSummary[2].value = conver_num_retain(data.receivable_amount)
        this.zkqk.yszk.amount = conver_num_retain(data.receivable_amount)
        this.$refs.arSummaryBar.drawArSummaryBar(seriesData)
      }).catch(err => {
        console.log(err);
      });
    },
    //获取账款情况
    getAccountSituation(){
      getAccountSituation(this.today).then(res => {
        let data = res.data
        this.zkqk.yszk.hb[0].amount = conver_amont(data.per_day_receivable_amount);
        this.zkqk.yszk.hb[0].rate = calc_hb_str(this.zkqk.yszk.amount, data.per_day_receivable_amount);
        this.zkqk.yszk.hb[1].amount = conver_amont(data.per_month_receivable_amount);
        this.zkqk.yszk.hb[1].rate = calc_tb_str(this.zkqk.yszk.amount, data.per_month_receivable_amount);

        this.zkqk.yfzk.amount = conver_amont(data.payable_amount)
        this.zkqk.yfzk.hb[0].amount = conver_amont(data.per_day_payable_amount);
        this.zkqk.yfzk.hb[0].rate = calc_hb_str(data.payable_amount, data.per_day_receivable_amount);
        this.zkqk.yfzk.hb[1].amount = conver_amont(data.per_month_payable_amount);
        this.zkqk.yfzk.hb[1].rate = calc_tb_str(data.payable_amount, data.per_month_payable_amount);

        this.zkqk.zsye.amount = conver_amont(data.acc_bla)
        this.zkqk.zsye.hb[0].amount = conver_amont(data.per_day_acc_bla);
        this.zkqk.zsye.hb[0].rate = calc_hb_str(data.acc_bla, data.per_day_acc_bla);
        this.zkqk.zsye.hb[1].amount = conver_amont(data.per_month_acc_bla);
        this.zkqk.zsye.hb[1].rate = calc_tb_str(data.acc_bla, data.per_month_acc_bla);

      }).catch(err => {
        console.log(err);
      });

    },
    // 获取已开票未收款排行
    getArCompanyList() {
      arCompanyList().then(res => {
        if (res.data.length) {
          this.arCompanyList = res.data
        }
      }).catch(err => {
        console.log(err);
      });
    },
    // 获取已开票未收款排行
    getLostUserList() {
      lostUserList(this.today).then(res => {
        if (res.data.length) {
          this.lossUserList = res.data
        }
      }).catch(err => {
        console.log(err);
      });
    },
    refreshData() {
      getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today);
      getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today);
      this.showBusinessConditionDatas();
      this.getArSummaryBar();
      this.getAccountSituation();
      this.getArCompanyList();
      this.getLostUserList();
      this.getLoseAndAdd();
      this.getOrderBusinessCondition();
      this.getTargetOrderDataByConditionCount();
      this.getShipmentAreaBar();
    },
    getShipmentAreaBar() {
      let chartDom = this.$refs.areaBar;
      this.areaBar = echarts.init(chartDom);
      getShipmentDataByArea(this.today).then(res => {
        var data = ['10','20','30','40','50','60'];
        var data2 = [];
        data.forEach(function (row) {
          var num = 0;
          res.data.forEach(function (data) {
            if(data.area_name === row){
              num = data.finished_weight_sum;
            }
          });
          data2.push(num);
        });
        this.areaBarData.series =
          [{
            name: '完成量',
            type: 'bar',
            xAxisIndex: null,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: data2
          }];
        this.areaBar.setOption(this.areaBarData);
      });
    },
    pieDataValueFormatter(param) {
      return conver_amont(param) + "万吨";
    },
    pieDataFormatter(param) {
      return param.name + '\r\n' + this.pieDataValueFormatter(param.value);
    },
    getLoseAndAdd() {
      getOrderLoseAddCustomer(this.today).then(res => {
        let data = res.data
        this.lskh.amount = conver_amont(data.lost_sell_settle_amount_sum);
        this.lskh.weight = conver_amont(data.lost_weight_sum);
        this.xzkh.amount = conver_amont(data.add_sell_settle_amount_sum);
        this.xzkh.weight = conver_amont(data.add_weight_sum);
      })
    },
    getOrderBusinessCondition() {
      getOrderBusinessConditionData(this.today).then(res => {
        let data = res.data
        this.drddl.amount = conver_amont(data.cur_sell_settle_amount);
        this.drddl.weight = conver_amont(data.cur_unit_weight);

        this.drydl.count = data.drydl_count;
        this.drydl.weight = conver_amont(data.drydl_weight);

        this.drwcl.amount = conver_amont(data.cur_finish_sell_settle_amount);
        this.drwcl.weight = conver_amont(data.cur_finish_unit_weight);
        this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount);
        this.yl.weight = conver_amont(data.cur_unfinish_unit_weight);
      })
    },
    getTargetOrderDataByConditionCount() {
      getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"day",group_type:"01"},(res) => {this.targetAchievement.day = res;})
      getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"month",group_type:"01"},(res) => {this.targetAchievement.month = res;})
      getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"year",group_type:"01"},(res) => {this.targetAchievement.year = res;})
    }
  },
  mounted() {
    setTimeout(() => {

      this.refreshData();
      window.addEventListener('resize', this.resizeChart);
    }, 500);

  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
  watch:{
    countDown(n,o){
      if (n === 1){
        this.refreshData();
      }
    },
  },
  props:{
    countDown:{
      type: Number
    }
  }
};
</script>
<style lang="postcss">

#ar_company_list:hover {
  background-color: #19EBFF10;
  transform: scale(101%);
}

.container {
  display: flex; /* 使用 Flexbox 布局 */
  height: 100vh; /* 视口高度 */
  width: 100%;

  max-width: 100%;
}

.left-bar {
  width: 25%; /* 左侧栏宽度 */
  /*background-color: #f0f0f0; !* 背景色 *!*/
  /*padding: 10px; !* 内边距 *!*/
  justify-content: space-around;
  display: flex;
  padding: 1rem;
}

.right-container {
  flex: 1; /* 剩余空间，右侧的部分 */
  display: flex;
  flex-direction: column; /* 垂直排列 */

  width: 75%; /* 右侧栏宽度 */
}

.right-top {

  height: 50%; /* 右上栏高度，设为 50% */
  justify-content: space-around;
  display: flex;
  padding: 1rem;
}

.right-bottom {
  height: 50%; /* 右下栏高度，设为 50% */
  justify-content: space-around;
  display: flex;
  padding: 1rem;
}

/*.trade_left {*/
/*  width: 100%;*/
/*}*/

/*.trade_middle {*/
/*  width: 61%;*/
/*}*/

/*.trade_right {*/
/*  width: 33%;*/
/*}*/
</style>
