shuzi/pages/game/gl.vue

<template>
	<view class="center">
		<view class="bg"><image src="../../static/img/game-bg.png" mode=""></image></view>
		<view class="main-box">
			<view class="title">玩法说明</view>
			<view class="main-item">
				<view class="main-title">种植技巧</view>
				<view class="main-info">1、种植需要消耗肥料，肥料通过购买商品获得。</view>
				<view class="main-info">2、参与种植成功后，三期后可以拿到107%种植肥料的阳光和30%种植肥料的商城积分。</view>
				<view class="main-info">
					3、参与种植如果失败，例如第四期失败将返还第一期和第四期种植肥料总和的101%的阳光，第二期和第三期种植肥料总和的70%的阳光和总和的30%的水滴和总和的30%的商城积分
				</view>
			</view>
		</view>
	</view>
</template>

<script></script>

<style lang="less">
.center,
page {
	padding-top: 268rpx;
	height: auto;
	min-height: 100%;
	background: #a4e5d3;
}
.bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 750rpx;
	height: 1500rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.main-box {
	margin: 0 auto;
	width: 626rpx;
	padding: 114rpx 64rpx 98rpx 50rpx;
	background: #ffffff;
	border-radius: 34rpx;
	position: relative;
	border: #369275 2px solid;
	.title {
		position: absolute;
		left: 50%;
		top: -35rpx;
		width: 324rpx;
		height: 70rpx;
		margin-left: -162rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #369275;
		border-radius: 50rpx;
		color: #ffffff;
		border-radius: 2px #fff solid;
		font-size: 42rpx;
	}
	.main-item {
		.main-title {
			font-size: 32rpx;
			font-family: SourceHanSansCN;
			font-weight: bold;
			color: #324658;
		}
		.main-info {
			margin-top: 10rpx;
		}
	}
}
</style>