project-neic/src/components/TitleBar.vue

/* 标题栏 */
<template>
  <div class="title-bar">
    <el-row>
      <el-col :span=2>
        <img class="logo" src="../assets/img/main_window/logo.png" sytle="align-items"/>
      </el-col>
      <el-col :span=1>
        <div></div>
      </el-col>
      <el-col :span=2.3>
          <div class="titleinfo">
              <ul>
                  <li><TitleBarCard title='装机容量' unit="MW" value=2000></TitleBarCard></li>
              </ul>
          </div>
      </el-col>
      <el-col :span=2.3>
          <div class="titleinfo">
              <ul>
                  <li><TitleBarCard title='实时功率' unit="MW" value=2000></TitleBarCard></li>
              </ul>
          </div>
      </el-col>
      <el-col :span=2.3>
          <div class="titleinfo">
              <ul>
                  <li><TitleBarCard title='日发电量' unit="kWh" value=200.0></TitleBarCard></li>
              </ul>
          </div>
      </el-col>
      <el-col :span=2.3>
          <div class="titleinfo">
              <ul>
                  <li><TitleBarCard title='上网电量' unit="kWh" value=2000.0></TitleBarCard></li>
              </ul>
          </div>
      </el-col>
      <el-col :span=2.3>
          <div class="titleinfo">
              <ul>
                  <li><TitleBarCard title='月发电量' unit="kWh" value=2000.0></TitleBarCard></li>
              </ul>
          </div>
      </el-col>
      <el-col :span=2.3>
          <div class="titleinfo">
              <ul>
                  <li><TitleBarCard title='年发电量' unit="kWh" value=20000.0></TitleBarCard></li>
              </ul>
          </div>
      </el-col>
      <el-col :span=2.3>
          <div class="titleinfo">
              <ul>
                  <li><TitleBarCard title='月利用小时' unit="小时" value=200></TitleBarCard></li>
              </ul>
          </div>
      </el-col>
      <el-col :span=2.3>
          <div class="titleinfo">
              <ul>
                  <li><TitleBarCard title='年利用小时' unit="小时" value=2000></TitleBarCard></li>
              </ul>
          </div>
      </el-col>
      
      <el-col :span=1.6>
          <div class="admin"  style="position: absolute;right: 70px;">
            <p>管理员</p>
          </div>
      </el-col>
      <el-col :span=1>
          <div style="margin-top:7px;position: absolute;right: 10px;">
            <button class="closeButton" style="font-size: 40px; color: white; background: rgb(41,41,41);width:44px;height:44px;border-radius:8px;border: none;">×</button>
          </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import TitleBarCard from './area/mainwindow/TitleBarCard.vue'

    export default {
        name: "TitleBar",
        components: {
            TitleBarCard,
        }
    }
</script>


<style scoped>
.title-bar {
  height: 6vh;
  background-color: #000000;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}
.logo{
    position: relative;
    top:33%;
}
.admin{
  color: #FFFFFF;
  position: relative;
  margin-left: 10px;
  /* padding: 0; */
  padding:18px;
}
.titleinfo{
    background-color: rgb(20,20,20);
    height: auto;
    padding:13px;
    border-radius: 6px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: -9px;
}

</style>