qsy-zdh/components/electron-chart/p-1200.vue

<template>
	<view class="img-wrap">
		<view v-for="(item, index) in 19" :style="{ left: 65 + (item - 1) * 66 + 'rpx' }" class="item success"></view>
		<view v-for="(item, index) in 21" :style="{ left: 65 + (item - 1) * 66 + 'rpx' }" class="item1 error"></view>
		<view v-for="(item, index) in 4" :style="{ left: 126 + (item - 1) * 47 + 'rpx', borderRadius: '16rpx' }" class="item2 success"></view>
		<view :style="{ left: '340rpx', borderRadius: '16rpx' }" class="item2 success"></view>
		<view v-for="(item, index) in 7" :style="{ left: 414 + (item - 1) * 48 + 'rpx' }" class="item2 success"></view>
		<view v-for="(item, index) in 7" :style="{ left: 774 + (item - 1) * 48 + 'rpx' }" class="item2 error"></view>
		<view v-for="(item, index) in 4" :style="{ left: '1136rpx' }" class="item2 success"></view>
		<view v-for="(item, index) in 4" :style="{ left: 1212 + (item - 1) * 47 + 'rpx', borderRadius: '16rpx' }" class="item2 success"></view>
		<image mode="heightFix" src="@/static/electron-picture/p-1200.jpg" alt="" />
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style scoped lang="scss">
	.img-wrap {
		position: relative;
		overflow-x: scroll;
		padding-right: 49rpx;
		
		.item {
			width: 37rpx;
			height: 77rpx;
			position: absolute;
			top: 125rpx;
			left: 63rpx;
			border-radius: 8rpx;
			z-index: 999;
		}
		
		.item1 {
			width: 37rpx;
			height: 77rpx;
			position: absolute;
			top: 500rpx;
			left: 63rpx;
			border-radius: 8rpx;
			z-index: 999;
		}
		
		.item2 {
			width: 37rpx;
			height: 77rpx;
			position: absolute;
			top: 846rpx;
			left: 63rpx;
			border-radius: 8rpx;
			z-index: 999;
		}
		
		.success {
			background-color: #00BD00;
		}
		
		.error {
			background-color: #D6000F;
		}
		
		image {
			height: 1095rpx;
		}
	}
</style>