<template>
	<view class="center">
		<view class="game-box" @click="goGame(0)">
			<image src="../../static/img/game01.png" mode=""></image>
			<view class="game-box-content">开打时间
				<view class="game-box-content1">
					每天10:00
				</view>
			</view>
		</view>
		<view class="game-box" @click="goGame(1)">
			<image src="../../static/img/game02.png" mode=""></image>
			<view class="game-box-content" style="color: #BA4FBC;">开打时间
				<view class="game-box-content1" style="background-color: #BA4FBC;">
					每天10:00
				</view>
			</view>
		</view>
		<view class="game-box" @click="goGame(2)">
			<image src="../../static/img/game03.png" mode=""></image>
			<view class="game-box-content" style="color: #E88B2D;">开打时间
				<view class="game-box-content1" style="background-color: #E88B2D;">
					每天10:00
				</view>
			</view>
		</view>
		<view class="game-box" @click="goGame(3)">
			<image src="../../static/img/game04.png" mode=""></image>
			<view class="game-box-content" style="color: #FF6E3E;">开打时间
				<view class="game-box-content1" style="background-color: #FF6E3E;">
					每天10:00
				</view>
			</view>
		</view>
		<view class="game-box"@click="goGame(4)">
			<image src="../../static/img/game05.png" mode=""></image>
			<view class="game-box-content" style="color:#21BB9F;">开打时间
				<view class="game-box-content1" style="background-color: #21BB9F;">
					每天10:00
				</view>
			</view>
		</view>
		<!-- <view class="kong">
			<u-empty mode="data" text="敬请期待"></u-empty>
		</view> -->
		<!-- <u-tabbar activeColor="#EE0979" v-model="current" :list="tabbar" :mid-button="true"></u-tabbar> -->
	</view>
</template>

<script>
import { tabbar } from '@/utils/tabbar.js';
export default {
	data() {
		return {
			tabbar: tabbar,
			current: 2,
		};
	},
	methods: {
		goGame(e) {
			console.log(e,'点击跳转');
			uni.navigateTo({
				url:'./gameDetail?id='+e
			})
		}
	},
};
</script>

<style lang="scss">
	.center{
		width: 750rpx;
		padding: 0;
		margin: 20rpx;
	}
	.game-box{
		position: relative;
		
		// margin: 10rpx;
		width: 690rpx;
		height: 280rpx;
		image{
			width: 100%;
			height: 100%;
			
		}
	}
	.game-box-content{
		top: 180rpx;
		left: 60rpx;
		line-height: 52rpx;
		position: absolute;
		font-size: 26rpx;
		font-weight: 500;
		color: #8F6AFD;
		padding-left: 30rpx;
		width: 320rpx;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 27rpx;
		.game-box-content1{
			position: absolute;
			right: 0;
			top: 0;
			line-height: 53rpx;
			text-align: center;
			width: 170rpx;
			height: 53rpx;
			background: #754AF0;
			border-radius: 27rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	// .kong {
	// 	height: 100vh;
	// 	width: 750rpx;
	// }
</style>
