Project_yhfu/src/views/bigdata/tabbar.vue

<template>
	<div class="bigdata-map-tabbar">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane v-for="(district,index) in district" :label="district.label" :name="district.name">
				<el-row :gutter="20">
					<el-col :span="4" v-for="(regionNum,index) in regionNum" :key="index">
						<div class="list-content">
							<span>{{regionNum.count}}</span>
							<h5>{{regionNum.name}}</h5>
						</div>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//tab默认停留项el-tab-pane > name = "?"
				activeName: 'sp',
				//地区分类tabtitle
				district:[
					{
						label:'四平市',
						name:'sp',
						id:''
					},
					{
						label:'双辽市',
						name:'sl',
						id:''
					},
					{
						label:'梨树县',
						name:'ls',
						id:''
					},
					{
						label:'伊通县',
						name:'yt',
						id:''
					},
					{
						label:'铁东区',
						name:'td',
						id:''
					},
					{
						label:'铁西区',
						name:'tx',
						id:''
					},
				],
				// 本地区内分类项数量
				regionNum:[
					{
				       count:641,
					   name:'事件'
					},
					{
					   count:351,
					   name:'隐患'
					},
					{
					   count:785,
					   name:'人口'
					},
					{
					   count:512,
					   name:'企业'
					},
					{
					   count:786,
					   name:'林场'
					},
					{
					   count:544,
					   name:'矿坑'
					},
					{
					   count:320,
					   name:'收集点'
					},
					{
					   count:321,
					   name:'水鹤'
					},
					{
					   count:400,
					   name:'取水口'
					},
					{
					   count:654,
					   name:'消火栓'
					},
					{
					   count:806,
					   name:'摄像头'
					},
					{
					   count:312,
					   name:'养殖场'
					},
					{
					   count:713,
					   name:'处理中心'
					},
					{
					   count:132,
					   name:'泡沫液'
					},
					{
					   count:466,
					   name:'泡沫液'
					},
					{
					   count:897,
					   name:'消防力量'
					},
					{
					   count:132,
					   name:'探测器'
					}
				]
			};
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event);
			}
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss">
	@import '@/assets/styles/base.scss';
	.bigdata-map-tabbar {
		width: 100%;
		height: 28.5vh;
		padding: 0 1rem 1rem 1rem!important;
		box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
			-0 -0 20px rgba($color: #163696, $alpha: .6) inset;

		.el-tabs__item {
			color: #fff;
			font-size: 12px;
			height: 32px;
			padding: 0 10px;
		}

		.el-tabs__item.is-active {
			color: #3ec6fc;
		}

		.el-tabs__nav-wrap::after {
			background: none;
		}

		.el-tabs__active-bar {
			// background-color: #ffbc30;
			border-radius: 20px;
		}

		.el-tab-pane {
			color: #fff;
		}

		.el-tabs__nav-next,
		.el-tabs__nav-prev {
			line-height: 40px;
		}

		.el-tabs__header {
			margin: 0 0 10px;
		}

		.list-content {
			width: 95%;
			margin: 0 auto;
			text-align: center;
			margin-top: 1rem;

			h5 {
				width: 100%;
				color: #0aaef2;
				padding: .2rem 0;
				border: 1px solid #091641;
				font-size: 12px;
			}

			span {
				width: 100%;
				display: flex;
				flex-direction: column;
				font-size: 12px;
				
				padding: .5rem 0;
				font-weight: bolder;
				border: 1px solid #091641;
				border-bottom:none ;
			}
		}
		.list-content:hover{
			filter: brightness(2.3);
		}
	}
</style>