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

<template>
	<view class="img-wrap">
		<view v-for="(item, index) in 5" :key="item" :style="{ left: 84 + (item - 1) * 105 + 'rpx', top: '72rpx' }" class="item success"></view>
		<view v-for="(item, index) in 4" :key="item" :style="{ left: 705 + (item - 1) * 105 + 'rpx', top: '72rpx' }" class="item success"></view>
		<view :style="{ left: '19rpx', top: '720rpx' }" class="item border success"></view>
		<view :style="{ left: '106rpx', top: '720rpx' }" class="item success"></view>
		<view :style="{ left: '244rpx', top: '720rpx' }" class="item error"></view>
		<view v-for="(item, index) in 2" :key="item" :style="{ left: 322 + (item - 1) * 64 + 'rpx', top: '720rpx' }" class="item border success"></view>
		<view v-for="(item, index) in 5" :key="item" :style="{ left: 510 + (item - 1) * 62 + 'rpx', top: '720rpx' }" class="item border success"></view>
		<view :style="{ left: 842 + 'rpx', top: '720rpx' }" class="item error"></view>
		<view :style="{ left: 980 + 'rpx', top: '720rpx' }" class="item success"></view>
		<view v-for="(item, index) in 2" :key="item" :style="{ left: 1064 + (item - 1) * 62 + 'rpx', top: '720rpx' }" class="item border2 error"></view>
		<image src="@/static/electron-picture/p-880.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: 46rpx;
			height: 104rpx;
		}
		
		.border {
			border-radius: 10rpx;
		}
		
		.border2 {
			border-radius: 30rpx;
		}
		
		.success {
			background-color: #00BD00;
		}
		
		.error {
			background-color: #D6000F;
		}
		
		image {
			height: 1095rpx;
		}
	}
</style>