Vue2 - 根据屏幕大小自适应宽高缩放

做了一个数据面板，适配需求是面板的宽高随着屏幕大小的比例缩放

想着先用 px 做完，在考虑适配的问题，后面就蒙蔽了

最终解决方案 参考的是这个

需要注意的是 样式单位需要用 px，否则会出问题

图片示例： 最小能缩到 150 * 929

• 方法函数 - drawMixin.js

  这个方法函数需要修改地方的只有我标出的位置

//  自适应0️⃣ 引入屏幕适配函数 - 屏幕适配 mixin 函数

// * 默认缩放值
const scale = {
  width: "1",
  height: "1",
};

// * 自适应4️⃣ - 设计稿尺寸（px）
const baseWidth = 1920; //电脑的宽高，下面计算比例
const baseHeight = 929;

// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

export default {
  data() {
    return {
      // * 定时函数
      drawTiming: null,
    };
  },
  mounted() {
    //加载后先计算一遍缩放比例
    this.calcRate();
    //生成一个监听器：窗口发生变化从新计算计算一遍缩放比例
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    calcRate() {
      //拿到整个页面元素
      const appRef = this.$refs["zoom"];
      //如果没有值就结束
      if (!appRef) return;
      // 当前宽高比
      const currentRate = parseFloat(
        (window.innerWidth / window.innerHeight).toFixed(5)
      );
      //判断：如果有值代表页面变化了
      if (appRef) {
        //判断当前宽高比例是否大于默认比例
        if (currentRate > baseProportion) {
          scale.width = (
            (window.innerHeight * baseProportion) /
            baseWidth
          ).toFixed(5);
          scale.height = (window.innerHeight / baseHeight).toFixed(5);
          //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        } else {
          scale.height = (
            window.innerWidth /
            baseProportion /
            baseHeight
          ).toFixed(5);
          scale.width = (window.innerWidth / baseWidth).toFixed(5);
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        }
      }
    },
    // 自适应5️⃣ - 改变计时器间隔，来优化缩放顺滑
    resize() {
      //先清除计时器
      clearTimeout(this.drawTiming);
      //开启计时器
      this.drawTiming = setTimeout(() => {
        this.calcRate();
      }, 10);
    },
  },
};

• 需要适配的页面 index_v1.vue

  给你所需要自适应的页面添加一个盒子，用来包住需要缩放的盒子，具体看编号提示

  我这里是 class="page" 这个盒子是我原本的页面根盒子，注意自适应时，这里不光需要绑定 ref，还要增加相应的样式，比如根盒子的固定大小、定位 + transform、transform-origin 更改转换元素的位置、超出隐藏

