5 changed files with 226 additions and 117 deletions
-
46src/assets/styles/index.scss
-
225src/views/notice/index.vue
-
28src/views/readStar/index-height.vue
-
28src/views/readStar/index.vue
-
16src/views/video/index.vue
@ -1,73 +1,152 @@ |
|||||
<template> |
|
||||
<!-- 通知公告 --> |
|
||||
<div class="screen-item notice"> |
|
||||
<div class="common-title">通知公告</div> |
|
||||
<div class="small-module module-content"> |
|
||||
<span class="notice-icon-gif" /> |
|
||||
<div class="seamless-warp"> |
|
||||
<div class="notice-txt" v-html="content" /> |
|
||||
</div> |
|
||||
<!-- <vue-seamless-scroll :data="noticeData" :class-option="defaultOption" class="seamless-warp"> |
|
||||
<p v-for="(item,index) in noticeData" :key="index"> {{ item.des }}</p> |
|
||||
</vue-seamless-scroll> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { FetchInitNotice } from '@/api/library' |
|
||||
export default { |
|
||||
name: 'Notice', |
|
||||
data() { |
|
||||
return { |
|
||||
noticeData: [], |
|
||||
content: '' |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
defaultOption() { |
|
||||
return { |
|
||||
step: 0.3, // 数值越大速度滚动越快 |
|
||||
limitMoveNum: 1, // 开始无缝滚动的数据量 |
|
||||
hoverStop: false, // 是否开启鼠标悬停stop |
|
||||
direction: 1, // 0向下 1向上 2向左 3向右 |
|
||||
openWatch: true // 开启数据实时监控刷新dom |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.getInitNotice() |
|
||||
}, |
|
||||
methods: { |
|
||||
// 处理方法 |
|
||||
escapeHtml(str) { |
|
||||
var arrEntities = { |
|
||||
'lt': '<', |
|
||||
'gt': '>', |
|
||||
'nbsp': ' ', |
|
||||
'amp': '&', |
|
||||
'quot': '"' |
|
||||
} |
|
||||
return str.replace(/&(lt|gt|nbsp|amp|quot|pre);/ig, function(all, t) { |
|
||||
return arrEntities[t] |
|
||||
}) |
|
||||
}, |
|
||||
getInitNotice() { |
|
||||
FetchInitNotice().then((res) => { |
|
||||
if (res.errCode === 0) { |
|
||||
this.content = this.escapeHtml(res.data) |
|
||||
} else { |
|
||||
this.$message.error('接口错误') |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
@import "~@/assets/styles/index.scss"; |
|
||||
|
|
||||
</style> |
|
||||
|
<template> |
||||
|
<!-- 通知公告 --> |
||||
|
<div class="screen-item notice"> |
||||
|
<div class="common-title">通知公告</div> |
||||
|
<div class="small-module module-content"> |
||||
|
<span class="notice-icon-gif" /> |
||||
|
|
||||
|
<!-- 核心：给容器加固定宽度，避免宽度溢出导致滚动失效 --> |
||||
|
<div ref="box" class="seamless-warp"> |
||||
|
<div ref="text" class="notice-txt" v-html="content" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { FetchInitNotice } from '@/api/library' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Notice', |
||||
|
data() { |
||||
|
return { |
||||
|
content: '', |
||||
|
scrollTimer: null, // 滚动定时器 |
||||
|
transitionTimer: null, // 过渡结束定时器 |
||||
|
boxH: 0, // 容器高度 |
||||
|
textH: 0, // 内容高度 |
||||
|
duration: 40000 // 单次滚动时长 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getInitNotice() |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
// 销毁时清除所有定时器 |
||||
|
if (this.scrollTimer) clearInterval(this.scrollTimer) |
||||
|
if (this.transitionTimer) clearTimeout(this.transitionTimer) |
||||
|
}, |
||||
|
methods: { |
||||
|
escapeHtml(str) { |
||||
|
if (!str) return '' |
||||
|
var arrEntities = { |
||||
|
'lt': '<', |
||||
|
'gt': '>', |
||||
|
'nbsp': ' ', |
||||
|
'amp': '&', |
||||
|
'quot': '"' |
||||
|
} |
||||
|
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, (all, t) => arrEntities[t]) |
||||
|
.replace(/<pre>|<\/pre>/gi, '') |
||||
|
.replace(/\\r\\n/g, '') // 移除多余换行符 |
||||
|
}, |
||||
|
getInitNotice() { |
||||
|
FetchInitNotice().then(res => { |
||||
|
if (res.errCode === 0) { |
||||
|
this.content = this.escapeHtml(res.data) |
||||
|
// 等DOM完全渲染后再启动滚动 |
||||
|
this.$nextTick(() => { |
||||
|
this.startScroll() |
||||
|
}) |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
console.log('接口请求失败：', err) |
||||
|
}) |
||||
|
}, |
||||
|
startScroll() { |
||||
|
const box = this.$refs.box |
||||
|
const text = this.$refs.text |
||||
|
|
||||
|
// 先打印调试，看是否获取到DOM和高度 |
||||
|
console.log('容器DOM：', box) |
||||
|
console.log('内容DOM：', text) |
||||
|
if (!box || !text) { |
||||
|
console.log('DOM未获取到，滚动启动失败') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 强制计算高度（解决rem布局高度计算延迟） |
||||
|
this.boxH = box.clientHeight || parseInt(getComputedStyle(box).height) |
||||
|
this.textH = text.offsetHeight || parseInt(getComputedStyle(text).height) |
||||
|
|
||||
|
console.log('容器高度：', this.boxH, '内容高度：', this.textH) |
||||
|
|
||||
|
// 内容不够高，不滚动 |
||||
|
if (this.textH <= this.boxH) { |
||||
|
console.log('内容高度小于容器，无需滚动') |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
// 初始化样式 |
||||
|
text.style.position = 'absolute' |
||||
|
text.style.top = '0px' |
||||
|
text.style.left = '0px' |
||||
|
text.style.width = '100%' |
||||
|
text.style.transition = 'none' |
||||
|
|
||||
|
// 监听过渡结束事件，实现循环 |
||||
|
text.addEventListener('transitionend', this.handleTransitionEnd) |
||||
|
|
||||
|
// 启动第一次滚动 |
||||
|
this.rollToBottom() |
||||
|
}, |
||||
|
// 滚动到底部 |
||||
|
rollToBottom() { |
||||
|
const text = this.$refs.text |
||||
|
// 重置过渡，立即回到顶部 |
||||
|
text.style.transition = 'none' |
||||
|
text.style.top = '0px' |
||||
|
|
||||
|
// 重新设置过渡，滚动到底部 |
||||
|
setTimeout(() => { |
||||
|
text.style.transition = `top ${this.duration}ms linear` |
||||
|
text.style.top = `-${this.textH - this.boxH}px` |
||||
|
}, 100) |
||||
|
}, |
||||
|
// 过渡结束处理函数 |
||||
|
handleTransitionEnd() { |
||||
|
// const text = this.$refs.text |
||||
|
// 清除之前的定时器，避免重复触发 |
||||
|
if (this.transitionTimer) clearTimeout(this.transitionTimer) |
||||
|
|
||||
|
// 停留2秒后重新滚动 |
||||
|
this.transitionTimer = setTimeout(() => { |
||||
|
this.rollToBottom() |
||||
|
}, 2000) // 2000毫秒 = 2秒 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@import "~@/assets/styles/index.scss"; |
||||
|
|
||||
|
.notice .module-content { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.notice .seamless-warp { |
||||
|
position: relative !important; |
||||
|
overflow: hidden !important; |
||||
|
height: 3.1rem !important; |
||||
|
} |
||||
|
|
||||
|
.notice-txt table { |
||||
|
width: 100% !important; |
||||
|
border-collapse: collapse !important; |
||||
|
} |
||||
|
|
||||
|
.notice-txt td { |
||||
|
word-break: break-all !important; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue