3a556c59 by 任超

style:系统通知

1 parent 3c4455f3
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
7 <div style="margin-right:5px"></div> 7 <div style="margin-right:5px"></div>
8 <div ref="back" class="back"> 8 <div ref="back" class="back">
9 <div ref="text" class="text" @mouseover="mouseOver" @mouseleave="mouseLeave"> 9 <div ref="text" class="text" @mouseover="mouseOver" @mouseleave="mouseLeave">
10 <p v-for="(item, index) in noticeList" :key="index"> 10 <p v-for="(item, index) in noticeList" :key="index" @click="handleNotice(item)">
11 {{ item.title }} 11 {{ item.noticeTitle }}
12 </p> 12 </p>
13 </div> 13 </div>
14 </div> 14 </div>
...@@ -34,7 +34,22 @@ export default { ...@@ -34,7 +34,22 @@ export default {
34 secondAnimationTime: '', // 状态二动画效果 34 secondAnimationTime: '', // 状态二动画效果
35 }; 35 };
36 }, 36 },
37 watch: {
38 noticeList: {
39 handler (newName, oldName) {
40 let that = this
41 this.Listener();
42 setTimeout(res => {
43 that.getData();
44 }, 100);
45 },
46 deep: true
47 }
48 },
37 methods: { 49 methods: {
50 handleNotice (item) {
51 this.$alertMes(item.noticeTitle, item.noticeContent)
52 },
38 // 获取数据 53 // 获取数据
39 getData () { 54 getData () {
40 let style = document.styleSheets[0]; 55 let style = document.styleSheets[0];
...@@ -53,7 +68,7 @@ export default { ...@@ -53,7 +68,7 @@ export default {
53 ); 68 );
54 setTimeout(res => { 69 setTimeout(res => {
55 this.changeState(); 70 this.changeState();
56 }, 1000); 71 }, 300);
57 }, 72 },
58 // 用速度计算时间(想要保持速度一样,2种状态时间不同需算出) 73 // 用速度计算时间(想要保持速度一样,2种状态时间不同需算出)
59 ComputationTime () { 74 ComputationTime () {
...@@ -89,12 +104,6 @@ export default { ...@@ -89,12 +104,6 @@ export default {
89 let text = this.$refs.text; 104 let text = this.$refs.text;
90 text.style.animationPlayState = '' 105 text.style.animationPlayState = ''
91 } 106 }
92 },
93 mounted () {
94 this.Listener();
95 setTimeout(res => {
96 this.getData();
97 }, 100);
98 } 107 }
99 }; 108 };
100 </script> 109 </script>
......
...@@ -21,8 +21,11 @@ ...@@ -21,8 +21,11 @@
21 </div> 21 </div>
22 </template> 22 </template>
23 <script> 23 <script>
24 import NoticeBar from '@/components/NoticeBar/index'
25 import { mapGetters } from 'vuex' 24 import { mapGetters } from 'vuex'
25 import NoticeBar from '@/components/NoticeBar/index'
26 import {
27 getHomeNoticeList
28 } from "@/api/home.js"
26 export default { 29 export default {
27 components: { 30 components: {
28 NoticeBar 31 NoticeBar
...@@ -33,20 +36,20 @@ export default { ...@@ -33,20 +36,20 @@ export default {
33 data () { 36 data () {
34 return { 37 return {
35 logo: require('../../image/logo.png'), 38 logo: require('../../image/logo.png'),
36 noticeList: [ 39 noticeList: []
37 {
38 title: '6666666666666666666'
39 },
40 {
41 title: '3333333333333333333'
42 },
43 {
44 title: '6666666666666666666'
45 }
46 ]
47 } 40 }
48 }, 41 },
42 created () {
43 this.queryNoticeList()
44 },
49 methods: { 45 methods: {
46 queryNoticeList () {
47 getHomeNoticeList().then(res => {
48 if (res.result) {
49 this.noticeList = res.result.noticeList
50 }
51 })
52 },
50 themeChange (val) { 53 themeChange (val) {
51 this.$store.dispatch('app/updateTheme', val) 54 this.$store.dispatch('app/updateTheme', val)
52 }, 55 },
......