shuzi/pages/game/game.vue

<template>
	<view class="center">
		<view class="box" v-for="(item, index) in gameList">
			<view class="game-box" @click="goGame(item.id, index)">
				<view class="title">超有趣的种茶游戏</view>
				<view class="box-title">{{ item.name }}</view>
				<image :src="'../../static/img/game0' + ((index % 7) + 1) + '.png'" mode=""></image>
				<view class="game-box-content">
					施肥时间
					<view class="game-box-content1">每天{{ item.add_time }}</view>
				</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 { getGame } from '@/api/game.js';
export default {
	data() {
		return {
			add_time: '', //开始事件
			end_time: '', //结束时间
			gameList: '' //游戏列表
		};
	},
	onShow() {
		getGame().then(res => {
			// console.log(res, 'res');
			this.gameList = res.data.data;
			res.data.data.forEach(e => {
				// this.end_time =
				var end = e.add_time.split(' ');
				e.add_time = end[1];
			});
		});
	},
	methods: {
		goGame(e, index) {
			console.log(e, '点击跳转');
			uni.navigateTo({
				url: './gameDetail?id=' + e + '&index=' + index
			});
		}
	}
};
</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%;
	}
	.title {
		font-size: 42rpx;
		font-family: zihun100hao;
		font-weight: normal;
		color: #29554e;
		position: absolute;
		z-index: 99;
		top: 40rpx;
		left: 60rpx;
		display: flex;
	}
	.box-title {
		font-family: Cursive;
		font-weight: 500;
		position: absolute;
		z-index: 99;
		top: 120rpx;
		left: 60rpx;
		display: flex;
		color: #29554e;
		font-size: 40rpx;
		font-weight: 500;
	}
}

.game-box-content {
	top: 180rpx;
	left: 60rpx;
	line-height: 60rpx;
	position: absolute;
	font-size: 30rpx;
	font-weight: 500;
	color: #8f6afd;
	padding-left: 20rpx;
	width: 360rpx;
	height: 60rpx;
	background: #ffffff;
	border-radius: 30rpx;
	align-items: center;

	.game-box-content1 {
		align-items: center;
		position: absolute;
		right: 0;
		top: 0;
		line-height: 60rpx;
		text-align: center;
		width: 220rpx;
		height: 60rpx;
		background: #754af0;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
	}
}

// .kong {
// 	height: 100vh;
// 	width: 750rpx;
// }
</style>