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

<template>
	<view class="img-wrap">
		<view v-for="(item, index) in 17" :key="item" :style="{ left: 49 + (item - 1) * 72 + 'rpx', top: '70rpx' }" class="item error"></view>
		<view :style="{ left: 0 + 'rpx', top: '724rpx' }" class="item border success"></view>
		<view v-for="(item, index) in 7" :key="item" :style="{ left: 70 + (item - 1) * 49 + 'rpx', top: '724rpx' }" class="item border success"></view>
		<view :style="{ left: 434 + 'rpx', top: '724rpx' }" class="item border success"></view>
		<view v-for="(item, index) in 8" :key="item" :style="{ left: 502 + (item - 1) * 49 + 'rpx', top: '724rpx' }" class="item border error"></view>
		<view :style="{ left: 914 + 'rpx', top: '724rpx' }" class="item border2 success"></view>
		<view v-for="(item, index) in 2" :key="item" :style="{ left: 982 + (item - 1) * 49 + 'rpx', top: '724rpx' }" class="item border2 error"></view>
		<view v-for="(item, index) in 3" :key="item" :style="{ left: 1098 + (item - 1) * 49 + 'rpx', top: '724rpx' }" class="item border success"></view>
		<view :style="{ left: 1264 + 'rpx', top: '724rpx' }" class="item border success"></view>
		<image src="@/static/electron-picture/p-980.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: 40rpx;
			height: 84rpx;
		}
		
		.border {
			border-radius: 10rpx;
		}
		
		.border2 {
			border-radius: 30rpx;
		}
		
		.success {
			background-color: #00BD00;
		}
		
		.error {
			background-color: #D6000F;
		}
		
		image {
			height: 1095rpx;
		}
	}
</style>