首页拓扑图修改

whyczyk

2021-07-26 b72618fe9cfc46e7de0e38f51ba2440b86f08794

 src/components/PageHeader.vue

@@ -1,6 +1,10 @@
<template>
    <div class="pageHeader">
        <div class="headTitle">FMDS | 电机试验集中测控平台</div>
        <div class="headInfoCon">
            <div class="info">网络状态:正常</div>
            <div class="scrollCon"><span v-html="notice"></span></div>
        </div>
        <div class="headToolsCon">
            <div class="avatar">
                <span class="avatar-icon">
@@ -43,6 +47,7 @@
                pwd: {
                    show: false,
                },
                notice: '直流主配电柜A排电压过高报警'
            }
        },
        methods: {
@@ -88,7 +93,18 @@
    }

    .headToolsCon {
        width: 100%;
        height: 40px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        padding-right: 40px;
    }

    .headInfoCon {
        height: 40px;
        position: absolute;
        left: 0;
@@ -96,8 +112,45 @@
        z-index: 2;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        padding-right: 40px;
        ;
        padding-left: 40px;
    }

    .headInfoCon .info {
        font-size: 16px;
        display: flex;
        align-items: center;
        border-right: 1px solid #ffffff;
        padding-right: 8px;
        margin-right: 8px;
    }

    .headInfoCon .scrollCon {
        font-size: 16px;
        width: 290px;
        overflow: hidden;
    }

    .headInfoCon .scrollCon>span {
        display: block;
        margin-left: 100%;
        width: 290px;
        animation: myMove 8s linear infinite;
        animation-fill-mode: forwards;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*文字无缝滚动*/
    @keyframes myMove {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-580px);
        }
    }

    .avatar {