<template>
	<view class="tabs">
		<view class="tabs-ul">
			<view class="tabs-li" v-for="(item, index) in viewModel" :key="index" :style="{backgroundColor: item.bgcolor}">
				<text class="tabs-li-text">{{item.value}}</text>
				<view class="tabs-li-bottom">
					<text class="tabs-li-num">{{item.name}}</text>
				</view>
				<view class="tabs-li-right">
					<x-icon class="tabs-li-right-icon" size="30" :color="item.icon.color" :name="item.icon.name" ></x-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			count: {},
			viewModel: {}
		}
	} 
</script>

<style lang="scss" scoped>
	.tabs {
		padding: 30rpx 10rpx;
		padding-bottom: 10rpx;
		&-ul{
			display: flex;
			flex-wrap: wrap;
		}
		&-li {
			width: 345rpx;
			height: 140rpx;
			margin: 0 10rpx;
			box-sizing: border-box;
			padding: 15rpx;
			margin-bottom: 20rpx;
			border-radius: 5rpx;
			background-color: #5867DD;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			&-text{
				@include styleFont(#fff, 32rpx, 1);
			}
			&-bottom{
				margin-bottom: 10rpx;
			}
			&-num{
				@include styleFont(#fff, 26rpx);
			}
			&-right{
				position: absolute;
				top: 50%;
				right: 20rpx;
				width: 80rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #FFFFFF;
				border-radius: 50%;
				opacity: 0.13;
				transform: translate(0, -50%);
				&-icon {
					height: 30px;
					transform:rotate(-40deg);
				}
			}
		}
	}
</style>
