|
|
@@ -13,7 +13,7 @@
|
|
|
</span>
|
|
|
</li>
|
|
|
<!-- 复制一份列表实现无缝滚动 -->
|
|
|
- <li v-for="(item,index) in noticeList" :key="'copy-' + index" class="notice-item">
|
|
|
+ <li v-for="(item,index) in noticeList" :key="'copy-' + index" class="notice-item" v-if="noticeList.length>10">
|
|
|
<span>截止日期:{{ parseTime(item.deadline, '{yyyy}-{mm}-{dd}') }}
|
|
|
<el-tag size="medium" effect="plain">{{ item.planName }}</el-tag>
|
|
|
</span>
|
|
|
@@ -47,7 +47,7 @@ export default {
|
|
|
return {
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
- planQuarter: new Date().getMonth() + 1, planYear: new Date().getFullYear()
|
|
|
+ planMonth: new Date().getMonth() + 1, planYear: new Date().getFullYear()
|
|
|
},
|
|
|
// 公示公告列表
|
|
|
noticeList: [],
|
|
|
@@ -79,25 +79,25 @@ export default {
|
|
|
listNoticeNoPage() {
|
|
|
listPlan(this.queryParams).then(response => {
|
|
|
this.noticeList = response.rows || [];
|
|
|
-
|
|
|
+
|
|
|
// 判断是否需要滚动
|
|
|
- if (this.noticeList.length > 0) {
|
|
|
+ if (this.noticeList.length > 10) {
|
|
|
this.$nextTick(() => {
|
|
|
// 清理之前的 style
|
|
|
if (this.styleElement && this.styleElement.parentNode) {
|
|
|
this.styleElement.parentNode.removeChild(this.styleElement);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
let elem = document.querySelector('.allNotice');
|
|
|
if (!elem) return;
|
|
|
-
|
|
|
+
|
|
|
// 每个 li 的高度约为 50px(包括margin)
|
|
|
const itemHeight = 50;
|
|
|
const listHeight = this.noticeList.length * itemHeight;
|
|
|
-
|
|
|
+
|
|
|
// 设置滚动时间(可根据列表长度调整)
|
|
|
const scrollTime = this.noticeList.length * 2;
|
|
|
-
|
|
|
+
|
|
|
// 创建无缝滚动的 keyframes
|
|
|
// 从 0 滚动到 -listHeight,然后重新开始
|
|
|
const keyframeName = 'seamlessScroll-' + Date.now();
|
|
|
@@ -109,13 +109,13 @@ export default {
|
|
|
transform: translateY(-${listHeight}px);
|
|
|
}
|
|
|
}`;
|
|
|
-
|
|
|
+
|
|
|
// 动态插入 keyframes
|
|
|
this.styleElement = document.createElement("style");
|
|
|
this.styleElement.setAttribute("type", "text/css");
|
|
|
this.styleElement.textContent = myFirstkeyframes;
|
|
|
document.head.appendChild(this.styleElement);
|
|
|
-
|
|
|
+
|
|
|
// 应用动画
|
|
|
elem.style['animation'] = `${keyframeName} ${scrollTime}s linear infinite`;
|
|
|
});
|