<template>
	<view style="width: 94vw; margin: 0 auto;">
		<scroll-view class="scroll-view_H" scroll-x="true" :enable-flex="true">
			<view class="cate-section">
				<view class="cate-item" v-for="(item, index) in dataList" >
					<image :src="item.src"></image>
					<text class="ellipse" style="font-size:24rpx;">{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
	
<script>
	export default {
		name:"cate-list",
		// props: ['dataList'],
		props: {
			dataList: {
				type: Array,
				default: function() {
				   return [{
				   src: '/static/minestar/01.png',
				   name: '地质'
				},{
				   src: '/static/minestar/02.png',
				   name: '测绘'
				},{
				   src: '/static/minestar/03.png',
				   name: '通风'
				},{
				   src: '/static/minestar/04.png',
				   name: '采矿'
				},{
				   src: '/static/minestar/05.png',
				   name: '爆破'
				},]
				}
			},
		},
		data() {
			return {
				
			};
		},
		onLoad() {
			
			console.log(this.$parent)
		}
	}
</script>

<style lang="scss" scoped>
	.ellipse{
		@include ellipse();
	}
/* 分类 */
	.cate-section {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// padding: 30upx 22upx; 
		background: #f7f7f7;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 68rpx;
			font-size: $font-sm + 2upx;
			font-weight: bold;
			color: $font-color-dark;
			text{
				font-size: 20rpx;
			}
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}
</style>