From 04c2eb1db65b16f8d1b5c6a3b1eda6bb843f2bc3 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期六, 31 七月 2021 13:23:43 +0800
Subject: [PATCH] 头部效果修改
---
src/components/PageHeader.vue | 33 +++++++++++++++++++++++++++------
1 files changed, 27 insertions(+), 6 deletions(-)
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index f3bfc6c..b5618d1 100644
--- a/src/components/PageHeader.vue
+++ b/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% {
--
Gitblit v1.9.1