Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

shuishen

2022-12-26 6ea2efd28a5c2f5b5ca8b4dd0af056b2c6efb0ec

 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;
                        }
                    }
                }
            }
        }
    }