看板通知内容超出后水平滚动

src/views/modules/home/admin.vue

@@ -29,8 +29,8 @@
       </el-col>
       <el-col :span="12" class="bg1-2">
         <el-row :span="24" class="bg1-2-1">
-          <div class="box-notice-title" @dblclick="doubleClick">
-            <div class="notice-title">{{ noticeContent }}</div>
+          <div ref="boxnoticetitle" class="box-notice-title" @dblclick="doubleClick">
+            <div ref="noticetitle" :class="isTran ? 'notice-title notice-title-animation' : 'notice-title'">{{ noticeContent }}</div>
           </div>
         </el-row>
         <el-row :span="24" class="bg1-2-2">
@@ -376,7 +376,8 @@ export default {
       noticeForm: {
         content: ''
       },
-      noticeContent: ''
+      noticeContent: '',
+      isTran: false
     }
   },
   created () {
@@ -423,6 +424,8 @@ export default {
     this.produceCensusTimer = setInterval(this.getProduceCensus, 1000 * 60 * 5) // 5分钟刷新
 
     this.getNoticeContent()
+
+    this.setTitleScroll()
   },
   mounted () {
     this.contractProdTableScroll()
@@ -443,6 +446,16 @@ export default {
     clearInterval(this.produceCensusTimer)
   },
   methods: {
+    setTitleScroll () {
+      this.$nextTick(() => {
+        let boxWidth = this.$refs.boxnoticetitle.offsetWidth;
+        let contentWidth = this.$refs.noticetitle.offsetWidth;
+        if(contentWidth > boxWidth + 20){
+          //设置水平滚动效果
+          this.isTran = true;
+        }
+      })
+    },
     getNoticeContent () {
       let content = sessionStorage.getItem('noticeContent')
       if (content == null || content === '') {
@@ -458,6 +471,7 @@ export default {
       this.noticeContent = this.noticeForm.content
       this.dialogFormVisible = false
       sessionStorage.setItem('noticeContent', this.noticeContent)
+      this.setTitleScroll()
     },
     // 合同统计
     getAnalytics () {
@@ -798,6 +812,9 @@ body,
   background-color: #2fb5f2;
   display: flex;
   height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
 }
 
 .notice-title {
@@ -806,6 +823,33 @@ body,
   margin: 0 auto;
   align-items: center;
   display: flex;
+  white-space: nowrap;
+}
+
+.notice-title-animation {
+  animation: wordsLoop 25s linear infinite normal; 
+}
+
+@keyframes wordsLoop{
+  0%{
+    transform: translateX(100%);
+    -webkit-transform: translateX(100%);
+  }
+  100%{
+    transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+  }
+}
+
+@-webkit-keyframes wordsLoop{
+  0%{
+    transform: translateX(100%);
+    -webkit-transform: translateX(100%);
+  }
+  100%{
+    transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+  }
 }
 
 .box-stat-number {

src/views/modules/home/customer.vue

@@ -31,8 +31,8 @@
           </el-col>
           <el-col :span="18" class="bg1-2">
             <el-row :span="24" class="bg1-2-1">
-              <div class="box-notice-title" @dblclick="doubleClick">
-                <div class="notice-title">{{ noticeContent }}</div>
+              <div ref="boxnoticetitle"  class="box-notice-title" @dblclick="doubleClick">
+                <div ref="noticetitle" :class="isTran ? 'notice-title notice-title-animation' : 'notice-title'">{{ noticeContent }}</div>
               </div>
             </el-row>
             <!-- <el-row :span="24" class="bg1-2-2">
@@ -310,7 +310,8 @@ export default {
       noticeForm: {
         content: ''
       },
-      noticeContent: ''
+      noticeContent: '',
+      isTran: false
     }
   },
   created () {
@@ -345,6 +346,8 @@ export default {
     this.produceCensusTimer = setInterval(this.getProduceCensus, 1000 * 60 * 5) // 5分钟刷新
 
     this.getNoticeContent()
+
+    this.setTitleScroll()
   },
   mounted () {
     this.contractProdTableScroll()
@@ -365,6 +368,16 @@ export default {
     clearInterval(this.produceCensusTimer)
   },
   methods: {
+    setTitleScroll () {
+      this.$nextTick(() => {
+        let boxWidth = this.$refs.boxnoticetitle.offsetWidth;
+        let contentWidth = this.$refs.noticetitle.offsetWidth;
+        if(contentWidth > boxWidth + 20){
+          //设置水平滚动效果
+          this.isTran = true;
+        }
+      })
+    },
     getNoticeContent () {
       let content = sessionStorage.getItem('customer-noticeContent')
       if (content == null || content === '') {
@@ -380,6 +393,7 @@ export default {
       this.noticeContent = this.noticeForm.content
       this.dialogFormVisible = false
       sessionStorage.setItem('customer-noticeContent', this.noticeContent)
+      this.setTitleScroll()
     },
     // 合同统计
     getAnalytics () {
@@ -724,6 +738,9 @@ body,
   background-color: #2fb5f2;
   display: flex;
   height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
 }
 
 .notice-title {
@@ -732,6 +749,33 @@ body,
   margin: 0 auto;
   align-items: center;
   display: flex;
+  white-space: nowrap;
+}
+
+.notice-title-animation {
+  animation: wordsLoop 25s linear infinite normal; 
+}
+
+@keyframes wordsLoop{
+  0%{
+    transform: translateX(100%);
+    -webkit-transform: translateX(100%);
+  }
+  100%{
+    transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+  }
+}
+
+@-webkit-keyframes wordsLoop{
+  0%{
+    transform: translateX(100%);
+    -webkit-transform: translateX(100%);
+  }
+  100%{
+    transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+  }
 }
 
 .box-stat-number {