uni-zhihuikuangshan/pages/index/switch-kuang/switch-kuang.vue

<template>
	<view>
		<!-- <view @click="click('zaoquan')">选择完毕</view> -->

		<view class="box">
			<view class="title">煤矿单位</view>
			<view class="list">
				<view class="item" style="background-color: #009FE8;" @click="click('yangchangwan')">
					<view class="icon">
						<image src="@/static/switch-kuang/yangchangwan.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item" style="background-color: #009FE8;" @click="click('meihuajing')">
					<view class="icon">
						<image src="@/static/switch-kuang/meihuajing.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item" style="background-color: #009FE8;" @click="click('zaoquan')">
					<view class="icon">
						<image src="@/static/switch-kuang/zaoquan.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item" style="background-color: #009FE8;" @click="click('jinfeng')">
					<view class="icon">
						<image src="@/static/switch-kuang/jinfeng.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item" style="background-color: #009FE8;" @click="click('xixuan')">
					<view class="icon">
						<image src="@/static/switch-kuang/xixuan.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item" style="background-color: #009FE8;" @click="click('shicaocun')">
					<view class="icon">
						<image src="@/static/switch-kuang/shicaocun.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item" style="background-color: #009FE8;" @click="click('jinjiaqu')">
					<view class="icon">
						<image src="@/static/switch-kuang/jinjiaqu.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/maiduoshan.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/hongliu.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/shuangma.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/ruqigou.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/qingshuiying.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/hongshiwan.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/lingxin.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="title">煤制油</view>
			<view class="list">
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/meizhiyou.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="title">煤化工</view>
			<view class="list">
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/xiting-1.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/xiting-2.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/meihuagong.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="@/static/switch-kuang/kuangji.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="title">机关部门</view>
			<view class="list">
				<view class="item" style="background-color: #009FE8;" @click="click('ningdongyunying')">
					<view class="icon">
						<image src="@/static/switch-kuang/ningdongyunying.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="item" style="background-color: #009FE8;" @click="click('ningmeijituan')">
					<view class="icon">
						<image src="@/static/switch-kuang/ningmeijituan.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			click(data) {
				uni.$emit('update_kuang', {
					msg: data
				})
				uni.switchTab({
					url: "../../tabbar/index/index",
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;

	}

	.box {
		background-color: #FFFFFF;

		box-sizing: border-box;
		padding: 0 25rpx;

		margin-bottom: 25rpx;

		.title {
			line-height: 90rpx;
		}

		.list {
			overflow: hidden;
			.item {
				margin-right: 50rpx;
				float: left;
				width: 200rpx;
				height: 48rpx;
				border-radius: 40rpx;

				padding: 4rpx 0;
				background-color: #8F9093;
				margin-bottom: 25rpx;

				.icon {
					margin: 0 auto;
					width: 160rpx;
					height: 40rpx;

					image {
						width: 160rpx;
						height: 40rpx;
					}
				}
			}
			.item:nth-child(3n){
				margin-right: 0;
			}
		}
	}
</style>