onecric_h5/pages/Match/team.vue

<template>
	<view>
		<view class="select-head">
			<u-navbar :leftText="$t('navbar.txt2')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}"
				:fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
		</view>
		<view class="main">
			<view class="heander-info cfff pd24">
				<view class="flex size28">
					<view class="flex-col align-center">
						<text>{{obj.home_name}}</text>
						<image :src="obj.home_logo" mode="aspectFill" class="team-icon"></image>
					</view>
					<image src="../../static/image/match/matches_detail_vs_ico.png" mode="aspectFit" class="vs-icon">
					</image>
					<view class="flex-col align-center">
						<text>{{obj.away_name}}</text>
						<image :src="obj.away_logo" mode="aspectFill" class="team-icon"></image>
					</view>
				</view>
				<!-- <view class="flex">
				</view> -->
				<view class="flex mg-tp34 size28 cfff Bold">
					<text>{{obj.home_win_probabilities}}%</text>
					<text>{{obj.away_win_probabilities}}%</text>
				</view>
				<u-line-progress activeColor="#C8C8C8" inactiveColor="#DC3C23" :percentage="obj.home_win_probabilities"
					:showText="false"></u-line-progress>
				<view class="text-center size-28 cfff mg-tp10">
					<!-- WIN PROBABILITY -->
				{{ $t('match.labe85') }}
				</view>
			</view>

			<view class="size32 c3 mg-tp40">
				<text class="Bold">
					<!-- Matches Played Recently -->
				{{ $t('match.labe86') }}
				</text>
				<view class="size28 c6">
					<!-- The Hundred -->
				{{ $t('match.labe87') }}
				</view>
			</view>

			<view class="table-list">
				<view class="table-list-item" v-for="row in 2" :key="row">
					<view class="table-list-item-header flex" @click="rowAcIndex=rowAcIndex==row?'':row">
						<view class="list-left flexcenter">
							<text class="size32 c3">{{row == 1?obj.home_name:obj.away_name}}</text>
						</view>
						<view class="flexcenter">
							<view class="l-w" :class="{lwRed:item == 'L'}"
								v-for="(item,index) in row == 1?obj.home:obj.away" :key="index">
								{{item}}
							</view>
						</view>
						<!-- <view class="flexcenter" v-else>
							<view class="l-w" v-for="(item,index) in obj.away_site" :key="index">
								{{item}}
							</view>
						</view> -->
						<view class="list-left flex-end">
							<image src="../../static/image/match/expert_down_ico.png" class="right-icon"
								mode="widthFix"></image>
						</view>
					</view>
					<view :class="{actives:row==rowAcIndex}" class="table-list-item-content bgE5">
						<u-row justify="space-between" v-for="(item,index) in row == 1?obj.home_list:obj.away_list"
							:key="index">
							<view class="flex-col align-center">
								<text class="size32 Bold" v-if="row == 1"
									:style="{color:item.winner_id == obj.home_id?'#219430':'#DC3C23' }">{{item.home_display_score || 0}}</text>
								<text class="size32 Bold" v-else
									:style="{color:item.winner_id == obj.away_id?'#219430':'#DC3C23'}">{{item.home_display_score || 0}}</text>
								<text class="c6 size24">({{item.home_display_overs || 0}})</text>
							</view>
							<view class="flex-col align-center table-list-item-content-views">
								<view class="text-center size24 mg-bt10 c9">
									{{item.date}} <br>
									{{item.venue}}
								</view>
								<text class="c3 size28" style="text-align: center;">{{item.match_result}}</text>
							</view>
							<view class="flex-col align-center">
								<text class="c6 size24">{{row == 2?obj.home_name:obj.away_name}}</text>
								<text class="c3 size32n Bold">{{item.away_display_score || 0}}</text>
								<text class=" size24">({{item.away_display_overs || 0}})</text>
							</view>
						</u-row>
					</view>
				</view>
			</view>

		</view>

		<u-gap bgColor="#f3f3f3" height="24"></u-gap>

		<view class="main">
			<view class="mg-tp12 size32 c3">
				Team Strengths
			</view>
			<text class="size28 c6">
				{{ $t('match.labe87') }}
				</text>
			<view class="disflex mg-tp24">
				<view class="disflex-img">
					<image src="../../static/image/match/team_context_avatar.png" mode="widthFix"
						class="team-avatar mg-rt24"></image>
					<text>{{obj.home_win_num + obj.away_win_num + obj.no_result}}</text>
				</view>
				<view class="flex-col justify-between progress-l-w">
					<view>
						<view class="flex size28">
							<text class="c6">{{obj.home_name}} {{ $t('match.labe89') }}</text>
							<text class="c3">{{obj.home_win_num}}</text>
						</view>
						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8"
							:percentage="getNum(obj.home_win_num)" :showText="false"></u-line-progress>
						<!-- <view class="progress-box bgc8"></view> -->
					</view>
					<view>
						<view class="flex size28">
							<text class="c6">{{obj.away_name}} {{ $t('match.labe89') }}</text>
							<text class="c3">{{obj.away_win_num}}</text>
						</view>
						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8"
							:percentage="getNum(obj.away_win_num)" :showText="false"></u-line-progress>
					</view>
					<view>
						<view class="flex size28">
							<text class="c6">
								{{ $t('match.labe90') }}
							</text>
							<text class="c3">{{obj.no_result}}</text>
						</view>
						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8"
							:percentage="getNum(obj.no_result)" :showText="false"></u-line-progress>
					</view>
				</view>
			</view>

			<view class="recent" v-for="(item,index) in obj.historical_confrontation" :key="index">
				<view class="flex size32 c3">
					<text class="Bold">
						{{ $t('match.labe91') }}
						</text>
					<text class="size24 c9">
								{{ $t('match.labe92') }}
					</text>
				</view>
				<view class="flex mg-tp33">
					<view class="lns-wnr bg831">{{obj.home_name}}</view>
					<view class="lns-wnr bgc23">{{obj.away_name}}</view>
				</view>
				<view class="mg-tp24 flex align-start">
					<view>
						<text class="size32 c3 Bold">{{item.home_display_score}}</text>
						<view class="size24 c6">
							({{item.home_display_overs}})
						</view>
					</view>
					<view class="flex-col align-center">
						<view class="text-center size24 c9 text-center mg-bt10">
							{{item.date}} <br>
							{{item.venue}}
						</view>
						<text class="size28 c3" style="text-align: center;">{{item.match_result}}</text>
					</view>
					<view class="flex-col align-end">
						<text class="size32 c3 Bold">{{item.away_display_score}}</text>
						<text class="size24 c6">({{item.away_display_overs}})</text>
					</view>
				</view>
			</view>

		</view>

		<!-- <u-gap bgColor="#f3f3f3" height="24"></u-gap> -->

		<view class="main" style="display: none;">
			<view class="recent mg-tp12 recent2">
				<view class="flex size32 c3">
					<text class="Bold">
						{{ $t('match.labe88') }}
					</text>
					<view class="size24 c9">
						{{ $t('match.labe93') }}
					</view>
				</view>

				<view class="flex mg-tp33">
					<view class="lns-wnr bg831">LNS</view>
					<view class="lns-wnr bgc23">WNR</view>
				</view>

				<view class="mg-tp24 flex">
					<view>
						<text class="size32 c3 Bold">17</text>
					</view>
					<view class="flex driver-line">
						<text> </text>
						<view class="size28 cc6 text-center">{{ $t('match.labe94') }} <br>
							({{ $t('match.labe95') }})</view>
						<text> </text>
					</view>
					<view class="flex-col align-end">
						<text class="size32 c3 Bold">16</text>
					</view>
				</view>

				<view class="mg-tp24 flex">
					<image src="../../static/image/common/teams_avatar_ico@2x.png" mode="widthFix"
						class="team-vs-avatar"></image>
					<view class="flexcenter driver-line">
						<text> </text>
						<view class="size28 cc6 text-center">{{ $t('match.labe934') }} <br>
							({{ $t('match.labe95') }})</view>
						<text> </text>
					</view>
					<image src="../../static/image/common/teams_avatar_ico@2x.png" mode="widthFix"
						class="team-vs-avatar"></image>
				</view>

				<view class="flex size24 c9 mg-tp16">
					<text>
						{{ $t('match.labe96') }}
					</text>
					<text>
						{{ $t('match.labe97') }}
					</text>
				</view>
			</view>

			<u-row class="mg-tp50">
				<u-col span="6">
					<view class="flex size24 c6">
						<text>
						{{ $t('match.labe98') }}
							</text>
						<text>50%</text>
					</view>
					<view class="progrees-serve">
						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8" :percentage="50"
							:showText="false"></u-line-progress>
					</view>
				</u-col>
				<u-col span="6">
					<view class="flex size24 c6">
						<text>
						{{ $t('match.labe99') }}
							</text>
						<text>25%</text>
					</view>
					<view>
						<u-line-progress activeColor="#219430" inactiveColor="#C8C8C8" :percentage="25"
							:showText="false"></u-line-progress>
					</view>
				</u-col>
			</u-row>
			<u-row class="mg-tp50">
				<u-col span="6">
					<view class="flex size24 c6">
						<text>
						{{ $t('match.labe98') }}
							</text>
						<text>50%</text>
					</view>
					<view class="progrees-serve">
						<u-line-progress activeColor="#DC3C23" inactiveColor="#C8C8C8" :percentage="50"
							:showText="false"></u-line-progress>
					</view>
				</u-col>
				<u-col span="6">
					<view class="flex size24 c6">
						<text>
						{{ $t('match.la') }}
							</text>
						<text>25%</text>
					</view>
					<view>
						<u-line-progress activeColor="#219430" inactiveColor="#C8C8C8" :percentage="25"
							:showText="false"></u-line-progress>
					</view>
				</u-col>
			</u-row>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				rowAcIndex: null,
				obj: {

				}
			};
		},
		onLoad(option) {
			// 35240243
			this.getDetail(option.match_id)
		},
		methods: {
			getDetail(id) {
				uni.$u.http.post('/api/Cricket/cricket_match_detail_fantasy_info', {
					match_id: id
				}).then(res => {
					this.obj = res;
				}).catch(res => {})
			},
			// 获取百分比
			getNum(num) {
				let {
					home_win_num,
					away_win_num,
					no_result
				} = this.obj;
				let total = home_win_num + away_win_num + no_result;

				return (num / total) * 100
			}
		}
	}
