zhxy-desk/components/viewScroll.vue

<template>
	<view style="overflow-x: auto;" class="scroll">
		<view @click="cutItem(item,index)" class="scroll-item" v-for="(item,index) in list" :key="index">
			<view class="">
				{{item.title}}
			</view>
			<view class="">

			</view>
			<view v-if="item.enrol_year == active" class="scroll-item-color">

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: "viewScroll",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			show: {
				type: Boolean,
				default: () => false
			},
			active:{
				
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			cutItem(item, index) {
				
				this.$emit('click',item)
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.scroll {
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		display: flex;
		overflow-x: auto;
		position: relative;

		.scroll-text {
			position: absolute;
			left: 0;
			height: 100%;
			display: flex;
			width: 100%;
			color: #fff;

			.scroll-text-left {
				width: 222rpx;
			}

			.scroll-text-right {
				flex: 1;
				background-color: rgba(183, 183, 183, 0.92);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.scroll-item {
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
			width: 222rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.scroll-item-color {
				position: absolute;
				bottom: 10rpx;

				left: 50%;
				transform: translate(-50%, 0);
				width: 150rpx;
				height: 6rpx;
				background-color: rgba(5, 204, 161, 1);
			}
		}
	}
</style>