|
@@ -38,6 +38,16 @@ const login = () => {
|
|
|
menuStatus.saveActiveIndex('6')
|
|
|
router.push({ name: 'login', params: {} })
|
|
|
}
|
|
|
+const falgMenu = ref<boolean>(false)
|
|
|
+//鼠标移入事件
|
|
|
+const comeMenu = () => {
|
|
|
+ falgMenu.value = true
|
|
|
+}
|
|
|
+//鼠标移出事件
|
|
|
+const leaveMenu = () => {
|
|
|
+ falgMenu.value = false
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
@@ -54,7 +64,7 @@ const login = () => {
|
|
|
<el-menu-item index="4">测试计划</el-menu-item>
|
|
|
</el-badge> -->
|
|
|
<el-menu-item index="4">
|
|
|
- <div class="badge_custom">
|
|
|
+ <div class="badge_custom" v-show="userInfo.planCurrentNum != 0">
|
|
|
{{ userInfo.planCurrentNum }}
|
|
|
</div>
|
|
|
<span>测试计划</span>
|
|
@@ -62,11 +72,28 @@ const login = () => {
|
|
|
<el-menu-item index="5">测试记录</el-menu-item>
|
|
|
</el-menu>
|
|
|
|
|
|
- <div class="login_button_bg" @click="login">
|
|
|
+ <div class="login_button_bg" @mouseenter="comeMenu" @mouseleave="leaveMenu" v-show="userInfo.userInfo.userName">
|
|
|
<img width="20px" src="../assets/home/button_login.png" />
|
|
|
|
|
|
<span>{{ userInfo.userInfo.userName }}</span>
|
|
|
+ <transition>
|
|
|
+ <div class="login_user" v-show="falgMenu">
|
|
|
+ <div class="update_pass">
|
|
|
+ 修改密码
|
|
|
+ </div>
|
|
|
+ <div class="exit_login">
|
|
|
+ 退出登录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="login_button_bg" v-show="!userInfo.userInfo.userName" @click="login">
|
|
|
+ <img width="20px" src="../assets/home/button_login.png" />
|
|
|
+
|
|
|
+
|
|
|
<span v-if="!userInfo.userInfo?.userName">登录账号</span>
|
|
|
+
|
|
|
</div>
|
|
|
<!-- <div class="menu_gen">首页</div>
|
|
|
<div class="menu_gen">科普乐园</div>
|
|
@@ -153,6 +180,7 @@ const login = () => {
|
|
|
}
|
|
|
|
|
|
.login_button_bg {
|
|
|
+ position: relative;
|
|
|
background-color: #000000;
|
|
|
border-radius: 12px;
|
|
|
border: 3px solid #48D68E;
|
|
@@ -161,6 +189,47 @@ const login = () => {
|
|
|
cursor: pointer;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
+ .login_user {
|
|
|
+ border-bottom-left-radius: 20px;
|
|
|
+ border-bottom-right-radius: 20px;
|
|
|
+ width: 80%;
|
|
|
+ position: absolute;
|
|
|
+ background-color: #ffffff;
|
|
|
+ bottom: -105px;
|
|
|
+ margin-left: calc(10% - 20px);
|
|
|
+
|
|
|
+ color: #000000;
|
|
|
+
|
|
|
+ .update_pass {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ // padding: 5px;
|
|
|
+ color: #999999
|
|
|
+ }
|
|
|
+
|
|
|
+ .update_pass:hover {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #48D68E // padding: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .exit_login {
|
|
|
+ text-align: center;
|
|
|
+ // padding: 5px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ color: #999999
|
|
|
+ }
|
|
|
+
|
|
|
+ .exit_login:hover {
|
|
|
+ text-align: center;
|
|
|
+ // padding: 5px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ color: #48D68E // padding: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.flex-grow {
|