标题栏界面

src/components/TitleBar.vue

@@ -2,17 +2,79 @@
 <template>
   <div class="title-bar">
     <el-row>
-      <el-col :span=3>
+      <el-col :span=2>
         <img class="logo" src="../assets/img/main_window/logo.png" sytle="align-items"/>
       </el-col>
-      <el-col :span=1></el-col>
-      <el-col :span=3>
+      <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="MW" value=20></TitleBarCard></li>
+                  <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>
@@ -31,25 +93,30 @@ export default{
 <style scoped>
 .title-bar {
   height: 6vh;
-  background-color: #FF0000;
+  background-color: #000000;
   margin-top: 0;
   margin-right: 0;
   margin-left: 0;
 }
 .logo{
     position: relative;
-    top:30%;
+    top:33%;
+}
+.admin{
+  color: #FFFFFF;
+  position: relative;
+  margin-left: 10px;
+  /* padding: 0; */
+  padding:18px;
 }
 .titleinfo{
-    background-color: #141414;
+    background-color: rgb(20,20,20);
     height: auto;
     padding:13px;
     border-radius: 6px;
     margin-top: 5px;
     margin-bottom: 5px;
+    margin-left: -9px;
 }
 
-ul li{
-    display: inline;
-}
 </style>

src/components/area/mainwindow/TitleBarCard.vue

@@ -18,6 +18,11 @@ export default {
 </script>
 
 <style scoped>
+
+span{
+  font-size: 8;
+  margin-left: 9px;
+}
 .title{
     color:#FFFFFF;
 }