|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="text-container" :style="{height:height,width:width}">
|
|
|
- <div class="inner-container">
|
|
|
+ <div class="text-center" :style="{height:height,width:width}">
|
|
|
+ <div class="inner-center">
|
|
|
<p class="text"
|
|
|
v-for="(text, index) in arr"
|
|
|
:key="index"
|
|
@@ -15,12 +15,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {devApproveData} from "@/api/sems/home";
|
|
|
import {listUnNotice} from "@/api/system/notice";
|
|
|
const totalDuration = 2000;
|
|
|
|
|
|
export default {
|
|
|
- name: "WarnChart",
|
|
|
+ name: "centerChart",
|
|
|
props: {
|
|
|
width: {
|
|
|
type: String,
|
|
@@ -28,7 +27,7 @@ import {listUnNotice} from "@/api/system/notice";
|
|
|
},
|
|
|
height: {
|
|
|
type: String,
|
|
|
- default: '160px'
|
|
|
+ default: '150px'
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
@@ -65,7 +64,7 @@ import {listUnNotice} from "@/api/system/notice";
|
|
|
this.arr.push(response[i].noticeTitle)
|
|
|
}
|
|
|
//设置文字滚动一轮时间
|
|
|
- let elem = document.querySelector('.inner-container');
|
|
|
+ let elem = document.querySelector('.inner-center');
|
|
|
let state = elem.style['animation'];
|
|
|
let time = this.arr.length * 1.5 + 5
|
|
|
elem.style['animation'] = 'myMove ' + time + 's linear infinite';
|
|
@@ -82,13 +81,13 @@ import {listUnNotice} from "@/api/system/notice";
|
|
|
},
|
|
|
// 鼠标移入
|
|
|
changeActive() {
|
|
|
- let elem = document.querySelector('.inner-container');
|
|
|
+ let elem = document.querySelector('.inner-center');
|
|
|
let state = elem.style['animationPlayState'];
|
|
|
elem.style['animationPlayState'] = 'paused';
|
|
|
},
|
|
|
// 鼠标移出
|
|
|
removeActive() {
|
|
|
- let elem = document.querySelector('.inner-container');
|
|
|
+ let elem = document.querySelector('.inner-center');
|
|
|
let state = elem.style['animationPlayState'];
|
|
|
elem.style['animationPlayState'] = 'running';
|
|
|
},
|
|
@@ -151,7 +150,7 @@ import {listUnNotice} from "@/api/system/notice";
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .text-container {
|
|
|
+ .text-center {
|
|
|
line-height: 30px;
|
|
|
/*border: 1px solid cornflowerblue;*/
|
|
|
overflow: hidden;
|
|
@@ -164,7 +163,7 @@ import {listUnNotice} from "@/api/system/notice";
|
|
|
p:hover {
|
|
|
background-color: #296b9bb5;
|
|
|
}
|
|
|
- .inner-container {
|
|
|
+ .inner-center {
|
|
|
/*animation: myMove 10s linear infinite;*/
|
|
|
animation-fill-mode: forwards;
|
|
|
}
|
|
@@ -183,34 +182,34 @@ import {listUnNotice} from "@/api/system/notice";
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
10% {
|
|
|
- transform: translateY(-30px);
|
|
|
+ transform: translateY(-20px);
|
|
|
}
|
|
|
20% {
|
|
|
- transform: translateY(-30px);
|
|
|
+ transform: translateY(-20px);
|
|
|
}
|
|
|
30% {
|
|
|
- transform: translateY(-60px);
|
|
|
+ transform: translateY(-40px);
|
|
|
}
|
|
|
40% {
|
|
|
- transform: translateY(-60px);
|
|
|
+ transform: translateY(-40px);
|
|
|
}
|
|
|
50% {
|
|
|
- transform: translateY(-90px);
|
|
|
+ transform: translateY(-60px);
|
|
|
}
|
|
|
60% {
|
|
|
- transform: translateY(-90px);
|
|
|
+ transform: translateY(-60px);
|
|
|
}
|
|
|
70% {
|
|
|
- transform: translateY(-120px);
|
|
|
+ transform: translateY(-80px);
|
|
|
}
|
|
|
80% {
|
|
|
- transform: translateY(-120px);
|
|
|
+ transform: translateY(-80px);
|
|
|
}
|
|
|
90% {
|
|
|
- transform: translateY(-150px);
|
|
|
+ transform: translateY(-100px);
|
|
|
}
|
|
|
100% {
|
|
|
- transform: translateY(-150px);
|
|
|
+ transform: translateY(-100px);
|
|
|
}
|
|
|
}
|
|
|
|