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>
            </div>
            <!-- 右侧功能 -->
            <div class="setBox">
                <!-- 返回图标 -->
                <div style="padding-right: 10px;border-right: 1px solid white;">
                    <span class="outImg">
                        <img class="backImg" src="../../assets/icon/back_to.png" alt="">
                    </span>
                </div>
                <!-- 时间、日期显示 -->
                <div>
                    <span class="date" style="margin-right: 10px;">{{ getDate() }}</span>
                    <span class="date">{{ times }}</span>
                </div>
                <!-- 用户栏 -->
                <div class="userBox">
                    <span class="userSpan">
                        <img style="width: 12px;height: 12px;" src="../../assets/icon/user_gray.png" alt="">
                    </span>
                    <el-dropdown trigger="click">
                        <span class="el-dropdown-link">
                            Admin<el-icon class="el-icon--right" style="color: #BAC0E1;"><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>
                                    <!-- 个人信息 -->
                                    <div>
                                        <!-- 头像及登陆信息 -->
                                        <div
                                            style="display: flex;justify-content: space-around;align-items: center;height: 80px;border-bottom: 1px solid gray;">
                                            <div>
                                                <img style="width: 40px;height: 40px;" src="../../assets/icon/Avatar.png"
                                                    alt="">
                                            </div>
                                            <div>
                                                <p>Admin</p>
                                                <p>登陆时间:2000-01-01</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>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <!-- 最小化，关闭 -->
                <div>
                    <span class="moreSet" @click="miniSize">-</span>
                    <span class="moreSet" @click="closeSize">x</span>
                </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()
        // 获取日期
        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 miniSize() {
            windowEx.Min()
        }
        // 关闭窗口
        function closeSize() {
            windowEx.Close()
        }
        // 退出登录
        function logOut(){
            // windowEx.Size(384,426)
            localStorage.removeItem("loginStatus")
            router.push("/login")
        }
        onMounted(() => {
            getTime()//不可注释，首次获取时间
            setInterval(() => {
                getTime()
            }, 1000)//一秒给times赋值，使其实时显示
        })
        return {
            getDate,//获取日期
            getTime,//获取时间
            times,//动态显示时间
            miniSize,//最小化窗口
            closeSize,//关闭窗口
            logOut,//登出
        }
    }
}
</script>

<style scoped>
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: 230px;
    height: 50px;
    line-height: 50px;

}

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

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

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

.backImg {
    width: 14px;
    height: 14px;
    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;
}

.userSpan {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #BAC0E1;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
}

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

.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;
}</style>