<script></script>

<template>
  <div class="main">
    <div id="middleTitle" class="middleTitle">
      <!-- <div class="cockpit"><div class="cockpitFont">驾驶舱</div></div>
      <div class="branchPlantProCap"><div class="branchPlantProCapFont">分厂产能</div></div> -->
      <div class="middleTitleFont"><img src="@/assets/title.png" alt="" /></div>
      <!-- <div class="productionEfficiency"><div class="productionEfficiencyFont">生产效能</div></div>
      <div class="safetyManagement"><div class="safetyManagementFont">安全管理</div></div> -->
    </div>
    <div></div>
    <div class="operatingStatusBox">
      <div class="operatingStatus">
        <div class="operatingStatusFont">工厂整体运行状态</div>
        <div class="operatingStatusContent">
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 1.svg" alt="" />
            </div>
            <div class="contentBoxCont"></div>
          </div>
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 6.svg" alt="" />
              <span>单位：t</span>
            </div>
            <div class="contentBoxCont"></div>
          </div>
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 7.svg" alt="" />
              <span>单位：kWh/t</span>
            </div>
            <div class="contentBoxCont"></div>
          </div>
        </div>
      </div>
      <div class="operatingStatus">
        <div class="operatingStatusFont">产能与产品结构</div>
        <div class="operatingStatusContent">
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 2.svg" alt="" />
              <span>单位：t</span>
            </div>
            <div class="contentBoxCont"></div>
          </div>
          <div class="contentBox">
            <div class="contentBoxFont">
              <img src="@/assets/Component 8.svg" alt="" />
              <span>百分比</span>
            </div>
            <div class="contentBoxCont"></div>
          </div>
          <div class="contentBox contentBox1">
            <div>
              <div class="contentBoxFont">
                <img src="@/assets/Component 10.svg" alt="" />
              </div>
              <div class="contentBoxCont"></div>
            </div>
            <div>
              <div class="contentBoxFont">
                <img src="@/assets/Component 9.svg" alt="" />
                <span>单位：kWh/t</span>
              </div>
              <div class="contentBoxCont"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="operatingStatus1">
        <iframe width="2236" height="1217"></iframe>
      </div>
      <div class="operatingStatus">
        <div class="operatingStatusFont">安全监测</div>
      </div>
      <div class="operatingStatus">
        <div class="operatingStatusFont">能耗与电耗分析</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.main {
  width: 416rem;
  height: 114.1875rem;
  background: radial-gradient(50% 50% at 50% 50%, #0f3b8c 0%, #0e357e 33.17%, #041026 100%);
}
.middleTitle {
  width: 415.8125rem;
  height: 10.19919rem;
  flex-shrink: 0;
  padding-top: 33.81px;
  display: inline-block;
  background-image: url('~@/assets/title1.svg');
}
.middleTitleFont {
  text-align: center;
  text-shadow: 0 3.008px 7.519px #010a14;
  font-family: 'DingTalk JinBuTi';
  font-size: 3.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 3.75rem; /* 100% */
  letter-spacing: 0.75rem;

  background: linear-gradient(180deg, #fff 0%, #96dbf2 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cockpit {
  width: 25.96338rem;
  height: 4.8125rem;
  flex-shrink: 0;
  margin-left: 67.92rem;
  background-image: url('~@/assets/Group 2785.svg');
}
.cockpitFont {
  text-align: center;
  text-shadow: 0 3.008px 7.519px #010a14;
  font-family: 'DingTalk JinBuTi';
  font-size: 2.8125rem;
  font-style: normal;
  font-weight: 400;
  //line-height: 2.8125rem; /* 100% */
  letter-spacing: 0.75rem;

  background: linear-gradient(180deg, #fff 0%, #dff7ff 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.branchPlantProCap {
  width: 25.96338rem;
  height: 4.8125rem;
  flex-shrink: 0;
  margin-left: 94.04rem;
  background-image: url('~@/assets/Group 2789.png');
}
.branchPlantProCapFont {
  text-align: center;
  text-shadow: 0 3.008px 7.519px #010a14;
  font-family: 'DingTalk JinBuTi';
  font-size: 2.8125rem;
  font-style: normal;
  font-weight: 400;
  //line-height: 2.8125rem; /* 100% */
  letter-spacing: 0.75rem;

  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.productionEfficiency {
  width: 26.0625rem;
  height: 4.8125rem;
  flex-shrink: 0;
  margin-left: 296rem;
  background-image: url('~@/assets/Group 2790.svg');
}
.productionEfficiencyFont {
  text-align: center;
  text-shadow: 0 3.008px 7.519px #010a14;
  font-family: 'DingTalk JinBuTi';
  font-size: 2.8125rem;
  font-style: normal;
  font-weight: 400;
  //line-height: 2.8125rem; /* 100% */
  letter-spacing: 0.75rem;

  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.safetyManagement {
  width: 26.0625rem;
  height: 4.8125rem;
  flex-shrink: 0;
  margin-left: 322rem;
  background-image: url('~@/assets/Group 2791.svg');
}
.safetyManagementFont {
  text-align: center;
  text-shadow: 0 3.008px 7.519px #010a14;
  font-family: 'DingTalk JinBuTi';
  font-size: 2.8125rem;
  font-style: normal;
  font-weight: 400;
  //line-height: 2.8125rem; /* 100% */
  letter-spacing: 0.75rem;

  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.operatingStatus {
  width: 941px;
}
.operatingStatus1 {
  width: 2236px;
  height: 1217px;
}
.operatingStatusFont {
  color: #fff;
  font-family: 'DingTalk JinBuTi';
  font-size: 1.8745rem;
  font-style: normal;
  font-weight: 400;
  line-height: 180%; /* 2.81175rem */
  letter-spacing: 0.37488rem;
  height: 3.5rem;
  flex-shrink: 0;
  background-image: url('~@/assets/Group 1142814701.svg');
}
.operatingStatusBox {
  display: flex;
  justify-content: space-between;
  margin: 0px 215px;
}
.operatingStatusContent {
  display: flex;
  flex-direction: column;
  height: 1300px;
  justify-content: space-evenly;
  .contentBox {
    width: 936px;
    height: 343px;
    flex-shrink: 0;
    .contentBoxFont {
      span {
        /* 单位：t */
        position: relative;
        left: -335px;
        font-family: 'DingTalk JinBuTi';
        font-style: italic;
        font-weight: 400;
        font-size: 15px;
        line-height: 150%;
        /* or 22px */
        text-align: center;
        letter-spacing: 0.2em;
        color: #60f2ff;
      }
    }
    .contentBoxCont {
      background: linear-gradient(126.97deg, rgba(6, 11, 40, 0.74) 28.26%, rgba(10, 14, 35, 0.71) 91.2%);
      border: 0.94px solid #3675c9;
      height: 298px;
    }
  }
  .contentBox1{
    display: flex;
  }
}
</style>
