<script setup>

import {Search} from "@element-plus/icons-vue";
</script>

<template>
  <el-row :gutter="5">
    <el-col :span="24" style="height: 50px;line-height: 50px">
      <div style="display: flex;justify-content: space-between">
        <div>环境及用料配置</div>
        <div style="display: flex;gap: 20px;">
          <el-button type="primary">保存</el-button>
          <el-button type="info">重置</el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="24" style="display: grid;grid-template-columns: 22% 20% 20% 20% 15%; gap: 10px">
      <el-card style="height: 600px">
        <template #header>
          <div style="display: flex;justify-content: space-between;">
            <div>不同种类化石燃料燃烧CO2排放</div>
            <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
          </div>
        </template>
        <template #default>
          <el-input placeholder="请输入燃料品种名称">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
          </el-input>
          <div style="margin-top: 30px;display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
            <el-checkbox>
              <template #default>
                无烟煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                烟煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                褐煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                洗精煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                型煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                焦炭
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                无烟煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                无烟煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                无烟煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                无烟煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                无烟煤
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                无烟煤
              </template>
            </el-checkbox>
          </div>
          <div style="color: #1111bb;text-align: center;margin-top: 300px">
            查看更多化石燃料...
          </div>
        </template>
      </el-card>
      <div>
        <el-card style="height: 300px">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>净购入的电力消费产生的排放</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
              <el-checkbox>
                <template #default>
                  电力
                </template>
              </el-checkbox>
            </div>
          </template>
        </el-card>
        <el-card style="height: 280px;margin-top: 20px;">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>净购入的热力消费产生的排放</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
              <el-checkbox>
                <template #default>
                  热力
                </template>
              </el-checkbox>
            </div>
          </template>
        </el-card>
      </div>
      <div>
        <el-card style="height: 300px">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>过程排放 - 碳酸盐分解CO2排放</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div style="display: grid;grid-template-columns: 50% 49% ;row-gap: 1%;column-gap: 10%">
              <el-checkbox>
                <template #default>
                  含CaCO3
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  含MgCO3
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  含Na2CO3
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  含BaCO3
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  含Li2CO3
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  含K2CO3
                </template>
              </el-checkbox>
            </div>
            <div style="color: #1111bb;text-align: center;margin-top: 100px">
              查看更多碳酸盐...
            </div>
          </template>
        </el-card>
        <el-card style="height: 280px;margin-top: 20px;">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>过程排放 - 碳酸盐分解CO2排放</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
              <el-checkbox>
                <template #default>
                  高压法
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  中压法
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  常压法
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  综合法
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  低压法
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  氧化法
                </template>
              </el-checkbox>
            </div>
          </template>
        </el-card>
      </div>
      <div>
        <el-card style="height: 300px">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>过程排放 - 原材料消耗产生排放</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
              <el-checkbox>
                <template #default>
                  无烟煤
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  无烟煤
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  无烟煤
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  煤制品
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  燃料油
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  石油焦
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  冰醋酸
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  二甲苯
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  天然气
                </template>
              </el-checkbox>
            </div>
          </template>
        </el-card>
        <el-card style="height: 280px;margin-top: 20px;">
          <template #header>
            <div style="display: flex;justify-content: space-between;">
              <div>过程排放 - 己二酸生产过程的N2O排放</div>
              <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
            </div>
          </template>
          <template #default>
            <div style="display: grid;grid-template-columns: 30% 30% 30%;row-gap: 1%;column-gap: 10%">
              <el-checkbox>
                <template #default>
                  硝酸氧化
                </template>
              </el-checkbox>
              <el-checkbox>
                <template #default>
                  其他
                </template>
              </el-checkbox>
            </div>
          </template>
        </el-card>
      </div>
      <el-card style="height: 600px">
        <template #header>
          <div style="display: flex;justify-content: space-between;">
            <div>回收利用 - 不考虑自用</div>
            <img src="/src/assets/svg/u540.svg" style="width: 6%;object-fit: contain" />
          </div>
        </template>
        <template #default>
          <el-input placeholder="请输入回收利用的气体">
            <template #prepend>
              <el-button :icon="Search" />
            </template>
          </el-input>
          <div style="margin-top: 30px;display: grid;grid-template-columns: 50% 49%;row-gap: 1%;column-gap: 10%">
            <el-checkbox>
              <template #default>
                CO2
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                HFCs
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                CH4
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                PFCs
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                N2O
              </template>
            </el-checkbox>
            <el-checkbox>
              <template #default>
                SF6
              </template>
            </el-checkbox>
          </div>
        </template>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped lang="scss">

</style>