<template>
	<view class="tarbar">
		<view  @click="change(index)" v-for="(item,index) in tarbar" :key="item.name" :class="index==2?'img_m':'tarbar_img'">
			<image :src="item.src"></image>
			<view>{{ item.name}}</view>
		</view>
		<!-- <view class="tarbar_img"@click="change(1)"><image src="../../static/img/Category.png"></image><view>Category</view></view>
		<view class="img_m" @click="change(2)"><image src="../../static/img/add.png"></image></view>
		<view class="tarbar_img"@click="change(3)"><image src="../../static/img/Cart.png"></image><view>Cart</view></view>
		<view class="tarbar_img"@click="change(4)"><image src="../../static/img/Account.png"></image><view>Account</view></view> -->
	</view>
</template>

<script>
	export default {
		name:'tarbar',
		data(){
			return{
				list:[
					{src:'../../static/icon/home4.png'},
					{src:'../../static/img/Category1.png'},
					{src:''},
					{src:'../../static/img/cart1.png'},
					{src:'../../static/img/Account1.png'}
				],
				tarbar:[
					{
						src:'../../static/icon/home3.png',
						name:'Home'
					},
					{
						src:'../../static/img/Category.png',
						name:'Category'
					},
					{
						src:'../../static/icon/home3.png',
						name:''
					},
					{
						src:'../../static/img/Cart.png',
						name:'Cart'
					},
					{
						src:'../../static/img/Account.png',
						name:'Account'
					},
				],
			}
		},
		methods:{
			change(e){
							 this.index = e
							 let tarbar = this.tarbar
							 for(let i =0; i<this.tarbar.length;i++){
								 if(e==i){
									 this.tarbar[e].src = this.list[e].src
								 }else{
									this.tarbar = tarbar
									this.tarbar[i].src = tarbar[i].src
								 }
							 }
				// uni.switchTab({
				// 	url:this.list[e].url
				// })
			},
		}
	}
</script>

<style>
	.tarbar{
		height: 100rpx;
		width: 100vw;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		background-color: #fff;
		bottom: 0;
		font-size: 24rpx;
		text-align: center;
		position: fixed;
		display: flex;
		color:#707070;
		justify-content: space-around;
		.tarbar_img image{
			height: 50rpx;
			width: 50rpx;
			
			// background-color: #fff;
		}
		.img_m image{
			height: 80rpx;
			width: 80rpx;
			margin-top: -20rpx;
		}
		
	}
</style>