From c80ffdf5a0f2b82c35096edc7fe5fc17ceb0c51e Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Wed, 31 Aug 2022 17:44:37 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/zhny-dsjdp
---
src/views/lyout/index.vue | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 110 insertions(+), 4 deletions(-)
diff --git a/src/views/lyout/index.vue b/src/views/lyout/index.vue
index 72a9352..cc3b74b 100644
--- a/src/views/lyout/index.vue
+++ b/src/views/lyout/index.vue
@@ -27,6 +27,19 @@
:class="{on: currentPath == '/lyout/weather'}"
:data-path="'/lyout/weather'"
>气象监测</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>
</div>
@@ -37,10 +50,14 @@
</template>
<script>
+
export default {
data () {
return {
- currentPath: ''
+ currentPath: '',
+ userOn: false,
+ isShowUserDetail: false,
+ userName: window.localStorage.getItem('userName')
}
},
mounted () {
@@ -58,6 +75,17 @@
this.currentPath = e.target.dataset.path
this.$router.push(e.target.dataset.path)
}
+ },
+ openUser () {
+ this.userOn = !this.userOn
+ this.isShowUserDetail = !this.isShowUserDetail
+ },
+ goTOLogin () {
+ window.location.href = 'http://dev.jxpskj.com:8020/ncny/login.html'
+ // this.$router.push({ path: '/login' })
+ },
+ goTOFllow () {
+ window.location.href = 'http://dev.jxpskj.com:8020/ncny/systemwall2/index.html'
}
}
}
@@ -112,19 +140,97 @@
}
.r {
- margin-right: 32px;
+ margin-right: 12px;
display: flex;
.nav {
margin-right: 16px;
- background: url(../../../public/img/right-select.png) no-repeat;
+ background: url(../../../public/img/right-select.png)
+ no-repeat;
background-size: 100% 100%;
}
.nav.on {
- background: url(../../../public/img/right-selected.png) no-repeat;
+ background: url(../../../public/img/right-selected.png)
+ no-repeat;
background-size: 100% 100%;
}
+ .userIcon {
+ height: 40px;
+ width: 40px;
+ border-radius: 50%;
+ margin-top: 4px;
+ cursor: pointer;
+ background: url(../../../public/img/icon/user.png) no-repeat;
+ background-size: 100% 100%;
+ box-shadow: inset 2px 2px 10px #0e7894,
+ inset -2px -2px 10px #0e7894;
+ .userDetail {
+ width: 240px;
+ height: 92px;
+ position: absolute;
+ top: 64px;
+ right: 4px;
+ background: rgba(3, 82, 102, 0.8);
+ border-radius: 8px;
+ cursor: default;
+
+ .triangle {
+ position: absolute;
+ top: -16px;
+ right: 20px;
+ // background-color: red;
+ 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: #6de9f3;
+ line-height: 22px;
+ 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;
+
+ & > div {
+ width: 100px;
+ height: 40px;
+ background-color: rgba(109, 233, 243, 1);
+ border-radius: 4px;
+ cursor: pointer;
+
+ img {
+ width: 76px;
+ height: 20px;
+ }
+ }
+ .return {
+ margin-left: -10px;
+ color: #198592;
+ font-size: 14px;
+ }
+ }
+ }
+ }
+ .userIcon.on {
+ box-shadow: inset 2px 2px 10px #00f6ff,
+ inset -2px -2px 10px #00f6ff;
+ }
}
.c {
--
Gitblit v1.9.3