vis389/src/views/bigScreen/drivingCabin/center.vue

<template>
	<div>
		<container3>
			<img class="img" src="./conter.png" style="width: 100%; height: 100%" />
			<rocketTit class="tit">全年目标</rocketTit>
			<div class="data">
				<div class="data-item">
					<div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div>
					<div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
					<div style="width: 100%">
						<progressBar :percentage="70" />
					</div>
				</div>
				<div class="data-item">
					<div><img src="./icon2.png" alt="" /><span style="font-weight: bold">利润</span></div>
					<div class="box"><i>380/</i><i class="num">12342</i><span class="num2">万</span></div>
					<div style="width: 100%">
						<progressBar :percentage="70" />
					</div>
				</div>
				<div class="data-item">
					<div><img src="./icon3.png" alt="" /><span style="font-weight: bold">装药量</span></div>
					<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
					<div style="width: 100%">
						<progressBar :percentage="70" />
					</div>
				</div>
				<div class="data-item">
					<div><img src="./icon4.png" alt="" /><span style="font-weight: bold">交付数量</span></div>
					<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
					<div style="width: 100%">
						<progressBar :percentage="70" />
					</div>
				</div>
			</div>
		</container3>
	</div>
</template>

<script>
import container3 from '../components/container3/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import progressBar from './../components/progress/index.vue'

import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
	mixins: [resize],
	name: 'left1',
	components: {
		container3,
		rocketTit,
		progressBar,
	},
	data() {
		return {}
	},
	mounted() {},
	beforeDestroy() {},
	methods: {},
}
</script>

<style lang="scss" scoped>
.tit {
	padding: 16px 24px;
}
.img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.data {
	display: flex;
	justify-content: space-evenly;
	margin: 0 30px;
	background: rgba(2, 18, 63, 0.33);
	color: #ffffff;
	font-size: 18px;
	.data-item {
		// flex: 1;
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		> div {
			margin: 5px 0;
			text-align: center;
			img {
				// width: 10px;
				// height: 10px;
				vertical-align: middle;
				margin-right: 5px;
			}
		}
		.box {
			font-size: 26px;
			font-family: Roboto-BlackItalic, Roboto;
			font-weight: 600;
			color: #55c5a2;
		}
		.num {
			font-size: 14px;
		}
		.num2 {
			font-size: 16px;
			margin-left: 5px;
			color: #fff;
		}
	}
}

.container3 {
	position: relative;
	.con_right {
		width: 88px;
		position: absolute;
		top: 20%;
		right: 20%;
		color: #00ffff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img {
			width: 100%;
		}
		.con_title {
			width: 100%;
			display: flex;
			align-items: center;
			img {
				width: 25%;
			}
		}
		.con_height {
			width: 2px;
			height: 20px;
			background-color: #00ffff;
		}
	}
	.con_two {
		top: 43%;
		right: 12%;
	}
	.con_left {
		width: 186px;
		position: absolute;
		top: 60%;
		left: 24%;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		img {
			width: 100%;
			display: block;
			margin: 0 auto;
		}
		.con_left_title {
			position: relative;
			.con_card {
				width: 100%;
				padding: 0 10px;
				position: absolute;
				top: 22%;
				div {
					width: 100%;
					display: flex;
					justify-content: space-between;
					span:nth-child(1) {
						opacity: 0.9;
					}
					span:nth-child(2) {
						font-weight: bold;
					}
				}
			}
		}
		.con_h_two {
			position: relative;
			width: 50%;
			height: 47px;
			border: 1px solid #fa8c16;
			border-top-width: 0;
			border-right-width: 0;
			.con_bottom {
				height: 24px;
				line-height: 26px;
				position: absolute;
				right: -50%;
				bottom: -50%;
				text-align: right;
				transform: translate(-50%, -50%);
				img {
					width: 38%;
					margin: 0;
					display: inline-block;
					vertical-align: middle;
				}
			}
		}
	}
}
</style>