头部效果修改

whyczyk

2021-07-31 04c2eb1db65b16f8d1b5c6a3b1eda6bb843f2bc3

 src/components/PageHeader.vue

@@ -2,8 +2,15 @@
    <div class="pageHeader">
        <div class="headTitle">FMDS | 电机试验集中测控平台</div>
        <div class="headInfoCon">
            <div class="info">网络状态:正常</div>
            <div class="scrollCon"><span class="active" v-html="notice"></span></div>
            <div class="info">网络状态:正常<div class="tai"
                    style="background:#82e866;width:12px;height:12px;border-radius:50%;margin-left:4px;">
                </div>
            </div>
            <div class="scrollCon">
                <div :class="{'active':isaralm}" :style="{'marginLeft':nomargin?'0':'100%'}"><i
                        class="el-icon-message-solid"></i><span v-html="notice" v-if="isaralm"></span>
                </div>
            </div>
        </div>
        <div class="headToolsCon">
            <div class="avatar">
@@ -47,8 +54,16 @@
                pwd: {
                    show: false,
                },
                notice: '直流主配电柜A排电压过高报警'
                notice: '直流主配电柜A排电压过高报警',
                isaralm: true,
                nomargin: false
            }
        },
        mounted() {
            setTimeout(() => {
                this.isaralm = false;
                this.nomargin = true;
            }, 8000)
        },
        methods: {
            logout() {
@@ -129,22 +144,28 @@
        font-size: 16px;
        width: 290px;
        overflow: hidden;
        color: #f78989;
    }

    .headInfoCon .scrollCon>span {
        display: block;
    .headInfoCon .scrollCon>div {
        margin-left: 100%;
        width: 290px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    .headInfoCon .scrollCon>span.active {
    .headInfoCon .scrollCon>div.active {
        animation: myMove 6s linear 1;
        animation-fill-mode: forwards;
    }

    .headInfoCon .scrollCon>div i {
        font-size: 20px;
    }

    /*文字无缝滚动*/
    @keyframes myMove {
        0% {