<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// 各系统能耗概况
const systemTab = [
  { name: "空调" },
  { name: "照明" },
  { name: "展陈" },
  { name: "消防" },
  { name: "电梯" },
];
const systemTabIndex = ref(0);
const systemLeftList = ref([
  {
    name: "今日用能峰值",
    value: "322",
  },
  {
    name: "本月用能峰值",
    value: "35422",
  },
]);
const systemRightList = ref([
  [
    {
      name: '今日',
      value: '3122',
      unit: 'kWh'
    },
    {
      name: '昨日',
      value: '9400',
      unit: 'kWh'
    },
    {
      name: '同比',
      value: '-201',
      unit: '%'
    }
  ],//日
  [
    {
      name: '本月',
      value: '3122',
      unit: 'kWh'
    },
    {
      name: '上月',
      value: '9400',
      unit: 'kWh'
    },
    {
      name: '同比',
      value: '-201',
      unit: '%'
    }
  ],//月
  [
    {
      name: '今年',
      value: '3122',
      unit: 'kWh'
    },
    {
      name: '去年',
      value: '9400',
      unit: 'kWh'
    },
    {
      name: '同比',
      value: '-201',
      unit: '%'
    }
  ]//年
])
const selectSystemTab = (index) => {
  systemTabIndex.value = index;
};

