登录选项界面

src/components/StatusBar.vue

@@ -13,7 +13,6 @@
           trigger="hover"
           class="popoverBack"
           :show-arrow="false"
-          visible-arrow="false"
         >
           <template #reference>
             <div class="status-list">

src/components/TitleBar.vue

@@ -19,8 +19,7 @@
             :show-close="false"
           >
             <el-form :model="form">
-              <el-form-item :label="loginMessage" :label-width="formLabelWidth">
-              </el-form-item>
+              <el-form-item :label="loginMessage"> </el-form-item>
               <el-form-item label="用户名：" :label-width="formLabelWidth">
                 <el-input
                   v-model="form.name"
@@ -72,22 +71,6 @@
               </span>
             </template>
           </el-dialog>
-
-          <el-popover
-          placement="bottom"
-          :width="521"
-          trigger="hover"
-          class="popoverBack"
-          :show-arrow="false"
-          visible-arrow="false"
-          v-model="popovermodel"
-        >          
-          <ul>
-            <li>编辑</li>
-            <li>注销</li>
-          </ul>
-
-        </el-popover>
         </div>
       </el-col>
       <el-col :span="2.3">
@@ -196,9 +179,19 @@
       </el-col>
 
       <el-col :span="1.6">
-        
-        <div @click="userClick" @mouseover="popovermodel=false" style="top: 18px; right: 100px; color: #ffffff; position: absolute">{{usreName}}</div>
-        
+        <el-popover placement="bottom" :width="150" trigger="hover" :show-arrow="false">
+          <template #reference>
+            <el-button @click="userClick" style="top: 10px; right: 76px; color: #ffffff; position: absolute;background-color:black;border:none;font-size:16px;">{{usreName}}</el-button>
+          </template>
+          <form style="background-color: #363636;">
+            <el-button class="loginoption">编&emsp;辑</el-button>
+            <br>
+            <el-button class="loginoption">注&emsp;销</el-button>
+          </form>
+        </el-popover>
+
+        <!-- <div @click="userClick" style="top: 18px; right: 100px; color: #ffffff; position: absolute">{{usreName}}</div> -->
+
         <!-- <el-button
           v-popover:loginref
           type="text"
@@ -226,14 +219,13 @@ export default {
   },
   data() {
     return {
-      popovermodel: false,
       dialogVisible: false,
       dialogFormVisible: false,
       form: {
         name: "",
         psd: "",
       },
-      usreName:"未登录...",
+      usreName: "未登录...",
       loginMessage: "", // 登录提示
       formLabelWidth: "120px",
       totalPower: 0, // 实时功率
@@ -294,24 +286,24 @@ export default {
     /* 登录 */
     login() {
       var bd = BackgroundData.getInstance();
-      bd.login(this.form.name,this.form.psd,this.onLoged);
+      bd.login(this.form.name, this.form.psd, this.onLoged);
     },
 
-    onLoged(msg){
-      if(!msg.data){
-        this.loginMessage="登录出现错误，请重新登录";
+    onLoged(msg) {
+      if (!msg.data) {
+        this.loginMessage = "登录出现错误，请重新登录";
         return;
       }
       var user = msg.data;
-      if(!user.isValid){
-        this.loginMessage=user.message;
+      if (!user.isValid) {
+        this.loginMessage = user.message;
         return;
       }
-      BackgroundData.getInstance().LoginUser=user;
-      this.usreName=user.name;
+      BackgroundData.getInstance().LoginUser = user;
+      this.usreName = user.name;
       this.dialogVisible = false;
-      this.loginMessage='';
-      this.form.name=this.form.psd='';
+      this.loginMessage = "";
+      this.form.name = this.form.psd = "";
     },
 
     /* 用户点击 */
@@ -324,6 +316,13 @@ export default {
 
 
 <style scoped>
+.loginoption{
+  font-size:16px;
+  width:150px;
+  background-color: #292929;
+  border:none;
+  color:rgb(220,220,220);
+}
 .title-bar {
   height: 6vh;
   background-color: #000000;

src/components/area/RecommendedArea.vue

@@ -6,14 +6,13 @@
     circle-style="green"
     content-style="37"
   >
+  <div>
   <table v-for="vl in values" :key="vl">
-    
       <tr>{{vl.stationName}}</tr>
       <tr>{{vl.content}}</tr>
       <tr>{{vl.createTime}}</tr>
-    
   </table>
-    
+  </div>
   </gy-card>
 </template>