用户登录界面模块

src/components/TitleBar.vue

@@ -2,92 +2,213 @@
 <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 :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 :span="1">
+        <div>
+          <el-dialog
+            title="用户登录"
+            v-model="dialogVisible"
+            width="21%"
+            :before-close="handleClose"
+          >
+            <el-form :model="form">                
+              <el-form-item label="" :label-width="formLabelWidth">
+              </el-form-item>
+              <el-form-item label="用户名：" :label-width="formLabelWidth">
+                <el-input v-model="form.name" autocomplete="off" type="text" placeholder="用户名" style="width: 80%;"></el-input>
+              </el-form-item>
+              <el-form-item label="密&emsp;码：" :label-width="formLabelWidth">
+                <el-input v-model="form.name" autocomplete="off" type="text" placeholder="密&emsp;码" style="width: 80%;" show-password></el-input>
+              </el-form-item>
+              <el-form-item label="验证码：" :label-width="formLabelWidth">
+                <el-input v-model="form.name" autocomplete="off" type="text" placeholder="验证码" style="width: 80%;"><template #append><img src="../../src\assets\logo.png" style="width: 50px; height:20px;"></template></el-input>
+              </el-form-item>
+            </el-form>
+            <template #footer>
+              <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="dialogVisible = false"
+                  >登 录</el-button
+                >
+              </span>
+            </template>
+          </el-dialog>
+        </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 :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 :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 :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 :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 :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 :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 :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 :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;">
+
+      <el-col :span="1.6">
+        <!-- <div class="admin"  style="position: absolute;right: 70px;">
             <p>管理员</p>
-          </div>
+          </div> -->
+        <el-button
+          type="text"
+          @click="dialogVisible = true"
+          class="admin"
+          style="position: absolute; right: 70px"
+          >管理员</el-button
+        >
       </el-col>
-      <el-col :span=1>
-          <div style="margin-top:7px;position: absolute;right: 10px;">
-            <button class="closeButton" style="font-size: 30px; color: white; background: rgb(41,41,41);width:44px;height:44px;border-radius:8px;border: none;">×</button>
-          </div>
+
+      <el-col :span="1">
+        <div style="margin-top: 7px; position: absolute; right: 10px">
+          <button
+            class="closeButton"
+            style="
+              font-size: 30px;
+              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'
+import TitleBarCard from "./area/mainwindow/TitleBarCard.vue";
 
-    export default {
-        name: "TitleBar",
-        components: {
-            TitleBarCard,
-        }
-    }
+export default {
+  name: "TitleBar",
+  components: {
+    TitleBarCard,
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogFormVisible: false,
+      form: {
+        name: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+      formLabelWidth: "120px",
+    };
+  },
+  methods: {
+    handleClose() {},
+  },
+};
 </script>
 
 
@@ -99,25 +220,24 @@
   margin-right: 0;
   margin-left: 0;
 }
-.logo{
-    position: relative;
-    top:33%;
+.logo {
+  position: relative;
+  top: 33%;
 }
-.admin{
-  color: #FFFFFF;
+.admin {
+  color: #ffffff;
   position: relative;
   margin-left: 10px;
   /* padding: 0; */
-  padding:18px;
+  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;
+.titleinfo {
+  background-color: rgb(20, 20, 20);
+  height: auto;
+  padding: 13px;
+  border-radius: 6px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  margin-left: -9px;
 }
-
 </style>