scd_tools_ui/src/pages/components/HeadMenu.vue

<template>
    <div>
        <div class="bigBox">
            <!-- 左侧标题 -->
            <div class="monyBox">
                <!-- <el-icon class="folders">
                    <FolderRemove />
                </el-icon>
                <span class="headSpan">变电站scd检测</span> -->
                <img style="display: block;" src="../../assets/image/flash_scd.png" alt="">
            </div>
            <!-- 右侧功能 -->
            <div class="setBox">
                <!-- 返回图标 -->
                <div style="padding-right: 16px;border-right: 1px solid white;">
                    <span class="outImg">
                        <img class="backImg" @mouseover="imgOver" @mouseout="imgOut"
                            :src="img ? require('../../assets/image/back_gray.png') : require('../../assets/image/back_now.png')"
                            alt="">
                    </span>
                </div>
                <!-- 时间、日期显示 -->
                <div style="width: 30%;position: relative;">
                    <span class="date" style="
                    margin-right: 16px;
                    width: 100%;
                    height: 30px;
                    display: inline-block;
                    text-align: center;
                    line-height: 30px;
                    ">{{ getDate() }} {{ times }}</span>
                    <img style="width: 100%;position: absolute;top: 23px;left: 0px;"
                        src="../../assets/image/head_dotted.png" alt="">
                </div>
                <!-- 用户栏 -->
                <div class="userBox" style="background-color: rgba(50,59,91, 0.9);">
                    <div class="userSpan" @click="isUser">
                        <img style="
                        width: 14px;
                        height: 14px;
                        display: block; 
                        background-color: #BAC0E1;
                        border-radius: 50%;
                        padding: 6px;
                        " src="../../assets/icon/user_gray.png" alt="">
                        <span style="color: white;display: block;margin: 5px;">{{ username }}</span>
                        <img :src="isSrc" class="jsDown" alt="">
                    </div>
                    <!-- 个人信息 -->
                    <div v-if="isTime" class="messageBox">
                        <!-- 头像及登陆信息 -->
                        <div style="
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            height: 80px;
                            border-bottom: 1px solid gray;
                            ">
                            <div>
                                <img style="width: 40px;height: 40px;margin: 0 10px;" src="../../assets/icon/Avatar.png"
                                    alt="">
                            </div>
                            <div>
                                <p style="font-weight: bolder;font-size: 16px;">{{ username }}</p>
                                <p>登陆时间:{{ currentTime }}</p>
                            </div>
                        </div>
                        <div class="logOut" @click="logOut">
                            <div style="text-align: center;line-height: 10px;">
                                <img style="width: 20px;height: 20px;display: inline-block;"
                                    src="../../assets/icon/SignOut.png" alt="">
                            </div>
                            <div>
                                <span>注销</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 最小化，关闭 -->
                <div>
                    <!-- <span class="moreSet" @click="miniSize">-</span>
                    <span class="moreSet" @click="closeSize">x</span> -->
                    <img :src="mini ? require('../../assets/image/mini_gray.png') : require('../../assets/image/window_min.png')"
                        @click="miniSize" @mouseover="miniOver" @mouseout="miniOut" style="margin: 0 10px;" alt="">
                    <img :src="close ? require('../../assets/image/close_red.png') : require('../../assets/image/window_close.png')"
                        @click="closeSize" @mouseover="closeOver" @mouseout="closeOut" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
