onecric_h5/pages/Match/player-stats.vue

<template>
	<view class="select">
		<view class="select-head">
			<u-navbar :leftText="$t('navbar.txt1')" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
			<view class="select-tab">
				<u-tabs
				:list="list1"
				@click="changeTab" 
				lineHeight="4" 
				lineColor="#DC3C23"   
				:activeStyle="{color:'#DC3C23',fontSize:'32rpx',fontWeight:'Bold'}" 
				:inactiveStyle="{color:'#fff',fontSize:'32rpx'}"
				></u-tabs>
			</view>
		</view>
		<view class="main">
			
			<scroll-view scroll-x="true" :scroll-left="left * -1" style="width: 100%;overflow: hidden;" @touchstart="mousedown2" @scroll="moveTo2" @mouseup="endMove">
			<view class="header">
			<!-- <view class="header" :style="{transform:`translateX(${left * 2}rpx)`}"> -->
				<view class="header-item fixedLeft twoSelft3 bgE5" :style="{zIndex:30}">
					<text class="size24 c6">
						<!-- Last Updated 8 days ago -->
					{{ $t('match.labe7') }}
					</text>
					<view class="lineups size28 cfff">
						<!-- Lineups out -->
					{{ $t('match.labe8') }}
					</view>
				</view>
				
				<view class="header-item mg-lt388">
					<text class="size28 c3 Bold">
						<!-- Dream11 Data -->
					{{ $t('match.labe9') }}
					</text>
				</view>
				
				<view class="header-item">
					<u-row>
						<text class="size28 c3 Bold">
							<!-- Recent Points -->
						{{ $t('match.labe10') }}
						</text>
						<view class="hover-show">
							<image src="../../static/image/match/player_prompt_ico.png" mode="aspectFit" class="header-icon mg-lt16" @click="pointsShow = !pointsShow"></image>
							<view class="hover-show-main width468 size24" v-if="pointsShow">
								<view class="arrow-icon"> </view>
								<text class="c3">
									<!-- Fantasy points scored by a player in each of their last 5 matches in the tour's format -->
								{{ $t('match.labe11') }}
								</text>
								<view class="c9 mg-tp24">
									<!-- POINTS -->
								{{ $t('match.labe12') }}
								</view>
								<view class="c3 mg-tp24 flex-start">
									<text>14</text>,
									<text class="dot-slot">120</text>,
									<view class="mg-rt24">132</view>
									<u-line direction="col" length="26rpx" color="#333333"></u-line>
									<view class="mg-lt24">25</view>,
									<text class="dot-slot">180</text>,
								</view>
								<view class="c9 size24 mg-tp24">
									<text class="mg-rt51">
										<!-- In this tour -->
								{{ $t('match.labe13') }}
									</text>
									<text>
										<!-- Before this tour -->
								{{ $t('match.labe14') }}
									</text>
								</view>
								<u-row class="mg-tp36">
									<view class="dot"> </view>
									<text class="c3"> : 
										<!-- Featured in the Best Fantasy XI  -->
								{{ $t('match.labe15') }}
									</text>
									<image src="../../static/image/match/matches_detail_dt_ico@2x.png" mode="aspectFit" class="dt-icon"></image>
								</u-row>
							</view>
						</view>
					</u-row>
					<view class="size24 c6">
						<!-- Last 5 matches of The Hundred -->
								{{ $t('match.labe16') }}
					</view>
				</view>
				
				<view class="header-item">
					<u-row>
						<text class="size28 c3 Bold">
							<!-- The Hundred Stats -->
								{{ $t('match.labe17') }}
						</text>
						<view class="hover-show">
							<image src="../../static/image/match/player_prompt_ico.png" mode="aspectFit" class="header-icon mg-lt16" @click="pointsShow = !pointsShow"></image>
							<view class="hover-show-main width468 size24 c3" v-if="pointsShow">
								<view class="arrow-icon"> </view>
								<text>
									<!-- Based on player's performance in The Hundred -->
								{{ $t('match.labe18') }}
								</text>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
										{{ $t('match.lab83') }} <br>
										<!-- Played -->
								{{ $t('match.labe19') }}
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- Total number of matches a 
										player has featured in. -->
								{{ $t('match.labe21') }}
									</u-col>
								</u-row>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
								{{ $t('match.labe22') }}<br>
										<!-- Match -->
								{{ $t('match.labe23') }}
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- Average points a player has
										scored per match. -->
								{{ $t('match.labe24') }}
									</u-col>
								</u-row>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4" class="flex">
										<u-row>
											<image src="../../static/image/match/matches_detail_dt_ico@2x.png" mode="aspectFit" class="dt-icon"></image><text>%</text>
										</u-row>
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- How often a player has
										featured in the Dream Team. -->
								{{ $t('match.labe25') }}
									</u-col>
								</u-row>
							</view>
						</view>
					</u-row>
				</view>
				
				<view class="header-item">
					<u-row>
						<text class="size28 c3 Bold">
							<!-- Experts Sats -->
								{{ $t('match.labe26') }}
						</text>
						<view class="hover-show">
							<image src="../../static/image/match/player_prompt_ico.png" mode="aspectFit" class="header-icon mg-lt16"></image>
							<view class="hover-show-main width468 size24 c3" v-if="pointsShow">
								<view class="arrow-icon"> </view>
								<text>
									<!-- Based on selection of players by Experts -->
								{{ $t('match.labe27') }}
								</text>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
										{{ $t('match.labe28') }}<br>
										<!-- Tesm -->
								{{ $t('match.labe29') }}
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- Percentage of Expert Teams
										that a player features in. -->
								{{ $t('match.labe30') }}
									</u-col>
								</u-row>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
										<u-row>
											<text>
												<!-- % Sel -->
											{{ $t('match.labe31') }}
											</text>
											<image src="../../static/image/match/player_c_ico.png" mode="aspectFit" class="vc-icon"></image>
										</u-row>
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- Percentage of Expert Teams 
										that a player is captain in. -->
								{{ $t('match.labe32') }}
									</u-col>
								</u-row>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
										<u-row>
											<text>
												<!-- % Sel -->
											{{ $t('match.labe31') }}
											</text>
											<image src="../../static/image/match/player_vc_ico.png" mode="aspectFit" class="vc-icon"></image>
										</u-row>
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- Percentage of Experts Teams 
										that a player is vice-captain in. -->
								{{ $t('match.labe33') }}
									</u-col>
								</u-row>
							</view>
						</view>
					</u-row>
					<view class="size24 c6">
						<!-- Based on 11 Expert Teams -->
								{{ $t('match.labe34') }}
					</view>
				</view>
				
				<view class="header-item">
					<u-row>
						<text class="size28 c3 Bold">
							<!-- Player Performance -->
								{{ $t('match.labe35') }}
						</text>
						<view class="hover-show">
							<image src="../../static/image/match/player_prompt_ico.png" mode="aspectFit" class="header-icon mg-lt16"></image>
							<view class="hover-show-main width468 size24 c3" v-if="pointsShow">
								<view class="arrow-icon"> </view>
								<text>
									<!-- Performance indicators for each attribute -->
								{{ $t('match.labe36') }}
								</text>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
										<!-- Stadium -->
								{{ $t('match.labe37') }}
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- player's performance at this
										venue -->
								{{ $t('match.labe38') }}
									</u-col>
								</u-row>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
										<!-- Opponent -->
								{{ $t('match.labe39') }}
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- Player's performance
										against this opposition -->
								{{ $t('match.labe40') }}
									</u-col>
								</u-row>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
										<!-- Last 5 -->
								{{ $t('match.labe41') }}
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- Player's performance in 
										their last 5 matches -->
								{{ $t('match.labe42') }}
									</u-col>
								</u-row>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
										<!-- This Tour -->
								{{ $t('match.labe43') }}
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- Player performance in this 
										Tour -->
								{{ $t('match.labe44') }}
									</u-col>
								</u-row>
								<u-row class="mg-tp36" :gutter="20">
									<u-col span="4">
										<!-- In GBR -->
								{{ $t('match.labe45') }}
									</u-col>
									<u-line direction="col" color="#ccc" length="65rpx"></u-line>
									<u-col span="7" class="mg-lt16">
										<!-- Player's performance in this
										country -->
								{{ $t('match.labe46') }}
									</u-col>
								</u-row>
							</view>
						</view>
					</u-row>
					<view class="size24 c6">
						<!-- Form based on The Hundred -->
								{{ $t('match.labe47') }}
					</view>
				</view>
				
				<view class="header-item">
					<u-row justify="space-around">
						<u-col span="4">
							<view class="flexcenter">
								<text class="size28 c6">
									<!-- Good -->
								{{ $t('match.labe48') }}
								</text>
								<view class="jiantou-icon icongreen">
									&uarr;
								</view>
							</view>
						</u-col>
						<u-col span="4">
							<view class="flexcenter">
								<text class="size28 c6">
									<!-- Avg -->
								{{ $t('match.labe49') }}
								</text>
								<view class="jiantou-icon iconyellow">
									&rarr;
								</view>
							</view>
						</u-col>
						<u-col span="4">
							<view class="flexcenter">
								<text class="size28 c6">
									<!-- Bad -->
								{{ $t('match.labe50') }}
								</text>
								<view class="jiantou-icon iconred">
									&darr;
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="header-two bgE5 gridrow83">
			<!-- <view class="header-two bgE5 gridrow83" :style="{transform:`translateX(${left * 2}rpx)`}"> -->
				<view class="header-two-item flex-start fixedLeft twoSelft2 bgE5" :style="{zIndex:30}">
					<text class="size24 c6">
						<!-- Team -->
								{{ $t('match.labe51') }}
					</text>
					<text class="size24 c6 mg-lt63">
						<!-- Players -->
								{{ $t('match.labe52') }}
					</text>
				</view>
				<view class="header-two-item flex mg-lt388">
					<text class="size24 c6">{{ $t('match.labe28') }}
					<br> 
					<!-- Users  -->
					{{ $t('match.labe53') }}
					&darr;</text>
					<text class="size24 c6">
						<!-- Credits -->
					{{ $t('match.labe54') }}
					</text>
				</view>
				<view class="header-two-item flex-end">
					<text class="size24 c6"><text class="cC23">*</text>
					<!-- Part of the dream team -->
					{{ $t('match.labe55') }}
				</text>
				</view>
				
				<u-row class="header-two-item">
					<u-col span="4">
						<view class="size24 c6 text-center">
							{{ $t('match.lab83') }} <br>
							<!-- Played -->
						{{ $t('match.labe19') }}
						</view>
					</u-col>
					<u-col span="4">
						<view class="size24 c6">
							{{ $t('match.labe20') }}<br>
							<!-- Match -->
					{{ $t('match.labe21') }}
						</view>
					</u-col>
					<u-col span="4">
						<view class="size28 c6 flex-end">
							<image src="../../static/image/match/matches_detail_dt_ico@2x.png" mode="aspectFit" class="dt"></image><text>%</text>
						</view>
					</u-col>
				</u-row>
				
				<u-row class="header-two-item">
					<u-col span="4">
						<view class="size24 c6 text-center">
							{{ $t('match.labe28') }}<br>
							<!-- Team -->
							{{ $t('match.labe51') }}
						</view>
					</u-col>
					<u-col span="4">
						<view class="size24 c6 flexcenter">
							<text>
								<!-- % Sel -->
						{{ $t('match.labe31') }}
							</text><image src="../../static/image/match/player_c_ico.png" mode="aspectFit" class="c-icon"></image>
						</view>
					</u-col>
					<u-col span="4">
						<view class="size24 c6 flex-end">
							<text>
								<!-- % Sel -->
						{{ $t('match.labe31') }}
							</text><image src="../../static/image/match/player_vc_ico.png" mode="aspectFit" class="c-icon"></image>
						</view>
					</u-col>
				</u-row>
				
				<view class="header-two-item flex-start">
					<text class="size24 c6">
						<!-- Stadium -->
						{{ $t('match.labe37') }}
					</text>
					<text class="size24 c6 mg-lt63">
						<!-- Opponent -->
						{{ $t('match.labe39') }}
					</text>
				</view>
				
				<u-row class="header-two-item">
					<u-col span="4">
						<view class="flexcenter">
							<text class="size24 c6">
								<!-- Last 5 -->
								{{ $t('match.labe41') }}
							</text>
						</view>
					</u-col>
					<u-col span="4">
						<view class="flexcenter">
							<text class="size24 c6">
								<!-- This Tour -->
								{{ $t('match.labe43') }}
							</text>
						</view>
					</u-col>
					<u-col span="4">
						<view class="flexcenter">
							<text class="size24 c6">
								<!-- In GBR -->
								{{ $t('match.labe45') }}
							</text>
						</view>
					</u-col>
				</u-row>
			</view>
			</scroll-view>
			<scroll-view scroll-x="true" :scroll-top="top2 * -1" :scroll-left="left2 * -1" scroll-y="true" style="width: 100%;height: calc(100vh - 432rpx);overflow: hidden;" @touchstart="mousedown" @scroll="moveTo"  @mouseup="endMove">
				<view>
					<view class="header-two gridrow180" v-for="(item, index) in 20" :key="index">
						<view class="header-two-item flex-start fixedLeft twoSelft" :style="{transform:`translateY(${top * 2}rpx)`,zIndex:2}" @touchmove="moveDan">
							<image src="../../static/image/common/teams_avatar_ico@2x.png" lnsmnr='LNS' class="avatar-lns" mode="aspectFill"></image>
							<view class="flex-col align-start">
								<text class="size24 c6">AR</text>
								<text class="size28 c3 Bold">
									<!-- D Pretorius -->
									{{ $t('match.labe56') }}
								</text>
								<text class="size24 c3">•
									<!-- Announced -->
								{{ $t('match.labe57') }}
								</text>
							</view>
						</view>
						<view class="header-two-item flex">
							<view class="size28 c3 numb123">89.3</view>
							<view class="size28 c3">9</view>
						</view>
						<view class="header-two-item flex-end">
							<view class="size28 c3">
								<text>29</text>,
								<text class="dot-slot">28</text>,
								<text>18</text>,
								<text class="dot-slot">42</text>,
								<text class="dot-slot">103</text>,
								</view>
						</view>
						<view class="header-two-item flex">
							<view class="size28 c3 text-center mg-lt28">
								2
							</view>
							<view class="size28 c3">
								59
							</view>
							<view class="size28 c6 flexcenter">
								59
							</view>
						</view>
						
						
						<u-row class="header-two-item">
							<u-col span="4">
								<view class="size28 c3 text-center">
									88.2
								</view>
							</u-col>
							<u-col span="4">
								<view class="size28 c3 flexcenter">
									59
								</view>
							</u-col>
							<u-col span="4">
								<view class="size28 c3 flexcenter">
									59
								</view>
							</u-col>
						</u-row>
						
						<view class="header-two-item flex-start">
							<view class="iconred mg-lt16">
								&darr;
							</view>
							<view class="icongreen mg-lt140">
								&uarr;
							</view>
						</view>
						
						<u-row class="header-two-item">
							<u-col span="4">
								<view class="flexcenter">
									<view class="icongreen">
										&uarr;
									</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="flexcenter">
									<view class="icongreen">
										&uarr;
									</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="flexcenter">
									<view class="icongreen">
										&uarr;
									</view>
								</view>
							</u-col>
						</u-row>
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pointsShow:false,
				list1:[
					{
						name: 'ALL',
					},
					{
						name: 'WK',
					},
					{
						name: 'BAT',
					},
					{
						name: 'BOWL',
					},
					{
						name: 'AR',
					}
				],
				left:0,
				left2:0,
				top:0,
				top2:0,
				isScroll:0,
				moveJl:0,
			}
		},
		watch:{
			moveJl(newValue,oldValue){
				this.top2 = this.top + ((newValue - oldValue) * 4)
			}
		},
		methods: {
			changeTab() {
				
			},
			moveTo(e){
				if(this.isScroll == 1)return
				// console.log(1);
				// this.isScroll = 2
				this.left = e.detail.scrollLeft * -1
				this.top = e.detail.scrollTop * -1
			},
			mousedown(){
				// console.log('dds');
				this.isScroll = 2
			},
			moveTo2(e){
				if(this.isScroll == 2)return
				// console.log(2);
				this.left2 = e.detail.scrollLeft * -1
			},
			mousedown2(){
				// console.log('dds2');
				this.isScroll = 1
			},
			moveDan(e){
				// console.log("e: ",e);
				this.moveJl = e.touches[0].clientY
			},
			endMove(){
				this.isScroll = 0
			}
		},
	}
