vis389/src/views/bigScreen/information/index.vue

<template>
	<div class="information">
		<div class="left1">
			<left1></left1>
		</div>
		<div class="left2">
			<left2></left2>
		</div>

		<div class="center1">
			<center1></center1>
		</div>
		<!-- <div class="center2">
			<center2></center2>
		</div> -->
		<div class="right1">
			<right1></right1>
		</div>
	</div>
</template>

<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container1 from '../components/container1/index.vue'

import left1 from './left1.vue'
import left2 from './left2.vue'
import center1 from './center.vue'
import right1 from './right1.vue'
import bottom1 from './bottom1.vue'
import bottom2 from './bottom2.vue'
export default {
	name: 'SecurityManage',
	components: {
		scalseBox,
		bigScreenHead,
		rocketTit,
		container1,
		left1,
		left2,
		center1,
		right1,
		bottom1,
		bottom2,
	},
}
</script>

<style lang="scss" scoped>
.information {
	position: relative;
	width: 100%;
	// background-image: url("../img/bg.png");
	background-size: cover;
	.bg1 {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 1920px;
		height: 485px;
		background-image: url('../img/bg-1.png');
		background-size: cover;
	}
}

.left1 {
	position: absolute;
	top: 3px;
	left: 24px;
}
.left2 {
	position: absolute;
	top: 605px;
	left: 24px;
}
.center1 {
	position: absolute;
	top: 3px;
	left: 578px;
}
.center2 {
	position: absolute;
	top: 605px;
	left: 968px;
}

.right1 {
	position: absolute;
	top: 3px;
	right: 24px;
}
.bottom1 {
	position: absolute;
	bottom: 16px;
	left: 24px;
}
.bottom2 {
	position: absolute;
	bottom: 16px;
	right: 24px;
}
</style>