newcpms/ui/src/views/front/materialBalance.vue

<template>
  <div id="materialBalance">
    <!--<div class="bg-color-black">-->
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">物料平衡表</span>
        </div>
      </div>
      <div style="text-align: center; background-color: rgba($color: #ffffff, $alpha: 0.3);
        height: 100%;">
        <span class="layout">
          <span class="layout_left" style="">
            <img src="@/assets/img/EBO框.png" style="">
            <img src="@/assets/img/EBO框.png" style="">
            <img src="@/assets/img/EBO框.png" style="">
            <img src="@/assets/img/EBO框.png" style="">
            <img src="@/assets/img/EBO框.png" style="">
          </span>
          <!-- 需要做动效 -->
          <span class="layout_center">
            <img src="@/assets/img/left 进箭头.png" style="">
            <img src="@/assets/img/left 进箭头.png" style="">
            <img src="@/assets/img/left 进箭头.png" style="">
            <img src="@/assets/img/left 进箭头.png" style="">
            <img src="@/assets/img/left 进箭头.png" style="">
          </span>
          <span class="layout_right">
            <el-row class="row"> 
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
            </el-row>
            <el-row class="row"> 
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉-red.png" style="">
              </el-col>
            </el-row>
            <el-row class="row"> 
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉-yellow.png" style="">
              </el-col>
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
            </el-row>
            <el-row class="row"> 
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
              <el-col class="col" :span="8">
                <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
              </el-col>
            </el-row>
            <!-- <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
            <img src="@/assets/img/冷炼炉 拷贝 2.png" style=""> -->
            <!-- <img src="@/assets/img/冷炼炉-yellow.png" style="">
            <img src="@/assets/img/冷炼炉-yellow.png" style="">
            <img src="@/assets/img/冷炼炉-yellow.png" style="">
            <img src="@/assets/img/冷炼炉-red.png" style="">
            <img src="@/assets/img/冷炼炉-red.png" style="">
            <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
            <img src="@/assets/img/冷炼炉 拷贝 2.png" style="">
            <img src="@/assets/img/冷炼炉 拷贝 2.png" style=""> -->
          </span>
          <!-- 需要做动效 -->
          <span class="layout_arrow">
            <img src="@/assets/img/粗箭头5.png" alt="">
          </span>
          <span class="layout_EOB">
            <img class="thin_EOB" src="@/assets/img/EBO框.png" style="">
          </span>
          <span class="layout_thin_arrow">
            <!-- 需要做动效 -->
            <img class="thin_arrow" src="@/assets/img/细出箭头1.png" alt="">
            <img src="@/assets/img/炉子.png" alt="">
          </span>
          <span>
            <!-- 需要做动效 -->
            <img src="@/assets/img/左上箭头3.png" alt="" style="width: width: 20px;
            height: 10em;
            position: relative;
            right: 10em;
            top: 10em;">
          </span>
          <span class="layout_stove">
            <img src="@/assets/img/压缩机.png" alt="">
          </span>
          <span class="layout_cricle_stove">
            <img class="stove_1" src="@/assets/img/炉子.png" alt="">
            <img class="stove_2" src="@/assets/img/炉子.png" alt="">
            <img class="stove_3" src="@/assets/img/炉子.png" alt="">
            <img class="stove_4" src="@/assets/img/炉子.png" alt="">
          </span>
          <span class="layout__right"></span>
        </span>
      </div>
  </div>
</template>

<script>
  export default {
    name: "materialBalance",
    data () {
      return {
      }
    }
  }
</script>

<style lang="scss">
</style>