</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{
		.fixedLeft{
			position: fixed !important;
			box-shadow: 10rpx 0 10rpx #ccc;
			width: 332rpx;
			border-bottom: 1rpx solid #CCC;
			left: 0;
		}
		.twoSelft2{
			height: 82rpx;
		}
		.twoSelft3{
			height: 106rpx;
			background-color: #E5E5E5 !important;
		}
		.twoSelft{
			height: 178rpx;
		}
		.dot-slot{
			position: relative;
			&:before{
				content: "";
				position: absolute;
				bottom: -6rpx;
				left: calc(50% - 4rpx);
				width: 8rpx;
				height: 8rpx;
				border-radius: 100rpx;
				background: linear-gradient(180deg, #EEA831 0%, #DC3C23 100%);
			}
		}
		.header{
			display: grid;
			background-color: #E5E5E5;
			grid-template-columns: 388rpx 290rpx 404rpx 445rpx 454rpx 369rpx 467rpx;
			width: max-content;
			padding-left: 388rpx;
			position: relative;
			z-index: 26;
			.header-item{
				padding: 24rpx 28rpx;
				position: relative;
				border-bottom: 1rpx solid #CCC;
				
				.hover-show{
					position: relative;
					.hover-show-main{
						position: absolute;
						top: 48rpx;
						right: -45rpx;
						padding: 24rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 8rpx 1rpx rgba(0,0,0,0.6);
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						z-index: 99;
						.arrow-icon{
							position: absolute;
							right: 52rpx;
							top: -5rpx;
							width: 15rpx;
							height: 15rpx;
							transform: rotateZ(45deg) skew(18deg,18deg);
							background-color: #FFF;
						}
						.dot{
							width: 14rpx;
							height: 14rpx;
							background: linear-gradient(180deg, #EEA831 0%, #DC3C23 100%);
							border-radius: 50rpx;
							margin-right: 12rpx;
						}
						.dt-icon{
							margin-left: 12rpx;
							width: 17.85rpx;
							height: 21.01rpx;
						}
						.vc-icon{
							width: 24rpx;
							height: 24rpx;
						}
					}
					.width468{
						width: 468rpx;
					}
				}
				
				&:nth-child(n + 3){
					&:before{
						content: "";
						position: absolute;
						width: 1rpx;
						height: 77rpx;
						left: 0;
						background: #CCCCCC;
					}
				}
				.lineups{
					width: 183rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					color: #fff;
					background: #959DEE;
				}
				.header-icon{
					width: 28rpx;
					height: 28rpx;
				}
				.icongreen{
					background: #219430;
				}
				.iconyellow{
					background: #E2B15D;
				}
				.iconred{
					background: #DC3C23;
				}
				.icongreen,
				.iconyellow,
				.iconred{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 36rpx;
					height: 36rpx;
					margin-left: 6rpx;
					border-radius: 100rpx;
					color: #fff;
				}
			}
		}
		.gridrow83{
			grid-template-rows: 83rpx;
			position: relative;
			z-index: 25;
		}
		.gridrow180{
			grid-template-rows: 180rpx;
			z-index: 1;
		}
		.header-two{
			display: grid;
			grid-template-columns: 388rpx 290rpx 404rpx 445rpx 454rpx 369rpx 467rpx;
			padding-left: 388rpx;
			&:nth-child(2n){
				.header-two-item{
					background-color: #E5E5E5;
				}
			}
			&:nth-child(2n+1){
				.header-two-item{
					background-color: #FFF;
				}
			}
			.header-two-item{
				padding: 0 28rpx;
				z-index: -1;
				border-bottom: 1rpx solid #CCC;
				.dt{
					width: 17.85rpx;
					height: 21rpx;
				}
				.c-icon{
					width: 24px;
					height: 24rpx;
				}
				.icongreen{
					background: #219430;
				}
				.iconyellow{
					background: #E2B15D;
				}
				.iconred{
					background: #DC3C23;
				}
				.icongreen,
				.iconyellow,
				.iconred{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 36rpx;
					height: 36rpx;
					border-radius: 100rpx;
					color: #fff;
				}
				.avatar-lns{
					width: 108rpx;
					height: 108rpx;
					position: relative;
					margin-right: 16rpx;
					&:before{
						content: attr(lnsmnr) ;
						text-align: center;
						position: absolute;
						left: 0;
						bottom: 0;
						width: 66rpx;
						height: 30rpx;
						font-size: 28rpx;
						color: #fff;
						line-height: 30rpx;
						background: #219430;
					}
				}
			}
		}
		.btline{
			border-bottom: 1rpx solid #CCC;
		}
	}
	.list {
		
	}
</style>