export default {
    setup() {
        let times = ref('')//时间显示
        let router = useRouter()
        let mini = ref(false)
        let close = ref(false)
        let img = ref(false)
        let userInfo = ref({})//用户信息
        let username = ref('')//用户名
        let isTime = ref(false)//用户详情
        let isSrc = ref(require('../../assets/icon/userdown.png'))
        const currentTime = ref(getCurrentTime());
        // 初始化组件
        function reload() {
            userInfo.value = JSON.parse(sessionStorage.getItem("userInfo"))
            username.value = userInfo.value.userinfo.name
        }
        // 获取日期
        function getDate() {
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，并补零
            const day = currentDate.getDate().toString().padStart(2, '0'); // 补零
            const formattedDate = `${year}.${month}.${day}`;
            return formattedDate
        }
        // 获取时间
        function getTime() {
            let currentDate = new Date();
            let hours = currentDate.getHours().toString().padStart(2, '0');
            let minutes = currentDate.getMinutes().toString().padStart(2, '0');
            let seconds = currentDate.getSeconds().toString().padStart(2, '0');
            let formattedTime = `${hours}:${minutes}:${seconds}`;
            times.value = formattedTime
        }
        function getCurrentTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const day = now.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        function isUser() {
           if(isTime.value){
            isTime.value = false//显示用户信息盒子
            isSrc.value = require('../../assets/icon/userdown.png')
           }else{
            isTime.value = true
            isSrc.value = require('../../assets/icon/userup.png')
           }
        }
        // 最小化窗口
        function miniSize() {
            windowEx.Min()
        }
        // 关闭窗口
        function closeSize() {
            if (typeof (windowEx) === 'undefined') {
                //返回登录页面
                router.push('/login')
                return
            }
            windowEx.Close()
        }
        function miniOver() {//鼠标移入
            mini.value = true
        }
        function miniOut() {//鼠标移出
            mini.value = false
        }
        function closeOver() {
            close.value = true
        }
        function closeOut() {
            close.value = false
        }
        function imgOver() {
            img.value = true
        }
        function imgOut() {
            img.value = false
        }
        // 退出登录
        function logOut() {
            if (typeof windowEx != "undefined") {
                windowEx.Size(384, 426)
            }
            localStorage.removeItem("loginStatus")
            router.push("/login")
        }
        onMounted(() => {
            getTime()//不可注释，首次获取时间
            setInterval(() => {
                getTime()
            }, 1000)//一秒给times赋值，使其实时显示
            reload()
        })
        return {
            getDate,//获取日期
            getTime,//获取时间
            times,//动态显示时间
            miniSize,//最小化窗口
            closeSize,//关闭窗口
            logOut,//登出
            mini,
            miniOut,
            miniOver,
            close,
            closeOut,
            closeOver,
            img,
            imgOver,
            imgOut,
            reload,//初始化组件
            userInfo,//用户信息
            username,//用户名
            getCurrentTime,
            currentTime,
            isTime,//用户详情
            isUser,//显示用户信息盒子
            isSrc,
        }
    }
}
</script>

<style scoped>
@import url('https://fonts.font.im/css?family=Hanalei+Fill');

p {
    margin: 0;
    padding: 0;
}

.bigBox {
    width: 97vw;
    height: 55px;
    /* border: 1px solid red; */
    margin: 0 auto;
    margin-left: -10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.monyBox {
    width: 12%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.folders {
    font-size: 26px;
    color: #BAC0E1;
}

.headSpan {
    background: linear-gradient(0deg, #BAC0E1 50%, #EDF2FF 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 26px;
    font-family: 'Hanalei Fill', cursive;
}

.setBox {
    width: 27%;
    height: 50px;
    /* border: 1px solid white; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.outImg {
    display: block;
    width: 30px;
    height: 30px;
    /* background: linear-gradient(to bottom, #BAC0E1, #EDF2FF); */
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
}

.backImg {
    width: 30px;
    height: 30px;
    z-index: 2;
}

.date {
    background: linear-gradient(0deg, #BAC0E1 50%, #EDF2FF 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 14px;
    /* border-bottom: 1px dotted white; */
    border-right: 1px solid white;
    padding-right: 16px;
}

.userSpan {
    width: 100%;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-dropdown-link {
    background: linear-gradient(0deg, #BAC0E1 50%, #EDF2FF 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 14px;
    text-align: center;
    line-height: 25px;
    margin: 0 10px;
}

.moreSet {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: linear-gradient(to bottom, #BAC0E1, #EDF2FF);
    /* border-radius: 50%; */
    text-align: center;
    line-height: 24px;
    font-size: 26px;
    cursor: pointer;
    margin-right: 5px;
}

.moreSet:nth-child(1):hover {
    /* border: 1px black solid; */
    color: #BAC0E1;
}

.moreSet:nth-child(2):hover {
    background: rgb(197, 66, 66);
    color: red;
}

.logOut {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    margin: 0 10px;
}

.userBox {
    width: 35%;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.jsDown {
    display: block;
    width: 12px;
    height: 12px;
}

.messageBox {
    width: 240px;
    height: calc(100vh - 800px);
    background-color: white;
    border-radius: 8px;
    z-index: 20;
    position: relative;
    box-shadow: 0px 2px 7px 0px rgba(138, 157, 205, 0.4);
    margin: 20px 0;
}
</style>