sport_pc/.svn/pristine/59/59d06e8ad46363743333c1164ef2e0e5c1c3ee64.svn-base

<template>
	<div>
		<yd-accordion>
			<!-- 组件标题 -->
			<yd-accordion-item class="Match-game" :title="table.title">
				<!-- 组件计数单元 -->
				<div slot="txt" class="Match-game-stat" v-if="table.census">
					当前总数:{{ table.census }}
				</div>
				<div style="background: #F0F0F0;">
					<p
						v-for="(i, index) in table.list"
						class="list-row"
						:style="i.num ? '' : 'background:#F8F8F8'"
						:key="i.id"
					>
						<span class="The-club">{{ i.Theclub }}</span>
						<span
							:class="i.istrue== true ? 'active The-club-box' : 'The-club-box'"
							@click="Theclubboxclick(index)"
							:style="i.num ? '' : 'display:none'"
						>
							<i style="color: #FD8F26;" v-if="i.num">{{ i.num.num1 }}</i>
							<i v-if="i.num"> {{ i.num.num2 }}</i>
						</span>
					</p>
				</div>
			</yd-accordion-item>
		</yd-accordion>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 组件内部测试状态
			table: {
				title: '角球:让球-上半场',
				census:'',
				list:[
					{
						id: 1,
						Theclub: '哈萨克斯坦',
						num: {
							num1: '0.5/1',
							num2: '0.94'
						}
					},
					{
						id: 2,
						Theclub: '马德里体育会',
						num: {
							num1: '',
							num2: '0.94'
						}
					},
					{
						id: 3,
						Theclub: '哈萨克斯坦',
						num: {
							num1: '0.5/1',
							num2: '0.94'
						}
					},
					{
						id: 4,
						Theclub: '马德里体育会',
						num: {
							num1: '',
							num2: '0.94'
						}
					}
				]
			}
		};
	},
	methods: {
		// 点击更改组件选中状态
		Theclubboxclick(num) {
			// 更改组件是否选中
			this.$set(this.table.list[num],"istrue",this.table.list[num].istrue==true?false:true)
		}
	},
	mounted() {
	}
};
</script>

<style scoped>
div /deep/ .yd-accordion-head-arrow:after {
	border: none;
	width: 0.5rem;
	height: 0.5rem;
	background: url(../../assets/st-imges/xiangxia.png) no-repeat;
	background-size: 100% 100%;
}
div /deep/ .yd-accordion-head,
div /deep/ .yd-accordion-head-content,
div /deep/ .yd-accordion-title {
	height: 0.88rem;
	font-size: 0.32rem;
	color:#333;
  	background: #F8F8F8;
}
div /deep/ .yd-accordion-head {
	padding: 0 0.32rem;
}
.Match-game {
	position: relative;
}
.Match-game-stat {
	position: absolute;
	right: 1.35rem;
	color: #fd8f26;
	font-size: 0.23rem;
}
.list-row {
	display: flex;
	justify-content: space-between;
	height: 0.87rem;
	background: #f8f8f8;
	border-bottom: 1px solid #e4e4e4;
	align-items: center;
	padding: 0 0.32rem;
}
.The-club{
  font-size: .28rem
}
.The-club-box {
	display: inline-block;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 1.07rem;
	height: 0.76rem;
	font-size: 0.24rem;
	padding: 0.1rem;
	border: 2px solid #cecece;
	border-radius: 0.1rem;
	margin-right: 0.1rem;
}
.active {
	background: #F76649;
	padding: 0.1rem;
	border: 2px solid #F76649;
}
.active i{
	color: #f4f4f4 !important;
}
</style>