<template>
  <div class="box">
    <div class="a">
      <img
        src="../../assets/img/可调负荷/可调图标--未选中.png"
        alt=""
        @click="sendMessageToCSharp"
      />
    </div>
    <div class="left">
      <img src="../../assets/img/标题/智能运维-监控.png" class="title" />
      <div class="dqsxtxx">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>当前摄像头信息</p>
        </div>
        <div id="dqsxtxx">
          <div class="headers">
            <div class="h5-play-wrap"></div>
            <!-- <video
              :src="videoSource"
              autoplay
              muted
              class="videos"
              ref="videos"
            ></video> -->
            <!-- <video id="testVideo"></video>
            <canvas id="testCanvas"></canvas> -->
            <p class="h_footer">
              <span class="time">{{ dates }}</span>
              <img
                src="../../assets/ZNYWJK/放大.png"
                alt=""
                class="quanping"
                @click="handleFullScreen"
              />
            </p>
          </div>
          <h2>摄像头信息</h2>
          <div class="footers">
            <div class="one">
              <p>余热发电站</p>
            </div>
            <div class="two">
              <p>网络数据</p>
            </div>
            <div class="three">
              <p>1920*1080</p>
            </div>
            <div class="four">
              <p>5ms</p>
            </div>
          </div>
        </div>
      </div>
      <div class="spjk">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>摄像头视频监控</p>
        </div>
        <div id="spjk">
          <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
            <div class="jiankong">
              <video :src="item.src" autoplay muted></video>
            </div>
            <div class="spjk_title">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="sxtlb">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>摄像头列表</p>
        </div>
        <div id="sxtlb">
          <div class="data">
            <span
              :class="res == '生产监控系统' ? 'active' : ''"
              @click="res = '生产监控系统'"
              >生产监控系统</span
            >
            <span
              :class="res == '配电室监控系统' ? 'active' : ''"
              @click="res = '配电室监控系统'"
              >配电室监控系统</span
            >
          </div>
          <div class="con">
            <div class="con1">
              <p>监控17：回转窑南侧</p>
              <p>07:12:18</p>
            </div>
            <div class="con2">
              <p>监控16：篦冷机</p>
              <p>07:12:18</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="wdjc1">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>温度监测1</p>
        </div>
        <div class="chartBox">
          <div class="selects">
            <el-select
              v-model="value"
              :popper-append-to-body="false"
              class="custom-select"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :popper-append-to-body="false"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div id="wdjc1">
            <div class="hpfj">
              <h2>1#后排风机</h2>
              <div class="nei">
                <div class="ones" v-for="(item, index) in fjlist" :key="index">
                  <p>{{ item.name }}</p>
                  <p class="green">{{ item.count }}</p>
                  <p class="bianhao">编号：{{ item.bianhao }}</p>
                </div>
              </div>
            </div>
            <div class="hpfj">
              <h2>1#窑主电机</h2>
              <div class="nei">
                <div class="ones" v-for="(item, index) in fjlist2" :key="index">
                  <p>{{ item.name }}</p>
                  <p class="green">{{ item.count }}</p>
                  <p class="bianhao">编号：{{ item.bianhao }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wdjc2">
        <div class="imgBox">
          <img src="../../assets/img/小标题栏.png" class="img" />
          <p>温度监测2</p>
        </div>
        <div class="chartBox">
          <div class="selects">
            <el-select
              v-model="value"
              :popper-append-to-body="false"
              class="custom-select"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :popper-append-to-body="false"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div id="wdjc2">
            <div class="controls">
              <h3>智能操控装置</h3>
              <ul>
                <li v-for="item in list">
                  <span>{{ item.name }}：</span>
                  <span class="blue">{{ item.count }}</span>
                  <span>℃</span>
                </li>
              </ul>
            </div>
            <div class="controls">
              <h3>智能操控装置</h3>
              <ul>
                <li v-for="item in list">
                  <span>{{ item.name }}：</span>
                  <span class="blue">{{ item.count }}</span>
                  <span>℃</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="../../utils/module/PlayerControl"></script>
<script>
import moment from "moment";
// import "../../utils/PlayerControl.js";
import from "../../utils/index.js";
import screenfull from "screenfull";
export default {
  data() {
    return {
      fjlist: [
        {
          name: "1#后排风机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
        {
          name: "1#后排风机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
        {
          name: "1#后排风机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
        {
          name: "1#后排风机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
        {
          name: "1#后排风机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
        {
          name: "1#后排风机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
      ],
      fjlist2: [
        {
          name: "1#窑主电机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
        {
          name: "1#窑主电机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
        {
          name: "1#窑主电机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
        {
          name: "1#窑主电机上动触头A相",
          count: "0.0",
          bianhao: "139671",
        },
      ],
      list: [
        {
          name: "上静触头A相温度",
          count: "0.0",
        },
        {
          name: "上静触头A相温度",
          count: "0.0",
        },
        {
          name: "上静触头A相温度",
          count: "0.0",
        },
        {
          name: "上静触头A相温度",
          count: "0.0",
        },
        {
          name: "上静触头A相温度",
          count: "0.0",
        },
        {
          name: "上静触头A相温度",
          count: "0.0",
        },
        {
          name: "上静触头A相温度",
          count: "0.0",
        },
        {
          name: "上静触头A相温度",
          count: "0.0",
        },
        {
          name: "上静触头A相温度",
          count: "0.0",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "线路测温",
        },
        {
          value: "选项2",
          label: "设备测温",
        },
        {
          value: "选项3",
          label: "线路测温",
        },
        {
          value: "选项4",
          label: "线路测温",
        },
        {
          value: "选项5",
          label: "线路测温",
        },
      ],
      value: "设备测温",
      res: "生产监控系统",
      tableData: [
        {
          date1: "水泥单位产品综合能耗",
          date2: "80kgce/t",
          date3: "84kgce/t",
          date4: "5%",
        },
        {
          date1: "水泥大内产品综合电耗",
          date2: "40kWh/t",
          date3: "53kWh/t",
          date4: "32.5%",
        },
        {
          date1: "熟料单位产品综合能耗",
          date2: "100kgce/t",
          date3: "114kgce/t",
          date4: "14%",
        },
        {
          date1: "熟料单位产品综合电耗",
          date2: "48kWh/t",
          date3: "55kWh/t",
          date4: "14.58%",
        },
        {
          date1: "熟料单位产品综合煤耗",
          date2: "94kgce/",
          date3: "108kgce/",
          date4: "14.89%",
        },
      ],
      devices: [
        {
          date1: "回转窑",
          date2: true,
          date3: "102.00",
        },
        {
          date1: "熟料收尘",
          date2: true,
          date3: "29.00",
        },
        {
          date1: "篦冷机",
          date2: true,
          date3: "45.00",
        },
        {
          date1: "生料收尘",
          date2: false,
          date3: "102.00",
        },
        {
          date1: "回转窑",
          date2: true,
          date3: "29.00",
        },
        {
          date1: "熟料收尘",
          date2: false,
          date3: "45.00",
        },
      ],
      sxtlist: [
        {
          src: require("../../assets/videos/G.E.M.邓紫棋 - 不想回家.mp4"),
          name: "SP锅炉",
        },
        {
          src: require("../../assets/videos/G.E.M.邓紫棋 - 句号.mp4"),
          name: "回转窑",
        },
        {
          src: require("../../assets/videos/G.E.M.邓紫棋 - GLORIA.mp4"),
          name: "西侧垃圾发电",
        },
        {
          src: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
          name: "北侧垃圾发电",
        },
        {
          src: require("../../assets/videos/G.E.M.邓紫棋 - 不想回家.mp4"),
          name: "SP锅炉",
        },
        {
          src: require("../../assets/videos/G.E.M.邓紫棋 - 句号.mp4"),
          name: "回转窑",
        },
        {
          src: require("../../assets/videos/G.E.M.邓紫棋 - GLORIA.mp4"),
          name: "西侧垃圾发电",
        },
        {
          src: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
          name: "北侧垃圾发电",
        },
      ],
      dates: new Date(),
      videoSource: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
      isFullScreenTag: false,
    };
  },
  methods: {
    //U3D交互的绑定
    sendMessageToCSharp() {
      // window.vuplex.postMessage({
      //     type: "Tog",
      //     message: "智能运维_true",
      // });
      window.vuplex.postMessage("智能运维-监控");
      this.$router.push("/znyw");
    },
    defineEcharts(dom, option) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom);
      myChart.setOption(option);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "success-row";
      }
      return "";
    },
    handleFullScreen() {
      screenfull.toggle(this.$refs.videos);
    },
  },
  created() {
    // if (window.vuplex) {
    //   addMessageListener();
    // } else {
    //   window.addEventListener("vuplexready", addEventListener);
    // } function addEventListener() {
    //   window.vuplex.addEventListener("message", function (event) {
    //     let json = event.data;
    //     console.log("JSON received" + json);
    //   })
    // }
  },
  mounted() {
    setInterval(() => {
      moment.locale("zh-cn");
      // 获取当前时间
      const currentTime = moment();
      // 格式化时间为指定格式：年-月-日 星期几 时分秒
      const formattedTime = currentTime.format("YYYY-MM-DD dddd HH:mm:ss");
      // 输出格式化后的时间
      this.dates = formattedTime;
    }, 100);
  },
};
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  display: flex;
  background-image: url(../../assets/img/左遮罩.png),
    url(../../assets/img/右遮罩.png);
  padding-top: 400px;
  justify-content: space-between;
  position: relative;

  .a {
    position: absolute;
    width: 1300px;
    z-index: 2;
    top: 420px;
    right: 480px;
    z-index: 100;

    img {
      margin-right: 102px;
      pointer-events: all;
      cursor: pointer;
    }
  }

  .left {
    width: 1237px;
    height: 2500px;
    margin-left: 61px;
    background-image: url("../../assets/img/侧边.png");
    padding-left: 59px;
    padding-right: 45px;
    box-sizing: border-box;

    .dqsxtxx {
      position: relative;
      margin-top: 56px;

      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }
      #dqsxtxx {
        margin-top: 50px;
        width: 1151px;
        height: 800px;
        .headers {
          margin-left: 50px;
          width: 1041px;
          height: 586px;
          opacity: 1;
          position: relative;
          .h5-play-wrap {
            width: 1041px;
            height: 586px;
            opacity: 1;
          }
          .h_footer {
            width: 1040px;
            height: 58px;
            background: #1f1f1f;
            opacity: 0.45;
            position: absolute;
            bottom: 0px;
            .time {
              color: #fff;
              border: none;
              font-size: 20px;
              position: absolute;
              bottom: 20px;
              left: 20px;
              width: 300px;
            }
            .quanping {
              color: #fff;
              border: none;
              font-size: 20px;
              position: absolute;
              bottom: 20px;
              right: 20px;
              width: 20px;
              height: 20px;
            }
          }
        }

        h2 {
          margin-left: 40px !important;
          margin-top: 10px;
          width: 184px;
          height: 37px;
          font-size: 22px;
          font-family: MicrosoftYaHei;
          color: #ffffff;
          line-height: 20px;
        }

        .footers {
          width: 100%;
          height: 200px;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          align-items: center;
          align-content: space-around;

          .one {
            width: 497px;
            height: 80px;
            background: url(../../assets/ZNYWJK/1.png);
            background-size: cover;
            position: relative;

            p {
              width: 166px;
              height: 33px;
              font-size: 28px;
              font-family: MicrosoftYaHei;
              color: #ffffff;
              left: 50%;
              top: 50%;
              margin-left: 20px;
              transform: translate(50%, 50%);
            }
          }

          .two {
            width: 497px;
            height: 80px;
            background: url(../../assets/ZNYWJK/2.png);
            background-size: cover;
            position: relative;

            p {
              width: 166px;
              height: 33px;
              font-size: 28px;
              font-family: MicrosoftYaHei;
              color: #ffffff;
              left: 50%;
              top: 50%;
              margin-left: 40px;
              transform: translate(50%, 50%);
            }
          }

          .three {
            width: 497px;
            height: 80px;
            background: url(../../assets/ZNYWJK/3.png);
            background-size: cover;
            position: relative;

            p {
              width: 166px;
              height: 33px;
              font-size: 28px;
              font-family: MicrosoftYaHei;
              color: #ffffff;
              left: 50%;
              top: 50%;
              margin-left: 20px;
              transform: translate(50%, 50%);
            }
          }

          .four {
            width: 497px;
            height: 80px;
            background: url(../../assets/ZNYWJK/4.png);
            background-size: cover;
            position: relative;

            p {
              width: 166px;
              height: 33px;
              font-size: 28px;
              font-family: MicrosoftYaHei;
              color: #ffffff;
              left: 50%;
              top: 50%;
              margin-left: 40px;
              transform: translate(50%, 50%);
            }
          }
        }
      }
    }

    .spjk {
      position: relative;
      margin-top: 56px;

      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }

      #spjk {
        width: 1155px;
        height: 800px;
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: center;
        align-content: space-around;
        overflow-y: scroll;
        // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
        ::-webkit-scrollbar {
          width: 5px;
          height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
          border-radius: 10px;
        }
        // 滑块
        ::-webkit-scrollbar-thumb {
          width: 14px;
          height: 241px;
          border-radius: 10px;
          background: url(../../assets/ZNYWJK/滑动条.png);
          background-size: cover;
        }
        // 轨道
        ::-webkit-scrollbar-track {
          border-radius: 10px;
          background-color: #fff;
        }
        .spjk_one {
          width: 551px;
          height: 383px;
          // background: #1969A8;
          opacity: 1;
          border: none;

          .jiankong {
            width: 100%;
            height: 323px;
            video {
              border: none;
              width: 551px;
              height: 301px;
              opacity: 1;
            }
          }

          .spjk_title {
            width: 100%;
            height: 60px;
            font-size: 28px;
            text-align: center;
            font-family: MicrosoftYaHei;
            background: #1969a8;
            color: #ffffff;
            line-height: 60px;
          }
        }
      }
    }

    .sxtlb {
      position: relative;
      margin-top: 56px;

      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }

      #sxtlb {
        width: 1155px;
        height: 500px;
        margin-top: 50px;

        .data {
          position: absolute;
          font-size: 28px;
          font-family: "DOUYU";
          color: #ffffff;
          line-height: 18px;
          display: flex;
          right: 0;
          top: 120px;
          z-index: 1;

          span {
            width: 240px;
            height: 38px;
            margin: 10px;
            display: block;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
          }

          .active {
            background: linear-gradient(
              to right,
              rgba(33, 76, 124, 0.3) 20%,
              rgba(152, 207, 230, 0.3) 100%,
              rgba(33, 76, 124, 0.3) 20%
            );
          }
        }

        .con {
          margin-top: 100px;
          width: 1120px;
          height: 125px;

          // background: #6C1C00;
          // opacity: 1;
          // border: 1px solid #FF4200;
          .con1,
          .con2 {
            width: 100%;
            height: 70px;
            padding: 0px 80px 0px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 24px;
            color: #fff;
            box-sizing: border-box;
          }

          .con1 {
            background: url(../../assets/ZNYWJK/红.png);
          }

          .con2 {
            margin-top: 20px;
            background: url(../../assets/ZNYWJK/蓝.png);
          }
        }
      }
    }
  }

  .right {
    width: 1237px;
    height: 2500px;
    margin-right: 61px;
    background-image: url("../../assets/img/侧边.png");
    padding-left: 59px;
    padding-right: 45px;
    box-sizing: border-box;

    .wdjc1 {
      position: relative;
      margin-top: 120px;

      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }

      .chartBox {
        margin-top: 100px;
        position: relative;

        .selects {
          position: absolute;
          right: 20px;
          top: -60px;
          // font-size: 30px;
          z-index: 1000;

          //下拉框的颜色改变
          .custom-select /deep/ .el-input__inner {
            color: #fff !important;
            font-size: 20px;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 2px solid #06cdff !important;
            background: #1d3349 !important;
          }

          /* // 设置下拉框的背景颜色及边框属性； */
          .custom-select /deep/.el-select-dropdown {
            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 2px solid #06cdff !important;
            background: #1d3349 !important;
          }

          /* // 设置下拉框的字体属性及背景颜色； */
          .custom-select /deep/ .el-select-dropdown__item {
            font-size: 18px;
            color: #fff;
            font-weight: 200;
            background: #1d3349 !important;
          }

          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
          .custom-select /deep/.el-select-dropdown__list {
            /* padding-top: 10px; */
            padding: 0;
          }

          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
          .custom-select /deep/.el-popper[x-placement^="bottom"] {
            margin-top: 5px;
          }

          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
          .custom-select /deep/.el-popper .popper__arrow,
          .custom-select /deep/.el-popper .popper__arrow::after {
            display: none;
          }

          /* // 设置鼠标悬停在下拉框列表的悬停色； */
          .custom-select /deep/.el-select-dropdown__item:hover {
            color: rgb(213, 215, 230);
            background-color: #326aff;
          }

          .custom-select /deep/ .el-select-dropdown {
            position: absolute;
            top: 40px !important;
            left: 0px !important;
          }
        }

        #wdjc1 {
          width: 1156px;
          height: 960px;
          font-size: 20px;
          color: #fff;
          position: relative;

          .hpfj {
            width: 1154px;
            height: 471px;
            background: url(../../assets/ZNYWJK/风机框.png);
            background-size: cover;
            margin-bottom: 40px;

            // background: #0184AA;
            // opacity: 1;
            // border: 1px solid #0EE0ED;
            h2 {
              color: #fff;
              padding: 20px;
            }

            .nei {
              width: 100%;
              height: 380px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              align-content: space-around;
              flex-wrap: wrap;

              // flex-direction: column;
              .ones {
                margin-left: 12px;
                width: 350px;
                padding-left: 10px;
                padding-top: 10px;
                height: 163px;
                font-size: 30px;
                margin-right: 20px;
                box-sizing: border-box;
                background: url(../../assets/ZNYWJK/风机内框.png);

                // background: #00F0FF;
                // opacity: 0.2;
                // border: NaNpx solid #00F0FF;
                .green {
                  text-align: center;
                  color: #51ff72;
                  height: 80px;
                  font-size: 40px;
                  line-height: 80px;
                }

                .bianhao {
                  font-size: 22px;
                }
              }
            }
          }
        }
      }
    }

    .wdjc2 {
      position: relative;
      margin-top: 60px;
      .imgBox {
        height: 93px;
        width: 1156px;

        p {
          position: absolute;
          color: #fff;
          top: 20px;
          left: 50px;
          font-size: 30px;
          font-family: "MicrosoftYaHei";
        }
      }

      .chartBox {
        margin-top: 120px;
        position: relative;

        .selects {
          position: absolute;
          right: 20px;
          top: -60px;
          z-index: 1000;

          //下拉框的颜色改变
          .custom-select /deep/ .el-input__inner {
            color: #fff !important;
            font-size: 20px;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 2px solid #06cdff !important;
            background: #1d3349 !important;
          }

          /* // 设置下拉框的背景颜色及边框属性； */
          .custom-select /deep/.el-select-dropdown {
            // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 2px solid #06cdff !important;
            background: #1d3349 !important;
          }

          /* // 设置下拉框的字体属性及背景颜色； */
          .custom-select /deep/.el-select-dropdown__item {
            font-size: 18px;
            color: #fff;
            font-weight: 200;
            background: #1d3349 !important;
          }

          // /* // 设置下拉框列表的 padding 值为：0；(即：样式调整) */
          .custom-select /deep/.el-select-dropdown__list {
            /* padding-top: 10px; */
            padding: 0;
          }

          /* // 设置输入框与下拉框的距离为：0; (即：样式调整) */
          .custom-select /deep/.el-popper[x-placement^="bottom"] {
            margin-top: 5px;
          }

          /* // 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头) */
          .custom-select /deep/.el-popper .popper__arrow,
          .custom-select /deep/.el-popper .popper__arrow::after {
            display: none;
          }

          /* // 设置鼠标悬停在下拉框列表的悬停色； */
          .custom-select /deep/.el-select-dropdown__item:hover {
            color: rgb(213, 215, 230);
            background-color: #326aff;
          }

          .custom-select /deep/ .el-select-dropdown {
            position: absolute;
            top: 40px !important;
            left: 0px !important;
          }
        }

        #wdjc2 {
          width: 1156px;
          height: 883px;
          font-size: 20px;
          color: #fff;
          position: relative;
          display: flex;
          justify-content: space-around;
          align-items: center;

          h3 {
            text-align: center;
            font-size: 30px;
            margin-top: 20px;
            margin-bottom: 20px;
          }

          .controls {
            width: 512px;
            height: 883px;
            background: url(../../assets/ZNYWJK/竖框.png);

            ul {
              width: 100%;
              list-style: none;
              box-sizing: border-box;

              li {
                width: 456px;
                margin: 0 auto;
                margin-top: 20px;
                padding: 0px 30px;
                height: 64px;
                line-height: 64px;
                font-size: 28px;
                box-sizing: border-box;
                background: url(../../assets/ZNYWJK/输入框.png);

                .blue {
                  margin: 0px 20px 10px;
                  margin-left: 30px;
                  color: #0ee5ff;
                  font-size: 40px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