// 能耗总量echarts
const drawTotalChart = () => {
  let myChart = echarts.init(document.getElementById("totalEnergy"));
  const option = {
    // backgroundColor: "#05224d",
    tooltip: {},
    grid: {
      top: "18%",
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "#557775",
            // color: "#233e64",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#DDFFFD",
            // margin: 40,
          },
        },

        axisTick: { show: false },
        boundaryGap: true,
        data: [
          "11-01",
          "11-02",
          "11-03",
          "11-04",
          "11-05",
          "11-07",
          "11-08",
          "11-09",
          "11-10",
          "11-11",
          "11-12",
          "11-13",
          "11-14",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位:kW",
        // padding:[0,10,0,0],
        nameTextStyle: {
          color: "#DDFFFD",
          align: "center",
          padding: [0, 15, 0, 0],
        },
        min: 0,
        max: 500,
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(1, 39, 37, 0.30)",
          },
        },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
          },
        },
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: "异常流量",
        type: "line",
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,

        lineStyle: {
          color: "rgba(1, 246, 139, 1)", // 线条颜色
        },
        areaStyle: {
          //区域填充样式
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "rgba(1, 246, 139, 0.7)" },
              { offset: 1, color: "rgba(1, 246, 139, 0)" },
            ],
            false
          ),

          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: [100, 200, 300, 282, 283, 166, 100, 200, 300, 282, 283, 166, 283],
      },
    ],
  };
  myChart.setOption(option);
};
// 定额管理charts
const drawManagement = () => {
  let myChart = echarts.init(document.getElementById("management"));
  const option = {
    // backgroundColor: "#05224d",
    tooltip: {},
    legend: {
      show: true,
      icon: "rect",
      right: "10",
      top: "5",
      layout: "vertical",
      itemHeight: "10",
      // itemWidth:'10',
      textStyle: {
        color: "rgba(221, 255, 253, 1)",
      },
    },
    grid: {
      top: "18%",
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "#557775",
            // color: "#233e64",
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: "#DDFFFD",
            margin: 40,
          },
        },

        axisTick: { show: false },
        boundaryGap: true,
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位:kgce/m²",
        // padding:[0,10,0,0],
        nameTextStyle: {
          color: "#DDFFFD",
          align: "middle",
          padding: [0, -30, 0, 0],
        },
        min: 0,
        max: 18,
        splitNumber: 6,
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(1, 39, 37, 0.30)",
          },
        },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
          },
        },
        axisTick: { show: false },
      },
    ],
    series: [
      {
        name: "单位建筑面积综合能耗",
        markLine: {
          //阈值
          //最大值和最小值
          data: [
            {
              yAxis: 9,
              label: {
                show: false,
              },
              lineStyle: {
                width: 1,
                color: "rgba(255, 221, 0, 1)",
                // symbol:"none",
              },
            },
          ],
          symbol: ["none", "none"],
        },
        type: "line",
        smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        symbolSize: 0,
        itemStyle: {
          color: "rgba(221, 255, 253, 1)",
        },

        lineStyle: {
          color: "rgba(221, 255, 253, 1)", // 线条颜色
        },
        areaStyle: {
          //区域填充样式
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              { offset: 0, color: "rgba(221, 255, 253, .7)" },
              { offset: 1, color: "rgba(221, 255, 253, 0)" },
            ],
            false
          ),

          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: [5, 7, 9, 6, 2, 5, 4],
      },
    ],
  };
  myChart.setOption(option);
};
// 能效流向
const drawEnergyFlow = () => {
  let myChart = echarts.init(document.getElementById("energyFlow"));
  let sourceData = [
    {
      name: "电",
      nameValue: 1562,
      valueUnit: "KWh",
    },
    {
      name: "空调",
      nameValue: 562,
      valueUnit: "kWh",
    },
    {
      name: "照明",
      nameValue: 490,
      valueUnit: "kWh",
    },
    {
      name: "电梯",
      nameValue: 510,
      valueUnit: "kWh",
    },
  ];
  let sangjiColor = [
    "rgba(91, 250, 241, 1)",
    "rgba(91, 250, 241, 1)",
    "rgba(91, 250, 241, 1)",
    "rgba(91, 250, 241, 1)",
  ];
  let itemStyleSource = [];
  for (let d = 0; d < sourceData.length; d++) {
    if (sourceData[d].name === "电") {
      sourceData[d].label = {
        position: "right",
      };
    }
    sourceData[d].itemStyle = {
      color: sangjiColor[d],
    };
    itemStyleSource.push(sourceData[d]);
  }

  let option = {
    series: [
      {
        // select:{
        //   disabled:true
        // },
        type: "sankey",
        layout: "none",
        top: "5%",
        bottom: "4%",
        left: "6%",
        right: "5%",
        nodeAlign:'right',
        nodeWidth: "13",
        // nodeAlign:'right',
        focusNodeAdjacency: "allEdges",
        data: itemStyleSource,
        links: [
          {
            source: "电",
            target: "空调",
            value: 8,
          },
          {
            source: "电",
            target: "照明",
            value: 8,
          },
          {
            source: "电",
            target: "电梯",
            value: 8,
          },
        ],
        label: {
          position: "left",
          color: "#fff",
          fontSize: 14,
          formatter: function (params) {

            if (params.dataIndex === 0) {
              return (
                "{a|" +
                params.data.name +
                "}\n" +
                "{b|" +
                params.data.nameValue +
                "}" +
                " " +
                params.data.valueUnit
              );
            } else {
              return (
                "{name|" +
                params.data.name +
                "}" +
                "{value|" +
                params.data.nameValue +
                "}" +
                // " " +
                params.data.valueUnit
              );
            }
          },
          rich: {
            a: {
              padding: [0, 15, 10, 0],
              fontSize: "14",
            },
            b: {
              color: "rgba(91, 250, 241, 1)",
              fontWeight: "600",
              fontSize: "16",
            },
            name: {
              fontSize: 14,
              // padding: [10, 0, 0, 0],
            },
            value: {
              color: "rgba(91, 250, 241, 1)",
              fontWeight: "600",
              fontSize: "16",
              padding: [0, 10, 0, 10],
            },
          },
        },
        lineStyle: {
          color: "source",
          // curveness: 0.5,
        },
        itemStyle: {
          borderWidth: 1,
          borderColor: "transparent",
        },
      },
    ],
  };
  myChart.setOption(option);
};
//复费率
function getExhibitionLoad() {
  let myChart = echarts.init(document.getElementById("exhibitionLoad"));
  var option = {
    tooltip: {
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      borderWidth: 0,
      top: 40,
      bottom: 40,
      left: 40,
      right:20,
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      icon: "rect",
      right: "4%",
      top:'3%',
      itemWidth: 20, // 标签宽度为20px
      itemHeight: 10, // 标签高度为10px
      textStyle: {
        color: "#ffffff",
      },
      data: ["尖", "峰", "平", "谷",'深'],
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        trigger: "axis",
        axisLine: {
          show: true,
          lineStyle: {
            // type:'dashed',
            color: "#557775",
            // color: "#233e64",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
            margin: 40,
          },
        },
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      },
    ],
    yAxis: [
      {
        type: "value",
        name:"单位:kWh",
        nameTextStyle:{
          color: "#DDFFFD",
          // align:"right",
          padding:[0,0,0,0]
        },
        splitLine: {
          show: true,
          lineStyle: {
            type:'dashed',
            color: "rgba(1, 39, 37, 0.30)",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#DDFFFD",
          },
        },
        splitArea: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "尖",
        type: "bar",
        stack: "Total1",
        barMaxWidth: 15,
        barGap: "10%",
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 165, 29, 1)",
              },
              {
                offset: 1,
                color: "rgba(255, 165, 29, 0)",
              },
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 165, 29, 1)",
              },
              {
                offset: 1,
                color: "rgba(255, 165, 29, 0)",
              },
            ]),
          },
        },
        data: [1, 2, 3, 4, 5, 6, 7],
      },
      {
        name: "峰",
        type: "bar",
        barMaxWidth: 15,
        stack: "Total1",
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(80, 194, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(80, 194, 255, 0)",
              },
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(80, 194, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(80, 194, 255, 0)",
              },
            ]),
          },
        },
        data: [1, 2, 3, 4, 5, 6, 7],
      },
      {
        name: "平",
        type: "bar",
        barMaxWidth: 15,
        stack: "Total1",
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 221, 0, 1)",
              },
              {
                offset: 1,
                color: "rgba(255, 221, 0, 0)",
              },
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 221, 0, 1)",
              },
              {
                offset: 1,
                color: "rgba(255, 221, 0, 0)",
              },
            ]),
            barBorderRadius: 0,
          },
        },
        data: [1, 2, 3, 4, 5, 6, 7],
      },
      {
        name: "谷",
        type: "bar",
        barMaxWidth: 15,
        stack: "Total1",
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(1, 246, 139, 1)",
              },
              {
                offset: 1,
                color: "rgba(1, 246, 139, 0)",
              },
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(1, 246, 139, 1)",
              },
              {
                offset: 1,
                color: "rgba(1, 246, 139, 0)",
              },
            ]),
            barBorderRadius: 0,
          },
        },
        data: [1, 2, 3, 4, 5, 6, 7],
      },
      {
        name: "深",
        type: "bar",
        barMaxWidth: 15,
        stack: "Total1",
        label: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(91, 250, 241, 1)",
              },
              {
                offset: 1,
                color: "rgba(91, 250, 241, 0)",
              },
            ]),
            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(91, 250, 241, 1)",
              },
              {
                offset: 1,
                color: "rgba(91, 250, 241, 0)",
              },
            ]),
            barBorderRadius: 0,
          },
        },
        data: [1, 2, 3, 4, 5, 6, 7],
      },
    ],
  };
  myChart.setOption(option);
}

