sport_pc/.svn/pristine/a4/a424619f1d40bb3fc1a7a71c2b15ddd44f7b606a.svn-base

<template>
	<div>
		<div class="Match" v-for="(i, index) in 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="i.home.concede.istrue == true ? 'active' : ''"
							@click="onhome(index,'home','concede')"
						>
							<span>{{ i.home.concede.concede1 }}</span>
							<span>{{ i.home.concede.concede2 }}</span>
						</div>
						<div
							:class="i.home.size.istrue == true ? 'active' : ''"
							@click="onhome(index,'home','size')"
						>
							<span class="sizehomeA">
								<i>{{ i.home.size.size }}</i>
								{{ i.home.size.sizetop }}
							</span>
							<sapn class="sizehomeB">{{ i.home.size.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="i.away.concede.istrue == true ? 'active' : ''"
							@click="onhome(index,'away','concede')"
						>
							<span
								style="display: block;width: 100%;text-align: center;color: #FD8F26;"
							>
								{{ i.away.concede.concedetop }}
							</span>
							<span>{{ i.away.concede.concedeawaybtm }}</span>
						</div>
						<div
							:class="i.away.size.istrue == true ? 'active' : ''"
							@click="onhome(index,'away','size')"
						>
							<span class="sizeawayA">
								<i>{{ i.away.size.size }}</i>
								{{ i.away.size.sizetop }}
							</span>
							<sapn class="sizeawayB">{{ i.away.size.sizebtm }}</sapn>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			FootballMatch: [
				{
					id: 1,
					date: '21/03',
					time: '11:00',
					num: '70',
					home: {
						title: '哈萨克斯坦',
						concede: { concede1: '0.81', concede2: '' },
						size: {
							size: '大',
							sizetop: '2/2.5',
							sizebtm: '1.12'
						}
					},
					away: {
						title: '苏格兰',
						concede: { concedetop: '05/1', concedebtm: '1.09' },
						size:{
							size: '大',
							sizetop: '2/2.5',
							sizebtm: '1.12'
						}
					}
				},
			]
		};
	},
	methods: {
		// 点击更改组件选中状态
		onhome(index,home,num) {
			// 控制选中更改状态
			if(home=='home'){
				if(num=='concede'){
					this.$set(this.FootballMatch[index].home.concede,'istrue',this.FootballMatch[index].home.concede.istrue==true?false:true)
				}else{
					this.$set(this.FootballMatch[index].home.size,'istrue',this.FootballMatch[index].home.size.istrue==true?false:true)
				}
			}else{
				if(num=='concede'){
					this.$set(this.FootballMatch[index].away.concede,'istrue',this.FootballMatch[index].away.concede.istrue==true?false:true)
				}else{
					this.$set(this.FootballMatch[index].away.size,'istrue',this.FootballMatch[index].away.size.istrue==true?false:true)
				}
			}
		}
	},
	mounted() {}
};
</script>

<style scoped="scoped">
.Match {
	background: #fff;
	margin-top: 0.12rem;
}
.Match-top {
	height: 0.44rem;
	border-bottom: 1px solid #e4e4e4;
	display: flex;
	justify-content: space-between;
	align-content: center;
	font-size: 0.25rem;
	display: flex;
	line-height: 0.44rem;
}
.Match-top-left {
	width: 40%;
	height: 100%;
	padding-left: 0.32rem;
	align-items: center;
	line-height: 0.44rem;
}
.Match-top-name {
	color: #fd8f26;
}
.Match-top-left-right {
	width: 60%;
	height: 100%;
	padding-right: 0.32rem;
	line-height: 0.44rem;
	display: flex;
	justify-content: space-around;
}
.Match-top-num {
	display: inline-block;
	width: 0.64rem;
	height: 0.44rem;
	line-height: 0.44rem;
	background: #ebebeb;
	text-align: center;
}
.Match-bottom {
	height: 1.76rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 0.32rem;
	align-items: center;
}
.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.28rem;
}
.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: 1.07rem;
	height: 0.76rem;
	border: 1px solid #e4e4e4;
	margin-top: 0.05rem;
	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.28rem;
}
.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: 1.07rem;
	height: 0.76rem;
	border: 1px solid #e4e4e4;
	margin-bottom: 0.05rem;
	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>