onecric_h5/pages/Match/venue.vue

<template>
	<view class="detail">
		<view class="detail-head flex-col-between">
				<u-navbar bgColor="transparent" leftIconColor="#fff" :fixed="false" leftIconSize="48" :autoBack="true"></u-navbar>
				<view class="mg-bt24 pd-lt24">
					<view class="size40 cfff Bold">
						<!-- THhe Rose Bowl -->
					{{ $t('match.la8') }}
					</view>
					<view class="size28 cC flex-start">
						<text class="mg-rt80">
							<!-- Southampton,England -->
					{{ $t('match.la9') }}
						</text>
						<text>6500</text>
					</view>
				</view>
		</view>
		<view class="main size28 c3">
			<text class="size32 Bold">
				<!-- Pitch Report -->
				{{ $t('match.la10') }}
			</text>
			<view class="mg-tp24">
				<text class="Bold">
					<!-- Pitch Behaviour -->
				{{ $t('match.la11') }}
				</text>
				<view class="size24 c6">
					<!-- Based on last 2 Years data -->
				{{ $t('match.la12') }}
				</view>
			</view>
			<view class="ball-info flex-start align-end">
				<u-line color="#EEA831" direction="col" dashed length="209rpx" class="mg-rt11"></u-line>
				<view class="size24 mg-bt151 mg-rt74">
					<text class="c6">
						<!-- OVERALL -->
				{{ $t('match.la13') }}
					</text>
					<view class="Bold">
						<!-- Bowling	 -->
				{{ $t('match.la14') }}
					</view>
				</view>
				<u-line color="#EEA831" direction="col" dashed length="104rpx" class="mg-bt46 mg-rt11"></u-line>
				<view class="size24 mg-bt85 mg-rt74">
					<text class="c6">
						<!-- BEST SUITED FOR -->
				{{ $t('match.la15') }}
					</text>
					<view class="Bold">
						<!-- Pacers	 -->
				{{ $t('match.la16') }}
					</view>
				</view>
			</view>
		</view>
		
		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
		
		<view class="main size28 c3 mg-tp12">
			<text class="size32 Bold">
				<!-- Statistics -->
				{{ $t('match.la17') }}
			</text>
			<view class="mg-tp24">
				<text class="Bold">
					<!-- Top players at this venue -->
				{{ $t('match.la18') }}
				</text>
				<view class="size24 c6">
					<!-- Based on last 2 Years The Hunderd matches -->
				{{ $t('match.la19') }}
				</view>
			</view>
			<view class="table-list">
				<view class="table-list-header bgE5 size24 c6">
					<view>
						<!-- BATSMEN -->
				{{ $t('match.la20') }}
					</view>
					<view class="flexcenter">
						<!-- Matches -->
						{{ $t('match.lab83') }}
					</view>
					<view class="flexcenter">{{ $t('match.lab83') }}</view>
					<view>SR</view>
				</view>
				<view class="table-list-item flex-start" v-for="item in 5" :key="item">
					<view class="">
						<text>{{ $t('match.la30') }}</text>
						<view class="sob">
							SOB
						</view>
					</view>
					<view class="flexcenter">6</view>
					<view class="flexcenter">34.2</view>
					<view>141.37</view>
				</view>
			</view>
			
			<view class="infomation flex-start">
				<image src="../../static/image/match/venue_prompt_ico.png" mode="aspectFit" class="prompt-pic"></image>
				<text class="size24 c9">
					<!-- No information found on past performances of the
					other team's batsmen at this venue. -->
				{{ $t('match.la21') }}
				</text>
			</view>
			<view class="mg-tp36 Bold">
				<!-- The Hundred Stats -->
				{{ $t('match.la22') }}
			</view>
			<u-row justify="space-between">
				<view class="size24">
					<text class="c6">
						<!-- AVG.TOTAL SCORE -->
				{{ $t('match.la23') }}
					</text>
					<view class="size40 mg-bt16">
						132
					</view>
				</view>
				<view class="size24">
					<text class="c6">
						<!-- AVG.1ST INNINGS SCORE -->
				{{ $t('match.la24') }}
					</text>
					<view class="size40 mg-bt16">
						132
					</view>
				</view>
			</u-row>
			<view class="size24 mg-tp44">
				<text class="c6">
					<!-- TOSS WINERS OPT TO -->
				{{ $t('match.la25') }}
				</text>
				<u-line-progress class="mg-tp24" activeColor="#DC3C23" inactiveColor="#CCCCCC"	 :percentage="60" :showText="false"></u-line-progress>
				<view class="flex Bold" :style="{width:'60%'}">
					<text>
						<!-- Bowl First -->
				{{ $t('match.la26') }}
					</text>
					<text>60%</text>
				</view>
			</view>
			<view class="size24 mg-tp44">
				<text class="c6">
					<!-- TOSS WINERS OPT TO -->
				{{ $t('match.la25') }}
				</text>
				<u-line-progress class="mg-tp24" activeColor="#DC3C23" inactiveColor="#CCCCCC"	 :percentage="80" :showText="false"></u-line-progress>
				<view class="flex Bold" :style="{width:'80%'}">
					<text>
						<!-- Wins -->
				{{ $t('match.la27') }}
					</text>
					<text>80%</text>
				</view>
			</view>
		</view>
		
		<u-gap height="24" bgColor="#E5E5E5"></u-gap>
		
		<view class="main mg-tp12">
			<text class="size32 c3 Bold">
				<!-- Venue Info -->
				{{ $t('match.la28') }}
			</text>
			<view class="mg-tp24 avg">
				{{ $t('match.la29') }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.detail-head {
		background: url(@/static/image/match/venue_context.png) center top / 100% 100% no-repeat;
		height: 406rpx;
	}
	.main{
		padding: 24rpx 28rpx;
		.ball-info{
			margin: 24rpx 114rpx 0;
			background: url('@/static/image/match/expert_pitch.png') center bottom/100% auto no-repeat;
		}
		
		.table-list{
			margin-top: 24rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 1rpx $color7;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			overflow: hidden;
			.table-list-header{
				display: grid;
				grid-template-rows: 80rpx;
				padding: 0 24rpx;
				grid-template-columns: 158rpx  160rpx 200rpx 151rpx;
				line-height: 80rpx;
			}
			.table-list-item{
				display: grid;
				border-bottom: 1rpx solid #E5E5E5;
				grid-template-rows: 120rpx;
				grid-template-columns: 158rpx  160rpx 200rpx 151rpx;
				padding: 0 24rpx;
				.sob{
					background-color: #219430;
					padding: 1rpx 16rpx;
					color: #FFFFFF;
					width: max-content;
				}
			}
		}
		
		.infomation{
			border-radius: 10rpx;
			padding: 8rpx 27rpx;
			margin-top: 24rpx;
			background-color: #E5E5E5;
			.prompt-pic{
				width: 42rpx;
				height: 42rpx;
				margin-right: 24rpx;
			}
		}
		.avg{
			font-size: 24rpx;
		}
	}
</style>