// 电费电价
const drawElectricityPrice = () => {
  let myChart = echarts.init(document.getElementById('electricity-price'))
  let option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: "rgba(1, 13, 19, 0.5)",
      borderWidth: 0,
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      },
      textStyle: {
        color: "rgba(212, 232, 254, 1)",
        // fontSize: fontChart(0.24),
      },
      confine: true
    },
    legend: {
      show: true,
      data:['电费','销售电价'],
      selected:{
        '电费': true,
        '销售电价': true,
      },
      icon: 'rect',
      itemGap:14,
      top:"8",
      layout: 'vertical',
      itemHeight: '10',
      // itemWidth:'10',
      textStyle: {
        color: "rgba(221, 255, 253, 1)"
      }
    },
    grid: {
      top: "20%",
      left: "4%",
      right: "4%",
      bottom: "4%",
      containLabel: true,
    },

    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#557775'
        }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,

        show: true,
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: "#DDFFFD",
        }
      },
    },

    yAxis: [{
      name: '单位:kWh',
      nameTextStyle: {
        color: "rgba(221, 255, 253, 1)",
        padding: [0, 0, 0, 10]
      },
      // 表现为上下位置
      type: 'value',
      max: '50',
      splitNumber: 5,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#666666',
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: "#DDFFFD",
          fontSize: 12
        }
      }
    },
      {
        // splitNumber:
        name: '单位:元/kWh',
        position: 'right', // 放在右边
        nameTextStyle: {
          padding: [0, 15, 0, 0],
          color: 'rgba(221, 255, 253, 1)'
        },
        axisLabel: {
          show: true,
          // fontSize: 18,
          color: 'rgba(221, 255, 253, 1)',
          formatter: function (value) {
            // 在标签后面添加百分号
            return value.toFixed(1);
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "rgba(1, 39, 37, 0.30)",

            // color: '#eff6ff'
          }
        },
      },
    ],
    series: [{
      name: '电费',
      type: 'bar',
      barWidth: '15',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(82, 217, 208, 1)'
          }, {
            offset: 1,
            color: 'rgba(82, 217, 208, 0)'
          }]),

        },
      },
      data: [40, 35, 15, 10, 19, 24, 14]
    },
      {
        name: '销售电价',
        type: 'line',
        yAxisIndex: 1, // 与第二个 y 轴关联
        itemStyle: {
          color: 'rgba(1, 246, 139, 1)', // 设置折线颜色为黄色
        },
        symbol:"none",
        data: [0.1, 0.2, 0.6, 1, 0.4, 0.8, 0.9], // 折线图的数据
      },
    ]
  };
  myChart.setOption(option)
}
// dom加载
onMounted(() => {
  // 能耗总量
  drawTotalChart();
  // 定额管理
  drawManagement();
  // 能效流向
  drawEnergyFlow()
//   电费电价
  drawElectricityPrice()
// })
//   drawEnergyFlow();
  //复费率
  getExhibitionLoad();
});
</script>

