qsy-zdh/components/electron-chart/p-22-low.vue

<template>
	<view class="img-wrap">
		<view :style="{ left: '-4rpx', top: '148rpx' }" class="item success"></view>
		<view v-for="(item, index) in 2" :key="item" :style="{ left: 126 + (item - 1) * 224 + 'rpx', top: '346rpx' }" class="item error"></view>
		<view v-for="(item, index) in 7" :key="item" :style="{ left: 512 + (item - 1) * 96 + 'rpx', top: '346rpx' }" class="item error"></view>
		<view v-for="(item, index) in 10" :key="item" :style="{ left: 1182 + (item - 1) * 96 + 'rpx', top: '346rpx' }" class="item border error"></view>
		<view v-for="(item, index) in 2" :key="item" :style="{ left: 2206 + (item - 1) * 224 + 'rpx', top: '346rpx' }" class="item error"></view>
		<image src="@/static/electron-picture/p-22-low.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 {
			position: absolute;
			width: 74rpx;
			height: 154rpx;
		}
		
		.border {
			border-radius: 10rpx;
		}
		
		.border2 {
			border-radius: 30rpx;
		}
		
		.success {
			background-color: #00BD00;
		}
		
		.error {
			background-color: #D6000F;
		}
		
		image {
			height: 1095rpx;
		}
	}
</style>