<template>
	<view class="tabBar">
		<view class="cont">
			<view class="image-text_1 flex-col" @tap="switchTab(list[0].pagePath)">
				<image
					class="thumbnail_1"
					referrerpolicy="no-referrer"
					:src="selected == 0? list[0].selectedIconPath:list[0].iconPath"
				/>
				<text :class="selected == 0?'text-group_1':'text-group_2'">
					{{list[0].text}}
				</text>
			</view>
			<!-- <image
				class="label_1"
				referrerpolicy="no-referrer"
				src="https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/icon_camera%403x.png"
				@tap="jumpVlog"
			/> -->
			<view class="image-text_2 flex-col" @tap="switchTab(list[1].pagePath)">
				<image
					class="thumbnail_2"
			        referrerpolicy="no-referrer"
			        :src="selected == 1? list[1].selectedIconPath:list[1].iconPath"
			    />
				<text :class="selected == 1?'text-group_3':'text-group_4'">
					{{list[1].text}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		selected: Number
	},
	data() {
		return {
			list: [
				{
					pagePath: "/pages/home/home",
					text: "首页",
					iconPath: "/static/icon/icon_Home_n@3x_da.png",
					selectedIconPath: "/static/icon/icon_Home_n@3x_a.png",
				},
				{
					pagePath: "/pages/mine/mine",
					text: "我的",
					iconPath: "/static/icon/icon_我的_n@3x_da.png",
					selectedIconPath: "/static/icon/icon_我的_n@3x_a.png",
				}
			]
		}
	},
	methods: {
		switchTab(url) {
			uni.switchTab({
				url
			})
		}
	}
}
</script>

<style lang="scss">
.tabBar {
	z-index: 100;
	width: 100%;
	position: fixed;
	bottom: 0;
	font-size: 28rpx;
	background-color: #fff;
	color: #636363;
	left: 0;
	height: 150rpx;
	background: none;
}
.cont {
	z-index: 0;
	height: 130rpx;
	margin-top: 30rpx;
	display: flex;
	justify-content: space-around;
	.image-text_1 {
	  margin-top: 5px;
	  margin-right: 50px;
	}
	
	.thumbnail_1 {
	  width: 18px;
	  height: 18px;
	  align-self: center;
	}
	
	.text-group_1 {
	  overflow-wrap: break-word;
	  color: rgba(22, 140, 248, 1);
	  font-size: 12px;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 12px;
	  margin-top: 9px;
	}
	
	.text-group_2 {
	  overflow-wrap: break-word;
	  color: rgba(80, 92, 115, 1);
	  font-size: 12px;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 12px;
	  margin-top: 9px;
	}
	
	.label_1 {
	  width: 43px;
	  height: 42px;
	  margin-bottom: 2px;
	}
	
	.image-text_2 {
	  margin-top: 5px;
	  margin-left: 50px;
	}
	
	.thumbnail_2 {
	  width: 18px;
	  height: 18px;
	  align-self: center;
	}
	
	.text-group_3 {
	  overflow-wrap: break-word;
	  color: rgba(22, 140, 248, 1);
	  font-size: 12px;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 12px;
	  margin-top: 9px;
	}
	
	.text-group_4 {
	  overflow-wrap: break-word;
	  color: rgba(80, 92, 115, 1);
	  font-size: 12px;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 12px;
	  margin-top: 9px;
	}
}
</style>
