<template>
	<div class="cntBox">
		<div class="box-left">
			<div class="left-item" v-for="(v,index) in list" :key="index">
				<div class="title">
					{{index+1}}.{{v.name}}
				</div>
				<div class="number">
					{{v.todayNum}}
					<img src="../../../../assets/images/leader/arrow-up@2x.png" v-if="v.todayNum > v.lastNum"/>
					<img src="../../../../assets/images/leader/arrow-down@2x.png" v-else/>
				</div>
			</div>
		</div>
		
		<div class="box-right">
			<div class="sircle-one">
				<div class="sircle-one-middle">
					<div class="sircle-one-small">前科</div>
					<div class="sircle-two">吸毒</div>
					<div class="sircle-three">本区</div>
					<div class="sircle-four">精神病人</div>
					<div class="sircle-five">外省</div>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{name:'前科',todayNum:180,lastNum:20},
					{name:'吸毒',todayNum:180,lastNum:1120},
					{name:'本区',todayNum:180,lastNum:20},
					{name:'外省',todayNum:180,lastNum:1120},
					{name:'精神病人',todayNum:180,lastNum:20}
				]
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../../assets/styles/mixin.scss";
	.cntBox{
		width: 100%;
		height: 25vh;
	}
	.box-left{
		width: 35%;
		height: 100%;
		float: left;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.left-item{
		flex: 1;
		
	}
	.title{
		float: left;
	}
	.number{
		float: right;
	}
	.box-right{
		width: 65%;
		height: 100%;
		float: right;
		position: relative;
		@include font_size($font_medium_s);
	}
	.sircle-one{
		position: absolute;
		width: 21vw;
		height: 21vw;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		border: 1px solid #1565cb;
		border-radius:50%;
	}
	.sircle-one-middle{
		width: 18vw;
		height: 18vw;
		border: 1px solid #1874E7;
		border-radius:50%;
		margin: 0 auto;
		top: 1.25vw;
		position: relative;
	}
	.sircle-one-small{
		position: absolute;
		width: 15vw;
		height: 15vw;
		border: 1px solid #1874E7;
		border-radius:50%;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		box-shadow: inset 0 0 10px #1874E7;
		background: rgba(12,76,180,.3);
		text-align: center;
		line-height: 16vw;
	}
	.sircle-two{
		position: absolute;
		width: 18vw;
		height: 18vw;
		left: -17vw;
		bottom: -1px;
		border: 1px solid #E5E718;
		box-shadow: inset 0 0 20px #E5E718;
		border-radius:50%;
		text-align: center;
		line-height: 18vw;
	}
	.sircle-three{
		position: absolute;
		width: 17vw;
		height: 17vw;
		bottom: 16.5vw;
		border: 1px solid #E78D18;
		box-shadow: inset 0 0 20px #E78D18;
		border-radius:50%;
		text-align: center;
		line-height: 17vw;
	}
	.sircle-four{
		position: absolute;
		width: 16vw;
		height: 16vw;
		left: 20vw;
		bottom: 8vw;
		border: 1px solid #14F5F2;
		box-shadow: inset 0 0 20px #14F5F2;
		border-radius:50%;
		text-align: center;
		line-height: 16vw;
	}
	.sircle-five{
		position: absolute;
		width: 15vw;
		height: 15vw;
		left: 12vw;
		bottom: -11vw;
		border: 1px solid #14A3F5;
		box-shadow: inset 0 0 20px #14A3F5;
		border-radius:50%;
		text-align: center;
		line-height: 15vw;
	}
	img{
		width: 2vw;
		margin-left: 2vw;
	}
</style>