表格样式就先不说了哈,这些简单内容,如果粉丝朋友还有什么问题,可以私信
好啦,首先,第一步
1.在目录的这个地方创建文件夹css,里面放两个文件
.
第一个文件里面内容
第二个文件里面内容
.drawCur{
cursor: url(../img/map/draw_2.png),auto;
}
.cesium-credit-logoContainer{
display: none!important;
}
.vl-notify.vl-notify-alert h2.vl-notice-title .lv-icon-maxmini i {
cursor: pointer;
width: 16px;
height: 16px;
margin-left: 20px;
line-height: 30px;
display: inline-block;
vertical-align: middle;
position: relative;
color: white;
}
.vl-notify.vl-notify-alert h2.vl-notice-title .lv-icon-maxmini i.vlicon-max {
display:none;
}
.vl-notify.vl-notify-alert h2.vl-notice-title .lv-icon-maxmini i.vlicon-huanyuan {
background: url(/img/icon.551539f8.png) no-repeat;
background-position: -65px -40px;
color: white;
}
2...准备好之后去mainjs里面注册
import "@/assets/css/animation.css"
3.最后去组件中使用(这里方便操作,表格我们就不使用组件了,更方便一些)
<div class='table-container' @mouseover='stopScroll' @mouseout='startScroll'>
<div class='table-header-wrapper'>
<table>
<thead>
<tr>
<th>编号</th>
<th>高级功能</th>
<th>时间</th>
<th>原因</th>
</tr>
</thead>
</table>
</div>
<div class='table-body-wrapper'>
<table>
<tbody ref='tbodyRef'>
<tr
v-for='(item, index) in fullData'
:key='index'
:class="index % 2 === 0 ? 'even-row' : 'odd-row'"
>
<td>{{ item.id }}</td>
<td>{{ item.troubleTypeid }}</td>
<td>{{ item.airvalue }}</td>
<td>{{ item.because }}</td>
</tr>
</tbody>
</table>
</div>
</div>
script中,,这里数据写你们自己的内容哈,我的就不放了
data() {
return {
scrollOffset: 0,
rowHeight: 40, // 假设每行高度是40px
fullData: [],
data: [
{ id: '', troubleTypeid: '', airvalue: '', because: '' },
],
paginationData: {
current: 1,
pageSize: 3
}
}
},
mounted() {
this.fullData = [...this.data, ...this.data] // 将数据翻倍以实现无缝滚动
this.startScroll()
},
方法当中放两个函数
startScroll() {
console.log("进入 startScroll")
const tbody = this.$refs.tbodyRef
const rowHeight = this.rowHeight // 假设每行高度是40px
const totalHeight = rowHeight * this.fullData.length
console.log("进入 startScroll",totalHeight)
tbody.style.animation = `scroll ${totalHeight / 40}s linear infinite`
// 开始动画
tbody.style.animationPlayState = 'running'
},
stopScroll() {
const tbody = this.$refs.tbodyRef
tbody.style.animationPlayState = 'paused'
},
就可以实现啦,看我的文章,每一篇,绝对都是有收获的!!!!!!!!