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

<template>
	<view class="img-wrap">
		<view :style="{ left: '62rpx', top: '78rpx' }" class="item success"></view>
		<view v-for="(item, index) in 7" :key="item" :style="{ left: 166 + (item - 1) * 74 + 'rpx', top: '78rpx' }" class="item error"></view>
		<view :style="{ left: '710rpx', top: '78rpx' }" class="item success"></view>
		<view v-for="(item, index) in 6" :key="item" :style="{ left: 848 + (item - 1) * 73 + 'rpx', top: '78rpx' }" class="item error"></view>
		<view :style="{ left: '1318rpx', top: '78rpx' }" class="item success"></view>
		<view :style="{ left: '108rpx', top: '700rpx' }" class="item border success"></view>
		<view v-for="(item, index) in 2" :key="item" :style="{ left: 250 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border error"></view>
		<view v-for="(item, index) in 3" :key="item" :style="{ left: 404 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border2 error"></view>
		<view v-for="(item, index) in 3" :key="item" :style="{ left: 616 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border error"></view>
		<view :style="{ left: 876 + 'rpx', top: '700rpx' }" class="item border error"></view>
		<view :style="{ left: 1172 + 'rpx', top: '700rpx' }" class="item border error"></view>
		<view v-for="(item, index) in 2" :key="item" :style="{ left: 1308 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border error"></view>
		<view v-for="(item, index) in 3" :key="item" :style="{ left: 1462 + (item - 1) * 60 + 'rpx', top: '700rpx' }" class="item border error"></view>
		<view :style="{ left: 1720 + 'rpx', top: '700rpx' }" class="item border error"></view>
		<image src="@/static/electron-picture/p-1142.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: 52rpx;
			height: 100rpx;
		}
		
		.border {
			border-radius: 10rpx;
		}
		
		.border2 {
			border-radius: 30rpx;
		}
		
		.success {
			background-color: #00BD00;
		}
		
		.error {
			background-color: #D6000F;
		}
		
		image {
			height: 1095rpx;
		}
	}
</style>