rcmdp/src/views/screen/child/concept.vue

<template>
	<div class="concept">
		<div class="conceptList" ref="conceptList" :style="{marginTop:conceptMarginTop+'px'}"  @mouseover="mousemove" @mouseleave="mouseout">
			<div class="item">
				<div class="data" v-for="d in data" :title="d.title">◆ {{d.title}}</div>
			</div>
			<div class="item">
				<div class="data" v-for="d in data" :title="d.title">◆ {{d.title}}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { rcpolicy } from '@/request/api.js'
	export default {
		data() {
			return {
				data: [],
				conceptMarginTop: 0,
				boxHeight: '',
				timeOut: '',
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			//初始化
			init() {
				// 初始化获取栏目高度
				this.getPolicy();
				this.displayData();
			},
			//人才政策
			getPolicy() {
				const category_id = 17
				rcpolicy(category_id).then( res => {
					this.data = res.data.list
					this.$nextTick(() => {
						this.getHeight()
					})
				})
			},
			//开始循环处理距离事件
			displayData() {
				this.timeOut = setInterval(() => {
					this.conceptMarginTop--
					if (this.conceptMarginTop+this.boxHeight <= 0) {
						this.conceptMarginTop = 0;
					}
				},30)
				if(this.move) {
					clearTimeout(time)
				}
			},
			// 初始化获取栏目高度
			getHeight() {
				this.boxHeight =( this.$refs.conceptList.clientHeight) / 2
			},
			stopTimel() {
				clearInterval(this.timeOut)
			},
			// 结束
			mousemove() {
				this.stopTimel()
			},
			//开始
			mouseout() {
				this.displayData()
			},
		},
	}
</script>

<style lang="scss" scoped>
	$height: 15px;
	.concept {
		overflow: hidden;
		font-size: 13px;
		height: $height*14+25px;
		.data {
			margin: 5px;
			min-height: $height;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}
	
</style>