From 6ea2efd28a5c2f5b5ca8b4dd0af056b2c6efb0ec Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 26 Dec 2022 09:18:08 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs
---
src/views/lyout/index.vue | 99 ++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 93 insertions(+), 6 deletions(-)
diff --git a/src/views/lyout/index.vue b/src/views/lyout/index.vue
index 74ce54c..8622c77 100644
--- a/src/views/lyout/index.vue
+++ b/src/views/lyout/index.vue
@@ -11,7 +11,6 @@
<template>
<div class="wrapper">
<div class="main-header">
- <!-- <div class="title"></div> -->
<div class="menu-list left">
<div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
@click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
@@ -27,7 +26,6 @@
</div>
<div class="title">
- <!-- <img src="../../../public/img/icon.png" /> -->
<h3>社区警务平台</h3>
</div>
@@ -47,11 +45,33 @@
</div>
<!-- 用户登录展示的 -->
- <div class="user-infor">
- <div>
+ <div class="user-infor" @click="openUser">
+ <div class="userIcon" :class="{on: userOn == true}">
<i class="el-icon-user-solid"></i>
</div>
+ <div class="userDetail" v-if="isShowUserDetail">
+ <div class="triangle"></div>
+ <div class="userName">用户名：{{userName}}</div>
+ <div class="userBtn">
+ <div class="edit" @click="goTOLogin">
+ <img src="../../../public/img/bg/editLogin.webp" alt />
+ </div>
+ </div>
+ </div>
</div>
+ <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
+ <div class="userDetail" v-if="isShowUserDetail">
+ <div class="triangle"></div>
+ <div class="userName">用户名：{{userName}}</div>
+ <div class="userBtn">
+ <div class="edit" @click="goTOLogin">
+ >
+ <img src="../../../public/img/editLogin.webp" alt />
+ </div>
+ <div class="return" @click="goTOFllow">返回引导页</div>
+ </div>
+ </div>
+ </div>-->
</div>
<div class="main-container">
@@ -124,7 +144,9 @@
boxWidth: 0,
- currentUrl: '/lyout/home'
+ currentUrl: '/lyout/home',
+ userOn: false,
+ isShowUserDetail: false,
}
},
@@ -224,6 +246,11 @@
document.querySelector('.image-switch-img-btn').classList.remove('shrink-btn')
}
})
+ },
+
+ openUser () {
+ this.userOn = !this.userOn
+ this.isShowUserDetail = !this.isShowUserDetail
},
}
}
@@ -389,7 +416,7 @@
font-size: 24px;
cursor: pointer;
- div {
+ .userIcon {
position: absolute;
top: 0;
right: 0;
@@ -404,6 +431,66 @@
box-shadow: inset 0 0 10px $menu-tab-shadow;
border-radius: 50%;
}
+
+ .userIcon.on {
+ color: rgba(252, 189, 86, 1);
+ }
+ .userDetail {
+ width: 180px;
+ height: 92px;
+ position: absolute;
+ top: 64px;
+ right: 4px;
+ background: $menu-tab-bg-color;
+ border-radius: 8px;
+ cursor: default;
+
+ .triangle {
+ position: absolute;
+ top: -16px;
+ right: 20px;
+ width: 0px;
+ height: 0px;
+ border: 8px solid #000;
+ border-top-color: transparent;
+ border-bottom-color: rgba(3, 82, 102, 0.8);
+ border-left-color: transparent;
+ border-right-color: transparent;
+ }
+ .userName {
+ width: 100%;
+ height: 40px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #fff;
+ line-height: 40px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+ position: absolute;
+ top: 0px;
+ }
+ .userBtn {
+ width: 100%;
+ height: 50px;
+ position: absolute;
+ bottom: 0px;
+ display: flex;
+ justify-content: space-around;
+ padding-top: 4px;
+
+ & > div {
+ width: 100px;
+ height: 40px;
+ background-color: rgba(168, 222, 255, 0.6);
+ border-radius: 4px;
+ cursor: pointer;
+ line-height: 44px;
+ img {
+ width: 76px;
+ height: 20px;
+ }
+ }
+ }
+ }
}
}
--
Gitblit v1.9.3