<template>
  <!-- 自适应2️⃣ - 顶部大盒子 要包裹住需要缩放的盒子 -->
  <div
    style="width: 100%; height: 100%; position: relative; background: #00081c"
  >
    <!--  
      自适应3️⃣ - 缩放的盒子，绑定ref 
      样式 - 固定宽高来计算比例进行缩放，父级定位配合transform用来居中
    -->
    <div class="page" ref="zoom">
      <div class="top_box">
        森锐智慧通行管理平台
        <span class="top-button" @click="toHome">工作台</span>
      </div>
      <el-row class="content">
        <el-col :span="9" class="left">
          <!-- 左一 -->
          <div class="itemBox left1">
            <div class="header">通行总量</div>
            <div class="Info">
              <!-- 自定义内容 -->
              <div class="left1-info">
                <div class="numberBox">1</div>
                <div class="numberBox">2</div>
                <div class="numberBox">3</div>
                <div class="numberBox">4</div>
                <div class="numberBox">5</div>
              </div>
              <div class="left1-footer">同行人次</div>
            </div>
          </div>
          <!-- 左二 -->
          <div class="itemBox left2">
            <div class="header">
              核酸结果
              <span class="control">
                <el-dropdown trigger="click" @command="handleBarSelect">
                  <span class="label">
                    {{ barSelect.label }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="item in options"
                      :key="item.value"
                      :command="item"
                      >{{ item.label }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </div>
            <div class="Info">
              <!-- 自定义内容 -->
              <div class="left2-info">
                <BarChart :chartData="BarChartData" height="100%" />
              </div>
            </div>
          </div>
          <!-- 左三 -->
          <div class="itemBox left3">
            <div class="header">
              疫苗接种
              <span class="control">
                <el-dropdown trigger="click" @command="handlePieSelect">
                  <span class="label">
                    {{ pieSelect.label }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="item in options"
                      :key="item.value"
                      :command="item"
                      >{{ item.label }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </div>
            <div class="Info">
              <!-- 自定义内容 -->
              <div class="left2-info">
                <PieChart :chartData="PieCartData" height="100%" />
              </div>
            </div>
          </div>
          <!-- 左四 -->
          <div class="itemBox left4">
            <div class="header">
              通行趋势
              <div class="control-btn">
                <span
                  class="item"
                  :class="{
                    item: true,
                    'select-item-active': selectActive.value == item.value,
                  }"
                  v-for="item in selectOptions"
                  :key="item.value"
                  @click="handleSelect(item)"
                >
                  {{ item.label }}
                </span>
              </div>
            </div>
            <div class="Info">
              <!-- 自定义内容 -->
              <div class="left2-info">
                <LineChart :chartData="lineChartData" height="100%" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="center">
          <div class="center1">
            <div class="center1-info">
              <div class="banner-box">
                <div class="banner">
                  <div class="info">
                    <div class="title">今日通行总量</div>
                    <div class="value">5485</div>
                    <div class="label">通行人次</div>
                  </div>
                </div>
              </div>
              <div class="data_box">
                <div class="yellow">
                  <div class="yellow-icon-bg"></div>
                  <div class="yellow-icon"></div>
                  <div>1</div>
                  <div class="label">黄码</div>
                </div>
                <div class="green">
                  <div class="green-icon-bg"></div>
                  <div class="green-icon"></div>
                  <div>11351</div>
                  <div class="label">绿码</div>
                </div>
                <div class="red">
                  <div class="red-icon-bg"></div>
                  <div class="red-icon"></div>
                  <div>10</div>
                  <div class="label">红码</div>
                </div>
              </div>
            </div>
          </div>
          <div class="itemBox center2">
            <div class="header">
              最新通行记录
              <span class="control-tab">
                <span
                  :class="{
                    item: true,
                    'tab-item-active': tabActive.value == item.value,
                  }"
                  @click="handleTab(item)"
                  v-for="item in tabOptions"
                  :key="item.value"
                  >{{ item.label }}</span
                >
              </span>
            </div>
            <div class="Info">
              <!-- 自定义内容 -->
              <div class="center2-info">
                <!-- header-cell-style：设置表头 -->
                <el-table
                  :data="tableData"
                  style="width: 100%"
                  height="calc(100% - 0px)"
                  :header-cell-style="{
                    color: '#fff',
                    background: '#074252',
                    fontWeight: 'normal',
                    height: '44px',
                  }"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column
                    fixed
                    prop="index"
                    label="序号"
                    align="center"
                    width="50px"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="时间"
                    align="center"
                    sortable
                  >
                  </el-table-column>
                  <el-table-column
                    prop="device"
                    label="通行设备"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column prop="name" label="姓名" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="identity"
                    label="身份证"
                    align="center"
                  >
                  </el-table-column>
                  <el-table-column prop="heat" label="体温" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="9" class="right">
          <!-- 右一 -->
          <div class="itemBox right1">
            <div class="header">
              通行概况
              <span class="control">
                <el-dropdown trigger="click" @command="handlePassageSelect">
                  <span class="label">
                    {{ passageSelect.label }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="item in options"
                      :key="item.value"
                      :command="item"
                      >{{ item.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </div>
            <div class="Info">
              <!-- 自定义内容 -->
              <div class="right1-info">
                <div class="top_b">
                  <div
                    class="item-box"
                    v-for="(item, index) in right1List"
                    :key="index"
                  >
                    <div class="text">
                      <span>{{ item.label }}</span>
                      <span>{{ item.num }} 人</span>
                    </div>
                    <div class="proBox">
                      <div
                        class="widthTransItem"
                        :class="index == 0 ? 'proItem1' : 'proItem2'"
                        :style="'width:' + item.value"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="info">
                  <div class="title">通行方式</div>
                  <div class="card_box">
                    <div class="card">
                      <div>扫健康码</div>
                      <div class="number">4654</div>
                      <div>人次</div>
                    </div>
                    <div class="card">
                      <div>人脸识别</div>
                      <div class="number">4654</div>
                      <div>人次</div>
                    </div>
                    <div class="card">
                      <div>刷身份证</div>
                      <div class="number">4654</div>
                      <div>人次</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右二 -->
          <div class="itemBox right2">
            <div class="header">
              设备通行量排行
              <span class="control">
                <el-dropdown trigger="click" @command="handleRankSelect">
                  <span class="label">
                    {{ rankSelect.label }}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="item in options"
                      :key="item.value"
                      :command="item"
                      >{{ item.label }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </div>
            <div class="Info">
              <!-- 自定义内容 -->
              <div class="right2-info">
                <!-- css 实现 -->
                <!-- <div
                  class="right2-item"
                  v-for="(item, index) in right2List"
                  :key="index"
                >
                  <div class="label">
                    {{ item.label }}
                  </div>
                  <div class="proBox">
                    <div class="proItem" :style="'width:' + item.value"></div>
                  </div>
                  <div class="value">13123156 人</div>
                </div> -->
                <!-- echarts 实现 -->
                <!-- <div class="label">
                  <div>SR测试设备…13515</div>
                  <div>SR测试设备…13515</div>
                  <div>SR测试设备…13515</div>
                  <div>SR测试设备…13515</div>
                  <div>SR测试设备…13515</div>
                  <div>SR测试设备…13515</div>
                  <div>SR测试设备…13515</div>
                  <div>SR测试设备…13515</div>
                  <div>SR测试设备…13515</div>
                  <div>SR测试设备…13515</div>
                </div> -->
                <rankChart :chartData="rankChartData" height="200px" />
                <!-- <div class="value">
                  <div>13123 人</div>
                  <div>13123 人</div>
                  <div>13123 人</div>
                  <div>13123 人</div>
                  <div>13123 人</div>
                  <div>13123 人</div>
                  <div>13123 人</div>
                  <div>13123 人</div>
                  <div>13123 人</div>
                  <div>13123 人</div>
                </div> -->
              </div>
            </div>
          </div>
          <!-- 右三 -->
          <div class="itemBox right3">
            <div class="header">设备概况</div>
            <div class="Info">
              <!-- 自定义内容 -->
              <div class="right3-info">
                <div class="left">
                  <div class="label">设备总数</div>
                  <div>60</div>
                </div>
                <div class="right">
                  <div class="online_box">
                    <div class="left-img"></div>
                    <div class="right">
                      <div class="label">在线设备</div>
                      <div>30</div>
                    </div>
                  </div>
                  <div class="offline_box">
                    <div class="left-img"></div>
                    <div class="right">
                      <div class="label">离线设备</div>
                      <div>30</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->
    </div>
  </div>
</template>

<script>
// import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
// import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import rankChart from "./dashboard/rankChart";
import drawMixin from "@/utils/drawMixin.js";

const BarChartData = {
  series: [
    {
      name: "阴性",
      type: "bar",
      data: [19325, 23438, 23123],
    },
    {
      name: "阳性",
      type: "bar",
      data: [19325, 23438, 312213],
    },
  ],

  xAxis: ["24小时", "48小时", "72小时"],
};
const PieCartData = {
  series: [
    { value: 320, name: "第三针" },
    { value: 240, name: "第二针" },
    { value: 149, name: "第一针" },
    { value: 100, name: "未接种" },
  ],
};
const lineChartData = {
  series: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 105, 160],
};
const rankChartData = {};

export default {
  name: "Index_v1",
  // 自适应1️⃣ 注册
  mixins: [drawMixin],
  components: {
    // PanelGroup,
    LineChart,
    // RaddarChart,
    PieChart,
    BarChart,
    rankChart,
  },
  data() {
    return {
      options: [
        { label: "今日", value: "1" },
        { label: "近三日", value: "3" },
        { label: "近七日", value: "7" },
      ],
      select: { label: "今日", value: "1" },
      barSelect: { label: "今日", value: "1" },
      pieSelect: { label: "今日", value: "1" },
      passageSelect: { label: "今日", value: "1" },
      rankSelect: { label: "今日", value: "1" },
      lineChartData: lineChartData,
      BarChartData: BarChartData,
      PieCartData: PieCartData,
      selectActive: {
        label: "日",
        value: "day",
      },
      selectOptions: [
        {
          label: "日",
          value: "day",
        },
        {
          label: "月",
          value: "mouth",
        },
      ],
      tabActive: {
        label: "全部",
        value: "all",
      },

      tabOptions: [
        {
          label: "全部",
          value: "all",
        },
        {
          label: "异常",
          value: "abnormal",
        },
        {
          label: "发烧",
          value: "heat",
        },
      ],

      tableData: [
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 1,
          date: "2022-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
        {
          index: 10,
          date: "2000-06-08 16:14:00",
          device: "ABC132",
          name: "张三",
          identity: "123456789987654321",
          heat: "37.0°",
        },
      ],
      right1List: [
        {
          label: "在册人员",
          num: 20,
          value: "60%",
        },
        {
          label: "来访人员",
          num: 156,
          value: "10%",
        },
      ],

      right2List: [
        {
          label: "01. SR测试设备…13515",
          num: "10",
          value: "10%",
        },
        {
          label: "02. SR测试设备…13515",
          num: "5435",
          value: "30%",
        },
        {
          label: "03. SR测试设备…13515",
          num: "23443",
          value: "40%",
        },
        {
          label: "04. SR测试设备…13515",
          num: "1515",
          value: "60%",
        },
        {
          label: "05. SR测试设备…13515",
          num: "4335",
          value: "20%",
        },
        {
          label: "06. SR测试设备…13515",
          num: "4335",
          value: "20%",
        },
        {
          label: "07. SR测试设备…13515",
          num: "4335",
          value: "20%",
        },
        {
          label: "08. SR测试设备…13515",
          num: "4335",
          value: "20%",
        },
        {
          label: "09. SR测试设备…13515",
          num: "4335",
          value: "20%",
        },
        {
          label: "10. SR测试设备…13515",
          num: "4335",
          value: "20%",
        },
      ],
    };
  },
  methods: {
    toHome() {
      this.$router.push("/");
    },
    // 计算方法
    company(inputList) {
      const list = inputList;

      let num = 0;
      list.forEach((val) => {
        num += val.num;
      });
      list.forEach((val, index) => {
        if (index < 10) {
          val.label = "0" + (index + 1) + val.label;
        }
        val.label = index + 1 + val.label;
        val.value = (val.num / num) * 100 + "%";
      });
      return list;
    },
    // 设置表格斑马线
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "table-item-1";
      } else {
        return "table-item-2";
      }
    },
    handleSelect(e) {
      console.log(e, 1122, this.selectActive);
      this.selectActive = e;
    },
    handleTab(e) {
      this.tabActive = e;
      console.log("handleTab", this.tabActive);
    },
    handleRankSelect(e) {
      this.rankSelect = e;
    },
    handlePassageSelect(e) {
      this.passageSelect = e;
    },
    handlePieSelect(e) {
      this.pieSelect = e;
    },
    handleBarSelect(e) {
      this.barSelect = e;
    },
  },
  created() {
    this.right1List = this.company(this.right1List);
    console.log(this.right1List);
  },
};
</script>

<style lang="scss" scoped>
// 修改下拉选择控件 需要放在顶部才生效 ::v-deep 无效 ---
.el-dropdown-menu {
  background: #01061b;
  border: none;
  font-size: 0.888196vw;
}
.el-dropdown-selfdefine {
  font-size: 0.618557vw;
  color: aqua;
}
//  ---
/** 页面 */
.page {
  box-sizing: border-box;
  font-size: 16px;
  background: url("../assets/images/index_v1/background.png");
  background-size: 100% 100%;
  color: #f5feff;
  /*这里是缩放盒子需要给固定宽高来计算比例进行缩放。 */
  width: 1920px;
  height: 929px;
  /* 根据父级定位，配合transform用来居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  /* 更改转换元素的位置 */
  transform-origin: left top;
  /* 超出隐藏 */
  overflow: hidden;
  /** 顶部 */
  .top_box {
    font-size: 42px;
    width: 100%;
    height: 90px;
    background: url("../assets/images/index_v1/top-bg.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    position: relative;
    .top-button {
      width: 200px;
      height: 46px;
      font-weight: normal;
      font-size: 22px;
      background: url("../assets/images/index_v1/top-button.png");
      background-size: 100% 100%;
      position: absolute;
      right: 8px;
      top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }

  .content {
    height: calc(100% -90px);
    padding: 20px;
    display: flex;
    // 盒子 公共样式
    .itemBox {
      padding: 0px 9px;
      margin-bottom: 10px;
      .header {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        position: relative;
        .control {
          background: url("../assets/images/index_v1/control-select-bg.png");
          background-size: 100% 100%;
          position: absolute;
          right: 0px;
          top: 3px;
          width: 80px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .control-btn {
          background: url("../assets/images/index_v1/control-select-bg.png");
          background-size: 100% 100%;
          position: absolute;
          right: 0px;
          top: 3px;
          width: 80px;
          height: 100%;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          .item {
            font-size: 12px;
            color: #006069;
            cursor: pointer;
          }
          .select-item-active {
            color: #2cecff;
          }
        }
        .control-tab {
          position: absolute;
          right: 0px;
          top: 3px;
          width: fit-content;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .item {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            height: 100%;
            margin-right: 10px;
          }
          .item:hover {
            cursor: pointer;
          }
          .tab-item-active {
            color: #2aecff;
            border-bottom: 1px solid #2aecff;
          }
        }
      }
    }
    /** 左 */
    .left {
      margin-right: 0.824742vw;
      .left1 {
        height: 152px;
        background: url("../assets/images/index_v1/bg-left1.png");
        background-size: 100% 100%;
        .header {
          height: 30px;
        }
        .Info {
          height: calc(100% - 30px);
          padding: 10px;
          .left1-info {
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            .numberBox {
              width: 50px;
              height: 50px;
              background: url("../assets/images/index_v1/number-bg.png");
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              font-size: 36px;
            }
            :last-child {
              margin-right: 0;
            }
          }
          .left1-footer {
            margin-top: 20px;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url("../assets/images/index_v1/sm-title.png") no-repeat
              center;
            background-size: 100% 35%;
          }
        }
      }
      .left2 {
        height: 205px;
        background: url("../assets/images/index_v1/bg-left2.png");
        background-size: 100% 100%;
        .header {
          height: 30px;
        }
        .Info {
          height: calc(100% - 30px);
          padding: 10px 0;
          // .left2-info {
          // }
        }
      }
      .left3 {
        height: 200px;
        background: url("../assets/images/index_v1/bg-left2.png");
        background-size: 100% 100%;
        .header {
          height: 30px;
        }
        .Info {
          height: calc(100% - 30px);
          padding: 10px 0;
          // .left3-info {
          // }
        }
      }
      .left4 {
        height: 213px;
        background: url("../assets/images/index_v1/bg-left4.png");
        background-size: 100% 100%;
        .header {
          height: 30px;
        }
        .Info {
          height: calc(100% - 30px);
          padding: 10px 0;
          // .left4-info {
          // }
        }
      }
      :last-child {
        margin-bottom: 0;
      }
    }
    /** 中 */
    .center {
      .center1 {
        height: calc(100% - 324px);
        display: flex;
        justify-content: center;

        .center1-info {
          width: 604px;
          height: 100%;
          position: relative;
          .banner-box {
            width: 100%;
            height: 399px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            .banner {
              width: 525px;
              height: 340px;
              background: url("../assets/images/index_v1/banner.png");
              background-size: 100% 100%;
              margin-top: 10px;
              .info {
                width: 100%;
                height: 160px;
                margin-top: 50px;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                .title {
                  font-size: 22px;
                  color: #fff;
                }
                .value {
                  font-size: 87px;
                }
                .label {
                  font-size: 16px;
                }
              }
            }
          }
          .data_box {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            height: 137px;
            // background-color: pink;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .yellow {
              width: 120px;
              height: 100%;
              background: url("../assets/images/index_v1/yellow-bg.png");
              background-size: 100% 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: flex-end;
              font-size: 35px;
              padding: 24px;
              position: relative;
              .yellow-icon-bg {
                width: 64px;
                height: 64px;
                background: url("../assets/images/index_v1/yellow-icon-bg.png");
                background-size: 100% 100%;
                position: absolute;
                top: -15%;
                left: 25%;
              }
              .yellow-icon {
                width: 38px;
                height: 38px;
                background: url("../assets/images/index_v1/yellow-icon.png");
                background-size: 100% 100%;
                position: absolute;
                top: -5%;
                left: 35%;
              }
              .label {
                font-size: 13px;
              }
            }
            .green {
              width: 120px;
              height: 100%;
              background: url("../assets/images/index_v1/green-bg.png");
              background-size: 100% 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: flex-end;
              font-size: 35px;
              padding: 24px;
              position: relative;
              .green-icon-bg {
                width: 64px;
                height: 64px;
                background: url("../assets/images/index_v1/green-icon-bg.png");
                background-size: 100% 100%;
                position: absolute;
                top: -15%;
                left: 25%;
              }
              .green-icon {
                width: 38px;
                height: 38px;
                background: url("../assets/images/index_v1/green-icon.png");
                background-size: 100% 100%;
                position: absolute;
                top: -5%;
                left: 35%;
              }
              .label {
                font-size: 13px;
              }
            }
            .red {
              width: 120px;
              height: 100%;
              background: url("../assets/images/index_v1/red-bg.png");
              background-size: 100% 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: flex-end;
              font-size: 35px;
              padding: 24px;
              position: relative;
              .red-icon-bg {
                width: 64px;
                height: 64px;
                background: url("../assets/images/index_v1/red-icon-bg.png");
                background-size: 100% 100%;
                position: absolute;
                top: -15%;
                left: 25%;
              }
              .red-icon {
                width: 38px;
                height: 38px;
                background: url("../assets/images/index_v1/red-icon.png");
                background-size: 100% 100%;
                position: absolute;
                top: -5%;
                left: 35%;
              }
              .label {
                font-size: 13px;
              }
            }
          }
        }
      }
      .center2 {
        height: 324px;
        background: url("../assets/images/index_v1/bg-center2.png");
        background-size: 100% 100%;
        .header {
          height: 30px;
        }
        .Info {
          height: calc(100% - 30px);
          padding: 10px 0;
          .center2-info {
            height: 100%;
          }
        }
      }
      :last-child {
        margin-bottom: 0;
      }
    }
    /** 右 */
    .right {
      margin-left: 0.824742vw;
      .right1 {
        height: 320px;
        background: url("../assets/images/index_v1/bg-right1.png");
        background-size: 100% 100%;
        .header {
          height: 30px;
        }
        .Info {
          height: calc(100% - 30px);
          padding: 10px 10px;
          .right1-info {
            .top_b {
              :first-child {
                margin-top: 5px;
              }
              .item-box {
                width: 100%;
                height: 50px;

                .text {
                  width: 100%;
                  align-items: center;
                  display: flex;
                  justify-content: space-between;
                  font-size: 12px;
                }
                .proBox {
                  width: 100%;
                  height: 10px;
                  margin-top: 5px;
                  background: #0b6074;
                }
                .widthTransItem {
                  width: 0%;
                  height: 100%;
                  background: #13d7fd;
                  transition: all 1s;
                  transition-duration: 5s;
                  transition-delay: 0.3s;
                }
                // .proItem1 {
                //   width: 0%;
                //   height: 100%;
                //   background: #13d7fd;
                //   transition: all 1s;
                //   transition-delay: 0.3s;
                // }
                .proItem2 {
                  // width: 0%;
                  // height: 100%;
                  background: #09c160;
                }
              }
            }

            .info {
              .title {
                width: 100%;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: url("../assets/images/index_v1/sm-title.png")
                  no-repeat center;
                background-size: 100% 35%;
                margin-top: 10px;
                margin-bottom: 10px;
              }
              .card_box {
                width: 100%;
                height: 116px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .card {
                  width: 112px;
                  height: 100%;
                  background: url("../assets/images/index_v1/card_box.png");
                  background-size: 100% 100%;
                  font-size: 12px;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-evenly;
                  align-items: center;
                  .number {
                    font-size: 32px;
                  }
                }
              }
            }
          }
        }
      }
      .right2 {
        height: 280px;
        background: url("../assets/images/index_v1/bg-right2.png");
        background-size: 100% 100%;
        .header {
          height: 30px;
        }
        .Info {
          height: calc(100% - 30px);
          padding: 10px 0;
          .right2-info {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            // font-size: 12px;
            // padding: 0 5px;
            // display: flex;
            // flex-direction: column;
            // justify-content: space-evenly;
            .right2-item {
              display: flex;
              align-items: baseline;
              justify-content: space-between;
              .proBox {
                width: 200px;
                height: 10px;
                background: #0b6074;
                margin: 0 10px;
              }
              .proItem {
                width: 0%;
                height: 100%;
                background: #13d7fd;
              }

              .label {
                width: 85px;
                overflow: hidden; //隐藏文字
                text-overflow: ellipsis; //显示 ...
                white-space: nowrap; //不换行
                text-align: left;
              }
              .value {
                width: 50px;
                overflow: hidden; //隐藏文字
                text-overflow: ellipsis; //显示 ...
                white-space: nowrap; //不换行
              }
            }

            // .label {
            //   width: 75px;
            //   div {
            //     overflow: hidden; //隐藏文字
            //     text-overflow: ellipsis; //显示 ...
            //     white-space: nowrap; //不换行
            //     width: 75px;
            //     height: 16px;
            //     display: flex;
            //     justify-content: flex-start;
            //     align-items: center;
            //     margin-bottom: 2px;
            //   }
            //   :first-child {
            //     margin-top: 3px;
            //   }
            // }
            // .value {
            //   width: 40px;
            //   div {
            //     overflow: hidden; //隐藏文字
            //     text-overflow: ellipsis; //显示 ...
            //     white-space: nowrap; //不换行
            //     width: 40px;
            //     height: 16px;
            //     display: flex;
            //     justify-content: flex-start;
            //     align-items: center;
            //     margin-bottom: 6px;
            //   }
            //   :first-child {
            //     margin-top: 3px;
            //   }
            // }
          }
        }
      }
      .right3 {
        height: 181px;
        background: url("../assets/images/index_v1/bg-left1.png");
        background-size: 100% 100%;
        .header {
          height: 30px;
        }
        .Info {
          height: calc(100% - 30px);
          padding: 10px 0;
          .right3-info {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            .left {
              width: 130px;
              height: 130px;
              background-color: #00071b;
              background: url("../assets/images/index_v1/device-bg.png");
              background-size: 100% 100%;
              font-size: 24px;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              .label {
                font-size: 12px;
              }
            }
            .right {
              width: 138px;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: space-evenly;
              .online_box {
                width: 100%;
                display: flex;
                align-items: center;
                .left-img {
                  width: 38px;
                  height: 38px;
                  background: url("../assets/images/index_v1/online.png");
                  background-size: 100% 100%;
                }
                .right {
                  flex: 1;
                  display: flex;
                  font-size: 28px;
                  color: #07c160;
                  .label {
                    font-size: 12px;
                    color: #f5feff;
                  }
                }
              }
              .offline_box {
                width: 100%;
                display: flex;
                align-items: center;
                .left-img {
                  width: 38px;
                  height: 38px;
                  background: url("../assets/images/index_v1/offline.png");
                  background-size: 100% 100%;
                }
                .right {
                  flex: 1;
                  display: flex;
                  font-size: 28px;
                  color: #ff8418;
                  .label {
                    font-size: 12px;
                    color: #f5feff;
                  }
                }
              }
            }
          }
        }
      }
      :last-child {
        margin-bottom: 0;
      }
    }
  }

  .left2-info {
    height: 100%;
    width: 100%;
  }
  // 表格斑马线-----
  ::v-deep .el-table__row.table-item-1 {
    background: #11697b;
  }
  ::v-deep .el-table__row.table-item-2 {
    background: #094152;
  }
  // -----

  // 表格滚动条 ---
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 0;
  }
  ::v-deep .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border: none;
  }
  // ---

  // 滚动区域 -----
  ::v-deep .el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 0;
      background: rgba(213, 215, 220, 0.3);
      border: none;
    }
    &::-webkit-scrollbar-track {
      border: none;
    }
  }
  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }
  ::v-deep .el-table colgroup col[name="gutter"] {
    display: none;
    width: 0;
  }
  ::v-deep .el-table__body {
    width: 100% !important;
  }
  // -----

  ::v-deep.el-table th.el-table__cell.is-leaf,
  ::v-deep.el-table td.el-table__cell {
    border: none;
  }

  // 修改 字体颜色
  ::v-deep .cell {
    color: white;
  }

  // 表格 hover 样式修改
  ::v-deep .el-table__body tr.hover-row > td.el-table__cell,
  .el-table__body tr.hover-row.current-row > td.el-table__cell,
  .el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
  .el-table__body
    tr.hover-row.el-table__row--striped.current-row
    > td.el-table__cell {
    background: transparent;
  }

  // 表格底部 白线 --
  ::v-deep .el-table::before,
  .el-table--group::after,
  .el-table--border::after {
    background-color: transparent;
  }
  ::v-deep .el-table__fixed::before,
  .el-table__fixed-right::before {
    background-color: transparent;
  }
  // --

  // padding: 32px;
  // background-color: rgb(240, 242, 245);
  // position: relative;

  // .chart-wrapper {
  //   background: #fff;
  //   padding: 16px 16px 0;
  //   margin-bottom: 32px;
  // }
}

// @media (max-width: 1024px) {
//   .chart-wrapper {
//     padding: 8px;
//   }
// }
</style>