首页 - 轮播数据在鼠标悬浮时暂停动画效果

ruoyi-ui/src/views/dashboard/BrithChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="text-container" :style="{height:height,width:width}">
-      <ul class="allBirth">
+      <ul class="allBirth" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
         <li v-for="(item,index) in politicalBirthdayList" class="info">
           <svg-icon icon-class="dangao" class="dangao"></svg-icon>
           <span style="padding-left: 20px">{{item.partyEntryTime}}</span>
@@ -41,6 +41,14 @@
       this.listPoliticalBirthday();
     },
     methods: {
+      handleMouseOver() {
+        let elem = document.querySelector('.allBirth');
+        elem.style['animation-play-state'] = 'paused';
+      },
+      handleMouseLeave() {
+        let elem = document.querySelector('.allBirth');
+        elem.style['animation-play-state'] = 'running';
+      },
       /** 查询政治生日列表 */
       listPoliticalBirthday() {
         listPoliticalBirthday(this.queryParams).then(response => {

ruoyi-ui/src/views/dashboard/DemeanorChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="text-container" :style="{height:height,width:width}">
-      <ul class="allDemeanor">
+      <ul class="allDemeanor" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
         <li v-for="(item,index) in demeanorList" class="info">
           <span style="padding-left: 20px; display: inline-block; width: 20%;">{{parseTime(item.date, '{yyyy}-{mm}-{dd}')}}</span>
           <span style="padding-left: 20px; display: inline-block; width: 80%;" id="demeanor-title" @click="handleSee(item.url)">{{item.title}}</span>
@@ -40,6 +40,14 @@
       this.listDemeanorNoPage();
     },
     methods: {
+      handleMouseOver() {
+        let elem = document.querySelector('.allDemeanor');
+        elem.style['animation-play-state'] = 'paused';
+      },
+      handleMouseLeave() {
+        let elem = document.querySelector('.allDemeanor');
+        elem.style['animation-play-state'] = 'running';
+      },
       handleSee(url) {
         window.open(process.env.VUE_APP_BASE_API + url);
       },

ruoyi-ui/src/views/dashboard/ManageChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="text-container" :style="{height:height,width:width}">
-      <ul class="allManage">
+      <ul class="allManage" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
         <li v-for="(item,index) in manageList" class="info">
           <!--<span style="padding-left: 20px">{{parseTime(item.createdate, '{yyyy}-{mm}-{dd}')}}</span>-->
           <span id="manage-title" @click="handleSee(item.url)">{{item.name}}</span>
@@ -40,6 +40,14 @@
       this.listManage();
     },
     methods: {
+      handleMouseOver() {
+        let elem = document.querySelector('.allManage');
+        elem.style['animation-play-state'] = 'paused';
+      },
+      handleMouseLeave() {
+        let elem = document.querySelector('.allManage');
+        elem.style['animation-play-state'] = 'running';
+      },
       handleSee(url) {
         window.open(process.env.VUE_APP_BASE_API + url);
       },

ruoyi-ui/src/views/dashboard/NoticeChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="text-container" :style="{height:height,width:width}">
-      <ul class="allNotice">
+      <ul class="allNotice" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
         <li v-for="(item,index) in noticeList" class="info">
           <span style="padding-left: 20px; display: inline-block; width: 20%">{{parseTime(item.releaseTime, '{yyyy}-{mm}-{dd}')}}</span>
           <span style="padding-left: 20px; display: inline-block; width: 80%">{{item.noticeTitle}}</span>
@@ -40,6 +40,14 @@
       this.listNoticeNoPage();
     },
     methods: {
+      handleMouseOver() {
+        let elem = document.querySelector('.allNotice');
+        elem.style['animation-play-state'] = 'paused';
+      },
+      handleMouseLeave() {
+        let elem = document.querySelector('.allNotice');
+        elem.style['animation-play-state'] = 'running';
+      },
       /** 查询公示公告列表 */
       listNoticeNoPage() {
         this.queryParams.isPinned = 1;

ruoyi-ui/src/views/dashboard/TemplateChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="text-container" :style="{height:height,width:width}">
-      <ul class="allTemplate">
+      <ul class="allTemplate" @mouseover="handleMouseOver" @mouseleave="handleMouseLeave">
         <li v-for="(item,index) in templateList" class="info">
           <span id="template-title" @click="handleSee(item.url)">{{item.name}}</span>
         </li>
@@ -39,6 +39,14 @@
       this.listTemplateNoPage();
     },
     methods: {
+      handleMouseOver() {
+        let elem = document.querySelector('.allTemplate');
+        elem.style['animation-play-state'] = 'paused';
+      },
+      handleMouseLeave() {
+        let elem = document.querySelector('.allTemplate');
+        elem.style['animation-play-state'] = 'running';
+      },
       handleSee(url) {
         window.open(process.env.VUE_APP_BASE_API + url);
       },