<template>
	<view class="skinfo">
		<view class="title">
			<view class="left">
				<text>{{123}}</text>
			</view>
			<view class="right">
				{{123}}
			</view>
		</view>
		<view class="content">
			<view class="listItem" v-for="(v,k) of list" :style="{border:'1px solid red'}">
				<view class="top" style="background-color: red;border-bottom: 1px solid red;">
					{{k}}
				</view>
				<view class="bottom">
					{{v}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default{
		
		data(){
			return{
				list:{
					h1:0,
					h3:0,
					h6:0,
					h12:22,
					h24:35,
				},
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.skinfo {
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;
			    
		}
		.content{
			display: flex;
			justify-content: space-between;
			.listItem{
				font-size: 13px;
				border-radius: 5px;
				color: #333333;
				text-align: center;
				width: 75px;
				height: 50px;
				margin: 5px;
				.top{
					height: 40%;
					color: #fff;
				}
				.bottom{
					height: 60%;
				}
			}
		}
		.bottomItem{
			display: flex;
			border-top: 1px solid #f0f0f0;
			padding: 10px 0 0 0;
			font-size: 14px;
		}
	}
	.withd-2{
		width: 50%;
		text-align: center;
	}
</style>