sport_pc/.svn/pristine/5e/5ee89398615e5331db94c41f3a020e4259143c89.svn-base

<template>
	<div>
			<div class="Match-title">{{data.title}}<p class="Match-title-num">{{data.num}}</p></div>
			<div class="Match" v-for="(i,index) in data.FootballMatch" :key = "i.id">
				<div class="Match-top">
					<div class="Match-top-left">
						{{i.date}}&emsp;<span class="Match-top-name">{{i.time}}</span>
					</div>
					<div class="Match-top-left-right">
						<span class="Match-top-num">{{i.num}}></span>
						<span>让球</span>
						<span>大小</span>
					</div>
				</div>
				<div class="Match-bottom">
					<div class="Match-bottom-home">
						<div class="Match-bottom-home-left">
							<span>{{i.home.title}}</span>
						</div>
						<div class="Match-bottom-home-right">
							<div :class="{active:index == isActive&&isnum == 1}" @click="onhome(index,1)">
								<span>{{i.home.concede}}</span>
							</div>
							<div :class="{active:index == isActive&&isnum == 2}" @click="onhome(index,2)">
								<span class="sizehomeA"><i>{{i.home.size}}</i>{{i.home.sizetop}}</span>
								<sapn class="sizehomeB">{{i.home.sizebtm}}</sapn>
							</div>
						</div>
					</div>
					<div class="Match-bottom-away">
						<div class="Match-bottom-away-left">
							<span>{{i.away.title}}</span>
							
						</div>
						<div class="Match-bottom-away-right">
							<div :class="{active:index == isActive&&isnum == 3}" @click="onhome(index,3)">
								<span style="display: block;width: 100%;text-align: center;color: #FD8F26;">{{i.away.concedetop}}</span>
								<span>{{i.concedeawaybtm}}</span>
							</div>
							<div :class="{active:index == isActive&&isnum == 4}" @click="onhome(index,4)">
								<span class="sizeawayA"><i>{{i.away.size}}</i>{{i.away.sizetop}}</span>
								<sapn class="sizeawayB">{{i.away.sizebtm}}</sapn>
							</div>
						</div>
					</div>
				</div>
			</div>
	</div>
</template>

<script>
	
	export default {
		data() {
			return {
				
				isActive:null,
				isnum:null,
				data:{
					title:"欧洲足球锦标赛2020外围赛",
					num:"22",
					FootballMatch:[
					{
						date:"21/03",
						time:"11:00",
						num:"70",
						home:{
							title:"哈萨克斯坦",
							concede:"0.81",
							size:"大",
							sizetop:"2/2.5",
							sizebtm:"1.12",
							},
						away:{
							title:"苏格兰",
							concedetop:"05/1",
							concedebtm:"1.09",
							size:"大",
							sizetop:"2/2.5",
							sizebtm:"1.12",
						},
					},
								{
						date:"21/03",
						time:"11:00",
						num:"70",
						home:{
							title:"哈萨克斯坦",
							concede:"0.81",
							size:"大",
							sizetop:"2/2.5",
							sizebtm:"1.12",
							},
						away:{
							title:"苏格兰",
							concedetop:"05/1",
							concedebtm:"1.09",
							size:"大",
							sizetop:"2/2.5",
							sizebtm:"1.12",
						},
					},
									{
						date:"21/03",
						time:"11:00",
						num:"70",
						home:{
							title:"哈萨克斯坦",
							concede:"0.81",
							size:"大",
							sizetop:"2/2.5",
							sizebtm:"1.12",
							},
						away:{
							title:"苏格兰",
							concedetop:"05/1",
							concedebtm:"1.09",
							size:"大",
							sizetop:"2/2.5",
							sizebtm:"1.12",
						},
					}
				]
				}
				
			}
		},
		methods: {
			onhome(index,isnum) {
				this.isActive=index
				this.isnum=isnum
			},
			
		},
	}
</script>

<style scoped="scoped">
	.Match-title{
	display:flex;
	justify-content:space-between;
	align-items: center;
	height: 0.88rem;
	font-size: .28rem;

	padding-left: 0.32rem;
	margin-bottom: 0.12rem;
	background: #F8F8F8
}
.Match-title-num{
	width: .3rem;
	height: .3rem;
	background: #FD8F26;
	font-size: .16rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	margin-right: .68rem;
	color: #F5F5F5;
}

	.Match{
		background: #fff;
		margin-top: 0.25rem;
	}
	.Match-top{
		height:0.75rem;
		border-bottom: 1px solid #e4e4e4;
		display: flex;
		justify-content:space-between;
		align-content: center;
		font-size: 0.25rem;
		
	}
	.Match-top-left{
		width: 40%;
		height: 100%;
		padding-left: 0.75rem;
		align-items: center;
		line-height: 0.75rem;
		}
		.Match-top-name{
			color: #fd8f26;
		}
	.Match-top-left-right{
		width: 60%;
		height: 100%;
		padding-right: 0.75rem;
		line-height: 0.75rem;
		display: flex;
		justify-content: space-around;
	}
	.Match-top-num{
		display: inline-block;
		width: 1rem;
		height: 0.75rem;
		line-height: 0.75rem;
		background: #ebebeb;
		text-align: center;
	}
	.Match-bottom{
		height: 2.5rem;
		display: flex;
		justify-content:space-between;
		flex-wrap: wrap;
		padding: 0 0.75rem 0 0.75rem;
	}
	.Match-bottom-home,.Match-bottom-away{
		height: 50%;
		width: 100%;
		display: flex;
		justify-content: space-between;
		
	}
	.Match-bottom-home div{
		height: 100%;
	}
	.Match-bottom-home-left{
		height: 100%;
		display: flex;
		align-items: center;
		color: #333333;
		align-content: left;
		font-size: 0.25rem;
	}
	.Match-bottom-home-right{
		width: 37%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		}
	.Match-bottom-home-right div{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		width: 1rem;
		height: 0.8rem;
		border:1px solid #e4e4e4;
		margin-top: 0.1rem;
		border-radius: 0.1rem;
		font-size: 0.25rem;
		
	}
	.Match-bottom-home-right div i{
		font-style: normal;
		color: #aaaaaa;
	}
	.sizehomeA{
		color: #fd8f26;
	}
	
	.Match-bottom-away div{
		height: 100%;
	}
	.Match-bottom-away-left{
		height: 100%;
		display: flex;
		align-items: center;
		color: #333333;
		align-content: left;
		font-size: 0.25rem;
	}
	.Match-bottom-away-right{
		width: 37%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
		}
	.Match-bottom-away-right div{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		width: 1rem;
		height: 0.8rem;
		border:1px solid #e4e4e4;
		margin-top: 0.1rem;
		border-radius: 0.1rem;
		font-size: 0.25rem;
		
	}
	.Match-bottom-away-right div i{
		font-style: normal;
		color: #aaaaaa;
	}
	.sizeawayA{
		color: #fd8f26;
	}
	.active{
		background-color: #e4e4e4;
	}
</style>