<template>
  <div class="page m100">
    <div class="page-left-box">
      <!--  能耗总量-->
      <div class="title">
        <span>能耗总量</span>
        <p>
          <span class="month">月</span>
          <span class="day">日</span>
        </p>
      </div>
      <div id="totalEnergy" class="margin10 box-bg"></div>
      <!--  能效对标（定额管理）-->
      <div class="title margin10">
        <span>能效对标（定额管理）</span>
        <p>
          <span class="year">年</span>
          <span class="month">月</span>
        </p>
      </div>
      <div id="management" class="margin10 box-bg"></div>
      <!--  能效流向 -->
      <div class="title margin10">
        <span>能效流向</span>
      </div>
      <div id="energyFlow" class="margin10 box-bg"></div>
    </div>
    <div class="page-right-box">
      <!--  各系统能耗概况 -->
      <div class="title">
        <span>各系统能耗概况</span>
      </div>
      <div id="airConditioningLoad" class="margin10 box-bg">
        <ul class="system-tab">
          <li
            v-for="(item, index) in systemTab"
            :class="index == systemTabIndex ? 'tab-select' : ''"
            @click="selectSystemTab(index)"
          >
            <span>{{ item.name }}</span>
          </li>
        </ul>
        <div class="system-content">
          <div class="system-content-left">
            <div
              v-for="(item, index) in systemLeftList"
              class="system-content-left-item"
            >
              <p class="system-content-left-item-p1">{{ item.name }}</p>
              <p class="system-content-left-item-p2">{{ item.value }}</p>
            </div>
          </div>
          <div class="system-content-right">
            <div v-for="(item,index) in systemRightList" class="system-content-right-item">
              <ul class="system-content-right-item-title">
                <li v-for="(s,i) in item">{{ s.name }}</li>
              </ul>
              <div class="system-content-right-item-box">
                <span v-for="v in item" :class="v.unit==='%'?'yoy':''">{{ v.value }} <span
                    class="unit">{{ v.unit }}</span></span>

              </div>
            </div>
          </div>
        </div>
      </div>
      <!--  复费率-->
      <div class="title margin10">
        <span>复费率</span>
        <p>
          <span class="year">年</span>
          <span class="month">月</span>
          <span class="day">日</span>
        </p>
      </div>
      <div id="exhibitionLoad" class="margin10 box-bg"></div>
      <!--  电费电价-->
      <div class="title margin10">
        <span>电费电价</span>
      </div>
      <div id="electricity-price" class="margin10 box-bg"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.system-tab {
  display: flex;
  justify-content: space-evenly;
  padding-top: 0.7rem;
  box-sizing: border-box;

  .tab-select {
    background-image: url("@/assets/images/air-tab-select.png");
  }

  li {
    background-image: url("@/assets/images/air-tab.png");
    cursor: pointer;
    color: rgba(221, 255, 253, 1);
    background-size: 100% 100%;
    font-size: 0.8rem;
    padding: 0.2rem 1.1rem;
  }
}

.system-content {
  height: 83%;
  width: 100%;
  display: flex;
  justify-content: space-evenly;

  &-left {
    width: 6.875rem;
    height: 100%;
    display: flex;
    align-content: space-evenly;
    flex-wrap: wrap;

    &-item {
      height: 40%;
      width: 100%;
      background-image: url("@/assets/images/system-value-bg.png");
      background-size: 100% 100%;

      &-p1 {
        height: 29%;
        text-align: center;
        font-size: 0.875rem;
        color: rgba(221, 255, 253, 1);
      }

      &-p2 {
        height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-size: 20px;
        color: rgba(91, 250, 241, 1);
      }
    }
  }

  &-right {
    width: 15.7rem;
    height: 100%;
    //background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;

    &-item {
      height: 30%;
      //background-color: #000;
      width: 100%;

      &-title {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        padding: 0 0.5rem;
        box-sizing: border-box;
      }
      &-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.5rem;
        box-sizing: border-box;
        font-weight: bold;
        background-image: url("@/assets/images/system-box.png");
        background-size: 100% 100%;
        height: 65%;
        width: 100%;
        color: rgba(255, 255, 255, 1);
        .yoy {
          color: rgba(1, 246, 139, 1);
        }
      }
    }
  }

  //background-color: #fff;
}
</style>
