onecric_h5/pages/Match/expert-analysis.vue

<template>
	<view>
		<view class="select-head">
			<u-navbar :leftText="$t('navbar.txt')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
		</view>
		<view class="main">
			<!-- <image src="../../static/image/match/expert_context.png" :name="'BASED ON ANALYSIS FROM 7 EXPERTS'" class="heand-pic" mode="aspectFit"></image> -->
			<view class="heand-pic flexcenter">
				<!-- BASED ON ANALYSIS FROM 7 EXPERTS -->
				{{ $t('match.lab33') }}
			</view>
			<view class="size32 expert-text text-center">
				<!-- Expert Predictions Summary -->
				{{ $t('match.lab34') }}
			</view>
			<view class="size28 expert-text text-center">
				<!-- Winning Chances -->
				{{ $t('match.lab35') }}
			</view>
			
			<view class="mg-tp36">
				<u-row justify="space-between">
					<text class="expert-text size28">
						<!-- Welsh Fire -->
					{{ $t('match.lab36') }}
					</text>
					<text class="expert-text size28">
						<!-- Southern Brave -->
					{{ $t('match.lab37') }}
					</text>
				</u-row>
				<u-row justify="space-between" class="mg-tp15">
					<image src="../../static/image/match/star.png" mode="aspectFit" class="team-icon mg-lt24"></image>
					<image src="../../static/image/match/star.png" mode="aspectFit" class="team-icon mg-rt24"></image>
				</u-row>
			</view>
			
			<view class="mg-tp36">
				<u-row justify="space-between">
					<text class="size28 c3">40%</text>
					<text class="size28 c3">60%</text>
				</u-row>
				<u-line-progress :percentage="40" height="16" activeColor="#585858" inactiveColor="#DC3C23" :showText="false" class="mg-tp12"> 
						<!-- <text class="u-percentage-slot">{{30}}%</text> -->
				</u-line-progress>
			</view>
			
			<view class="mg-tp61">
				<text class="expert-text size28">
					<!-- Pitch Report -->
				{{ $t('match.lab38') }}
				</text>
				<u-row class="pd-lt90 pd-rt50" align="bottom">
					<u-line color="#EEA831" direction="col" length="104rpx" dashed></u-line>
					<view class="size24 c6 mg-lt10 mg-rt25 mg-bt40">
						<text class="keep-all">
							<!-- Batting Pitch -->
						{{ $t('match.lab39') }}
						</text>
						<text class="c3 Bold">0%</text>
					</view>
					<u-line color="#EEA831" direction="col" length="171rpx" dashed></u-line>
					<view class="size24 c6 mg-lt10 mg-rt32 mg-bt106">
						<text class="keep-all">
							<!-- Balanced Pitch -->
						{{ $t('match.lab40') }}
						</text>
						<text class="c3 Bold">0%</text>
					</view>
					<u-line color="#EEA831" direction="col" length="105rpx" dashed></u-line>
					<view class="size24 c6 mg-lt10 mg-bt40">
						<text class="keep-all">
							<!-- Bowling Pitch -->
						{{ $t('match.lab41') }}
						</text>
						<text class="c3 Bold">0%</text>
					</view>
				</u-row>
				<image src="../../static/image/match/expert_pitch.png" mode="aspectFit" class="pitch-pic"></image>
			</view>
			
			<view class="mg-tp36 mg-bt12">
				<text class="expert-text size28 Bold">
					<!-- Pitch is good for -->
						{{ $t('match.lab42') }}
				</text>
				<u-row class="pd-rt50 mg-tp24">
					<view class="flex-start good-for">
						<image src="../../static/image/match/expert_pace_ico.png" mode="aspectFit" class="pace-pic mg-rt16"></image>
						<view class="flex-col size24">
							<text class="c3">67%</text>
							<text class="c6">
								<!-- Say Pace -->
						{{ $t('match.lab43') }}
							</text>
						</view>
					</view>
					<view class="flex-start good-for mg-lt24">
						<image src="../../static/image/match/expert_spin_ico.png" mode="aspectFit" class="pace-pic mg-rt16"></image>
						<view class="flex-col size24">
							<text class="c3">33%</text>
							<text class="c6">
								<!-- Say Spin -->
						{{ $t('match.lab44') }}
							</text>
						</view>
					</view>
				</u-row>
			</view>
		</view>
		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
		<view class="main">
			<view class="flex mg-tp36">
				<text class="size28 c3">
					<!-- Top Player Picks -->
						{{ $t('match.lab45') }}
				</text>
				<text class="size24 c6">
					<!-- Updated 13h 48m ago -->
						{{ $t('match.lab46') }}
				</text>
			</view>
			<view class="bgE5">
				<view class="flex bfb">
					<text class="size24 c6">
						<!-- PLAYERS PICKED MOST -->
						{{ $t('match.lab47') }}
					</text>
					<text class="size24 c6">
						{{ $t('match.lab48') }} %
					</text>
				</view>
			</view>
			
			<view class="list mg-tp30">
				<view class="flex mg-bt24 c3">
					<text class="size28">W Khan <text class="size24 c6">(ALL)</text></text>
					<text>100.0</text>
				</view>
				<view class="flex mg-bt24 c3">
					<text class="size28">D Qureshi<text class="size24 c6">(BOWL)</text></text>
					<text>100.0</text>
				</view>
				<view class="flex c3">
					<text class="size28">A Jotin <text class="size24 c6">(BOWL)</text></text>
					<text>100.0</text>
				</view>
			</view>
		</view>
		
		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
		
		<view class="main">
			<u-row justify="space-between" align="top">
				<view class="flex-col align-start">
					<text class="size32 c3">
						<!-- Head to Head Teams -->
						{{ $t('match.lab49') }}
					</text>
					<text class="size24 c6">
						<!-- 2 Teams -->
						{{ $t('match.lab50') }}
					</text>
				</view>
				<view class="select-range">
					<uni-data-select
					  v-model="value"
					  :localdata="range"
					  @change="change"
					></uni-data-select>
				</view>
			</u-row>
			
			<view class="showing mg-tp24" v-for="item in 2" :key="item">
				<u-row justify="space-between">
					<view class="flexcenter">
						<image src="../../static/image/common/teams_avatar_ico@2x.png" mode="widthFix" class="team-avatar mg-rt16"></image>
						<text class="size28 c3 Bold">
							<!-- Kartik Vyas -->
						{{ $t('match.lab51') }}
						</text>
					</view>
					<image src="../../static/image/match/schedule_adorn_ico@2x.png" mode="widthFix" class="team-icon"></image>
				</u-row>
				<view class="green-info mg-tp24">
					<view class="flex cfff size24">
						<view class="team1">
							<!-- TEAM1 -->
						{{ $t('match.lab52') }}
						</view>
						<text>
							<!-- 14h 14m ago -->
						{{ $t('match.lab53') }}
						</text>
					</view>
					<view class="flex align-end mg-tp24">
						<view class="flex-col-between size24 cfff">
							<view class="pbd">
								<view class="flex">
									<text>PBD</text>
									<text>DDD</text>
								</view>
								<view class="flex">
									<text>7</text>
									<text class="mg-rt32">4</text>
								</view>
							</view>
							<text class="mg-bt9">
								Cr:98.5 <text class="size24">/100</text>
							</text>
						</view>
						<view class="flexcenter">
							<view class="c-vc mg-rt90">
								<image src="../../static/image/match/player_c_ico.png" mode="aspectFit" class="c-icon"></image>
								<image src="../../static/image/match/teams_avatar_ico@2x.png" mode="widthFix" class="team-member-avatar" :name="'W Khan'"></image>
							</view>
							<view class="c-vc mg-rt36">
								<image src="../../static/image/match/player_vc_ico.png" mode="aspectFit" class="c-icon"></image>
								<image src="../../static/image/match/teams_avatar_ico@2x.png" mode="widthFix" class="team-member-avatar" :name="'RA Ali'"></image>
							</view>
						</view>
					</view>
					<view class="flex size24 cfff mg-tp32">
						<text>WK 2</text>
						<text>BAT 2</text>
						<text>ALL 2</text>
						<text>BOWL 2</text>
					</view>
				</view>
					<view class="flex mg-tp9">
						<text class="size24 c6">
							<!-- See this team -->
						{{ $t('match.lab54') }}
						</text>
						<image src="../../static/image/match/next_ico@2x.png" mode="heightFix" class="arrow-right"></image>
					</view>
			</view>
			
			<text class="size28 c6 mg-tp24">
				<!-- Showing 2/2 -->
				{{ $t('match.lab55') }}
			</text>
			
		</view>
		
		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
		
		<view class="main">
			<u-row justify="space-between" align="top">
				<view class="flex-col align-start">
					<text class="size32 c3">
						<!-- Head to Head Teams -->
						{{ $t('match.lab49') }}
					</text>
					<text class="size24 c6">
						<!-- 2 Teams -->
						{{ $t('match.lab50') }}
					</text>
				</view>
				<view class="select-range">
					<uni-data-select
					  v-model="value"
					  :localdata="range"
					  @change="change"
					></uni-data-select>
				</view>
			</u-row>
			
			<view class="showing mg-tp24" v-for="item in 2" :key="item">
				<u-row justify="space-between">
					<view class="flexcenter">
						<image src="../../static/image/common/teams_avatar_ico@2x.png" mode="widthFix" class="team-avatar mg-rt16"></image>
						<text class="size28 c3 Bold">Kartik Vyas</text>
					</view>
					<image src="../../static/image/match/schedule_adorn_ico@2x.png" mode="widthFix" class="team-icon"></image>
				</u-row>
				<view class="green-info mg-tp24">
					<view class="flex cfff size24">
						<view class="team1">
							<!-- TEAM1 -->
						{{ $t('match.lab52') }}
						</view>
						<text>
							<!-- 14h 14m ago -->
						{{ $t('match.lab53') }}
						</text>
					</view>
					<view class="flex align-end mg-tp24">
						<view class="flex-col-between size24 cfff">
							<view class="pbd">
								<view class="flex">
									<text>PBD</text>
									<text>DDD</text>
								</view>
								<view class="flex">
									<text>7</text>
									<text class="mg-rt32">4</text>
								</view>
							</view>
							<text class="mg-bt9">
								Cr:98.5 <text class="size24">/100</text>
							</text>
						</view>
						<view class="flexcenter">
							<view class="c-vc mg-rt90">
								<image src="../../static/image/match/player_c_ico.png" mode="aspectFit" class="c-icon"></image>
								<image src="../../static/image/match/teams_avatar_ico@2x.png" mode="widthFix" class="team-member-avatar" :name="'W Khan'"></image>
							</view>
							<view class="c-vc mg-rt36">
								<image src="../../static/image/match/player_vc_ico.png" mode="aspectFit" class="c-icon"></image>
								<image src="../../static/image/match/teams_avatar_ico@2x.png" mode="widthFix" class="team-member-avatar" :name="'W Khan'"></image>
							</view>
						</view>
					</view>
					<view class="flex size24 cfff mg-tp32">
						<text>WK 2</text>
						<text>BAT 2</text>
						<text>ALL 2</text>
						<text>BOWL 2</text>
					</view>
				</view>
					<view class="flex mg-tp9">
						<text class="size24 c6">
							<!-- See this team -->
						{{ $t('match.lab54') }}
						</text>
						<image src="../../static/image/match/next_ico@2x.png" mode="heightFix" class="arrow-right"></image>
					</view>
			</view>
			
			<view class="size28 c6 mg-tp24">
				<!-- Showing 2/2 -->
				{{ $t('match.lab55') }}
			</view>
			
		</view>
		
		<view class="main bgE5">
			<text class="size32 c3 Bold">
				<!-- Doing your own research? -->
				{{ $t('match.lab56') }}
			</text>
			<view class="size32 c6 mg-tp10">
				<!-- Enjoy detailed stats and analysis -->
				{{ $t('match.lab57') }}
			</view>
			<view class="list mg-tp27">
				<u-row class="list-item mg-bt24">
					<image src="../../static/image/match/houser.png" mode="aspectFit" class="title-pic"></image>
					<view class="list-item-view">
						<text class="size28 C3 Bold">
							<!-- Player Stats -->
						{{ $t('match.lab58') }}
						</text>
						<view class="size24 c6">
							{{ $t('match.lab59') }}<br>
							<!-- career stats -->
						{{ $t('match.lab60') }}
						</view>
					</view>
					<image src="../../static/image/match/next_ico@2x.png" mode="heightFix" class="right-icon"></image>
				</u-row>
				<u-row class="list-item mg-bt24">
					<image src="../../static/image/match/matches_detail_venue_ic@2x.png" mode="aspectFit" class="title-pic"></image>
					<view class="list-item-view">
						<text class="size28 C3 Bold">
							<!-- Venue Details -->
						{{ $t('match.lab61') }}
						</text>
						<view class="size24 c6">
							{{ $t('match.lab62') }}<br>
							<!-- muchh more -->
						{{ $t('match.lab63') }}
						</view>
					</view>
					<image src="../../static/image/match/next_ico@2x.png" mode="heightFix" class="right-icon"></image>
				</u-row>
				<u-row class="list-item">
					<image src="../../static/image/match/matches_detail_team_ico.png" mode="aspectFit" class="title-pic"></image>
					<view class="list-item-view">
						<text class="size28 C3 Bold">
							<!-- Team Compare -->
						{{ $t('match.lab64') }}
						</text>
						<view class="size24 c6">
							{{ $t('match.lab65') }}<br>
							<!-- record -->
						{{ $t('match.lab66') }}
						</view>
					</view>
					<image src="../../static/image/match/next_ico@2x.png" mode="heightFix" class="right-icon"></image>
				</u-row>
			</view>
		</view>
		
		<view class="views flex-start">
			<image src="../../static/image/match/expert_Indicate_ico.png" mode="aspectFit" class="views-icon mg-rt13"></image>
			<text class="size24 c6">
				{{ $t('match.lab67') }}
			</text>
		</view>
		
		<view class="detailed flex-start bgE5">
			<image src="../../static/image/match/schedule_adorn_ico@2x.png" mode="aspectFit" class="detailed-icon mg-rt24"></image>
			<text class="size24 c6">
				{{ $t('match.lab68') }}
			</text>
		</view>
		
		<u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
			<view>
				<view class="flex header-box">
					<text class="size24 c6">
						<!-- Sort By -->
						{{ $t('match.lab69') }}
					</text>
					<image src="../../static/image/match/close_ico.png" mode="heightFix" class="close-icon" @click="close"></image>
				</view>
				<view class="text-box">
					<text class="size32 c3 Bold">
						<!-- Expert Performance -->
						{{ $t('match.lab70') }}
					</text>
					<view class="size28 c6">
						<!-- (based on recent performance of experts) -->
						{{ $t('match.lab71') }}
					</view>
				</view>
				<view class="text-box">
					<text class="size32 c3 Bold">
						<!-- Last Updated -->
						{{ $t('match.lab72') }}
					</text>
					<view class="size28 c6">
						<!-- (based on last updated time of the article) -->
						{{ $t('match.lab73') }}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				value:0,
				range: [
					{ value: 0, text: this.$t('match.lab74') },
					{ value: 1, text: this.$t('match.lab74') },
					{ value: 2, text: this.$t('match.lab74') },
				],
			};
		},
		methods:{
			open() {
			  // console.log('open');
			  this.show = true
			},
			close() {
			  this.show = false
			  // console.log('close');
			},
			change(e) {
			  console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss">
	.header-box{
		padding: 11rpx 33rpx;
		.close-icon{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.text-box{
		padding: 36rpx 33rpx;
		border-top: 1rpx solid #E5E5E5;
	}
	.select-head {
		position: sticky;
		top: 0;
		z-index: 99;
		background-color: $color1;
		.select-tab {
			padding: 0 28rpx;
			margin-top: 20rpx;
		}
	}
	.main{
		padding: 24rpx 28rpx;
		
		.heand-pic{
			width: 694rpx;
			height: 116rpx;
			background: url(../../static/image/match/expert_context.png) center center/100% auto no-repeat;
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: bold;
			// position: relative;
			// &:before{
			// 	content: attr(name);
			// 	position: absolute;
			// 	left: 50%;
			// 	top: 50%;
			// 	margin-left: -50%;
			// 	margin-top: -50%;
			// 	z-index: 2;
			// 	font-size: 28rpx;
			// 	color: #FFFFFF;
			// 	font-weight: bold;
			// }
		}
		.team-icon{
			width: 56rpx;
			height: 56rpx;
		}
		.pitch-pic{
			width: 694rpx;
			height: 68rpx;
		}
		.good-for{
			width: 250rpx;
			height: 78rpx;
			background: #E5E5E5;
			align-items: center;
			padding-left: 24rpx;
			border-radius: 43rpx;
			.pace-pic{
				width: 54rpx;
				height: 54rpx;
			}
		}
		.bfb{
			margin-top: 24rpx;
			padding: 12rpx 24rpx;
		}
		
		.select-range{
			width: 305rpx;
		}
		
		.showing{
			padding: 24rpx 24rpx 8rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
			border-radius: 10rpx;
			.team-avatar{
				width: 90rpx;
				height: 90rpx;
				border-radius: 200rpx;
			}
			.team-icon{
				width: 36rpx;
				height: 36rpx;
			}
			
			
			.green-info{
				background: #408335;
				border-radius: 10rpx;
				padding: 24rpx;
				.team1{
					padding: 1rpx 31rpx;
					background: #2B8744;
				}
				.pbd{
					width: 138rpx;
				}
				.c-vc{
					position: relative;
					.c-icon{
						width: 30rpx;
						height: 30rpx;
						opacity: 0.4;
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
					}
					.team-member-avatar{
						position: relative;
						width: 108rpx;
						height: 108rpx;
						&:before{
							content: attr(name);
							position: absolute;
							bottom: -20rpx;
							left: 50%;
							word-break: break-all;
							margin-left: -50%;
							background-color: #fff;
							padding: 1rpx 20rpx;
							font-size: 24rpx;
							color: #333;
							line-height: 24rpx;
						}
					}
				}
			}
			.arrow-right{
				width: 48rpx;
				height: 48rpx;
			}
			
		}
		
		.list{
			.list-item{
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding: 24rpx;
				.list-item-view{
					flex: 1;
				}
				.right-icon{
					width: 48rpx;
					height: 48rpx;
				}
				.title-pic{
					width: 68rpx;
					height: 68rpx;
					margin-right: 24rpx;
				}
			}
		}
	}
	
	.views{
		background-color: #fff;
		padding: 36rpx 28rpx;
		.views-icon{
			width: 83rpx;
			height: 83rpx;
		}
	}
	.detailed{
		padding: 24rpx 28rpx;
		.detailed-icon{
			width: 36rpx;
			height: 36rpx;
		}
	}
</style>