</script>

<style lang="scss">
	.select-head {
		position: sticky;
		top: 0;
		z-index: 99;
		background-color: $color1;

		.select-tab {
			padding: 0 28rpx;
			margin-top: 20rpx;
		}
	}

	.main {
		padding: 24rpx 28rpx;

		.heander-info {
			background: url(../../static/image/match/team_context.png) center center/ 100% auto no-repeat;
			border-radius: 10rpx;

			.team-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.vs-icon {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.table-list {
			box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			overflow: hidden;
			margin-top: 24rpx;

			.table-list-item {
				.table-list-item-header {
					background: #FFFFFF;
					padding: 36rpx 0;

					.list-left {
						width: 86rpx;
						padding: 0 24rpx;

						image {
							width: 19rpx;
							height: 19rpx;
						}
					}

					.l-w {
						width: 48rpx;
						height: 48rpx;
						background-color: #219430;
						margin-left: 16rpx;
						text-align: center;
						color: #FFFFFF;

						&:first-child {
							margin-left: 0;
						}
					}

					.lwRed {
						background-color: #DC3C23;
						margin-left: 16rpx;
					}

				}

				.table-list-item-content {
					height: 0;
					overflow: hidden;

					.u-row {
						padding: 24rpx 0;
						border-bottom: 1rpx solid #ccc;

						view {
							padding: 0 24rpx;
						}

						.table-list-item-content-views {
							flex: 1;
						}
					}
				}

				.actives {
					height: inherit;
				}
			}
		}

		.team-avatar {
			width: 227rpx;
			height: 216rpx;
			border-radius: 10rpx;
		}

		.disflex-img {
			position: relative;

			text {
				position: absolute;
				right: 42rpx;
				bottom: 22rpx;
				color: #fff;
				font-size: 40rpx;
			}
		}

		.progress-l-w {
			flex: 1;

			.progress-box {
				height: 16rpx;
				width: 100%;
				border-radius: 30rpx;
			}
		}

		.recent {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.3);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin-top: 24rpx;
			padding: 24rpx;

			.lns-wnr {
				padding: 0 17rpx;
				display: block;
				color: #FFFFFF;
				font-size: 24rpx;
			}

			.team-vs-avatar {
				width: 66rpx;
				height: 66rpx;
			}

			.driver-line {
				flex: 1;

				text {
					display: block;
					width: 100%;
					flex: 1;
					height: 1rpx;
					background-color: #ccc;
					margin: 0 22rpx;
				}

				view {
					margin: 0 8rpx;
					color: #666;
					font-size: 24rpx;
				}
			}
		}

		.recent2 {
			box-shadow: none;
		}

		.progrees-serve {
			transform: rotateZ(180deg);
		}
	}
</style>