首页轮播图功能添加

whyczyk

2021-07-27 25831490433a3778f5b87b31a1baba32c8429a0e

 src/components/PageHeader.vue

@@ -3,7 +3,7 @@
        <div class="headTitle">FMDS | 电机试验集中测控平台</div>
        <div class="headInfoCon">
            <div class="info">网络状态:正常</div>
            <div class="scrollCon"><span v-html="notice"></span></div>
            <div class="scrollCon"><span class="active" v-html="notice"></span></div>
        </div>
        <div class="headToolsCon">
            <div class="avatar">
@@ -135,11 +135,14 @@
        display: block;
        margin-left: 100%;
        width: 290px;
        animation: myMove 8s linear infinite;
        animation-fill-mode: forwards;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

    /*文字无缝滚动*/
@@ -149,7 +152,7 @@
        }

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