|
@@ -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 {
|