baiyuApp/pages_enter/games.vue

<template>
	<view class="games-page">
		<!-- 页面内容 -->
		<scroll-view class="page-content" scroll-y>
			<!-- 游戏列表 -->
			<view class="games-list">
				<view class="game-item" v-for="(item, index) in gameList" :key="index" @tap="detail(item)">
					<image class="image" :src="item.image" mode=""></image>
				</view>
				<view class="game-item" v-for="(game, index) in gamesList" :key="index" v-if="false">
					<!-- 大横幅卡片 -->
					<view class="game-banner" :class="'banner-' + game.id">
						<view class="banner-content">
							<view class="banner-title" :style="{ color: game.titleColor }">
								{{ game.title }}
							</view>
							<view class="banner-buttons" v-if="game.bannerButtons">
								<view class="banner-btn" v-for="(btn, btnIndex) in game.bannerButtons" :key="btnIndex"
									@click.stop="handleBannerBtnClick(game, btn)">
									{{ btn.text }}
								</view>
							</view>
						</view>
					</view>

					<!-- 信息卡片 -->
					<view class="game-info-card"
						:style="{ borderColor: game.themeColor + '40',background: game.themeColor }">
						<view class="card-icon">
							<view class="icon-placeholder">
								<text class="icon-emoji">{{ game.icon }}</text>
							</view>
						</view>
						<view class="card-content">
							<view class="card-title">{{ game.title }}</view>
							<view class="card-desc">{{ game.desc }}</view>
						</view>
						<view class="card-action">
							<view class="play-btn" :style="{ color: game.themeColor }" @click="handlePlay(game)">
								玩一玩
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部安全区域 -->
			<view class="safe-area-bottom" :style="{ height: safeAreaBottom + 'px' }"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getConfigByKey
	} from '@/api/common.js'
	export default {
		data() {
			return {
				statusBarHeight: 0,
				safeAreaBottom: 0,
				gameList:[],
				gamesList: [{
						id: 1,
						title: '果蔬连连看',
						desc: '休闲放松类游戏',
						icon: '🍉',
						themeColor: '#1B88EF',
						titleColor: '#FF6B35',
						bannerButtons: [{
								text: '果蔬连连看游戏',
								action: 'play'
							},
							{
								text: '游戏说明',
								action: 'help'
							}
						]
					},
					{
						id: 2,
						title: '开心消消乐',
						desc: '益智类休闲游戏',
						icon: '🎵',
						themeColor: '#7A48FF',
						titleColor: '#FFD700',
						bannerButtons: null
					},
					{
						id: 3,
						title: '保卫萝卜2',
						desc: '益智类休闲游戏',
						icon: '🥕',
						themeColor: '#3DA270',
						titleColor: '#FF6B35',
						bannerButtons: [{
								text: '开始冒险',
								action: 'start'
							},
							{
								text: '天天向上',
								action: 'daily'
							}
						]
					}
				]
			}
		},
		onLoad() {
			this.getSystemInfo();
		},
		methods: {
			detail(e){
				let user = JSON.parse(uni.getStorageSync('userInfo'));
				let userId = user.userId
				uni.redirectTo({
					url:`/pages_im/pages/common/webviewWrapper/index?url=${encodeURIComponent(e.url)}?userId=${userId}`
				})
			},
			async getSystemInfo() {
				const systemInfo = uni.getSystemInfoSync();
				this.statusBarHeight = systemInfo.statusBarHeight || 0;
				if (systemInfo.safeArea) {
					this.safeAreaBottom = systemInfo.screenHeight - systemInfo.safeArea.bottom;
				}
				const result = await getConfigByKey({
					key: 'app.config'
				})
				if (result.code == 200 && result.data) {
					const resData = JSON.parse(result.data)
					this.gameList = resData.gameList
				}
			},
			handleBack() {
				uni.navigateBack();
			},
			handlePlay(game) {
				uni.showToast({
					title: `开始玩${game.title}`,
					icon: 'none'
				});
				// 这里可以跳转到具体的游戏页面
			},
			handleBannerBtnClick(game, btn) {
				uni.showToast({
					title: btn.text,
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.games-page {
		width: 100%;
		min-height: 100vh;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.status-bar {
		width: 100%;
		background-color: #ffffff;
	}

	.nav-bar {
		width: 100%;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		border-bottom: 1rpx solid #f0f0f0;

		.nav-back {
			position: absolute;
			left: 30rpx;
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.nav-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.page-content {
		flex: 1;
		width: 100%;
	}

	.games-list {
		width: 100%;
		padding: 30rpx;
	}

	.game-item {
		width: 100%;
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	// 游戏横幅
	.game-banner {
		width: 100%;
		height: 400rpx;
		border-radius: 24rpx 24rpx 0 0;
		overflow: hidden;
		position: relative;

		.banner-content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 2;
		}

		.banner-title {
			font-size: 64rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 30rpx;
			text-shadow:
				2rpx 2rpx 0rpx #ffffff,
				4rpx 4rpx 8rpx rgba(0, 0, 0, 0.3);
			position: relative;
			z-index: 3;
		}

		.banner-buttons {
			display: flex;
			gap: 20rpx;
			margin-top: 20rpx;
		}

		.banner-btn {
			background-color: rgba(173, 216, 230, 0.95);
			color: #4A90E2;
			padding: 12rpx 24rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			font-weight: 500;
			white-space: nowrap;
		}
	}

	// 游戏1：果蔬连连看
	.banner-1 {
		background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 50%, #98D8C8 100%);
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image:
				radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 3rpx, transparent 3rpx),
				radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.3) 2rpx, transparent 2rpx);
			background-size: 120rpx 120rpx, 100rpx 100rpx;
			background-position: 0 0, 60rpx 60rpx;
		}

		.banner-title {
			color: #FF6B35;
			text-shadow:
				2rpx 2rpx 0rpx #ffffff,
				4rpx 4rpx 8rpx rgba(0, 0, 0, 0.2);
		}
	}

	// 游戏2：开心消消乐
	.banner-2 {
		background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 50%, #7D3C98 100%);
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image:
				radial-gradient(circle at 30% 40%, rgba(255, 192, 203, 0.5) 4rpx, transparent 4rpx),
				radial-gradient(circle at 70% 60%, rgba(173, 216, 230, 0.5) 4rpx, transparent 4rpx);
			background-size: 120rpx 120rpx, 100rpx 100rpx;
			background-position: 0 0, 60rpx 60rpx;
			animation: sparkle 3s ease-in-out infinite;
		}

		.banner-title {
			color: #FFD700;
			text-shadow:
				2rpx 2rpx 0rpx #ffffff,
				4rpx 4rpx 8rpx rgba(0, 0, 0, 0.3);
		}
	}

	// 游戏3：保卫萝卜2
	.banner-3 {
		background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 50%, #98D8C8 100%);
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image:
				radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.4) 3rpx, transparent 3rpx),
				radial-gradient(circle at 75% 65%, rgba(255, 255, 255, 0.3) 2rpx, transparent 2rpx);
			background-size: 120rpx 120rpx, 100rpx 100rpx;
			background-position: 0 0, 60rpx 60rpx;
		}

		.banner-title {
			color: #FF6B35;
			text-shadow:
				2rpx 2rpx 0rpx #ffffff,
				4rpx 4rpx 8rpx rgba(0, 0, 0, 0.2);
		}

		.banner-buttons {
			flex-direction: column;
			gap: 16rpx;
			align-items: center;
		}

		.banner-btn {
			background-color: rgba(255, 218, 185, 0.95);
			color: #FF6B35;
			padding: 16rpx 40rpx;
			width: 240rpx;
			text-align: center;
		}
	}

	@keyframes sparkle {

		0%,
		100% {
			opacity: 0.6;
		}

		50% {
			opacity: 1;
		}
	}

	// 信息卡片
	.game-info-card {
		width: 100%;
		background-color: #ffffff;
		border-radius: 0 0 24rpx 24rpx;
		padding: 28rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		border: 2rpx solid;
		transition: all 0.3s ease;

		.card-icon {
			width: 100rpx;
			height: 100rpx;
			margin-right: 24rpx;
			flex-shrink: 0;

			.icon-placeholder {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon-emoji {
					font-size: 60rpx;
				}
			}
		}

		.card-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.card-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-bottom: 8rpx;
		}

		.card-desc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
		}

		.card-action {
			margin-left: 20rpx;
			flex-shrink: 0;

			.play-btn {
				background-color: #fff;
				padding: 20rpx 50rpx;
				border-radius: 50rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
			}
		}
	}

	.safe-area-bottom {
		width: 100%;
		height: 40rpx;
	}
	
	.image {
		width: calc(100vw - 48rpx);
		height: 544rpx;
	}
	
</style>